HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一、排版標簽
1、標題標簽
在新聞和文章的頁面中都離不開標題，用來突出顯示文章主題。
h系列標題
<body><h1>1級標題</h1> <h2>2級標題</h2><h3>3級標題</h3> <h4>4級標題</h4> <h5>5級標題</h5> <h6>6級標題</h6></body>1-6級標題，重要程度依次遞減，
文字都有加粗變大作用，并且從h1——h6逐漸減小
獨占一行
h1標簽對于網頁尤為重要，開發中有特定的使用場景，如：新聞標題，網頁的logo部分等。
2、段落標簽
在文章和新聞頁面中，用于分段顯示
<p>我是一段文字</p>
段落之間存在間隙，獨占一行
<h1>關雎</h1><p>關關雎鳩，在河之洲。窈窕淑女，君子好逑。參差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，輾轉反側。</p><p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p>3、換行標簽
<br>? ?讓文字強制換行顯示
<h1>關雎</h1> <p>關關雎鳩，在河之洲。窈窕淑女，君子好逑。<br>參差荇菜，左右流之。窈窕淑女，寤寐求之。<br>求之不得，寤寐思服。悠哉悠哉，輾轉反側。</p> <p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。<br>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p>4、水平線標簽
<hr>? 分割不同主題內容的水平線，單標簽，在頁面中顯示一條水平線
<h1>關雎</h1><hr> <p>關關雎鳩，在河之洲。窈窕淑女，君子好逑。</p><hr> <p>參差荇菜，左右流之。窈窕淑女，寤寐求之。</p><hr> <p>求之不得，寤寐思服。悠哉悠哉，輾轉反側。</p><hr> <p>參差荇菜，左右采之。窈窕淑女，琴瑟友之。</p><hr> <p>參差荇菜，左右芼之。窈窕淑女，鐘鼓樂之。</p><hr>5、文本格式化標簽
5.1標簽介紹
需要讓文字加粗、下劃線、傾斜、刪除線等效果
| 標簽 | 說明 |
| b | 加粗 |
| u | 下劃線 |
| i | 傾斜 |
| s | 刪除線 |
| 標簽 | 說明 |
| strong | 加粗 |
| ins | 下劃線 |
| em | 傾斜 |
| del | 刪除線 |
? ? ? ? ?
突出重要的強調語境
<b>加粗</b> <u>下劃線</u> <i>傾斜</i> <s>刪除線</s><br><strong>加粗</strong> <ins>下劃線</ins> <em>傾斜</em> <del>刪除線</del>5.2、標簽語義化
實際項目中選擇標簽的原則：標簽語義化
? ? ? ? 即：根據語義選擇正確的標簽
? ? ? ? 如：需要寫標題就用h系列的標簽
? ? ? ? ? ? ? 需要寫段落就用p標簽
? ? ? ? ? ? ? .......
好處：好理解，好記憶，有利于機器解析
推薦：strong 、ins 、em、 del ，表示的強調語義更強烈！
二、媒體標簽
1、圖片標簽
1.1在網頁中顯示圖片
<img src="路徑" alt="替換文本 "? title=" ">
屬性名：src
屬性值：目標圖片的路徑
當前網頁和目標圖片在同一個文件夾中，路徑直接寫目標圖片的名字即可（包括后綴名）
<img src="./4.jpg" alt="我是替換文本">屬性名：alt
屬性值：替換文本
當圖片加載失敗時才顯示alt的文本，加載成功則不顯示
<img src="./4.jpg" alt="我是替換文本" title="我是提示文本">屬性名：title
屬性值：提示文本
當鼠標懸停時才顯示的文本，title屬性不僅可以用于圖片標簽，還可以用于其他標簽
<h1 title="我是標題">我是1級標題</h1>1.2圖片標簽的width和height屬性
屬性名：width? ? height
屬性值：寬度? ? ?高度
如果只設置width? 或? height 中的一個，另一個沒設置的會自動等比例縮放（此時圖片不會變形）；
如果同時設置了width 和 height? 兩個，若設置不當則圖片可能會變形；
1.3路徑
頁面加載需要的圖片，需要先根據對應的地址路徑找到圖片
1.3.1絕對路徑
目錄下的絕對位置，可以直接到達目標位置，通常從盤符開始；
例如：
盤符開始：D:\DAY01\images\1.ipg
完整的網絡地址：http://www.itcast.cn/images/logo.gif
1.3.2相對路徑(常用)
當前文件：當前的html網頁
目標文件：要找到的圖片
相對路徑：從當前文件開始觸發尋找目標文件的過程
相對路徑分類：同級目錄、下級目錄、上級目錄
同級目錄：當前文件和目標文件在同一目錄中
類似于：我（當前文件）和你（目標文件）都在一個房間中
代碼步驟：直接寫目標文件的名字即可
? ? ? ? <img src="目標圖片.jpg">
? ? ? ? <img src="./目標圖片.jpg">
下級目錄：目標文件在下級目錄中
類似于：我在客廳，你去臥室，我要找到你
代碼步驟：先知道在哪個文件夾里面----文件夾名字
? ? ? ? ? ? ? ? 進入這個文件夾------/
? ? ? ? ? ? ? ? 此時看到目標文件直接喊-----直接寫目標文件的名字
上級目錄：目標文件在上級目錄中
類似于；我去臥室，而你還在客廳
代碼步驟：先出當前文件，到上一級目錄----? ?../?
? ? ? ? ? ? ? ? 此時看到目標文件直接喊-----直接寫目標文件
2.音頻標簽
<audio?src="./music.mp3"?controls></audio>
| 屬性名 | 功能 |
| src | 音頻的路徑 |
| controls | 顯示播放的控件 |
| autoplay | 自動播放（部分瀏覽器不支持） |
| loop | 循環播放 |
音頻標簽目前支持三種格式：MP3、Wav 、Ogg
3、視頻標簽
<video?src="./video.mp4"?controls></video>
| 屬性名 | 功能 |
| src | 視頻路徑 |
| controls | 顯示播放的控件 |
| autoplay | 自動播放（谷歌瀏覽器中需配合muted實現靜音播放） |
| loop | 循環播放 |
視頻標簽目前支持三種格式：MP4、WebM?、Ogg
4、鏈接標簽
點擊之后從一個頁面跳轉到另一個頁面
稱呼：a標簽、超鏈接、錨鏈接
<a?href="./目標網頁.html">超鏈接</a>
雙標簽，內部可以包裹內容
如果需要a標簽點擊之后去指定頁面，需要設置a標簽的href屬性
<a href="https://www.baidu.com">去百度</a>4.1?、屬性名：href
屬性值：點擊之后去跳轉到哪一個網頁（目標網頁的路徑）
外部鏈接：<a?href="http://www.baidu.com">去百度</a>
內部鏈接：<a?href="./目標網頁.html">目標網頁</a>
?顯示特點：a標簽默認文字有下劃線
? ? ? ? ? ? ? ? ?a標簽從未顯示過，默認文字顯示藍色
? ? ? ? ? ? ? ? ?a標簽點擊過之后，文字為紫色（清除瀏覽器歷史記錄可恢復藍色）
4.2、屬性：target
屬性值；目標網頁的打開形式
| 取值 | 效果 |
| _self | 默認值，在當前窗口中跳轉（覆蓋原網頁） |
| _blank | 在新窗口中跳轉（保留原網頁） |
4.3、空鏈接
<a?href="#">空鏈接</a>
功能：點擊之后回到網頁頂部；
? ? ? ? ? 開發中不確定該鏈接的最終跳轉位置，用空鏈接占個位置
三、列表標簽
1、無序列表 ul? ?li
在網頁中展示沒有順序之分
ul：表示無序列表的整體，用于包裹標簽；
li：表示無序列表中的每一項，用于包含每一行的內容；
顯示特點：列表的每一項前默認顯示原點標識；
注意：ul標簽中只允許包含li標簽，但li標簽中可以包含任意內容；
<h2>水果</h2><ul><li>蘋果</li><li>香蕉</li><li>梨</li><li>提子</li><li>哈密瓜</li></ul>2、有序列表? ?ol? li
在網頁中展示有順序之分,如排行榜
ol：表示有序列表的整體；
li：表示有序列表的每一項，用于包含每一項的內容；
顯示特點：列表的每一項前默認顯示序號標識；
注意：ol標簽中只允許包含li標簽，但li標簽中可以包含任意內容；
<h2>水果</h2><ol><li>蘋果</li><li>香蕉</li><li>梨</li><li>提子</li><li>哈密瓜</li></ol>3、自定義列表? dl? dt? dd
在網頁的底部導航中通常會使用自定義列表實現。
dl：表示自定義列表的整體，用于包裹dt/dd標簽；
dt：表示自定義列表的主題；
dd：表示自定義列表的針對主題的每一項內容；
顯示特點：dd前會默認顯示縮進效果
注意點：dl標簽中只允許包含dt/dd標簽；
? ? ? ? ? ? ? dt/dd標簽可以包含任意內容。
<dl><dt>水果</dt><dd>蘋果</dd><dd>香蕉</dd><dd>梨</dd><dd>提子</dd><dd>哈密瓜</dd></dl>四、表格標簽
1、表格的基本標簽? ? table? tr? td
在網頁中以行+列的單元格的方式整齊展示數據，如學生成績表
table：表格整體，可用于包裹多個tr
tr：表格每行，可用于包裹多個td
td：表格單元格，可用于包裹內容
標簽的嵌套關系：table > tr?> td
<table><tr><td>姓名</td><td>成績</td><td>評分</td></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>2、表格的相關屬性? border? ?width? height
設置表格基本展示效果
border：值為數字，代表邊框寬度；
width：值為數字，代表表格寬度；
height：值為數字，代表表格高度；
實際開發針對樣式效果推薦使用CSS設置
<table border="1" width="250" height="150"><tr><td>姓名</td><td>成績</td><td>評分</td></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>3、表格標題和表頭單元格標簽? caption? ?th
在表格中表示整體大標題和一列小標題
caption：表示表格整體大標題，默認在表格整體頂部居中的位置顯示；
th：表頭單元格，表示一列小標題，通常用于表格第一行，默認內部文字加粗并居中顯示；
注意點：caption標簽寫在table標簽內部；
? ? ? ? ? ? ? th標簽書寫在tr標簽內部（用于替換td標簽）
<table border="1" width="250" height="150"><caption><h3>成績表</h3></caption><tr><th>姓名</th><th>成績</th><th>評分</th></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>4、表格的結構標簽
讓表格的內容結構分組，突出表格的不同部分（頭部、主體、底部），使語義更加清晰；
thead：表格頭部
tbody：表格主體
tfoot：表格底部
表格結構標簽內部用于包裹tr標簽；表格的結構標簽可以省略。
<tbody><tr><th>姓名</th><th>成績</th><th>評分</th></tr></tbody>5、合并單元格
步驟：1、明確合并哪幾個單元格
? ? ? ? ? 2、通過左上原則，確定保留誰刪除誰
? ? ? ? ? ? ? ? 上下合并，只保留最上的，刪除其他
? ? ? ? ? ? ? ? 左右合并，只保留最左的，刪除其他
? ? ? ? 3、給保留的單元格設置：跨行合并（rowspan）或者跨列合并（colspan）
rowspan：合并單元格的個數，跨行合并，將多行的單元格垂直合并
colspan：合并單元格的個數，跨列合并，將多行的單元格水平合并
只有同一個結構標簽中的單元格才能合并，不能跨結構標簽合并。
<table border="1" width="250" height="150"><caption><h3>成績表</h3></caption><thead><tr><th>姓名</th><th>成績</th><th>評分</th></tr></thead><tr><td>張三</td><td rowspan="2">50</td><td>C</td></tr><tr><td>李四</td><td>B</td></tr><tr><td>王五</td><td colspan="2">100</td></tr></table>?五、表單標簽
1、input系列
在網頁中顯示收集用戶信息的表單效果，如：登錄頁、注冊頁
標簽名：input
input標簽可以根據type屬性值的不同，展示不同的效果
type屬性值：
| 標簽名 | type屬性值 | 說明 |
| input | text | 文本框。用于輸入單行文本 |
| input | password | 密碼框，用于輸入密碼 |
| input | radio | 單選框，用于多選一 |
| input | checkbox | 多選框，用于多選多 |
| input | file | 文件選擇，用于之后上傳文件 |
| input | submit | 提交按鈕，用于提交 |
| input | reset | 重置按鈕，用于重置 |
| input | button | 普通按鈕，默認無功能，之后配合js添加功能 |
1.1、文本框??
在網頁中顯示輸入單行文本的表單控件
type屬性值：text
placeholder：占位符，提示用戶輸入內容的文本；
1.2、value屬性和name屬性
value屬性：用戶輸入的內容，提交之后會發送給后端服務器；
name屬性：當前控件的含義，提交之后可以告訴后端發送過去的數據是什么含義；
后端接收數據的格式是：name的屬性值 = value的屬性值
1.3、密碼框
在網頁中顯示輸入密碼控件
type屬性值：password
placeholder：占位符，提示用戶輸入內容的文本；
1.4、單選框
在網頁中顯示多選一的單選表單控件
type屬性值：radio
name：分組，有相同name屬性值的單選框為一組，一組中同時只能有一個被選中；
checked：默認選中
1.5、多選框
在網頁中顯示多選多的多選表單控件
type屬性值：checkbox
checked：默認選中
1.6、文件選擇
在網頁中顯示選擇文件的表單控件
type屬性值：file
multiple：多文件選擇
1.7、按鈕
在網頁中顯示不同功能按鈕的表單控件
type屬性值：
submit：提交按鈕，點擊之后提交數據給后端服務器；
reset：重置按鈕，點擊之后恢復表單默認值；
button：普通按鈕，默認無功能，之后配合js添加功能；
注意：
如果需要實現以上按鈕功能，需要配合form標簽使用；
form使用方法：用form標簽把表單標簽統一包裹起來即可；
<form>昵稱：<input type="text" placeholder="請輸入你的昵稱"><br>密碼：<input type="password" placeholder="請輸入你的密碼"><br>性別：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>愛好：<input type="checkbox" checked>足球<input type="checkbox" checked>籃球<input type="checkbox">乒乓球<br><input type="file" multiple><br><input type="submit"><input type="reset"><input type="button" value="普通按鈕"></form>
2、button按鈕標簽
在網頁中顯示用戶點擊的按鈕
標簽名：button
type屬性值:
submit：提交按鈕，點擊之后提交數據給后端服務器；
reset：重置按鈕，點擊之后恢復表單默認值；
button：普通按鈕，默認無功能，之后配合js添加功能；
注意點：
谷歌瀏覽器中button默認是提交按鈕；
button是雙標簽，更便于包裹其他內容，如文字圖片等；
昵稱：<input type="text" placeholder="請輸入你的昵稱"><br><button type="submit">提交</button><br><button type="reset">重置</button><br><button type="button">普通按鈕</button>3、select下拉菜單標簽
在網頁中提供多個選擇項的下拉菜單表單控件
標簽組成：
select標簽：下拉菜單的整體；
option標簽：下拉菜單的每一項；
常見屬性：selected：下拉菜單的默認選中；
所在城市<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option></select>4、text area文本域標簽
在網頁中提供可輸入多行文本的表單控件
標簽名：textarea
常見屬性：
cols：規定了文本域內可見寬度；
rows：規定了文本域內可見行數；
注意點：右下角拖拽改變大小；
? ? ? ? ? ? ? 實際開發時針對樣式效果推薦使用CSS
<textarea cols="200" rows="10"></textarea>5、label標簽
用于綁定內容與表單標簽的關系
標簽名：label?
使用方法1：1）使用label標簽把內容（文本）包裹起來；
? ? ? ? ? ? ? ? 2）在表單標簽上添加id屬性；
? ? ? ? ? ? ? ? 3）在label標簽的for屬性中設置對應的id屬性值；
使用方法2：1）直接使用label標簽把內容（文本）和表單標簽一起包裹起來；
? ? ? ? ? ? ? ? 2）需要把label標簽的for屬性刪除即可；
愛好：<input type="checkbox" id="one" ><label for="one">足球</label><input type="checkbox" id="two" ><label for="two">籃球</label>愛好：<label><input type="checkbox">足球</label><label><input type="checkbox">籃球</label>六、語義化標簽
1、沒有語義的布局標簽
實際開發網頁時會大量頻繁的使用到 div 和 span 這兩個沒有語義的布局標簽；
div：一行只顯示一個（獨占一行）；
span：一行可以顯示多個；
<div>我是一個div</div><div>我是一個div</div><div>我是一個div</div><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>?2、有語義的布局標簽
| 標簽名 | 語義 |
| header | 網頁頭部 |
| nav | 網頁導航 |
| footer | 網頁底部 |
| aside | 網頁側邊欄 |
| section | 網頁區塊 |
| article | 網頁文章 |
以上標簽的顯示特點和 div 一致，但是比 div 多了不同的語義。
七、字符實體
能通過字符實體在網頁中顯示特殊符號
1、HTML中的空格合并現象
如果在HTML代碼中同時并列出現多個空格、換行、縮進等，最終瀏覽器只會解析出一個空格。
在網頁中展示特殊字符效果時，需要使用字符實體替代
結構：&英文
常見字符實體：
| 顯示結果 | 描述 | 實體名稱 |
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
八、綜合案例
1、優秀學生信息表格
<table border="1" width="300" height="150"><caption><h3>優秀學生信息表格</h3></caption><thead><tr><th>年級</tH><th>姓名</th><th>學號</th><th>班級</th></tr></thead><tbody height=300><tr><th rowspan="2">高三</th><th>張三</th><th>110</th><th>三年二班</th></tr><tr><th>趙四</th><th>120</th><th>三年三班</th></tr></tbody><tfoot><tr><th>評語</th><th colspan="3">優秀</th></tr></tfoot></table>2、會員注冊表單
<form><h1>青春不常在，抓緊談戀愛</h1><hr>昵稱：<input type="text" placeholder="請輸入昵稱"><br>性別：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>生日：<input type="date"><br>城市：<select><option>上海</option><option>北京</option><option>廣州</option><option>深圳</option></select><br>婚姻狀況：<input type="radio" name="marry" checked>未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">保密<br>興趣愛好：<label><input type="checkbox" checked>抽煙</label><label><input type="checkbox" checked>喝酒</label><label><input type="checkbox">燙頭</label><br>個人信息：<br><textarea cols="40" rows="5"></textarea><br><h2>我承諾</h2><ul><li>年滿18歲，單身</li><li>抱著嚴肅的心態</li><li>真誠尋找另一半</li></ul><input type="checkbox">我同意所有條款<br><input type="submit" value="免費注冊"><input type="reset"> </form>總結
以上是生活随笔為你收集整理的HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Linux系统中的安装cpolar内网
- 下一篇： 2017年html5行业报告,云适配发布