白郁悶的找到老朱說道：“朱哥，我想讓一個塊容器在一個容器里面垂直居中怎么這么難啊！”

老朱：“你是怎么實現的？”

小白說：“比如一個容器的高度是400px，子容器的高度是300px，我就把子容器CSS上邊距設置成50px。”

“那要是父容器高度發生變化你的子容器豈不是很麻煩”

小白郁悶的說道：“你可說吧！頭疼的很！怎么才能輕松的設置垂直居中啊？”

老朱說：“如果一個容器只有一行文字和圖片，我們可以設置容器的高度和line-height一致就可以保證文字和圖片居中，但是多行圖片，或者容器里面嵌套了其他塊元素就很麻煩了。還有一種情況就像你剛剛兩個div嵌套，子容器也是個塊元素，垂直居中直接用CSS會很麻煩，正好今天想跟你說說怎么給jQuery添加擴展方法，索性咱就以這個為例子進行討論吧！”

小白高興的說道：“又有新知識學了，什么事給jQuery添加擴展方法呢？”

“我們使用$(選擇器)生成的對象有很多默認jQuery方法，你應該知道吧？”

小白說道：“知道啊！獲取和修改容器html內容的html()方法、獲取和修改屬性的attr()方法、修改元素css樣式的css()方法、獲取元素高度的height()方法、還有控制容器顯示的show()方法……”

“停~！差不多了，這些都是jQuery自帶的方法，假如我們想自己增加一個方法可以用$.fn添加。我現在給你寫一個能夠輸出當前容器高度和父容器高度的方法你看看！”

“子容器和父容器的高度在CSS中都有過設定，因此我通過$.fn添加mid方法以后，再通過選擇器找到sun容器就可以直接使用mid方法了。”

小白突然靈光一現，說道：“朱哥我知道怎么設置一個讓塊容器基于父容器垂直居中了，你稍等我一會，我再你的代碼基礎上改一下！”

也就兩分鐘的時間，小白就把代碼拿到了老朱面前，“你看，我寫好了！”

“現在我想讓sun容器基于main垂直居中只需要使用一下$("#sun").mid()就可以實現了，以后父容器不管怎么變化，它都是基于父容器居中的。”

老朱說道：“如果有多行塊容器，或者多行文本、圖片怎么辦？”

小白說道：“那就給他們外面再嵌套一個塊容器就可以了么！對不對啊？”

“不錯，通過給他們嵌套一個塊容器，然后再讓這個塊容器基于父容器垂直居中就可以了！小白我相信你還能再寫一個基于底部對齊的方法吧？”

小白自信的說道：“再這個方法上改一下就可以了，稍等~”

“嗯，不錯，如果你發現以后經常會用到這兩種居中方式，可以把他們放到一個js文件里面，以后用的時候把這個js文件引入，就可以直接使用mid和bottom方法了。”

“$.fn確實是個好東西！看來我以后得經常添加自己的方法了，哈哈，我去練習了~”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

家好，我是新媒之聲廣告工作室的大白，今天給大家帶來的是HTML5簡單教學第一章（第二節）。

今天給大家帶來的東西比較多；

br 換行標簽實屬單標簽，br換行標簽就如同我們編輯文本是點擊的回車鍵，讓它換到下一行。

HTML5 <br/>標簽用來對文檔中的文本進行換行的處理，請參考下面的這個例子：

以下代碼標記一個換行：

<p> 使用 br 元素<br>在文本中<br>換行。 </p>

所有主流瀏覽器都支持 <br> 標簽。

標簽定義及使用說明

<br> 標簽插入一個簡單的換行符。

<br> 標簽是一個空標簽，意味著它沒有結束標簽。

提示：由于<br>標簽是空標簽，因此，不允許有“<br>...</br>”這樣的寫法！

提示和注釋

提示：在寫地址信息或者寫詩詞時 <br> 標簽非常有用。

注釋： 請使用 <br> 標簽來輸入空行，而不是分割段落。

HTML 4.01 與 HTML5之間的差異無。

HTML 與 XHTML 之間的差異

在 HTML 中，<br> 標簽沒有結束標簽。

在 XHTML 中，<br> 標簽必須被正確地關閉，比如這樣：<br /> 。

