1.3.2.1語(yǔ)法

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

1 <>閉合： <form>有</form>與之對(duì)應(yīng)，自閉合的专控，如<input>
2 標(biāo)簽可以帶一個(gè)或多個(gè)屬性
3 嵌套抹凳，閉合時(shí)應(yīng)注意嵌套順序，先閉合后閉合
4 注釋注釋內(nèi)容用戶不可見

書寫規(guī)范

1 書寫用小寫
2 屬性值用雙引號(hào)
3 標(biāo)簽有嵌套應(yīng)進(jìn)行統(tǒng)一的縮進(jìn)伦腐，代碼清晰維護(hù)方便

常用屬性

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

1.3.2.2章節(jié)標(biāo)簽

文檔章節(jié)

• body
• header 章節(jié)或頁(yè)面的頭部
• nav 導(dǎo)航性質(zhì)
• aside 和主要內(nèi)容不相關(guān)的內(nèi)容
• article 可嵌套赢底，主要內(nèi)容
• section 文檔中的區(qū)域或一節(jié)，相鄰相關(guān)
• footer 章節(jié)或頁(yè)面的尾部
• hx

標(biāo)題(h1-h6)

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

1.3.2.3文本標(biāo)簽

文本

超鏈接

-a
<a></a>

• 創(chuàng)建指向另一個(gè)文檔的連接

<a > 科技<a/>
<a  target="_self">電影 </a>
<a  target="_blank">財(cái)經(jīng)</a>

還有一種情況：target="inner"
默認(rèn)情況下幸冻，在當(dāng)前窗口打開

• 創(chuàng)建一個(gè)文檔內(nèi)部的錨點(diǎn)

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

• 連接到email地址

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

郵箱地址可為多個(gè)

強(qiáng)調(diào)

-em,strong
strong是比em更強(qiáng)的強(qiáng)調(diào)粹庞，em是斜體，strong是粗體洽损。

<p class="w-price">
    <strong>39元</strong>
    <span>市場(chǎng)價(jià)45元</span>
</p>

行內(nèi)容器

-span
不一樣的樣式庞溜，給標(biāo)簽一特定的樣式

換行

-br

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

引用

-cite
-q

<div>
   魯迅在<cite>故鄉(xiāng)</cite>中寫道<q>地上本沒有路，走的人多了碑定，便有了路</q>
</div>

代碼

-code

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

格式化

-b 粗體
-i 斜體

<div>
HTML是為“網(wǎng)頁(yè)創(chuàng)建和其它可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種<b>標(biāo)記</b>語(yǔ)言流码。
</div>

其中標(biāo)記為關(guān)鍵字加粗

<div>
該項(xiàng)目采用<i>html</i>,<i>css</i>等實(shí)現(xiàn)。
</div>

html css 標(biāo)記為斜體

1.3.2.4組標(biāo)簽

分區(qū)

div
div本身無語(yǔ)意延刘，用來分區(qū)漫试。div為其他標(biāo)簽的容器

段落

p
p標(biāo)簽表段落

列表

ul ,ol,dl
分為三種，無序列表访娶，有序列表商虐，自定義列表觉阅。

• 無序列表

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

• 有序列表

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

有序列表可以實(shí)現(xiàn)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只能有一個(gè)，dd可以有多個(gè)割笙。呈現(xiàn)如下：
作者
Cbuck Musiano
Bll Kennedy
出版年
2007-4
列表可以嵌套

其它標(biāo)簽

• pre
  經(jīng)過格式化的內(nèi)容保存在pre標(biāo)簽下权烧，可保存換行符和空格
• blockquote
  表示大段的引用

1.3.2.5 資源標(biāo)簽

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

img

如音樂專輯封面

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

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

iframe

嵌入頁(yè)面伤溉，如網(wǎng)站廣告

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

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

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插件
插件的參數(shù)放在param參數(shù)中,地址可以放在move參數(shù)中，也可放在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標(biāo)簽。
</video>

