溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Html5，Css初學總結(jié)

發(fā)布時間：2020-07-20 05:46:55 來源：網(wǎng)絡(luò) 閱讀：372 作者：時光x86_002 欄目：移動開發(fā)

網(wǎng)頁制作

HTML

一、通用模板：

<!DOCTYPE html>

<html lang=”en”>

   <head>

       <meta  charset=”UTF-8”/>

       <title>文檔標題</title>

       <link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>        <!- -設(shè)置標簽頁圖標- ->

       <link  rel=”stylesheet”   href=”url”/>        <!--外接樣式表-->

   </head>

    <body>

                  <header  role=”banner”>

    <nav  role=”navigation”> 頁眉  </nav>

</header>

                  <main  role=”main”> 

<article>

       <section>

<p>主要內(nèi)容</p>

                             </section>

</article>

    </main>      

    <aside  role=”complementary” >附注欄的其他內(nèi)容</aside>

                  <footer  role=”contentinfo”>頁腳（如：版權(quán)）</footer> 

   </body>

</html>


二、網(wǎng)頁三要素：

            1. 元素標簽：

（1） 同行顯示：

        <a> (鏈接標簽) </a>

        <em>（斜體標簽）</em>

        <strong>(粗體標簽)</strong>

        <code> 標記代碼</code>

（2） 換行顯示：

        1. <h2> (標題1標簽) </h2>

        2. <h3> (標題2標簽) </h3>

        3. <article> (文章標簽)</article>

        4. <p> (段落標簽) </p>

                     5.<main></main>注:一個頁面最多使用一次！不能放置header; footer ; aside; article中

        6. <header> </header>

        7. <footer> </footer>

        8. <hr> (分隔線標簽) </hr>

        9. <div>容器標簽換行是 <div> 固有的唯一格式表現(xiàn)</div>

        10. <section> 區(qū)塊 </section>

（3） 未知：

        1.<img> (圖像標簽) </img>

        2.<font> (字體標簽) </font>

        3.<b> (粗體標簽) </b>

        4.<i> (斜體標簽) </i>

        5.<u> (下劃線標簽) </u>

        6.<sup>(上標標簽) </sup>

        7.<sub>(下標標簽) </sub>

        8．<audio>   </audio>

        9.<video>    </video>

        10.<li> 列表</li>

        11.<ol type=”a ” start=” 3”>

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

        </ol>

        12.<ul type=”disc/circle/square”>

<li>無序列表</li>

<li>無序列表</li>

<li>無序列表</li>

 

</ul>

13．<ins>添加內(nèi)容(表現(xiàn)為加下劃線)</ins>

14.<del>刪除內(nèi)容（表現(xiàn)為加刪除線）</del>

15.<cite>標簽通常表示它所包含的文本對某個參考文獻的引用，比如書籍或者雜志的標題。按照慣例，引用的文本將以斜體顯示。

</cite>

16. <figure>標簽規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。</figure>

2. 屬性:

                    <a>: href; title;

                    <img>: src; width; height; alt

        3. 值：

 

三、其他：

        4. 注釋：

   如：<!-- 我是被注釋內(nèi)容，并且在瀏覽器中不會顯示 --> 

        5.學習相關(guān)鏈接：

    網(wǎng)頁轉(zhuǎn)義符號HTML代碼大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

         HTML 系列教程：http://www.w3school.com.cn/h.asp

  各類標簽及其用法：http://www.w3school.com.cn/tags/tag_doctype.asp

        6．鏈接錨鏈接：鏈接到某一頁面的特定區(qū)域。

 

 

CSS

   模板：Selector(選擇器){

                           Attribute(屬性): value(值) ;

              }     //  各種元素。

              Color：#000000(黑色)/#ffffff(白色)

   注：單斜桿表示或者！

1.鏈接樣式：

      a:link{

          color: blue;

      }       /*鏈接激活前的外觀*/

      a:hover{

          color: orange;

}      /*鼠標指向鏈接時的外觀*/

      a:hover{

          color: red;

}      /*激活鏈接后的外觀*/

 

2.文本樣式：

    字體：

        font-family: Geneva,Tahoma,sans-serif;        /*字體類型,三選一*/

        font-style: italic/normal;              /*斜體和正體二選一*/

        font-weight: bolder/bold/normal/lighter;        *更粗/正常/更細/三選一*/

        font-size: 16px/1em;        /*字體大小，默認1em=16px*/

        line-height:16px        /*行高*/

    字間距：word-space:length(4px或其他);

 字偶距:  letter-space:length(4px或其他);

 添加縮進：text-indent: length(2em或其他);

 對齊文本：text-align: left/right/center/justify（兩端對齊）;

 修改文本大小寫:text-transform: uppercase(大)/lowercase(小)/none;  

 裝飾文本：：text-decoration: underline/overline/through/none;

            (下劃線/上劃線/刪除線/無)

        3.元素顯示方式：display: block/inline/;    (換行/行內(nèi)顯示)

        4.元素可見性：visibility: visible/hidden;

        5.邊框：border-style :dashed/solid/dotted ;   (虛線/實線/點劃線)

border -width:

border -color:

border:2px solid red;

border-radius:length;  //邊框圓角半徑

  6.外/內(nèi)邊距：margin-top/-bottom:length;

                    Padding：length;

                    Padding-top/bottom/left/right:length;

       7.元素浮動：float:left/right/none;

       8.清除浮動：clear:left/right;

       9.處理溢出：overflow: visible/hidden/scroll/auto;

  10.修改指針形狀：cursor: pointer/default/crosshair/move/wait/help;

       11.列表標記：

                        list-style-type:disc/circle/square….;

                        /*  

                            disc:圓點；circle：圓圈；square：方塊；decimal：數(shù)字；

                        upper-alpha：大寫字母。

    */

   12.有序列表：

                    <ol start=”2”>從2開始編號</ol>

                     List-style-position: inside/outside;


  13.fieldset(表單):

                    表單字段(type屬性值)：text/email/password/url/submit/radio(單)/checkbook（復選）

                <input type=”text” placeholder=”提示信息”>

     單選框：

                            <p>

                        <input type="radio" id="tankzx" name="school" value="T"/>

                                 <label for="tankzx" >tk</label>

                             </p>

     復選框: 

                            <p>

    <input type="checkbox" id="tank" name="學校" value="TZ"/>

                                  <label for="tank" >tk</label>

                             </p>

     列表框：

                            <p>

                <label for="state">State（國家）：</label>

                                 <select id="state" name="state" size=” ”>

                                      <optgroup label=”xx”>      /*分組列表*/

                                           <option value="ch">China</option>

                                           <option value="usa">American</option>

                                      </optgroup>

                                      <option value="en">England<option>

                                  </select>

                            </p>

        14.表格:

                  <table>

                     <tr>                      //行標記

                          <th></th>      //表頭標記

                          <td></td>       //單元格標記

                     </tr>    

                    <tr>                      

                          <td></td>     //單元格標記 

                          <td></td>       //單元格標記

                     </tr>    

              </table>

Javascript

1. 函數(shù)調(diào)用：

    直接調(diào)用  (functionname(形參))

    事件響應調(diào)用（onclick=”check()”）

      超鏈接調(diào)用 (<a href=”javascript:check()”)


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手