nobr 不換行是屬于雙標簽，nobr就是強制不換到下一行，在做編輯時文字或是塊遇到瀏覽器的邊會自動換到下一行使用不換行標簽就強制它不讓換行，這是瀏覽器底部就會出現航向滾動條。

p 段落標簽也是屬于雙標簽，p標簽是文字標簽，故名思議就是用于寫文字段落的標簽，p標簽是屬于塊標簽，就是獨自占據一行，在下節課會介紹到塊標簽與行標簽。

HTML5 <p>標簽用于定義一個段落。

目前大多數瀏覽器支持 <p>標簽。

標簽定義及使用說明

<p> 標簽定義段落。

<p>元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。

提示：在本站的HTML5編程實戰中，你可以練習使用<p>標簽！

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標簽的 align 屬性已經廢棄，HTML5不支持該屬性。

p 段落,align屬性:left|center|right，是標簽屬性，屬性有事css樣式，css樣式又可以通俗的理解為房子的裝修，html通俗可以理解為房子的框架，div又可以通俗的理解為房子的填充磚塊之類的。

所有主流瀏覽器都支持 align 屬性。

定義和用法

HTML5 不支持 <p> align 屬性。請使用 CSS 代替。

在 HTML 4.01 中，<p> 的 align 屬性已廢棄。

align 屬性規定段落中文本的對齊方式。

兼容性注釋

在 HTML 4.01 中，<p> 的 align 屬性已廢棄，請使用 CSS 代替。

CSS 語法：<p style="text-align:right">

CSS 實例：在段落中右對齊文本

在我們的 CSS 教程中，您可以找到更多有關 text-align 屬性 的細節。

語法

<p align="left|right|center|justify">

屬性值

center 居中是屬于雙標簽，雙標簽就是成對出現的標簽，center居中標簽的意思就是讓它位于瀏覽器的中心位置，就好比是wps的文字居中一個道理，不過居中標簽是可以讓它體內所有的標簽都可以居中。

HTML <center> 標簽 - HTML 5 不支持

<center> 標簽控制文本的居中顯示，不能在 HTML5 中使用。

所有主流瀏覽器都支持 <center> 標簽。

標簽定義及使用說明

HTML5 不支持 <center> 標簽。請用 CSS 代替。

在 HTML 4.01 中，<center> 元素已廢棄。

<center> 對其所包括的文本進行水平居中。

提示和注釋

提示：請使用 CSS 樣式來居中文本！在 CSS 教程中您能了解到更多關于居中文本的細節。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <center> 標簽。請用 CSS 代替。

pre 按源代碼顯示是屬于雙標簽不是很常用的標簽，它的意思就是讓標簽直接不解析讓瀏覽器表現出來，一般用于展示源代碼。

HTML <pre> 標簽

<pre> 標簽可以保留您需要的文本格式，比如不會取消換行和空格，并且所示文本是等寬的。

目前大多數瀏覽器支持 <pre> 標簽。

標簽定義及使用說明

<pre> 標簽可定義預格式化的文本。

被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

注意：<pre> 元素是塊級元素，但是只能包含文本或行內元素，任何塊級元素（常見為可以導致段落斷開的標簽：例如<title>、<p> 和<address> 標簽）都不能位于 <pre> 元素中。

提示和注釋

提示: <pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

提示：<pre> 標簽與 <code> 標簽結合起來使用，可以獲得更加精確的語義。

在HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中，"width" 屬性已廢棄，不可使用。 HTML5 不支持"width"屬性。

屬性

全局屬性

<pre> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

ul 無序列表屬于雙標簽，一般配合li標簽使用，無序列表屬和wps中表現是一樣的不過無序列表中不只可以寫文字和數字也可以寫div之類的標簽有的網頁導航就是用ul無序列表標簽寫出來的。

HTML <ul> 標簽

<ul> 標簽表示HTML頁面中項目的無序列表，一般會以項目符號列表呈現

所有主流瀏覽器都支持 <ul> 標簽。

標簽定義及使用說明

<ul> 標簽定義無序列表。

將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表。

提示和注釋

提示：使用 CSS 為列表定義樣式。

提示：使用 <ol> 標簽創建有序列表。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，"compact" 和 "type" 屬性已廢棄。HTML5 則不支持著兩個屬性。

屬性

