Html使用(1)（摘抄自慕課）
1、語義化：明白標籤的用途（在什麼時候使用什麼標籤才合適）比如，網頁上的文章的標題就得用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。文章中內容的段落就得放在段落標籤中，在文章中有想強調的文字，就可以使用em標籤表示強調等等。
2、
使用span標籤為文字設定單獨樣式
這一小節講解<span>標籤，我們對<em>、<strong>、<span>這三個標籤進行一下總結：
1.<em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
2.<span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用
如果現在我們想把上一小節的第一段話“美國夢”三個字設定成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設定和其它文字不同的樣式（並不想讓螢幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標籤了。
如下面例子：
<p>1922年的春天，一個想要成名名叫<em>尼克卡拉威</em>（託比馬奎爾TobeyMaguire飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
語法：
<span>文字</span>
3、
q標籤，短文字引用
想在你的html中加一段引用嗎？比如在你的網頁的文章裡想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所需要的。
語法：
<q>引用文字</q>
如下面例子：
<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心託杜鵑。</q>開始的。雖然當時不知道是什麼意思，只是覺得詩句挺特別。後來才明白這個典故出自是莊子的《逍遙遊》，《逍遙遊》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的捨棄。</p>
講解：
1. 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心託杜鵑。
<q></q>實現引用。2. 注意要引用的文字不用加雙引號，瀏覽器會對q標籤自動新增雙引號。
下圖是程式碼顯示結果：
4、
blockquote標籤，長文字引用
<blockquote>的作用也是引用別人的文字。但它是對長文字的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。
等等，上一節<q>標籤不是也是對文字的引用嗎？不要忘記<q>標籤是對簡短文字的引用，比如說引用一句話就用到<q>標籤。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文字比較長，所以使用<blockquote>。
語法:
<blockquote>引用文字</blockquote>
如下面例子：
<blockquote>明月出天山，蒼茫雲海間。長風幾×××，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。</blockquote>
瀏覽器對<blockquote>標籤的解析是縮排樣式。如下圖所示：
5、
認識hr標籤，新增水平橫線
在資訊展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：
語法：
html4.01版本<hr>
xhtml1.0版本<hr />
注意：
1.<hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
2.<hr />標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
6、
想加入一行程式碼嗎？使用code標籤
在介紹語言技術的網站中，必免不了在網頁中顯示一些計算機專業的程式設計程式碼，當代碼為一行程式碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行程式碼時不能使用<code>標籤了。
語法：
<code>程式碼語言</code>
注：如果是多行程式碼，可以使用<pre>標籤。
7、使用pre標籤為你的網頁加入大段程式碼
在上節中介紹加入一行程式碼的標籤為<code>，但是在大多數情況下是需要加入大段程式碼的，如下圖：
怎麼辦？不會是每一程式碼都加入一個<code>標籤吧，沒有這麼複雜，這時候就可以使用<pre>標籤。
語法：
<pre>語言程式碼段</pre>
<pre> 標籤的主要作用:預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。
如下程式碼：
<pre>
varmessage="歡迎";
for(vari=1;i<=10;i++)
{
alert(message);
}
</pre>在瀏覽器中的顯示結果為：
在上面的例子中可以看到程式碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>籤，空格需要輸入
注意：<pre>標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。
8、
使用ul，新增新聞資訊列表
在瀏覽網頁時，你會發現網頁上有很多資訊的列表，如新聞列表、圖片列表，如下圖所示。
新聞列表
圖片列表
這些列表就可以使用ul-li標籤來完成。ul-li是沒有前後順序的資訊列表。
語法：
<ul> <li>資訊</li> <li>資訊</li> ...... </ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li> </ul>
ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點，如下圖所示：
9、
使用ol，新增圖書銷售排行榜
如果想在網頁中展示有前後順序的資訊列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類資訊展示就可以使用<ol>標籤來製作有序列表來展示。
語法：
<ol> <li>資訊</li> <li>資訊</li> ...... </ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li> </ol>
<ol>在網頁中顯示的預設樣式一般為：每項<li>前都自帶一個序號，序號預設從1開始，如下圖所示：
10、
table標籤---認識網頁上的表格
有時候我們需要在網頁上展示一些資料，如某公司想在網頁上展示公司的庫存清單。如下表：
想在網頁上展示上述表格效果可以使用以下程式碼：
建立表格的四個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完才會顯示。如右側程式碼編輯器中的程式碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中資料單元格的個數。
上述程式碼在瀏覽器中顯示的預設的樣式為：
總結：
1、table表格在沒有新增css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標籤中的文字預設為粗體並且居中顯示
11、
caption標籤，為表格新增標題和摘要
表格還是需要新增一些標籤進行優化，可以新增標題和摘要。程式碼如下：
摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。
語法：<table summary="表格簡介文字">
標題
用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table><caption>標題文字</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table>
轉載於:https://blog.51cto.com/1433189426/1565554