html參考手冊 —— 溫故而知新

HTML簡介

• HTML 不是一種編程語言,而是一種用來描述網(wǎng)頁的超文本標記語言 （ HyperText Markup Language）。
• HTML 使用標記標簽來描述網(wǎng)頁，HTML文檔即網(wǎng)頁（web 頁面）。

日常使用的Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）通過讀取HTML文件，并根據(jù)HTML標簽來決定如何顯示HTML頁面的內(nèi)容給用戶。

HTML元素

HTML 文檔由 HTML 元素定義。

• 元素的內(nèi)容是起始標簽（opening tag）與閉合標簽（closing tag）之間的內(nèi)容。
• 某些 HTML 元素具有空內(nèi)容（empty content），空元素在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）。
• 大多數(shù) HTML 元素可擁有屬性。

注意：
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
關(guān)閉空元素的正確方法是在開始標簽中添加斜杠，比如<br />，HTML、XHTML 和 XML 都接受這種方式。

HTML屬性

屬性是 HTML 元素提供的附加信息。

• HTML 標簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
• 屬性一般在開始標簽內(nèi)描述。
• 屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
• 屬性和屬性值對大小寫不敏感，但推薦使用小寫。

注意：
屬性值應該始終被包括在引號內(nèi)（單/雙引號都可以）。
但如果屬性值本身就含有雙引號，那么就必須使用單引號。
例如：name='Game "of" Throne'

HTML標題

• 因為用戶可以通過標題來快速瀏覽您的網(wǎng)頁，所以在 HTML 文檔結(jié)構(gòu)中，標題是很重要的。
• 請確保將 HTML 標題 <h1> - <h6> 標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。
• 搜索引擎使用標題為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。
• 1到6號標題與1到6號字體逆序?qū)热?號字體對應6號標題，2號字體對應5號標題。

HTML段落

段落標簽<p></p>可以把 HTML 文檔分割為若干段落。

• 瀏覽器會自動地在段落的前后添加空行。（</p> 是塊級元素）
• 如果希望在不產(chǎn)生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽。
• 在 HTML 代碼中，無法通過添加額外的空格或換行來改變輸出的效果。
• 當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被顯示為一個空格。

HTML樣式

style屬性用于改變 HTML 元素的樣式。

• 請避免使用這些被廢棄的標簽和屬性

• 對于以上這些標簽和屬性：請使用樣式代替！

HTML格式化

HTML 可定義很多供格式化輸出的元素，比如使用標簽 <b>("bold") 與 <i>("italic") 對輸出的文本進行格式, 如：粗體 or 斜體。
1. 文本格式化標簽：

<b> 定義粗體文本。<strong> 定義加重語氣。
<big> 定義大號字。 <small> 定義小號字。
<i> 定義斜體字。 <em> 定義著重文字。
<sup> 定義上標字。 <sub> 定義下標字。
<ins> 定義插入字。 <del> 定義刪除字。

<u>為文本添加下劃線。

• 通常標簽 <strong> 替換加粗標簽 <b> 來使用, <em> 替換 <i>標簽使用。
• 通常標簽<del>替換定義加刪除線的文本定義標簽 <s> 和 <strike>。

2. “計算機輸出”標簽：

<code>定義計算機代碼。<samp>定義計算機代碼樣本。
<kbd>定義鍵盤碼。 <tt>定義打字機代碼。
<var>定義變量。<pre>定義預格式文本。

• 被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。
• <listing>，<plaintext>，<xmp>不贊成使用，使用 <pre>代替。
• <pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

注意：

1. pre元素是塊級元素，但是只能包含文本或行內(nèi)元素。也就是說，任何常見的可以導致段落斷開的塊級元素標簽都不能位于pre元素中。
   eg: 標題 <p> <address> （<address> 元素中的文本通常呈現(xiàn)為斜體,而且大多數(shù)瀏覽器會在 <address >元素前后添加折行）
2. pre元素中允許的文本可以包含物理樣式和基于內(nèi)容的樣式變化（W3C的HTML 教程延伸閱讀：改變文本的外觀和含義），還有<a>鏈接、<img>圖像和<hr />水平分隔線。當把其他標簽，比如<a>標簽放到<pre>塊中時，就像放在HTML/XHTML文檔的其他部分中一樣即可。
3. 制表符tab在<pre>標簽定義的塊當中可以起到應有的作用，每個制表符占據(jù)8個字符的位置，但并不推薦使用tab，因為在不同的瀏覽器中，tab的表現(xiàn)形式各不相同。在用<pre>標簽格式化的文檔段中使用空格，可以確保文本正確的水平位置。
4. 如果您希望使用 <pre> 標簽來定義計算機源代碼，比如 HTML 源代碼，請使用符號實體來表示特殊字符，比如 "& lt;" 代表 "<"，"& gt;" 代表 ">"，"& amp;" 代表 "&"。 一般將<pre>標簽與<code>標簽結(jié)合起來使用，以獲得更加精確的語義，用于標記頁面中需要呈現(xiàn)的源代碼。

文本顯示格式筆記：
頁面顯示結(jié)果：文本顯示為單行，超過部分···

html結(jié)構(gòu)：
 <div> 
   文本顯示為單行,超過部分隱藏并使用省略號
   修改 width 屬性查看效果。
 </div>


css樣式：
div {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:200px;
}

頁面顯示結(jié)果：

文本顯示為兩
行,超過部分···

html結(jié)構(gòu)：
 <div> 
   文本顯示為兩行,超過部分隱藏并使用省略號修改 width 屬性查看效果。使用 display:-webkit-box; 讓文本顯示為多行(只有-webkit內(nèi)核才有作用)。
 </div>

css樣式：
div {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  width:100px;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}