ol 有序列表標簽和ul無序列表標簽是一個道理，也是配合li標簽使用唯一區別就是一個前面帶點一個前面帶阿拉伯數字。

HTML <ol> 標簽

<ol> 標簽在 HTML 中表示有序列表，是 ordered lists 的縮寫。您可以自定義有序列表的初始序號

目前大多數瀏覽器支持 <ol> 標簽。

標簽定義及使用說明

<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。

使用<li> 標簽來定義列表選項。

提示和注釋

提示： 如果需要無序列表，請使用 <ul> 標簽。

提示：使用 CSS 來定義列表樣式。

HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中"start" 和 "type" 屬性已經廢棄，HTML5不支持該屬性。

"reversed" 屬性是 HTML5 中的新屬性。

在HTML 4.01中"compact" 屬性已經廢棄,在 HTML5中不支持該屬性。

屬性

New：HTML5 新屬性。

dl 自定義列表 dt 自定義標題 dd 自定義列表內容這三個標簽我放在一起講因為這三個標簽是配合在一起的用法和ul標簽ol標簽差不多，就不再過多的敘述了，一般用到的不是很多。

所有主流瀏覽器都支持 <dl> 標簽。

標簽定義及使用說明

<dl> 標簽定義一個描述列表。

<dl> 標簽與 <dt> （定義項目/名字）和 <dd> （描述每一個項目/名字）一起使用。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dl> 標簽定義一個定義列表。

在 HTML5 中，<dl> 標簽定義一個描述列表。

HTML <dt> 標簽

<dt> 標簽只能夠作為 <dl> 標簽的一個子元素出現，常常后跟一個 <dd> 標簽。

所有主流瀏覽器都支持 <dt> 標簽。

標簽定義及使用說明

• <dt> 標簽定義一個描述列表的項目/名字。

  <dt> 標簽與 <dl> （定義一個描述列表）和 <dd> （描述每一個項目/名字）一起使用。

  一行中的多個 <dt> 標簽表示由緊鄰的下一個 <dd> 元素定義的多個術語。

• ---

• HTML 4.01 與 HTML5之間的差異

  在 HTML 4.01 中，<dt> 標簽定義一個定義列表的條目。

  在 HTML5 中，<dt> 標簽定義一個描述列表的項目/名字。

  
  

  hr 導航線這節課最后一個標簽是單標簽，所謂的導航線不過就是一條橫線用來分割。

  HTML <hr> 標簽

  <hr> 標簽表示段落級元素之間的主題劃分。

  所有主流瀏覽器都支持<hr> 標簽。

  ---

  標簽定義及使用說明

  <hr>標簽定義HTML頁面中的主題變化（比如話題的轉移），并顯示為一條水平線。 元素被用來分隔HTML頁面中的內容（或者定義一個變化）。

  ---

  HTML 4.01與HTML5之間的差異

  在HTML5中，<hr> 定義內容中的主題變化，并顯示為一條水平線。

  在HTML 4.01中，<hr> 標簽僅僅顯示為一條水平線。

  在HTML 4.01中，的所有布局屬性都已廢棄。在HTML5中不再支持這些屬性。請使用CSS來為<HR> 元素定義樣式。

  ---

  HTML與XHTML之間的差異

  在HTML中，<hr> 標簽沒有結束標簽。

  在XHTML中，<hr> 標簽必須被正確地關閉，比如<hr /> 。

  ---

  屬性

  屬性	值	描述
  align	left center right	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的對齊方式
  noshade	noshade	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的顏色呈現為純色。
  size	pixels	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的高度。
  width	pixels %	HTML5 不支持。HTML 4.01 已廢棄。 規定 <hr> 元素的寬度。

  謝謝大家的觀看，如果需要今天課程的源代碼和ppt可以私信給我，我會免費發給你，最好使能夠關注小編一下。

言：萬物之始，大道至簡，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號稱超文本標記語言，代表著瀏覽器技術發展的一個階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當時到html4.1的時候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問題，于是乎W3C這個組織就和其他的瀏覽器產商一起聯合起來將這門語言再次更新到html5

比喻：

html5 >機器人的骨骼

css3 >機器人的外在修飾

js > 機器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫，可以提高效率

1.2優勢

• 易用性

• 支持視頻和音頻

• 互動性高

• 支持移動設備

• 未來的趨勢

1.3開發工具

