生成H5文檔的快捷鍵：
①在空html文檔中輸入 ! ②按下tab鍵。
meta標(biāo)簽使用實例
搜索引擎可以查找到的html元素
title（<title>元素不僅可以顯示文本，也可以在左側(cè)顯示logo等圖片。）
<meta> (標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。)
h1-h6
strong
em
：
空的 HTML 元素
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
就是沒有關(guān)閉標(biāo)簽的空元素（
標(biāo)簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠(yuǎn)的保障。
條件注釋
您也許會在 HTML 中偶爾發(fā)現(xiàn)條件注釋：
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
條件注釋定義只有 Internet Explorer 執(zhí)行的 HTML 標(biāo)簽。
<!-- 這是一個注釋 -->
HTML 水平線
<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<hr />
<p>This is a pargarph</p>
<p>This is another pargarph</p>
效果如下圖：
HTML 折行
如果您希望在不產(chǎn)生一個新段落的情況下進行換行（新行），請使用
標(biāo)簽：
對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
HTML 格式化標(biāo)簽
通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來使用, <em> 替換 <i>標(biāo)簽使用。
然而，這些標(biāo)簽的含義是不同的：
<b> 與<i> 定義粗體或斜體文本。
<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過，未來瀏覽器可能會支持更好的渲染效果。
<b> 和 <strong> 有什么區(qū)別？應(yīng)該用哪個？
b： 定義粗體文本。
em：把文本定義為強調(diào)的內(nèi)容。
strong：把文本定義為語氣更強的強調(diào)的內(nèi)容
<b>定義粗體文字</b><br/>
<em>把文本定義為強調(diào)的內(nèi)容。</em><br/>
<strong>把文本定義為語氣更強的強調(diào)的內(nèi)容</strong><br/>
塊級元素：
p,div,ul,ol,table,form
行級元素：
span,a,li,input,img
img:
<img src="url" />
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
<img> 標(biāo)簽有兩個必需的屬性：[src 屬性]和 [alt 屬性]
title屬性是對圖片的描述與進一步說明。
總結(jié)：
1、含義不同：
img標(biāo)簽alt屬性是當(dāng)圖片不存在時或加載失敗時的替代文字（進行顯示）；img標(biāo)簽title屬性是對圖片的描述與進一步說明。
2、在瀏覽器中的表現(xiàn)不同：
在FF、chrome和IE8+中，當(dāng)鼠標(biāo)經(jīng)過圖片時title屬性的值會顯示，而alt屬性的值不會顯示；只有在IE6、IE7中，如果img標(biāo)簽沒有寫title屬性，而寫了alt屬性的時候，alt屬性值會進行顯示；如果img寫了title屬性和alt屬性的時候，只會顯示title屬性值。
提示: 指定圖像的高度和寬度是一個很好的習(xí)慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項 - 有用的提示：
一、假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
二、加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無法加載圖片，圖像標(biāo)簽就會顯示一個破碎的圖片。
img應(yīng)用實例
一、圖片對齊：
<h4>默認(rèn)對齊的圖像 (align="bottom"):</h4>
<p>這是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 這是一些文本。</p>
<h4>圖片使用 align="middle":</h4>
<p>這是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">這是一些文本。</p>
<h4>圖片使用 align="top":</h4>
<p>這是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">這是一些文本。</p>
<p><b>注意:</b>在HTML 4中 align 屬性已廢棄，HTML5 已不支持該屬性，可以使用 CSS 代替。</p>
align="bottom"
align="middle"
align="top"
（在HTML 4中 align 屬性已廢棄，HTML5 已不支持該屬性，可以使用 CSS 代替。）
二、圖片浮動
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的左邊。
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的右邊。
</p>
<p><b>注意:</b> 在這里我們使用了 CSS float 屬性，在HTML 4 中 float 屬性已廢棄，HTML5 已不支持該屬性，可以使用 CSS 代替。</p>
三、圖片鏈接
<p>創(chuàng)建圖像鏈接:
<a >
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<p>無邊框的圖片鏈接:
<a >
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
四、圖像映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
該段代碼中的shape指的是點擊區(qū)域的形狀，coords指的應(yīng)該是鏈接區(qū)域在圖片中的坐標(biāo)（像素為單位）
a鏈接
①圖片鏈接
<a >
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
②當(dāng)前頁面鏈接到指定位置（書簽）
<p>
<a href="#C4">查看章節(jié) 4</a>
</p>
<h2>章節(jié) 1</h2>
<p>這邊顯示該章節(jié)的內(nèi)容……</p>
<h2>章節(jié) 2</h2>
<p>這邊顯示該章節(jié)的內(nèi)容……</p>
<h2>章節(jié) 3</h2>
<p>這邊顯示該章節(jié)的內(nèi)容……</p>
<h2><a id="C4">章節(jié) 4</a></h2>
<p>這邊顯示該章節(jié)的內(nèi)容……</p>
③跳出框架
<a target="_top">點擊這里!</a>
④創(chuàng)建電子郵件鏈接
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
發(fā)送郵件</a>
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">發(fā)送郵件!</a>
單詞之間空格使用 %20 代替，以確保瀏覽器可以正常顯示文本。
<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:
eg:
<head>
<base target="_blank">
</head>
div和span的區(qū)別
1、<div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
span沒有結(jié)構(gòu)上的意義，只是單純的應(yīng)用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果span中出現(xiàn)div則不符合ws3c頁面標(biāo)準(zhǔn)。
2、<div> 元素和<span>元素都沒有特定的含義。但由于div屬于塊級元素，瀏覽器會在其前后顯示折行。
span元素前后不會換行,寬度由被包圍的內(nèi)容寬度決定（不建議給span設(shè)置寬度屬性width，可以給span設(shè)置margin值，設(shè)置與父元素之前的距離。）
3、如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的一個常見的用途是文檔布局。（它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。）
當(dāng)與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。
span可以通過css聲明（display:block）轉(zhuǎn)換為塊元素，想對一行中的文字或圖片單獨設(shè)置樣式，不需要換行的條件下又不影響其他行內(nèi)內(nèi)容，span可以很好解決這些問題。
網(wǎng)站布局
大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。
雖然我們可以使用HTML table標(biāo)簽來設(shè)計出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。
HTML<noscript> 標(biāo)簽
<noscript> 標(biāo)簽提供無法使用腳本時的替代內(nèi)容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內(nèi)容：
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
