收藏
批改狀態(tài)：未批改
老師批語：
1. 標題與段落
例如：h1，p
2. 文本修飾
例如：em，strong
3. 列表
例如：ul>li (無序) ， ol>li （有序） ,dl>li （定義）
4. 表格
例如：table>tr>td
5. 表單
例如：from>label>input
6. 圖片與媒體
例如：img , vedio
7. 布局標簽
8. 其它...
<!DOCTYPE html> <html lang="en"> <!-- HTML頭部標簽 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 頁面標題標簽 --> <title>HTML常用標簽總結</title> </head> <body> <!-- HTML常用的標簽 1. 標題與段落 <h1><h2><h3><h4><h5><h6>常用于修飾標題 <p>段落標簽，塊級元素 2. 文本修飾 3. 列表 4. 表格 5. 表單 6. 圖片與媒體 7. 布局標簽 8. 其它... --> <div> <h1>我是H1標簽</h1> <h2>我是H2標簽</h2> <h3>我是H3標簽</h3> <h4>我是H4標簽</h4> <h5>我是H5標簽</h5> <h6>我是H6標簽</h6> <p>我是段落P標簽</p> </div> <div> <hr> hr標簽是單標簽，一條水平線 <hr> </div> <div> <p><strong>我是文本加粗標簽strong</strong></p> <p><em>我是斜體標簽em</em></p> </div> <hr> <!-- 列表 --> <div> <!-- 無序列表 --> <h3>無序列表</h3> <ul> <li>我是無序列表的第一行</li> <li>我是無序列表的第二行</li> <li>我是無序列表的第三行</li> </ul> <!-- 有序列表 --> <ol> <li>我是有序列表的第一行</li> <li>我是有序列表的第三行</li> <li>我是有序列表的第二行</li> </ol> <!-- 定義列表 --> <dl> <dt>我是定義列表的dt標簽</dt> <dd>我是定義列表的dd標簽</dd> </dl> </div> <hr> <!-- 4. 表格 --> <table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>購物車</caption><!-- table里的標簽 --> <!-- 表頭 --> <thead> <tr bgcolor="lightblue"> <th>序號</th> <th>名稱</th> <th>價格</th> <th>數(shù)量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">暖手寶一個</td> <td align="center">30</td> <td align="center">1</td> <td align="center">被窩太冷</td> </tr> <!-- align="center"可以用到tr上再加方便 --> <tr align="center"> <td>2</td> <td>筆記本電腦一臺</td> <td>5000</td> <td>1</td> <td>學php編程</td> </tr> <tr align="center"> <td>3</td> <td>充氣娃娃一個(波波款)</td> <td>2000</td> <td>1</td> <td>孤枕難眠</td> </tr> </table> <hr> <!-- 5. 表單 --> <h2>用戶注冊</h2> <form action="" method="GET"> <!-- action為傳值的URl method為傳值方式（GET/POST） --> <div> <!-- 用戶名: --> <label for="username">用戶名:</label> <!-- name和value屬性應該成對出現(xiàn),將用戶數(shù)據(jù)以名值對的形式提交到服務器上指定腳本處理 --> <!-- placeholder: 用戶于設置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <!-- 可以將input控件寫在label里，可以不用做for，id綁定 --> <label> <!-- password類型,輸入的內(nèi)容以*號占位符代替 --> 密碼: <input type="password" name="password" value="" placeholder="必須包括字母數(shù)字大小寫" size="30"> </label> </div> <div> <label> 確認密碼: <input type="password" name="password" value="" placeholder="必須包括字母數(shù)字大小寫" size="30"> </label> </div> <div> <!-- 單選按鈕,每一組的name屬性值必須相同,才會只返回唯一值,并自動設置它的checked屬性 --> <!-- 可以事先用checked屬性設置默認選中值, 標簽文本與value值不必相同,value才是提交到后端的數(shù)據(jù) --> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!-- 復選框 --> <!-- 將提示文本全部放在label標簽中,確保點擊標簽文本,也可以選中對應的復選框 --> <!-- 一組復選框的name屬性必須是相同的, 應該使用數(shù)組的語法,因為可以同時選擇多個 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戲</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽煙</label> <!-- 同樣也是使用checked設置默認值,可同時設置多個 --> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">擼代碼</label> </div> <div> <!-- 下拉列表,name固定,但value是動態(tài)的,select中的value根據(jù)內(nèi)部的option選中狀態(tài)變化 --> <label for="edu">您的學歷:</label> <select name="" id="edu" value=""> <option value="1">幼兒園算嗎?</option> <!-- selected設置默認項 --> <option value="2" selected>小學沒畢業(yè)</option> <option value="3">不好意思,博士后</option> </select> </div> <!-- 文本域,其實就是多行文本框 --> <div> <label for="common">請留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超過100字" value=""></textarea> </div> <!-- 按鈕 --> <input type="submit" value="提交"> <!-- 重置功能極少用到,推薦不要再使用,而是通過其它方式 --> <input type="reset" value="重置"> <!-- 推薦使用語義化的button標簽 --> <!-- button默認類型為提交submit,通常是修改為button類型,最后通過ajax異步提交表單 --> <button type="button">注冊</button> </form> <!-- 6. 圖片與媒體 --> <div> <!-- 圖片標簽是單標簽,引入的是外部的資源 src="圖片地址", 支持本地和網(wǎng)絡url地址 alt="提示文本", 當圖片不能顯示或被用戶禁用時顯示它,seo優(yōu)化也會用到它 --> <img src="static/images/zly.jpg" alt="穎***" width="200"> <!-- 播放視頻:controls顯示播放控件, 支持寬度設置 --> <video src="static/images/demo.mp4" controls="controls" width="400"></video> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
上述代碼中設計的知識點總結：
1.HTML中的標簽類別
2.HTML中各種單雙標簽的使用示例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