HBuild、WebStrom、sublime Text

二、代碼規范

2.1代碼規范

新建一個Web項目

相比html4來說，html5的語法更加簡潔并且在規定上也更加寬松。

• 單標簽不用寫關閉符號

• 雙標簽省略結束標簽

• html、head、body、colgroup、tbody可以完全省略

• 刪除其中一些，打開瀏覽器的檢查元素功能，也不會報錯

三、各類標簽

3.1文本標簽

• b標簽：表示關鍵字和產品名稱。<b>html</b>其實它的實際作用就是將一段文字加粗。但是并不是特別強調它的重要性。比如說：在一段文字當中出現的某些關鍵字或者產品的名稱就可以用b標簽

• strong標簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強調一段比較重要的文本

• br單標簽：換行

• wbr標簽：安全換行you've no idea how worried <wbr> i was當用戶對網頁進行縮放的時候可能會有一些單詞被擠到下一行。如果不行某個單詞被分離的話，可以使用安全換行標簽

• i標簽：傾斜。em標簽語義一樣，但em表示強調<i>傾斜標簽</i>它用于表示外文詞匯或科技術語

• s標簽：刪除線。del標簽表示強調。<s>html</s>刪除線

• u標簽：給文字加下劃線。ins標簽表示強調<u>html</u>下劃線

• small標簽：添加小號字體<small>放小一號</small>將文本放小一號。通常用于免責聲明和澄清聲明。

• sub和sup標簽：添加上標和下標X₅和Y²（sub和sup長差不多，這個要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標，而p的頭部在上方，所以記錄是上標。那這樣一來是不是就感覺清晰了許多呢）

• q標簽：引用來自其它出處的內容<q>有朋自遠方來</q>

• ruby標簽：語言元素。常用于幫助讀者正確發音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來幫助讀者掌握表意語言文字的正確發音。比如說漢語拼音在文字的上方。

• bdo標簽：設置文字方向<bdo dir="rtl">設置文字方向</bdo>dbo必須使用屬性dir才可以設置，一共兩個值：rtl從右到左和ltr從左到右。一般默認是ltr。還有一個bdi元素也是處理方向的，由于是特殊語言的效果，并且主流瀏覽器有些不支持，所以可以忽略。

• mark標簽：突出顯示文本<mark>突出顯示文本</mark>加上一個黃色的背景，黑色的字。從語義上來看，與上下文相關而突出的文本，用于記號。

• a標簽：超鏈接a元素屬于文本元素，有一些私有屬性。

  href屬性 <a >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點擊跳轉到指定的外部網站去。

  target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當前窗口打開文檔。默認_self。(_parent和_top這些要結合框架來使用，但是基本上用得已經很少了。)

  錨點設置：用于將同一個文檔中的另一個元素移入視野。說通俗一點就是通過點擊這個錨點定位到頁面中的某個位置。

<a href="#1">第一節</a>

<a href="#2">第二節</a>

<a href="#3">第三節</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一節的內容 我?應該說點啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一萬行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二節的內容 我?應該說點啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分組標簽

顧名思義，分組元素就是用來組織相關內容的html元素，對它們進行清晰有效的分類。

• p標簽：表示段落<p>這是一個段落</p> <p>這是一個段落</p>p標簽就是將內部包含的文本形成一個段落。它們可以自動換行，而且段落與段落之間保持一定量的空隙。

• div標簽：通用分組<div>這是一個塊標簽</div> <div>這是另一個塊標簽</div>在早期的版本中經常用到，用div將其他數據或標簽包裹起來，進而進行布局。但是在html5中，漸漸被其他元素替代。（它與p標簽的區別就是兩段文本間沒有空隙。空隙間隔和br標簽換行一樣）

• blockquite標簽：引用大段其他地方的內容<blockquote>引用別人的內容的輔導費打發打發可以換行哦他也有首尾縮進的效果</blockquote>有段落空隙的功能，還包含了首尾縮進的功能。

• pre標簽：按照原格式展示數據<pre> 我就是 長這樣的 參差不齊 </pre>（有時候某些文字就想要按照原來的格式顯示出來就要用到pre標簽。它就是將數據原封不動的顯示出來）

• hr標簽：單標簽。添加一條分割線。

• ul和li標簽：添加無限列表

<ul>

<li>貂蟬</li>

