2019-12-12 seo達人
一、HTML簡介
HTML 俗稱網頁，就是我們打開瀏覽器訪問任何一個網站所看到的都是由 HTML 頁面提供的（或者與 HTML 技術相關的內容提供）。
HTML 全稱為 HyperText Markup Language，被譯為超文本標記語言。所謂的超文本就是不僅只有文本內容，包括鏈接、音頻和視頻、圖像等內容。所謂標記語言，簡單來說就是元素。也就是說，HTML 提供一系列的元素來構成一個頁面中最基礎的內容。
HTML 是一種描述 Web 文檔結構和語義的語言，它由元素組成，每個元素可以有一些屬性或文本。
當你保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 文件后綴。
編寫HTML代碼的工具：
記事本
sublime text
hbuilder
webstorm
vscode
pycharm – python代碼 也可以寫html代碼
二、第一張網頁
一個頁面有且只有一個根標簽是html， 元素一般包含 和 兩個元素，也就是 HTML 的頭部和主體內容。
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
<!-- 這是一個文本框 -->
<input type="text"></input>
</body>
</html>
1
2
3
4
5
6
7
8
9
HTML標簽：由尖括號包圍：
成對出現： <p></p> ,即開標簽和閉標簽.
屬性： 定義在開標簽中，如input標簽中的type屬性
簡寫： 開閉標簽之間的內容是標簽體，如果標簽體為空，則可以簡寫：
注釋： 是注釋標簽
HTML文檔在瀏覽器中被解釋運行,展示的不是源碼而是渲染之后的效果
三、HTML頭部
< head > 元素包含了當前 HTML 頁面的所有頭部元素，在 < head > 元素內必須定義 < title > 元素，還可以定義 < script >、< link > 等元素。
這些 HTML 的頭部元素定義了當前頁面的標題、編碼、使用的腳本或樣式等信息。
1、title元素
< title >元素定義了當前HTML頁面的標題
<title>百度一下，你就知道</title>
1
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]
2、meta元素
元素提供了 HTML 頁面的元數據（Metadata），元數據是存儲數據的信息。
通常用于設置頁面的編碼、描述、關鍵詞、作者等信息。
元素不會顯示在頁面中，但會被瀏覽器解析。
2.1 定義網頁內容的編碼格式
<meta charset="utf-8">
1
2.2 定義HTML頁面關鍵字，用于搜索引擎
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
1
2.3 定義HTML頁面描述
<meta name="description" content="百知教育IT培訓,java培訓,PHP培訓,UI培訓,H5培訓,linux培訓,大數據培訓,Python人工智能,IT行業培訓領跑者,高薪就業 ">
1
2.4 定義HTML頁面作者
<meta name="author" content="百知教育">
1
四、HTML主體
1、body元素
標簽定義文檔的主體。 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等）。body元素中包含的內容（子標簽）是用戶可以看到的。
一個 HTML 文件只能存在一個 標簽。
2、HTML元素基本構成
2.1 元素類型
HTML 是標記語言，所謂標記就是指頁面中的元素（元素也可以叫做標簽）。一個完整的 HTML 頁面都是由眾多不同的元素組成的。
閉合元素：必須包含開始元素和結束元素，如果沒有結束元素會產生意料之外的錯誤。
<title>百知教育Python人工智能培訓</title>
<p>這是一個段落標簽</p> <!--該標簽的作用是表示一個段落，會有換行-->
1
2
空元素：也可以叫做單元素，只需要開始元素，而不需要結束元素。
<meta name="description" content="渥瑞達Web前端培訓">
<br/> <!-- 換行 -- >
1
2
3
2.2 HTML屬性
屬性是設置在HTML元素中的，用于為元素添加附加信息。屬性一般都是定義在開始元素中，并且是以“名稱/值”對出現
<input type="text" /> <!-- 這是一個文本框 -->
<input type="button" value="點我" /> <!-- 這是一個按鈕 -->
1
2
3
五、HTML文本
1、標題元素
HTML 提供了 6 個標題元素，由大到小依次為 <h1> 到 <h6>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
1
2
3
4
5
6
7
8
9
10
11
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]
2、段落
元素定義段落
: 瀏覽器會自動地在段落的前后添加空行 ```html
這是一個段落.
1
這是另一個段落.
注意： 在html中手動換行無效<br />
<br />
3、換行<br />
元素定義的段落內容是不會自動換行的，如果換行需要使用 br 元素<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平線<br />
在瀏覽器中顯示一條水平線（分隔線）效果。<br />
屬性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 顏色 寬度 對齊方式<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
<span style="white-space:pre;"> </span><hr size="1" width="100%" color="red"/><br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修飾<br />
5.1 粗體字<br />
這是一段正常未加粗的文本內容.<br />
<br><br />
<b>這是一段加粗之后的文本內容.</b><br />
<br><br />
<strong>粗體--著重強調</strong><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜體字<br />
<i>這是一段斜體的文本內容.</i><br />
1<br />
5.3 下劃線<br />
<body><br />
<span style="white-space:pre;"> </span>證明人：<u>百知教育</u><br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 刪除線<br />
<body><br />
<span style="white-space:pre;"> </span><del>這是一段要被刪除的文字</del><br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下標文字<br />
<body><br />
<span style="white-space:pre;"> </span>H<sub>2</sub>O<br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上標文字<br />
32 = 9<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小號字<br />
正常文字<br />
<small>小號文字</small><br />
1<br />
2<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大號字<br />
<body><br />
<span style="white-space:pre;"> </span><small>小號文字</small><br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span><big>大號文字</big><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、圖像與鏈接<br />
1、圖像元素<br />
元素引入外部圖像， 元素是空元素。<br />
<br />
1.1 src屬性<br />
<span style="white-space:pre;"> </span>src 屬性（必需），表示引入圖像的 URL 地址。<br />
<br />
<img src="images/img.png"><br />
1<br />
圖像可以是本地地址，也可以是網絡地址。<br />
<br />
<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"><br />
1<br />
1.2 圖像大小<br />
width 和 height 屬性用于設置圖像顯示的寬度和高度。<br />
<br />
<img src="img.png" width="350" height="233" /><br />
1<br />
1.3 圖像定位(了解)<br />
align 屬性用于設置圖像顯示的位置。<br />
<br />
left：水平方向居左。<br />
right：水平方向居右。<br />
top：垂直方向居上。<br />
bottom：垂直方向居下。<br />
middle：居中。<br />
<img src="img.png" width="350" height="233" align="right" /><br />
1<br />
1.4 alt屬性<br />
<img src="abcdef.png" alt="無法加載圖片"/><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超鏈接<br />
2.1 用法<br />
href 屬性（必需），表示指定跳轉的 URL 地址<br />
<br />
<a >百知教育</a><br />
1<br />
2.2 打開方式： target 屬性<br />
元素的 target 屬性用于設置鏈接的打開方式。<br />
<br />
_blank：在新窗口打開鏈接。<br />
_self：在當前窗口打開鏈接。<br />
<a target="_blank">百知教育</a><br />
1<br />
2.3 錨點<br />
<body><br />
<span style="white-space:pre;"> </span><a name="postion"></a> <!-- 定義錨點 --><br />
<span style="white-space:pre;"> </span><!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#postion">定位到postion的位置</a> <!-- 鏈接到錨點 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到頂部的空鏈接<br />
<body><br />
<span style="white-space:pre;"> </span><!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#">回到頂部</a> <!-- 回到頂部 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、無序列表<br />
1.1 定義無序列表<br />
元素定義無序列表，用于列出頁面上沒有特定次序的條目。<br />
<ul><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type屬性<br />
定義列表的項目符號的類型<br />
<br />
disc：實心圓，默認值。<br />
circle：空心圓。<br />
square：實心矩形。<br />
<ul type="circle"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定義有序列表<br />
<ol><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type屬性<br />
1：數字值，默認值。<br />
a 或 A：小寫或大寫字母。<br />
i 或 I：小寫或大寫羅馬數字。<br />
<ol type="a"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定義列表<br />
<dl><br />
<dt>北京</dt><br />
<dd>海淀</dd><br />
<dd>昌平</dd><br />
<dd>朝陽</dd><br />
<dt>廣東</dt><br />
<dd>廣州</dd><br />
<dd>深圳</dd><br />
<dd>東莞</dd><br />
</dl><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 < table > 標簽來定義。每個表格均有若干行（由 標簽定義），每行被分割為若干單元格（由 標簽定義）。<br />
<br />
<table><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格屬性<br />
屬性名稱<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>設置表格的寬度和高度<br />
align<span style="white-space:pre;"> </span>設置表格的對齊方式<br />
border<span style="white-space:pre;"> </span>設置表格的邊框寬度<br />
bgcolor<span style="white-space:pre;"> </span>設置表格的背景顏色<br />
cellpadding<span style="white-space:pre;"> </span>設置內邊距（單元格邊框與內容之間的距離）<br />
cellspacing<span style="white-space:pre;"> </span>設置外邊距（單元格之間的距離）<br />
bordercolor<span style="white-space:pre;"> </span>邊框顏色<br />
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右對齊方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直對齊方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景顏色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr align="center"><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr align="right" valign="top" bgcolor="blue"><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定義表格的數據單元格。<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>設置水平對齊方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>設置垂直對齊方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>設置單元格的寬和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>設置單元格的跨列和跨行數量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>單元格背景色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td align="center">第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td valign="top">第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td width="300px">第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td bgcolor='red'>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
<table border="1" cellspacing="0" width="500px" height="200px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td colspan="2">第2行，第1列</td><span style="white-space:pre;"> </span> <br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第3行，第1列</td><br />
<span style="white-space:pre;"> </span><td rowspan="2">第3行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第4行，第1列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格標題caption<br />
元素用于定義表格的標題，必須緊隨 元素之后，且只能對每個表格定義一個標題。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>表格標題</caption><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表頭thead、tbody表主體、tfoot表腳注<br />
標簽定義表格的表頭。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>信息</caption><br />
<span style="white-space:pre;"> </span><thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><th>姓名</th> <!-- 定義表頭單元格 會加粗顯示 --> <br />
<span style="white-space:pre;"> </span><th>性別</th><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span></thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Tom</td><br />
<span style="white-space:pre;"> </span><td>boy</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Linda</td><br />
<span style="white-space:pre;"> </span><td>girl</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素應該與 thead 和 tbody 元素結合起來使用。 （比較少用）<br />
<br />
九、表單<br />
1、form 元素<br />
表單用標簽描述，表單內部可以有多個子標簽，用來完成用戶信息的收集，并發送請求給服務器。<br />
<br />
屬性：action=“xxx” method=“get/post”<br />
<br />
請求地址 請求方式<br />
<br />
http://www.baidu.com?uname=abc&passwd=123<br />
<form action="http://www.baidu.com" method="get"><br />
<span style="white-space:pre;"> </span>username:<input type="text" name="uname" id="uname115"/><br/> # abc<br />
<span style="white-space:pre;"> </span>password:<input type="text" name="passwd" id="pwd115"/><br/> # 123<br />
<span style="white-space:pre;"> </span><input type="submit" value="提交" id="sub115"/><br />
</form><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表單元素<br />
元素有很多不同類型，根據不同的 type 屬性來決定。<br />
<br />
用戶名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type屬性：<br />
類型名稱<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本輸入框<br />
password<span style="white-space:pre;"> </span>密碼框<br />
radio<span style="white-space:pre;"> </span>單選按鈕<br />
checkbox<span style="white-space:pre;"> </span>復選框<br />
button<span style="white-space:pre;"> </span>按鈕<br />
submit<span style="white-space:pre;"> </span>提交按鈕<br />
reset<span style="white-space:pre;"> </span>重置按鈕<br />
file<span style="white-space:pre;"> </span>文件域<br />
name屬性 ：標簽的普通的屬性，相當于別名，是每個輸入控件的重要屬性==請求參數名。<br />
<br />
id屬性 ： 標簽的唯一標識名，不能重復。<br />
<br />
value屬性 ：標簽的普通屬性，是中藥屬性==請求參數值。<br />
<br />
2.1 文本框<br />
用戶名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用戶名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /><br />
1<br />
2.2 密碼框<br />
密碼：<input type="password" name="pwd" value="123456" /><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 單選按鈕<br />
<!-- name：值必須一樣，value：表示提交表單時的值 checked:默認選中--><br />
<input type="radio" name="sex" value="1">男 <br />
<input type="radio" name="sex" value="0" checked="checked">女<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 復選框<br />
<input type="checkbox" name="course" value="Mysql">Mysql<br />
<input type="checkbox" name="course" value="HTML">HTML<br />
<input type="checkbox" name="course" value="Linux">Linux<br />
<input type="checkbox" name="course" value="Django">Django<br />
1<br />
2<br />
3<br />
4<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按鈕<br />
<input type="button" name="btn" value="點我"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按鈕<br />
<input type="submit" name="sub_btn" value="提交"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按鈕<br />
<input type="reset" name="set_btn" value="重置"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
<input type="file"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉選框<br />
選擇課程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>®<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
ile"><br />
<br />
<br />
[外鏈圖片轉存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外鏈圖片轉存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉選框<br />
選擇課程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>®<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
<br />
<br />