1.3.2.1語法

<!--登陸窗口-->
<div class="m-win" >
    <form class="m-login" action="#">
        <fieldset>
            <legend>網易通行證登陸</legend>
            <input type="text" value="帳號">
            <button type="submit" class="u-btn">登陸</button>
        </fieldset>
    </form>
</div>

1 <>閉合： <form>有</form>與之對應，自閉合的，如<input>
2 標簽可以帶一個或多個屬性
3 嵌套，閉合時應注意嵌套順序，先閉合后閉合
4 注釋注釋內容用戶不可見

書寫規范

1 書寫用小寫
2 屬性值用雙引號
3 標簽有嵌套應進行統一的縮進，代碼清晰維護方便

常用屬性

id只能出現一個
<div id="nav"></div>
class可以多個出現
<span class="time"></span>
style
title額外信息<a title="收藏"></a>

1.3.2.2章節標簽

文檔章節

• body
• header 章節或頁面的頭部
• nav 導航性質
• aside 和主要內容不相關的內容
• article 可嵌套，主要內容
• section 文檔中的區域或一節，相鄰相關
• footer 章節或頁面的尾部
• hx

標題(h1-h6)

重要性的差別，重要性遞減

1.3.2.3文本標簽

文本

超鏈接

-a
<a></a>

• 創建指向另一個文檔的連接

<a > 科技<a/>
<a  target="_self">電影 </a>
<a  target="_blank">財經</a>

還有一種情況：target="inner"
默認情況下，在當前窗口打開

• 創建一個文檔內部的錨點

<a href="#pay">下單支付</a>
<div id="pay">下單支付…</div>

• 連接到email地址

<a href="mailto:yixinplus@188.com">聯系我們</a>
<a href="tel:13612345678">13612345678</a>
<a href="mailto:yixinplus@188.com?cc=admina@188.com&subject=建議 &body=body">聯系我們（抄送)</a>

郵箱地址可為多個

強調

-em,strong
strong是比em更強的強調，em是斜體，strong是粗體。

<p class="w-price">
    <strong>39元</strong>
    <span>市場價45元</span>
</p>

行內容器

-span
不一樣的樣式，給標簽一特定的樣式

換行

-br

<div>
     一行文字 <br>我想另起一行
 </div>

引用

-cite
-q

<div>
   魯迅在<cite>故鄉</cite>中寫道<q>地上本沒有路，走的人多了，便有了路</q>
</div>

代碼

-code

<div>
<code>
   function say(){alert("hello world");}
</code>
</div>

格式化

-b 粗體
-i 斜體

<div>
HTML是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種<b>標記</b>語言。
</div>

其中標記為關鍵字加粗

<div>
該項目采用<i>html</i>,<i>css</i>等實現。
</div>

html css 標記為斜體

1.3.2.4組標簽

分區

div
div本身無語意，用來分區。div為其他標簽的容器

段落

p
p標簽表段落

列表

ul ,ol,dl
分為三種，無序列表，有序列表，自定義列表。

• 無序列表

<ul>
      <li>列表一</li>
      <li>列表二</li>
      <li>列表三</li>
</ul>

• 有序列表

<ol>
    <li>排行一</li>
    <li>排行二</li>
    <li>排行三</li>
</ol>

有序列表可以實現a,b,c, 排序

<ol type="a" start="2">

表示從b開始。

• 自定義列表

<dl>
    <dt>作者</dt>
    <dd>Cbuck Musiano</dd>
    <dd>Bll Kennedy</dd>
    <dt>出版年</dt>
    <dd>2007-4</dd>
</dl>

如問題回答列表，元素，書的信息。dt只能有一個，dd可以有多個。呈現如下：
作者
Cbuck Musiano
Bll Kennedy
出版年
2007-4
列表可以嵌套

其它標簽

• pre
  經過格式化的內容保存在pre標簽下，可保存換行符和空格
• blockquote
  表示大段的引用

1.3.2.5 資源標簽