<li>大喬</li>

<li>小喬</li>

<li>孫尚香</li>

</ul>

ul標簽表示無序列表（就像咱們平時說的無符號整形，在前面也是加了一個u），而li標簽則表示內部的列表項

• ol和li：表示有序列表

• start屬性：表示從第幾個序列開始統計。<ol start="2">

• reversed屬性：是否倒序排列。<ol reversed>（不過這個屬性有很多的瀏覽器不支持，所以要謹慎使用）

• type屬性：表示列表的編號的類型 <ol type="A">

• value屬性：這是屬于li的屬性。表示強行設置某個項目的編號。<li value="7">安琪拉</li>

• dl、dt、dd：列表標簽

<dl>

<dt>第一份內容</dt>

<dd>第一行詳細內容</dd>

<dd>第二行詳細內容</dd>

<dl>

雖然說這三個標簽是一個整體，但是dt和dd標簽并非都必須出現

• figure和figcaption標簽：使用插圖的意思。一般用于圖片的布局。

<figure>

<figcaption>這里有一張圖哦</figcaption>

<img src="img.png">

</figure>

3.3表格標簽

表格的用途是以網格的形式顯示二維數據。開發者可以對表格中的元素標簽設置不同的屬性如邊框寬度、顏色等使表格呈現出不同的效果。

3.3.1 標簽

• table：表示表格標簽

• tr：代表某一行

• td：代表一個單元格。

<table border="1" style="width:300px;">

<tr> <!--相當于行-->

<td>王昭君</td> <!--相當于每行中的每一列-->

<td>沉魚落雁</td>

<td>法師</td>

</tr>

<tr> <!--相當于行-->

<td>貂蟬</td> <!--相當于每行中的每一列-->

<td>羞花閉月</td>

<td>刺客</td>

</tr>

</table>

• th：代表標題單元格。代表標題，作用是將內部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業</th>

</tr>

• thead：代表表頭。（某些時候，網頁上的表頭是由js動態生成的。有可能沒按照先后的順序排列，如此一來表頭就有可能顯示到第二行、第三行甚至是表尾。用thead將tr括起來可以讓數據永遠顯示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業</th>

</tr>

• tfoot:表示表尾：與表頭相反

• tbody:表示表格的主體部分

• (這里非常建議用分主體、表頭、表尾的方式寫。因為到后期使用CSS樣式的時候只要拿到某個標簽就可以設置總體的樣式了，這樣就會非常方便)

• caption:添加表格的標題

• colgroup:群組。用于設置列的屬性。默認設置第一個（有的時候需要設置單獨列的屬性，如果說我只想設置第二列的屬性，則需要把第一列的設置成白色）

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--設置第一個顏色為白-->

<colgroup style="background:red;" span="1"></colgroup> <!--設置第二個顏色為紅 span代表一列-->

• col：群組的子標簽。更加靈活的設置列屬性。通過占位符設置不需要的屬性。

<colgroup>

<col> <!--占位，表示第一列不設置-->

<col style="background: pink;">

</colgroup>

3.3.2屬性

• border:表示邊框的寬度 <table border="1"></table>

• style:通用屬性。在css中做詳解。

• colspan：合并列 <td colspan="3">統計</td>這句代碼表示共占三個單元格

• rowspan:合并行

<tr>

<th rowspan="4">學員</th>

<th>姓名</th>

<th>特征</th>

<th>職業</th>

</tr>

3.3文檔元素

文檔元素的主要作用是劃分各個不同的內容，讓整個布局更加清晰。 進入代替div。讓整個布局元素都具有語義。

• header標簽：表示頁面頭部。通常包括標題或導航等內容。下面內容會換行（在頁面中一般會用樣式將它設置到居中）

• footer標簽:表示頁面的尾部，一般用于版權聲明、友情鏈接等。

• h1-h6標簽：標題標簽，有字體加粗的效果。從1-6字號依次減小

<h1>這里是一個大標題</h1> <h3>這里是一個副標題</h3>

• hgroup:組合標題。hgroup的作用就是當多個標題出現，干擾到一對或多個本身需要整合的標題。

<header>

<hgroup>

<h1>這里是一個大標題</h1>

<h3>這里是一個副標題</h3>

</hgroup>

</header>

<footer>

<h4>這里是尾部的副標題</h4>

