Foundation CSS 參考手冊

oundation 默認(rèn)設(shè)置

Foundation 使用瀏覽器默認(rèn)字體大小 (font-size:100%)。對于大多數(shù)桌面設(shè)備的瀏覽器來說，字體大小默認(rèn)為 16px。對于移動設(shè)備的瀏覽器，字體默認(rèn)大小為 12px。默認(rèn)的字體為 "Helvetica Neue"， line-height 默認(rèn)為 1.5。

這些設(shè)置是適用于 <body> 元素內(nèi)的元素。

此外， <p> 元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。

文本

以下的 HTML 元素，F(xiàn)oundation 設(shè)置了獨(dú)立的樣式渲染它，不會采用瀏覽器默認(rèn)樣式。點(diǎn)擊 "嘗試一下" 查看在線實(shí)例。

元素	描述	在線實(shí)例
<h1> - <h6>	h1 - h6 標(biāo)題	嘗試一下

TML 標(biāo)題

在 HTML 文檔中，標(biāo)題很重要。

HTML 標(biāo)題

標(biāo)題（Heading）是通過 <h1> - <h6> 標(biāo)簽進(jìn)行定義的。

<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題。

實(shí)例

<h1>這是一個標(biāo)題。</h1>

<h2>這是一個標(biāo)題。</h2>

<h3>這是一個標(biāo)題。</h3>

注釋: 瀏覽器會自動地在標(biāo)題的前后添加空行。

標(biāo)題很重要

請確保將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題。不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題。

搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。

應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

HTML 水平線

<hr> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。

hr 元素可用于分隔內(nèi)容。

實(shí)例

<p>這是一個段落。</p>

<hr>

<p>這是一個段落。</p>

<hr>

<p>這是一個段落。</p>

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

注釋寫法如下:

實(shí)例

注釋: 開始括號之后（左邊的括號）需要緊跟一個嘆號，結(jié)束括號之前（右邊的括號）不需要，合理地使用注釋可以對未來的代碼編輯工作產(chǎn)生幫助。

HTML 提示 - 如何查看源代碼

你是否看過一些網(wǎng)頁然后驚嘆它是如何實(shí)現(xiàn)的。

如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇"查看源文件"（IE）或"查看頁面源代碼"（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面 HTML 代碼的窗口。

HTML 標(biāo)簽參考手冊

菜鳥教程的標(biāo)簽參考手冊提供了有關(guān)這些標(biāo)題及其屬性的更多信息。

您將在本教程下面的章節(jié)中學(xué)到更多有關(guān) HTML 標(biāo)簽和屬性的知識。

顏色設(shè)置的簡便方法

昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作》（目錄在結(jié)尾）中學(xué)習(xí)了設(shè)置單元格以及其中內(nèi)容的空間間距和背景顏色。

其中添加列向單元格背景顏色只需要修改對應(yīng)的<tr>標(biāo)簽中的style屬性，而修改行向標(biāo)簽需要修改不同<tr></tr>標(biāo)簽中的<td>標(biāo)簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？

當(dāng)然有！

開發(fā)團(tuán)隊(duì)給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細(xì)學(xué)習(xí)。

<colgroup></colgroup>標(biāo)簽是一個給行向單元格打組的標(biāo)簽，在頁面中不會顯示。

<col></col>標(biāo)簽是來具體設(shè)置行向單元格數(shù)量和顏色的標(biāo)簽。

示例代碼如下：

<colgroup><col span="1" style="background-color:#ff0000;"></col></colgroup>

這段代碼添加到"第一個頁面.html"當(dāng)中就可以，具體代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標(biāo)題</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

頁面效果如圖：

因?yàn)榈谝涣泻妥詈笠涣兄挥幸恍兴?，也都變紅了。

其中span的數(shù)量代表行數(shù)。

如果把span等號后面的數(shù)改成2，因?yàn)楸砀裰挥袃尚校哉麄€表格都紅了。

表格嵌套

我們可以通過向表格中添加表格實(shí)現(xiàn)表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

代碼示例如下：我們把"一列一行"分割成列向兩個單元格。

<tr><td><table border="1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border="1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

這段代碼替換文字"一列一行"即可。

頁面效果如圖所示：

留個思考題，大家可以思考一下行向分割單元格怎么寫。

今天的內(nèi)容結(jié)束了。

全部示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標(biāo)題</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

學(xué)到這里，相信大家已經(jīng)有獨(dú)立讀懂HTML代碼說明的能力了，明天我會為大家講解16進(jìn)制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎(chǔ)的話，學(xué)完16進(jìn)制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結(jié)束這套教程。

如果您有任何疑問或不解歡迎關(guān)注并私信我。

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在線咨詢

上一篇：HTML網(wǎng)頁中的圖形是如何對齊的？有什么方法可以使它
下一篇：echarts中餅狀圖數(shù)據(jù)太多進(jìn)行翻頁

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Foundation CSS 參考手冊

TML 標(biāo)題

HTML 標(biāo)題

標(biāo)題很重要

HTML 水平線

HTML 注釋

HTML 提示 - 如何查看源代碼

HTML 標(biāo)簽參考手冊

顏色設(shè)置的簡便方法

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求