• 因?yàn)椴煌瑸g覽器對(duì)視頻的格式支持度不同所以需要準(zhǔn)備多個(gè)視頻格式
• 在source標(biāo)簽中在src屬性下寫上視頻的地址伏伯，type寫視頻的類型橘洞，瀏覽器會(huì)選擇他支持的視頻類型進(jìn)行播放
• 如果視頻文件只有一個(gè)，可以把視頻文件放在video標(biāo)簽的src屬性下说搅，因?yàn)関ideo標(biāo)簽只有高版本的瀏覽器才支持炸枣，為了提高用戶體驗(yàn)，可以在下面寫上提示文字，這樣不支持video標(biāo)簽的用戶就會(huì)顯示這里的文字
• 用controls屬性可以控制播放器控制條的顯示抛虏，poster屬性視頻的封面博其，track屬性是視頻的字幕。
• 如果需要視頻一進(jìn)來就是播放的需要加autoplay屬性迂猴，需要循環(huán)播放需要加loop屬性慕淡，如下：

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

audio

audio標(biāo)簽與video標(biāo)簽類似，這里不詳細(xì)介紹

嵌入資源

圖

-canvas
-svg

• canvas基于像素沸毁，他提供了一些繪制函數(shù)峰髓，通過腳本來繪制圖形圖像，對(duì)于性能比較高的場(chǎng)景復(fù)雜的息尺，如實(shí)時(shí)數(shù)據(jù)的展示携兵，游戲可以使用它
• sag是矢量的他提供了一系列圖形，對(duì)于高保真的靜態(tài)的圖形圖像可以使用它搂誉。

熱點(diǎn)區(qū)域

-map
-area