• img
• iframe
• object
• embed
• video
• audio

img

如音樂專輯封面

<div>
    <div class="img">
        ![封面](http://p4.music.126.afdf.jpg?parm=200y200)
    </div>

src后為圖片地址，若不能顯示則為alt后的封面圖片

iframe

嵌入頁面，如網站廣告

<iframe src="http://www.163.com></iframe>

在src屬性中嵌入第三方地址，嵌入頁面中的操作并不影響但前頁面操作。

object,embed

嵌入外部資源，插件

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://pdfReader.swf">
    <param name="flashvars" value="http://book.pdf">
</object>

type屬性中寫插件的類型，上例為flash插件
插件的參數放在param參數中,地址可以放在move參數中，也可放在data屬性中但ie8并不兼容data屬性，如下

<object data="http://pdfReader.swf" type="application/x-shockwave-flash">
    <param name="flashvars" value="http://book.pdf">
</object>

用embed嵌入,type屬性寫插件的類型，src屬性寫地址

<embed type="application/x-shockwave-flash" scr="http://pdfReader.swf"  with="640" height="480"

video

視頻

<video controls="controls" poster="/img/poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="move.webm" type="video/webm>
    <source src="move.ogg" type="video/ogg">
    <track kind="subtitles" src="video.srt" label="English">
    您的瀏覽不支持video標簽。
</video>

• 因為不同瀏覽器對視頻的格式支持度不同所以需要準備多個視頻格式
• 在source標簽中在src屬性下寫上視頻的地址，type寫視頻的類型，瀏覽器會選擇他支持的視頻類型進行播放
• 如果視頻文件只有一個，可以把視頻文件放在video標簽的src屬性下，因為video標簽只有高版本的瀏覽器才支持，為了提高用戶體驗，可以在下面寫上提示文字，這樣不支持video標簽的用戶就會顯示這里的文字
• 用controls屬性可以控制播放器控制條的顯示，poster屬性視頻的封面，track屬性是視頻的字幕。
• 如果需要視頻一進來就是播放的需要加autoplay屬性，需要循環播放需要加loop屬性，如下：

<video autoplay loop controls poster="/img/poster.jpg">

audio

audio標簽與video標簽類似，這里不詳細介紹

嵌入資源

圖

-canvas
-svg

• canvas基于像素，他提供了一些繪制函數，通過腳本來繪制圖形圖像，對于性能比較高的場景復雜的，如實時數據的展示，游戲可以使用它
• sag是矢量的他提供了一系列圖形，對于高保真的靜態的圖形圖像可以使用它。

熱點區域

-map
-area

![封面](http://p4.music.126.afdf.jpg?parm=200y200)
<map name="Map2" data-ganame="422預熱主頁－頭牌大咖區" data-gapoint="點擊大咖區－運動style">
    <area shape="rect" coords="669,75,1075,682" href="xiupin.com/…" target="_blank">
    <area shape="rect" coords="26,93,391,337" href="xiupin.com/…" target="_blank">
    …
</Map>

• 可以通過map的name屬性和img的use map屬性使得map和img相關聯
• 里面的熱點通過area這個標簽實現，通過shape屬性定義形狀，通過coords定義關鍵的點位置，如上例為矩形，那么可定義左上角和右下角。

1.3.2.6表格標簽

<table>
    <caption>照片沖印價格詳情</caption>
    <thead>
        <tr><th>照片尺寸</th><th>富士</th><th>柯達</th></tr>
    </thead>
    <tbody>
        <tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
        …
    </tbody>
    <tfoot>
        <tr><td colspan="3">運費8元／單，滿99元免運費</td></tr>
    </tfoot>
</table>

• 表格的標題放在caption標簽下，表格的頭部放在thaead標簽下，表格的尾部放在tfoot標簽下。
• 表格的每一行用tr標簽表示，單元格有兩種表示方式th和td,其中th為表頭或者第一列的表示，td為普通單元格表示方法。
• 表格的列可以跨，用colspan，上例中“colspan=3“表示跨了3列
• 同樣可以跨行，用rowspan表示

大體效果如下，作后一行合并單元格，不知用markdown怎么寫？

1.3.2.7表單標簽

表單

<form action="/login" method="post">
    <fieldset>
        <legend>照片選擇</legend>
        <label for="file">選擇照片</label>
        …
    </fieldset>
    <fieldset>
        <legend>綜合設置</legend>
        <div>選擇尺寸：</div>
        …
    </fieldset>
    …
</form>

• action屬性為表單的后臺地址，需要把表單的數據提交到哪一個后臺的接口就寫道action里
• method屬性為表單提交的方式，常用的為post方式
• 若表單的內容很多要對表單進行分區，常用的為fieldset標簽，分區的標題用legend標簽表示

<form action="/login" method="post">
    …
    <input type="file" name="file">
    …
    <input type="checkbox" name="size" value="5"><label for="cb_0">5寸</label>
    …
    <input type="radio" name="material" value="fushi"><label for="rd_0">富士</label>
    … 
    <input type="text" name="description">
    …
</form>

• input標簽有以下屬性，name名稱，值用value屬性表示
• input標簽有不同的類型，如文件上傳type="file",尺寸選擇多選框type="checkbox", 單選框type="radio",單行文本框type="text"
• 同一類型的多選框name值相同。
• 默認選中需要加checked屬性，若如讓用戶操作需要用disable屬性。如下所示

<div>
    <input type="checkbox" name="size" value="5" checked><label for="cb_0">5寸</label>
</div>

• 按鈕也可用input標簽表示，在type屬性中提交用submit表示，重置用reset表示,如下

<div>
    <input type="submit">
    <input type="reset">
</div>

為了更好的語意化用button標簽表示，如下

<div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</div>

下拉選擇框

<div>
    <label for="delivery">配送方式:</label>
    <select id="delivery">
        <option value="0">快遞</option>
        <option value="1">EMS</option>
        <option value="2" selected>平郵</option>
    </select>
</div>

• 下拉選框用標簽表select標簽表示，里面的每一項用option標簽表示
• label標簽表示了每一個select或input提示的信息，通過for屬性與標簽中的id屬性對應，這兩個值要一致，表示此label的內容表示了如下標簽。
• 默認選擇項為第一項，若要將其它項設為默認項需加selected屬性，如上例中將“平郵”設為默認值。
• 可將下拉選項分組,用optgroup標簽進行分組，將“快遞”與“EMS”分到group1組里，如下所示

<div>
    <label for="delivery">配送方式:</label>
    <select id="delivery">
    <optgroup label="group1">
        <option value="0">快遞</option>
        <option value="1">EMS</option>
    </optgroup>
        <option value="2" selected>平郵</option>
    </select>
</div>

單行文本框

<div>
    <label for="description">商品描述：</label>
    <input class="text" id="description" placeholder="請填寫描述" value="good" readonly>
</div>

• 單行文本框可添加placeholder屬性，為提示內容，在高級的瀏覽器中可有體現
• 若有默認值可寫在value屬性中
• 若文本框不能輸入內容只是讓用戶觀看，可添加readonly屬性,之后用戶不可修改
• 若想要變為隱藏的，可添加hidden屬性，之后用戶看不到內容，但數據也可傳到后臺

多行文本框

<div>
    <label for="feedback">意見反饋：</label>
    <textarea name="feedback" rows="4" id="feedback"></textarea>
</div>

多行文本框用textarea標簽表示

input type
-email
-url
-number
-tel
-search
-range
-color
-date picker

1.3.2.8語義化

什么是語義化？

在一個網頁上，每個標簽的用途，用正確的標簽來表示正確的頁面
圖片用img標簽，段落用p標簽，節目列表用戶列表用ul標簽表示，歌曲列表用table標簽表示，評論功能用form標簽表示。

語義化的作用

• 有利于SEO（search engine optimization）
  搜索引擎EO化，頁面是給搜索引擎看的，搜索引擎可根據語義化的標簽來去定標簽的權重，這樣頁面和用戶的關鍵字可以更加匹配。搜索引擎可以對語義化的標簽給更高的權重，這樣可以使頁面更早的出現在用戶的搜索結果中。
• 提高可訪問性
  頁面可能是給盲人看的，他們通過屏幕閱讀器來訪問頁面，屏幕閱讀器對不同的標簽可以發出不同的聲音，使用更語義化的標簽可以傳達不同信息的重要性，使他們跟好的理解頁面的內容。
• 提高代碼的可讀性
  頁面也是給開發人員看的，語義化可以提高代碼可讀性，更好的用于修改維護，提高多人的開發效率

屏幕快照 2016-02-29 下午5.26.03.png

頁面頭部代碼

屏幕快照 2016-02-29 下午5.55.42.png

<div class="native">
    <div class="wrap">
        <hl><a href="#">網易云音樂</a></h1>
        <u1 class="nav">
            <li class="z-act"><a href="#">發現音樂<i></i></a></li>
            <li><a href="#">我的音樂<i></i><a/></li>
            <li><a href="#">朋友<i></i></a></li>
            <li><a href="#">客戶端下載<i></i></a></li>
        </ul>
        <div class="user"><a id="login" href="#">登陸</a></div>
    </div>
</div>
<div class="m-subnav">
    <ul>
        <li><a href="#">推薦</a></li>
        <li><a href="#">歌單</a></li>
        <li><a href="#">大牌DJ</a></li>
        <li><a href="#">歌手</a></li>
        <li><a href="#">新碟上架</a></li>
    </ul>
</div>

頁面標題用h1標簽來表示，導航用ul標簽來表示，同樣下面次要導航也用ul標簽來表示，導航里的每一項因為使連接，所以用a標簽來表示

歌單詳情

屏幕快照 2016-02-29 下午6.02.22.png

<!--詳情-->
<div class="m-info">
    <div class="img">![封面](http://p4.music.126.afdf.jpg?parm=200y200)</div>
    <div class="wrap">
        <div class="content">
            <h2><span class="u-tag"><span><cm>巴西</cm></h2>
            <div class="info">
                <div class="author">
                    <a href="#" class="u-img u-img-3">![](http://p3.music.126.net/-_2…)</a>
                    <span class="time">2013-06-08 創建</span>
                    <span class="times">播放：<em>204</em>次</span>
                </div>
                <div class="btns">
                …
                </div>
                <div class="intr">
                    <h3>有待咖啡館<i>Vol.18</i></h3>
                    <p>介紹：影片“Brazil”從小說《1984》當中獲得靈感，使用…</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--／詳情-->

圖片用img標簽表示，標題用h2標簽表示，用戶頭像用img標簽表示，灰色文字無具體語義灰色樣式用span標簽表示，播放次數的強調用em標簽表示,下面的標題用h3標簽表示，描述內容用p標簽表示。

列表

屏幕快照 2016-02-29 下午6.04.51.png

<div class="g-sd">
    <!--節目列表-->
    <div class="u-title2"><h2>相關節目</h2><a class="more">更多></a></div>
    <ul class="list">
        <li>
            <a href="#" class="u-img">
                ![](http://p3.music.jpga)
            </a>
            <div class="wrap">
                <div class="content">
                    <h3><a href="#">蕭瑟冬季跟著歌曲去旅行</a></h3>
                </div>
            </div>
        </li>
            …
       </ul>
    </div>
    <!--/節目列表-->
    <!--/用戶列表-->
    <div class="m-userlist">
        <div class="u-title2"><h2>他們也收藏了這個DJ節目</h2></div>
        <div class="list">
            <ul id="ulFavouratelist">
                <li>
                    <a href="#" class="u-img u-img-2">
                        ![joe](http://p4.music.jpg)
                    </a>
                </li>
                …
            </ul>
        </div>
    </div>
    <!--／用戶列表>
</div>

標題用h2標簽表示，列表用ul標簽表示，節目的封面用img標簽表示，節目的標題用h3標簽表示，間接用p標簽表示，節目標題用h2標簽表示，節目列表用ul標簽表示，里面每個用戶頭像用img標簽表示

歌曲列表

屏幕快照 2016-02-29 下午6.05.15.png

<!--/歌曲列表-->
<div class="m-songlist">
    <div class="u-title"><h2>包含歌曲列表</h2><span class="info">6首歌</span></div>
    <table>
        <colgroup><col class="coll"/><col class="col2"/><col class="col3"/><col class="col4"/><col/></colgroup>
        <thead>
            <tr><th></th><th>歌曲標題</th><th>時長</th><th>歌手</th><th>專輯</th></tr>
        </thead>
        </tbody>
            <tr class="odd">
                <th><span class="order">1</span><span class="u-icon u-icon-play"></span></th>
                <td><h3 class="text"><a href="#">北京之雪</a></h3></td>
                <td>04:19</td>
                <td><div class="text"><a href="#">田震</a></div></td>
                <td><div class="text"><a href="#">電量2005</a></h3></td>
            </tr>
            …
        </tbody>
    </tbale>
</div>
<!--/歌曲列表-->

歌曲列表標題用h2標簽表示，表格數據用table標簽表示，表格的頭部放在thead標簽中，表格的主要能容放在tbody標簽中，里面的每一行用tr標簽表示

評論部分

屏幕快照 2016-02-29 下午6.05.35.png

<!--評論-->
<div class="m-comment">
    <div class ="u-title"><h2>評論</h2><span class="info">共<span id="spanCommentCount"></span>條評論</span></div>   
    <div class="form">
         <a href="#" class="u-img>![](http://p3.music.126.com.816056.jpg)</a>
         <div class="wrap">
            <form class="content">
                <div class="u-input"><textarea id="textComment" class="z-placeholder">評論</textarea></div>
                <div class="bar">
                    <span class="remain"><span id="txtRemain">140</span>/140</span>
                    <botton type="button" id="btnComment" class="u-btn2 u-btn-sm">評論</button>
                </div>
            </form>
        </div>
    </div>
    <ul class="list" id="ulCommentlist">
        <li>
            <a href="#" class="u-img"><ing src="http://p3.music.126.4286083.jpg" alt=""></a>
            <div class="wrap">
                <div class="content">
                    <p><a href="#">菜單</a>很適合睡覺的時候試試看哈很適合很適合睡覺的時候試試看哈</p>
                    <span class="time">2012-05-29</span>
                </div>
            </div>
        </li>
        …
    </ul>
</div>
<!--/評論-->

標題用h2來表示，評論的功能用form標簽表示，里面的評論框用textarea標簽表示評論按鈕用button標簽表示，下面的評論列表用ul標簽表示，里面的每一項用li標簽表示，每一項里的圖片用img標簽表示，因為頭像可以點擊所以嵌在a標簽里面，評論的內容用p標簽表示，評論時間沒有具體語義用span標簽表示

頁面尾部

屏幕快照 2016-03-01 下午8.04.02.png

<div class="m-foot">
    <div class="wrap">
        <a href="#" class="join">
            <h3>獨立音樂人招募計劃</h3>
            <p>加入我們 即將與超過億萬樂迷互動</p>
        </a>
        <div class="links">
            <a href="#">關于網易</a>-<a href="#">客戶服務</a>-<a href="#">服務條款</a>-<a href="#">網站導航</a>
        </div>
        <span class="copyright">網易公司版權所有?1997-2014  粵B2-20090191-18</span>
        <a href="#" class="feedback">意見反饋</a>
    </div>
</div>

標題用h3標簽表示，描述文字用p標簽表示相關文檔連接用a標簽表示，由于里面的內容并無語義，但有一個灰色的樣式，所以用span標簽表示