這里存放頁面的尾部：如版權聲明，友情鏈接

</footer>

如上面那段代碼，頭部的h4標題就能與h1綁定起來，從而和尾部的h4分離。

• section標簽: 定義一個文檔的主題內容

• nav標簽: 給文檔頁面添加一個導航

• aritcle標簽：添加一個獨立成篇的文檔（像平常看到的論壇，貼吧，評論都有自己的頭、尾和內容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

• aside標簽：生成注釋欄。

<aside>這是一個注釋欄</aside>

• address表示文檔或者是article元素的聯系信息

• <address>聯系信息</address>

• 本身有傾斜的效果。如果是在article元素下表示其下的聯系信息，如果是在body元素下表示整個文檔的聯系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些資源插入到html中。

• img標簽：用于顯示圖片

• src：嵌入圖像的url

• alt：（如果圖片能正常顯示則沒有任何效果。若圖片加載不成功會出現備用內容）

• width/height:定義圖片的寬度和高度,單位是像素<img src="img.png" alt="風景圖" width="320" height="400"/>

• ismap:獲取到圖片區域的像素點加入了ismap屬性之后，點擊圖片在瀏覽器中就會獲得圖片被點擊的地方的像素點。（把文件在目錄中打開，講文件拷貝到谷歌瀏覽器打開就能看見）

<a href="index.html">

<img ismap src="img_5.jpg" alt="風景圖">

</a>

• usemap:創建分區的響應圖。比如說點擊圖片的某一部分，可以跳轉到某一個網頁。（當點擊了coords這塊區域時，跳轉到指定的網頁）

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" target="_blank" alt="方形">

</map>

• iframe標簽：嵌入另一個文檔。表示在一個頁面內建立一個區域引入另一個頁面。

<a href="index.html" >index</a>

<a target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

• progress標簽：用于顯示進度

• 該標簽會產生一個進度條，一般我們會用js代碼來控制其內部的值。(當前值用value來表示，而最大值用max來表示)

<progress value="30" max="100"></progress>

• meter標簽：顯示范圍里的值（類似于進度條,可以規定最大值和最小值max/min。low值規定它的值過低，high表示值過高。而optimun表示最佳值，但是這個屬性是呈現不出效果的）

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音頻和視頻標簽

音頻和視頻文件其實都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放時，音頻軌道和視頻軌道是綁定在一起的。元數據包含了視頻的封面、標題字幕等信息。在網頁實現中，有很多的瀏覽器廠商都有自己的標準，所以html5規范也沒有強制指定編解碼器了。所以在網頁上嵌入視頻和音頻時，最好提供mp4格式和webM格式的視頻。否則有可能由于瀏覽器不兼容的問題導致視頻不能播放。

• video標簽: 視頻標簽屬性：

• src:視頻資源的url

• width：視頻寬度

• height:視頻高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:設置后顯示播放控件（未設置這個屬性時，視頻就像一張圖片，設置controls之后才能顯示視頻播放控件）

• <video src="test.mp4" width="320" height="400" controls></video>

• autoplay:表示立即播放視頻

• loop:反復播放視頻（也就是說在播放結束之后會重新播放視頻）

• muted:設置之后，視頻會處于靜音狀態

• poster:指定視頻數據載入時顯示的圖片。（相當于視頻的一個封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

• preload:預加載。不設置會在第一次播放自動緩存。如果值為none會直到用戶點擊時再加載視頻。如果值為metadata表示播放之前只加載第一幀。auto是默認的，表示要求瀏覽器盡快的加載視頻。

• 兼容多個瀏覽器 source標簽

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio標簽：用于嵌套音頻內容。屬性與視頻元素類似。只是沒有寬高設置和圖片。

• <audio src="test.mp3" controls></audio>

3.6表單標簽

表單標簽是用于獲取用戶的輸入數據的。

• form標簽：表示定義html表單。用該標簽包含的標簽具有提交功能。也就是說，在瀏覽器的地址欄里面能獲取到用戶的信息。(如果不定義表單，那么它是無法提交數據的)

<form>

用戶名：<input name="user">

<button>提交</button>

</form>

屬性

• action:表示表單提交到的頁面(也就是要把數據傳入到哪個頁面中)

