整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5的基本結(jié)構(gòu)和它的語法變化
HTML5的兼容性，它可以在老版本的瀏覽器上正常運(yùn)行。
HTML5的實(shí)用性，內(nèi)部沒有特別的復(fù)雜功能，只是封裝了一些常用的簡單功能。
HTML5的基本結(jié)構(gòu)，文檔的根元素依然是<html.../>,這個(gè)不變。在<html.../>元素里包含<head.../>和<body.../>兩個(gè)子元素。<head.../>元素主要定義HTML5的頁面頭，<title.../>元素用于定義頁面標(biāo)量，除了這些在<head.../>元素中定義meta、樣式單等信息；<body.../>元素用于定義頁面主體，包括頁面的文本內(nèi)容和大部分標(biāo)簽。
HTML5的語法變化
1、標(biāo)簽不再區(qū)分大小寫
在HTML5中如：<P>程序世界</p>元素的開始標(biāo)簽和結(jié)束標(biāo)簽大小寫不匹配，但是這符合HTML5的規(guī)范。
2、元素可以省略結(jié)束標(biāo)簽
HTML5非常寬容，它允許部分HTML元素省略標(biāo)簽，甚至允許同時(shí)省略開始標(biāo)簽和結(jié)束標(biāo)簽。具體來說有一下三種：
（1）空元素語法的元素：area base br col command embed hr img input keygen link mate param source wbr 。
這些空元素標(biāo)簽不允許將開始標(biāo)簽和結(jié)束標(biāo)簽分開定義。
（2）可以省略結(jié)束標(biāo)簽的元素：colgroup dt dd li optgroup option p rt rp thead tbody tfoot tr td th。
這種語法純屬向以前那些不規(guī)范的HTML頁面妥協(xié)。
（3）可以省略全部標(biāo)簽的元素：html head body tbody。
3、允許省略屬性值的屬性
XHTML要求所有元素的所有屬性名都應(yīng)該小寫，所有屬性都必須指定屬性值，不能簡寫，而且所有屬性值必須使用引號引起來。
HTML5相比起來比較松散，允許部分“標(biāo)志性”的屬性可以省略屬性值。當(dāng)然也支持那種嚴(yán)格的語法。
4、允許屬性值不使用引號
傳統(tǒng)的XHTML按XML規(guī)范對屬性值進(jìn)行要求，要求所有的屬性值都必須用引號引起來，但HTML5允許直接給出屬性值，即使不放在引號中也是正確的。
HTML（HyperText Markup Language，超文本標(biāo)記語言）是用來描述網(wǎng)頁的一種語言，它不是一種編程語言，而是一種標(biāo)記語言。
HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式，HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。
HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息，HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)。
由于HTML5只是在HTML的基礎(chǔ)上進(jìn)行了新增或者廢棄一些標(biāo)簽或者特性，本文默認(rèn)均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網(wǎng)頁的結(jié)構(gòu)，所以一些樣式和腳本方面的標(biāo)簽和屬性以及關(guān)于JavaScript部分的特性也不再提及，重點(diǎn)在于梳理常用標(biāo)簽體系。
現(xiàn)今瀏覽器的許多新功能都是從HTML5標(biāo)準(zhǔn)中發(fā)展而來的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發(fā)展策略調(diào)查，發(fā)現(xiàn)它們都支持HTML5上采取了措施。
（1）IE瀏覽器
2010年3月16日，微軟MIX10技術(shù)大會上宣布其推出的IE9瀏覽器已經(jīng)支持HTML5。同時(shí)還聲稱，隨后將會更多的支持HTML新標(biāo)準(zhǔn)和CSS3新特性。
（2）FireFox瀏覽器
2010年7月，Mozilla基金會發(fā)布了即將推出的Firefox4瀏覽器的第一個(gè)早期測試版，該版本中Firefox瀏覽器中進(jìn)行了大幅改進(jìn)，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，F(xiàn)irefox4對HTML5是完全級別的支持。目前，包括在線視頻，在線音頻在內(nèi)的多種應(yīng)用都已經(jīng)在版本中實(shí)現(xiàn)。
（3）Google瀏覽器
2010年2月19日，谷歌Gears項(xiàng)目經(jīng)理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項(xiàng)目的支持，以重點(diǎn)開發(fā)HTML5項(xiàng)目。據(jù)費(fèi)特表示，目前在谷歌看來，Gears應(yīng)用用于HTML5的諸多創(chuàng)新非常相似，并且谷歌一直積極發(fā)展HTML5項(xiàng)目。因此只要谷歌不斷以加強(qiáng)網(wǎng)絡(luò)標(biāo)準(zhǔn)的應(yīng)用功能為工作重點(diǎn)，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。
（4）Safari瀏覽器
2010年6月7日，蘋果在開發(fā)者發(fā)布會公布Safari5，這款瀏覽器支持10個(gè)以上的HTML5新技術(shù)，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗(yàn)證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera瀏覽器
2010年5月5日，Opera軟件公司首席技術(shù)官，號稱“CSS之父”的Hakon Wium Lie認(rèn)為，HTML5和CSS3，將會是全球互聯(lián)網(wǎng)發(fā)展的未來趨勢，包括目前Opera在內(nèi)的諸多瀏覽器廠商，紛紛研發(fā)HTML5的相關(guān)產(chǎn)品，web未來屬于HTML5。
綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進(jìn)，HTML5的時(shí)代即將來臨。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費(fèi)工具，安裝步驟都較為簡單，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
單標(biāo)簽：
<標(biāo)簽名 [屬性名=屬性值,...]>
成對標(biāo)簽：
<標(biāo)簽名 [屬性名=屬性值,...]></標(biāo)簽名>
<h1>這是一級標(biāo)題</h1>
<h2>這是二級標(biāo)題</h2>
<h3>這是三級標(biāo)題</h3>
<h4>這是四級標(biāo)題</h4>
<h5>這是五級標(biāo)題</h5>
<h6>這是六級標(biāo)題</h6>
<p>這是一個(gè)段落</p>
使用示例：
<a href="百度一下，你就知道">打開百度，你就知道！</a>
常見屬性：
屬
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
<td>單元格四</td>
</tr>
</table>
無序列表：
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
有序列表：
<ol>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
自定義列表：
<dl>
<dt>+</dt><dd>列表項(xiàng)</dd>
<dt>+</dt><dd>列表項(xiàng)</dd>
<dt>+</dt><dd>列表項(xiàng)</dd>
</dl>
<div>具體內(nèi)容</div>
<span>具體內(nèi)容</span>
常見標(biāo)簽：
基本布局：
常見標(biāo)簽：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">賬戶：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>請選擇你的愛好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="運(yùn)動">
<option value="籃球">籃球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="電子">
<option value="看電影">看電影</option>
<option value="看電視">看電視</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、單選框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、復(fù)選框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 Audio 標(biāo)簽。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 Video 標(biāo)簽。
</video>
水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計(jì)算機(jī)代碼</code>
<em>強(qiáng)調(diào)文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預(yù)格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯(lián)系信息</address>
<bdo>文字方向</bdo>
<blockquote>從另一個(gè)源引用的部分</blockquote>
<cite>工作的名稱</cite>
<del>刪除的文本</del>
<ins>插入的文本</ins>
<sub>下標(biāo)文本</sub>
<sup>上標(biāo)文本</sup>
HTML標(biāo)簽可以設(shè)置屬性，屬性總是以名稱/值對的形式出現(xiàn)，比如：name=“value”，它的主要作用是控制或修飾標(biāo)簽。
HTML事件可以觸發(fā)瀏覽器中的行為，比方說當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動一段 JavaScript。
由窗口觸發(fā)該事件 (同樣適用于 <body> 標(biāo)簽)：
表單事件在HTML表單中觸發(fā) (適用于所有 HTML 元素，但該HTML元素需在form表單內(nèi))：
通過鍵盤觸發(fā)事件，類似用戶的行為：
通過鼠標(biāo)觸發(fā)事件，類似用戶的行為：
通過視頻（videos），圖像（images）或音頻（audio） 觸發(fā)該事件，多應(yīng)用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
課件資料?騰訊文檔
TML5的語法變化
HTML5中，語法發(fā)生了很大的變化。或許有人會抱著異常驚訝和不安地問“HTML普及到何種程度”“根本的語法發(fā)生了變化，會有多大影響”。
只是，HTML5的“語法變化”和其他編程語言所謂的語法變更意義有所不同。為什么這么說呢？原因比較特殊，因?yàn)橐郧暗腍TML幾乎沒有遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器。
現(xiàn)有瀏覽器與規(guī)范背離
HTML的語法是在SGML（Standard Generalized Markup Language）語言的基礎(chǔ)上來規(guī)定的。但是由于SGML的語法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開發(fā)也不太容易，多數(shù)Web瀏覽器不作為SGML解析器運(yùn)行。由此，HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語法”，但實(shí)際情況卻是遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器幾乎不存在。
規(guī)范向?qū)崿F(xiàn)靠攏
如上所述，HTML5中提高Web瀏覽器間的兼容性是重大的目標(biāo)之一。要確保兼容性，必須消除規(guī)范與實(shí)現(xiàn)的背離。因此HTML5以近似現(xiàn)有的實(shí)現(xiàn)，重新定義了新的HTML語法，使規(guī)范向?qū)崿F(xiàn)靠攏。
由于文檔結(jié)構(gòu)解析的算法也有著詳細(xì)的記載，使得Web瀏覽器開發(fā)者可以專注于遵循規(guī)范去進(jìn)行實(shí)現(xiàn)工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已經(jīng)內(nèi)置了遵循HTML5規(guī)范的解析器。IE（Internet Explorer）和Opera也為了能夠提供更好的兼容性實(shí)現(xiàn)而緊鑼密鼓地努力著。
了解更多前端知識，可以點(diǎn)擊下方鏈接和小編一起學(xué)習(xí)喲~
「鏈接」
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
