、 利用meta標簽

Meta標簽主要用來描述一個HTML網頁文檔的屬性，如作者、日期時間、網頁描述、關鍵詞、頁面刷新等，它的Description和Keywords屬性，可加入網站的關鍵字，讓網頁利于搜索引擎。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解釋：Viewport指用戶網頁的可視區域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴展，頁面不可縮放。

以上標簽只支持一種尺寸，正確的做法是用js動態生成下面標簽，前提是要先獲取屏幕尺寸。

<script type="text/javascript">

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相對于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡單的頁面，復雜的頁面實現很困難。

3、 使用CSS3單位rem

在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請自行查閱），假設寬度為W，一個div在寬度為640px的設計稿的下的寬度為dW1，如果html的font-size為100px，那么這個div的寬度用rem表示是多少呢？

計算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設置一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會在頭部加上這個JS代碼：

<script type="text/javascript">

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、 媒體查詢

媒體查詢正是為解決網頁適應手機屏幕。媒體查詢的功能就是為不同的“媒體”設置不同的css樣式，頁面尺寸，設備屏幕尺寸等，比如我們要為寬度小于480px的頁面中的class="icon"的元素設置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應頁面需要比較好的編程基礎和技術覺悟，一般的小白，不建議大家為了做自適應網頁專門學習HTML5、CSS3和JS，畢竟這并非一朝一夕就能學會的。如果技術小白想做自適應網頁，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎，全程拖拽，一樣能做出讓人驚艷的自適應網站。現在還有免費建站活動，無論外行內行，大家可以注冊體驗一下。

零基礎免費做HTML5自適應網站：http://www.iisp.com/design/free-site.php?s=yuqiuping

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

一、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等前端庫，來呈現豐富多彩的驗證效果。