• method:表示表單的提交方式。默認是get。而get和post請求的區別就是post后面不跟請求體。也就是用戶信息。相對來說更加的安全。（一般來說，get是用于超鏈接提交居多，post用作表單提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示瀏覽器對發送給服務器的數據采用的編碼格式。有三種格式。默認是不能將文件上傳到服務器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于將文件上傳到服務器、text/plain不建議使用

• name:設置表單名稱，以便程序調用

• target:提交的目標，與超鏈接無異

• autocomplete:設置瀏覽器記錄用戶輸入的信息。分為on和off兩個值。默認為on。

• novalidate：設置是否執行客戶端數據有效性檢查

• input標簽：表示用來收集用戶輸入數據的控件。它默認會出現一個單行的文本框。

• type:文本框的類型。值為text時表示單行文本框；值為password表示密碼框；值為search時，除了火狐瀏覽器的其他瀏覽器外，會顯示一個叉來取消搜索內容，值為number時，表示只限于數字輸入；值為range時，生成一個數值范圍文本框；當type為date系列時，可以獲取日期和時間的值，有六種形態date、month、time、week、datetime、datetime-local；當值為color代表可以獲取不同的顏色；當值為checkbox、radio時表示復選框和單選。單選的name值必須一樣。checked表示默認勾選狀態值為img是表示產生一張圖片按鈕，后面可以接src,alt,width等熟悉值為email,tel,url時表示輸入電子郵件、電話和網址格式值為hidden時，生成一個隱藏控件（看不見，但提交的時候會顯示，一般用于關聯主鍵id提交）值為file的時候，表示上傳文件。accept屬性表示限制文件<input type="text">

音樂<input type="checkbox" checked>

體育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

• maxlength:設置文本框最大字符長度

• readonly:設置文本框為只讀狀態。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:設置文本框的寬度

• required:表明用戶必須輸入一個值，否則無法通過輸入驗證

• <input type="text" list="abc" required>

• autofocus:讓光標聚焦在某個input元素上，方便用戶直接輸入。<input name="user" autofocus>

• disabled:禁止input元素 （連點擊都不能）

• list：為文本框提供建議值

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

• value:默認在輸入框內出現的值

• form：與表單外的數據掛鉤一遍提交

<form id="register" name="reg" action="index.html">

用戶名：<input name="user">

<button>提交</button>

</form>

年齡：<input name="age" form="register">

• label標簽:把文字和input標簽包裹起來可以方便設置樣式，并且當用戶點擊文字的時候，光標會自動移入到對應的input框。（如果只是設置了文字用label包裹，又想點擊文字將標簽自動移入對應的框，可以將label的屬性for的值設置成與input的id設置成一樣）

<label for="user"> 用戶名：</label>

<input id="user" name="user">

• fieldset標簽:對表單進行編組。三個屬性name、form、disabled

• legend標簽：添加分組說明的標簽（也就是說給分組加上一個標題）

<fieldset>

<legend>注冊分組</legend>

<label for="user"> 用戶名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

• button標簽:創建一個按鈕。type屬性有三個值，submit表示提交，reset表示重置，也就是把input的值變成初始值。button表示一個普通的按鈕。

• select標簽：下拉列表。需要和option標簽配合使用。

• name屬性：設定提交時的名稱

• disabled屬性：將下拉列表禁用

• form屬性：將表單外部與內部掛鉤

• size屬性：下拉列表的個數

• multiple屬性：設置是否可以多選

• required:選擇驗證，必須選擇后才能通過

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是顯示到頁面的值-->

<option value="1">花花菇涼</option>

<option value="2">文小喵</option>

</select>

optgroup標簽:對列表進行分組選擇。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇涼</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="書">

<option value="4" selected>微微一笑很傾城</option>

<option value="5">神雕俠侶</option>

</optgroup>

</select>

<button>提交</button>

</form>

• textarea標簽:生成一個可變大小的多行文本框

<!--wrap表示是否插入換行符 有soft和hard兩種。hard提交之后在地址欄可以看見%插入的隱藏換行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

• pattern：正則表達式。開頭和結尾用^和$ novalidate屬性表示不要驗證該表單

<input type="text" placeholder="請輸入區號和座機" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html對網頁頁面的布局或者是表單驗證等功能都相對簡陋，并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下，還是要借助js或jqury等前端庫，來呈現豐富多彩的驗證效果。