生成H5文檔的快捷鍵：
①在空html文檔中輸入 ! ②按下tab鍵。
meta標簽使用實例
搜索引擎可以查找到的html元素
title（<title>元素不僅可以顯示文本，也可以在左側顯示logo等圖片。）
<meta> (標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。)
h1-h6
strong
em
：
空的 HTML 元素
沒有內容的 HTML 元素被稱為空元素?？赵厥窃陂_始標簽中關閉的。
就是沒有關閉標簽的空元素（
標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
條件注釋
您也許會在 HTML 中偶爾發(fā)現條件注釋：
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
條件注釋定義只有 Internet Explorer 執(zhí)行的 HTML 標簽。
<!-- 這是一個注釋 -->
HTML 水平線
<hr /> 標簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內容。
<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 折行
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用
標簽：
對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
HTML 格式化標簽
通常標簽 <strong> 替換加粗標簽 <b> 來使用, <em> 替換 <i>標簽使用。
然而，這些標簽的含義是不同的：
<b> 與<i> 定義粗體或斜體文本。
<strong> 或者 <em>意味著你要呈現的文本是重要的，所以要突出顯示?，F今所有主要瀏覽器都能渲染各種效果的字體。不過，未來瀏覽器可能會支持更好的渲染效果。
<b> 和 <strong> 有什么區(qū)別？應該用哪個？
b： 定義粗體文本。
em：把文本定義為強調的內容。
strong：把文本定義為語氣更強的強調的內容
<b>定義粗體文字</b><br/>
<em>把文本定義為強調的內容。</em><br/>
<strong>把文本定義為語氣更強的強調的內容</strong><br/>
塊級元素：
p,div,ul,ol,table,form
行級元素：
span,a,li,input,img
img:
<img src="url" />
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
<img> 標簽有兩個必需的屬性：[src 屬性]和 [alt 屬性]
title屬性是對圖片的描述與進一步說明。
總結：
1、含義不同：
img標簽alt屬性是當圖片不存在時或加載失敗時的替代文字（進行顯示）；img標簽title屬性是對圖片的描述與進一步說明。
2、在瀏覽器中的表現不同：
在FF、chrome和IE8+中，當鼠標經過圖片時title屬性的值會顯示，而alt屬性的值不會顯示；只有在IE6、IE7中，如果img標簽沒有寫title屬性，而寫了alt屬性的時候，alt屬性值會進行顯示；如果img寫了title屬性和alt屬性的時候，只會顯示title屬性值。
提示: 指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項 - 有用的提示：
一、假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
二、加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。
img應用實例
一、圖片對齊：
<h4>默認對齊的圖像 (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指的應該是鏈接區(qū)域在圖片中的坐標（像素為單位）
a鏈接
①圖片鏈接
<a >
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
②當前頁面鏈接到指定位置（書簽）
<p>
<a href="#C4">查看章節(jié) 4</a>
</p>
<h2>章節(jié) 1</h2>
<p>這邊顯示該章節(jié)的內容……</p>
<h2>章節(jié) 2</h2>
<p>這邊顯示該章節(jié)的內容……</p>
<h2>章節(jié) 3</h2>
<p>這邊顯示該章節(jié)的內容……</p>
<h2><a id="C4">章節(jié) 4</a></h2>
<p>這邊顯示該章節(jié)的內容……</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> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
eg:
<head>
<base target="_blank">
</head>
div和span的區(qū)別
1、<div> 元素是塊級元素，它可用于組合其他 HTML 元素的容器。
<span> 元素是內聯元素，可用作文本的容器。
span沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果span中出現div則不符合ws3c頁面標準。
2、<div> 元素和<span>元素都沒有特定的含義。但由于div屬于塊級元素，瀏覽器會在其前后顯示折行。
span元素前后不會換行,寬度由被包圍的內容寬度決定（不建議給span設置寬度屬性width，可以給span設置margin值，設置與父元素之前的距離。）
3、如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。
<div> 元素的一個常見的用途是文檔布局。（它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。）
當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
span可以通過css聲明（display:block）轉換為塊元素，想對一行中的文字或圖片單獨設置樣式，不需要換行的條件下又不影響其他行內內容，span可以很好解決這些問題。
網站布局
大多數網站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。
雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。
HTML<noscript> 標簽
<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容：
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