![封面](http://p4.music.126.afdf.jpg?parm=200y200)
<map name="Map2" data-ganame="422預(yù)熱主頁(yè)－頭牌大咖區(qū)" data-gapoint="點(diǎn)擊大咖區(qū)－運(yùn)動(dòng)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相關(guān)聯(lián)
• 里面的熱點(diǎn)通過area這個(gè)標(biāo)簽實(shí)現(xiàn)徐紧，通過shape屬性定義形狀，通過coords定義關(guān)鍵的點(diǎn)位置炭懊，如上例為矩形并级，那么可定義左上角和右下角。

1.3.2.6表格標(biāo)簽

<table>
    <caption>照片沖印價(jià)格詳情</caption>
    <thead>
        <tr><th>照片尺寸</th><th>富士</th><th>柯達(dá)</th></tr>
    </thead>
    <tbody>
        <tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
        …
    </tbody>
    <tfoot>
        <tr><td colspan="3">運(yùn)費(fèi)8元／單侮腹，滿99元免運(yùn)費(fèi)</td></tr>
    </tfoot>
</table>

• 表格的標(biāo)題放在caption標(biāo)簽下嘲碧，表格的頭部放在thaead標(biāo)簽下，表格的尾部放在tfoot標(biāo)簽下父阻。
• 表格的每一行用tr標(biāo)簽表示愈涩，單元格有兩種表示方式th和td,其中th為表頭或者第一列的表示，td為普通單元格表示方法加矛。
• 表格的列可以跨履婉，用colspan，上例中“colspan=3“表示跨了3列
• 同樣可以跨行斟览，用rowspan表示

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

1.3.2.7表單標(biāo)簽

表單

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

• action屬性為表單的后臺(tái)地址，需要把表單的數(shù)據(jù)提交到哪一個(gè)后臺(tái)的接口就寫道action里
• method屬性為表單提交的方式味悄，常用的為post方式
• 若表單的內(nèi)容很多要對(duì)表單進(jìn)行分區(qū)草戈，常用的為fieldset標(biāo)簽，分區(qū)的標(biāo)題用legend標(biāo)簽表示

<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標(biāo)簽有以下屬性侍瑟，name名稱唐片，值用value屬性表示
• input標(biāo)簽有不同的類型丙猬，如文件上傳type="file",尺寸選擇多選框type="checkbox", 單選框type="radio",單行文本框type="text"
• 同一類型的多選框name值相同。
• 默認(rèn)選中需要加checked屬性费韭，若如讓用戶操作需要用disable屬性茧球。如下所示

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

• 按鈕也可用input標(biāo)簽表示，在type屬性中提交用submit表示星持，重置用reset表示,如下

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

為了更好的語(yǔ)意化用button標(biāo)簽表示抢埋，如下

<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>

• 下拉選框用標(biāo)簽表select標(biāo)簽表示，里面的每一項(xiàng)用option標(biāo)簽表示
• label標(biāo)簽表示了每一個(gè)select或input提示的信息督暂，通過for屬性與標(biāo)簽中的id屬性對(duì)應(yīng)揪垄，這兩個(gè)值要一致，表示此label的內(nèi)容表示了如下標(biāo)簽逻翁。
• 默認(rèn)選擇項(xiàng)為第一項(xiàng)饥努，若要將其它項(xiàng)設(shè)為默認(rèn)項(xiàng)需加selected屬性，如上例中將“平郵”設(shè)為默認(rèn)值八回。
• 可將下拉選項(xiàng)分組,用optgroup標(biāo)簽進(jìn)行分組酷愧，將“快遞”與“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="請(qǐng)?zhí)顚懨枋? value="good" readonly>
</div>

• 單行文本框可添加placeholder屬性缠诅，為提示內(nèi)容溶浴，在高級(jí)的瀏覽器中可有體現(xiàn)
• 若有默認(rèn)值可寫在value屬性中
• 若文本框不能輸入內(nèi)容只是讓用戶觀看，可添加readonly屬性,之后用戶不可修改
• 若想要變?yōu)殡[藏的滴铅，可添加hidden屬性戳葵，之后用戶看不到內(nèi)容就乓，但數(shù)據(jù)也可傳到后臺(tái)

多行文本框

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

多行文本框用textarea標(biāo)簽表示

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

1.3.2.8語(yǔ)義化

什么是語(yǔ)義化汉匙？

在一個(gè)網(wǎng)頁(yè)上，每個(gè)標(biāo)簽的用途生蚁，用正確的標(biāo)簽來表示正確的頁(yè)面
圖片用img標(biāo)簽噩翠，段落用p標(biāo)簽，節(jié)目列表用戶列表用ul標(biāo)簽表示邦投，歌曲列表用table標(biāo)簽表示伤锚，評(píng)論功能用form標(biāo)簽表示。

語(yǔ)義化的作用

• 有利于SEO（search engine optimization）
  搜索引擎EO化志衣，頁(yè)面是給搜索引擎看的屯援，搜索引擎可根據(jù)語(yǔ)義化的標(biāo)簽來去定標(biāo)簽的權(quán)重，這樣頁(yè)面和用戶的關(guān)鍵字可以更加匹配念脯。搜索引擎可以對(duì)語(yǔ)義化的標(biāo)簽給更高的權(quán)重狞洋，這樣可以使頁(yè)面更早的出現(xiàn)在用戶的搜索結(jié)果中。
• 提高可訪問性
  頁(yè)面可能是給盲人看的绿店，他們通過屏幕閱讀器來訪問頁(yè)面吉懊，屏幕閱讀器對(duì)不同的標(biāo)簽可以發(fā)出不同的聲音庐橙，使用更語(yǔ)義化的標(biāo)簽可以傳達(dá)不同信息的重要性，使他們跟好的理解頁(yè)面的內(nèi)容借嗽。
• 提高代碼的可讀性
  頁(yè)面也是給開發(fā)人員看的态鳖，語(yǔ)義化可以提高代碼可讀性，更好的用于修改維護(hù)恶导，提高多人的開發(fā)效率

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

頁(yè)面頭部代碼

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

<div class="native">
    <div class="wrap">
        <hl><a href="#">網(wǎng)易云音樂</a></h1>
        <u1 class="nav">
            <li class="z-act"><a href="#">發(fā)現(xiàn)音樂<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>

頁(yè)面標(biāo)題用h1標(biāo)簽來表示浆竭，導(dǎo)航用ul標(biāo)簽來表示，同樣下面次要導(dǎo)航也用ul標(biāo)簽來表示惨寿，導(dǎo)航里的每一項(xiàng)因?yàn)槭惯B接兆蕉，所以用a標(biāo)簽來表示

