Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
oundation 默認設置
Foundation 使用瀏覽器默認字體大小 (font-size:100%
)。對于大多數(shù)桌面設備的瀏覽器來說,字體大小默認為 16px。對于移動設備的瀏覽器,字體默認大小為 12px。 默認的字體為 "Helvetica Neue"
, line-height 默認為 1.5
。
這些設置是適用于 <body>
元素內(nèi)的元素。
此外, <p>
元素與底部的外邊距(margin-bottom) 為 1.25rem , line-height 為 1.6。
文本
以下的 HTML 元素,F(xiàn)oundation 設置了獨立的樣式渲染它,不會采用瀏覽器默認樣式。點擊 "嘗試一下" 查看在線實例。
元素 | 描述 | 在線實例 |
---|---|---|
<h1> - <h6> | h1 - h6 標題 | 嘗試一下 |
在 HTML 文檔中,標題很重要。
標題(Heading)是通過 <h1> - <h6> 標簽進行定義的。
<h1> 定義最大的標題。 <h6> 定義最小的標題。
實例
<h1>這是一個標題。</h1>
<h2>這是一個標題。</h2>
<h3>這是一個標題。</h3>
注釋: 瀏覽器會自動地在標題的前后添加空行。
請確保將 HTML 標題 標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。
搜索引擎使用標題為您的網(wǎng)頁的結構和內(nèi)容編制索引。
因為用戶可以通過標題來快速瀏覽您的網(wǎng)頁,所以用標題來呈現(xiàn)文檔結構是很重要的。
應該將 h1 用作主標題(最重要的),其后是 h2(次重要的),再其次是 h3,以此類推。
<hr> 標簽在 HTML 頁面中創(chuàng)建水平線。
hr 元素可用于分隔內(nèi)容。
實例
<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>
可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會忽略注釋,也不會顯示它們。
注釋寫法如下:
實例
<!-- 這是一個注釋 -->
注釋: 開始括號之后(左邊的括號)需要緊跟一個嘆號,結束括號之前(右邊的括號)不需要,合理地使用注釋可以對未來的代碼編輯工作產(chǎn)生幫助。
你是否看過一些網(wǎng)頁然后驚嘆它是如何實現(xiàn)的。
如果您想找到其中的奧秘,只需要單擊右鍵,然后選擇"查看源文件"(IE)或"查看頁面源代碼"(Firefox),其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面 HTML 代碼的窗口。
菜鳥教程的標簽參考手冊提供了有關這些標題及其屬性的更多信息。
您將在本教程下面的章節(jié)中學到更多有關 HTML 標簽和屬性的知識。
昨天我們在《使用HTML添加表格3(間距與顏色)——零基礎自學網(wǎng)頁制作》(目錄在結尾)中學習了設置單元格以及其中內(nèi)容的空間間距和背景顏色。
其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性,而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性,這樣操作起來就非常的麻煩,那有沒有簡便的修改行向單元格背景顏色的方法呢?
當然有!
開發(fā)團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題,下面讓我們詳細學習。
<colgroup></colgroup>標簽是一個給行向單元格打組的標簽,在頁面中不會顯示。
<col></col>標簽是來具體設置行向單元格數(shù)量和顏色的標簽。
示例代碼如下:
<colgroup><col span="1" style="background-color:#ff0000;"></col></colgroup>
這段代碼添加到"第一個頁面.html"當中就可以,具體代碼如下:
<!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>表格標題</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>
頁面效果如圖:
因為第一列和最后一列只有一行所以,也都變紅了。
其中span的數(shù)量代表行數(shù)。
如果把span等號后面的數(shù)改成2,因為表格只有兩行,所以整個表格都紅了。
表格嵌套
我們可以通過向表格中添加表格實現(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)容結束了。
全部示例代碼如下:
<!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>表格標題</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>
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
學到這里,相信大家已經(jīng)有獨立讀懂HTML代碼說明的能力了,明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話,學完16進制顏色表示方法后,基本上就可以無障礙的閱讀html代碼參考手冊了,如果閱讀起來還是有困難,請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章,已及html中特殊符號的輸入方法,全部做完后再結束這套教程。
如果您有任何疑問或不解歡迎關注并私信我。
HTML序章(學習目的、對象、基本概念)——零基礎自學網(wǎng)頁制作
HTML是什么?——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用?——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎自學網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。