整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
雙標簽：就是成對出現的，類似于這種 <html> </html>
單標簽：就是可以單個使用的，類似于 <br> 換行標簽 或 <hr>水平線標簽。
標簽的屬性是用來定義文字或字符的 顏色、寬高、粗細、大小、等，這個是標簽屬性的作用。
1、每一個標簽都有自己的屬性，單標簽和雙標簽都有。
2、一個標簽可以有多個屬性。
3、每個屬性都有對應的值，值要用單或雙引號引起來。
4、多個屬性之間使用空格隔開。
5、屬性沒有順序之分。
6、字體屬性值，必須是系統可以識別的字體，一般為系統自帶字體。
7、HTML5 中 font 屬性已經棄用。
源代碼：↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>中央氣象局</title>
</head>
<body>
<!--水平線的寬度是500像素，這個width就是標簽屬性-->
<hr width="500">
<!--下面這個是多個標簽屬性，多個屬性之間用空格隔開-->
<font color="red" face="黑體" size="7">標簽屬性</font>
</body>
</html>
通過為<table></table>標簽的cellspacing進行賦值可以調整單元格與單元格之間的空間距離。
示例代碼如下：
<table border = "1" width = "100%" cellspacing = "50">頁面效果如下：
下面我們刪除cellspacing = "50"這段代碼看看變化，如圖：
通過對比，大家應該明白cellspacing這個屬性的作用了吧。
通過為<table></table>標簽的cellpadding進行賦值可以調整單元格邊框與單元格內容之間的空間距離。
示例代碼如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">頁面效果如下：
通過與上圖對比，我們不難發現變化。
設置表格顏色
這里我們要介紹一個全局屬性style，對，你沒看錯！就是freestyle的那個style！英文翻譯過來是"樣式"、"風格"的意思。我們通過這個屬性可以為表格設置顏色。實際上，可以為任何html元素設置顏色、大小、排列等不同屬性！
值得一提的是把style信息如果寫到一個獨立文件中，并保存為css文件，就是以后我們要學的CSS層疊樣式列表了。
這里我們先來簡單了解一下它作為html的一個全局屬性的用法。
示例代碼如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">頁面效果如圖所示：
我們來分析一下這段代碼，寫法和其他屬性大同小異。
首先也是才有"屬性"="數值"的寫法，具體是：style=""
是不是和其他屬性寫法一樣？
但是到了雙引號里面就不同了，比如width屬性只需要為其賦值就可以，比如width="100%"。
而style是在雙引號里面再指定屬性。例如：style="background-color"。
然后我們再為background-color（背景顏色）屬性賦值。
這時，賦值的寫法就發生變化了，不是使用=號，而是使用：。
例如style="background-color ： #00ffff；"
大家注意的是為其賦值后，要用；結尾。這個；必須要添加，因為，通過style可以指定多個不同的樣式屬性，在指定多個樣式屬性時，我們使用；分割。
#00ffff這個符號是色彩的16進制表示方法，這個顏色是藍色。
#000000這個符號的顏色是黑色。
#ffffff這個符號是白色。
這個顏色的算法我們會在下一期中詳細講解，感興趣的小伙伴請關注！
大家想一想。如何為一列單元格指定背景顏色呢？
示例代碼如下：我們為表格標題欄賦予綠色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>頁面效果如圖所示：
下面我們為"一列一行"、"二列一行"賦予紅色。
示例代碼如下：
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>頁面效果如下：
今天的內容到此結束了，一下是今天示例的全部代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格標題</caption>
<tr style = "background-color: #00ff00;">
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>明天將繼續為大家講解頁面制作中16進制的顏色指定方式和另外一種表格顏色指定方式。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。
div標記定義了HTML文件中的一個部分或分區。它通常包含需要組合在一起的標題、段落、表格或其他元素。通過設置<div class="">與css一起使用來設置網頁某個部分的顯示。
p標記用來定義文本的段落，就像你在書中看到的那樣，一旦文本達到屏幕邊緣就會自動折到下一行。當另一個<p>標記用于開始下一個段落時，瀏覽器將在段落之間添加一些空白。p標記具有以下屬性：
span標記用于將內聯元素組合在一起，例如句子中的幾個單詞，以便僅對這些單詞應用css樣式。span標記可以在div和p標記中使用，因為它不會創建新的塊。
br標記相當于一個回車符，用于在新行開始文本。一行中的多個<br>標記將在網頁上創建一個很大的垂直空間。
hr標記通常被稱為HTML行分隔符標記，創建一條通常用于視覺上分隔頁面的水平線。它具有以下屬性：
出于某種原因，你希望文本在一條直線上繼續，而不是在屏幕的邊緣換行，可以使用nobr。注意：這將迫使用戶向右滾動以查看行的其余部分，這是一種糟糕的設計。
下面是以上標記的示例：
瀏覽器顯示內容如下所示：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