歌單詳情

屏幕快照 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 創(chuàng)建</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》當(dāng)中獲得靈感，使用…</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--／詳情-->

圖片用img標(biāo)簽表示缤沦，標(biāo)題用h2標(biāo)簽表示虎韵，用戶頭像用img標(biāo)簽表示，灰色文字無具體語(yǔ)義灰色樣式用span標(biāo)簽表示缸废，播放次數(shù)的強(qiáng)調(diào)用em標(biāo)簽表示,下面的標(biāo)題用h3標(biāo)簽表示包蓝，描述內(nèi)容用p標(biāo)簽表示。

列表

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

<div class="g-sd">
    <!--節(jié)目列表-->
    <div class="u-title2"><h2>相關(guān)節(jié)目</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>
    <!--/節(jié)目列表-->
    <!--/用戶列表-->
    <div class="m-userlist">
        <div class="u-title2"><h2>他們也收藏了這個(gè)DJ節(jié)目</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>

標(biāo)題用h2標(biāo)簽表示企量，列表用ul標(biāo)簽表示测萎，節(jié)目的封面用img標(biāo)簽表示，節(jié)目的標(biāo)題用h3標(biāo)簽表示届巩，間接用p標(biāo)簽表示硅瞧，節(jié)目標(biāo)題用h2標(biāo)簽表示，節(jié)目列表用ul標(biāo)簽表示恕汇，里面每個(gè)用戶頭像用img標(biāo)簽表示

歌曲列表

屏幕快照 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>歌曲標(biāo)題</th><th>時(shí)長(zhǎng)</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>
<!--/歌曲列表-->

歌曲列表標(biāo)題用h2標(biāo)簽表示腕唧，表格數(shù)據(jù)用table標(biāo)簽表示，表格的頭部放在thead標(biāo)簽中瘾英，表格的主要能容放在tbody標(biāo)簽中枣接，里面的每一行用tr標(biāo)簽表示

評(píng)論部分

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

<!--評(píng)論-->
<div class="m-comment">
    <div class ="u-title"><h2>評(píng)論</h2><span class="info">共<span id="spanCommentCount"></span>條評(píng)論</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">評(píng)論</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">評(píng)論</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>很適合睡覺的時(shí)候試試看哈很適合很適合睡覺的時(shí)候試試看哈</p>
                    <span class="time">2012-05-29</span>
                </div>
            </div>
        </li>
        …
    </ul>
</div>
<!--/評(píng)論-->

標(biāo)題用h2來表示，評(píng)論的功能用form標(biāo)簽表示缺谴，里面的評(píng)論框用textarea標(biāo)簽表示評(píng)論按鈕用button標(biāo)簽表示但惶，下面的評(píng)論列表用ul標(biāo)簽表示，里面的每一項(xiàng)用li標(biāo)簽表示湿蛔，每一項(xiàng)里的圖片用img標(biāo)簽表示膀曾，因?yàn)轭^像可以點(diǎn)擊所以嵌在a標(biāo)簽里面，評(píng)論的內(nèi)容用p標(biāo)簽表示阳啥，評(píng)論時(shí)間沒有具體語(yǔ)義用span標(biāo)簽表示

頁(yè)面尾部

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

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

標(biāo)題用h3標(biāo)簽表示添谊，描述文字用p標(biāo)簽表示相關(guān)文檔連接用a標(biāo)簽表示，由于里面的內(nèi)容并無語(yǔ)義苫纤，但有一個(gè)灰色的樣式碉钠，所以用span標(biāo)簽表示