2022黑马程序员-前端学习第一阶段（Day02-HTML基础）
HTML基礎(chǔ)-Day02 學(xué)習(xí)筆記打卡
- HTML基礎(chǔ)
- 列表標(biāo)簽（無序列表、有序列表、自定義列表）
- 列表的應(yīng)用場景
- 無序列表
- 有序列表
- 自定義列表
- 表格標(biāo)簽
- 表格基本標(biāo)簽
- 表格相關(guān)屬性
- 表格標(biāo)題和表頭單元格標(biāo)簽
- 表格的結(jié)構(gòu)標(biāo)簽（了解）
- 合并單元格
- 思路
- 步驟
- 表單標(biāo)簽
- input系列標(biāo)簽的基本介紹
- 標(biāo)簽名: input
- 文本框 text && password
- （拓展）value屬性和name屬性作用介紹
- 單選框（radio）
- 復(fù)選框（checkbox）
- 文件選擇 （file）
- 按鈕（button）
- button按鈕標(biāo)簽
- select下拉菜單標(biāo)簽
- textarea文本域標(biāo)簽
- label標(biāo)簽
- 語義化標(biāo)簽
- 沒有語義的布局標(biāo)簽
- 有語義的布局標(biāo)簽（了解）
- 字符實(shí)體
- HTML中的空格合并現(xiàn)象
- 常見字符實(shí)體
- 綜合案例代碼示例
學(xué)習(xí)視頻B站：黑馬程序員-前端學(xué)習(xí)（第一階段）
HTML基礎(chǔ)
列表標(biāo)簽（無序列表、有序列表、自定義列表）
列表的應(yīng)用場景
場景： 在網(wǎng)頁中按照行展示關(guān)聯(lián)性的內(nèi)容，如：新聞列表、排行榜、賬單等
特點(diǎn)： 按照行的方式，整齊顯示內(nèi)容
種類： 無序列表、有序列表、自定義列表
無序列表
場景： 在網(wǎng)頁中表示一組無順序之分的列表，如：新聞列表。
標(biāo)簽組成：
| ul | 表示無序列表的整體，用于包裹li標(biāo)簽 |
| li | 表示無序列表的每一項，用于包含每一行的內(nèi)容 |
顯示特點(diǎn)：
? 列表的每一項前默認(rèn)顯示圓點(diǎn)標(biāo)識
注意點(diǎn)：
? ul標(biāo)簽中只允許包含li標(biāo)簽
? li標(biāo)簽可以包含任意內(nèi)容
有序列表
場景： 在網(wǎng)頁中表示一組有順序之分的列表，如：排行榜。
標(biāo)簽組成：
| ol | 表示有序列表的整體，用于包裹li標(biāo)簽 |
| li | 表示有序列表的每一項，用于包含每一行的內(nèi)容 |
顯示特點(diǎn)：
? 列表的每一項前默認(rèn)顯示序號標(biāo)識
注意點(diǎn)：
? ol標(biāo)簽中只允許包含li標(biāo)簽
? li標(biāo)簽可以包含任意內(nèi)容
自定義列表
場景： 在網(wǎng)頁的底部導(dǎo)航中通常會使用自定義列表實(shí)現(xiàn)。
標(biāo)簽組成：
| dl | 表示自定義列表的整體，用于包裹dt/dd標(biāo)簽 |
| dt | 表示自定義列表的主題 |
| dd | 表示自定義列表針對主題的每一項內(nèi)容 |
顯示特點(diǎn)：
? dd前會默認(rèn)顯示縮進(jìn)效果
注意點(diǎn)：
? dl標(biāo)簽中只允許包含dt/dd標(biāo)簽
? dt/dd標(biāo)簽可以包含任意內(nèi)
表格標(biāo)簽
表格基本標(biāo)簽
1.表格基本標(biāo)簽:table> tr >td
表格相關(guān)屬性
| border | 數(shù)字 | 邊框?qū)挾?/td> |
| width | 數(shù)字 | 表格寬度 |
| height | 數(shù)字 | 表格高度 |
注意點(diǎn)：
實(shí)際開發(fā)時針對于樣式效果推薦用CSS設(shè)置
表格標(biāo)題和表頭單元格標(biāo)簽
2.表格標(biāo)題和表頭單元格標(biāo)簽：table > caption + tr > th
| caption | 表格大標(biāo)題 | 表示表格整體大標(biāo)題，默認(rèn)在表格頂部居中位置顯示 |
| th | 表格單元格 | 表示一列小標(biāo)題，通常用于表格第一行，默認(rèn)內(nèi)部文字加粗并居中顯示 |
注意點(diǎn)：
? caption標(biāo)簽書寫在table標(biāo)簽內(nèi)部
? th標(biāo)簽書寫在tr標(biāo)簽內(nèi)部（用于替換td標(biāo)簽）
表格的結(jié)構(gòu)標(biāo)簽（了解）
3.表格結(jié)構(gòu)標(biāo)簽：table > thead > tr > td
| thead | 表格頭部 |
| tbody | 表格主體 |
| tfoot | 表格底部 |
合并單元格
思路
效果圖：
步驟
? 上下合并→只保留最上的，刪除其他
? 左右合并→只保留最左的，刪除其他
| rowspan | 合并單元格的個數(shù) | 跨行合并，將多行的單元垂直合并 |
| colspan | 合并單元格的個數(shù) | 跨列合并，將多列的單元水平合并 |
效果圖：
表單標(biāo)簽
input系列標(biāo)簽的基本介紹
標(biāo)簽名: input
? input標(biāo)簽可以通過type屬性值的不同，展示不同效果 type屬性值：
| input | text | 文本框，用于輸入單行文本 |
| input | password | 密碼框，用于輸入密碼 |
| input | radio | 單選框，用于多選一 |
| input | checkbox | 多選框，用于多選多 |
| input | file | 文本選擇，用于之后上傳文件 |
| input | submit | 提交按鈕，用于提交 |
| input | reset | 重置按鈕，用于重置 |
| input | button | 普通按鈕，默認(rèn)無功能，之后配合js添加功能 |
文本框 text && password
屬性：text
屬性: password
| placeholder | 占位符。提示用戶輸入內(nèi)容的文本 |
（拓展）value屬性和name屬性作用介紹
單選框（radio）
| name | 分組。有相同那么屬性值的單選框?yàn)橐唤M，一組中同時只能有一個被選中 |
| checked | 默認(rèn)選中 |
注意點(diǎn)：
? name屬性對于單選框有分組功能
? 有相同name屬性值的單選框?yàn)橐唤M，一組中只能同時有一個被選中
復(fù)選框（checkbox）
| checked | 默認(rèn)選中 |
文件選擇 （file）
| multiple | 多文件選擇 |
按鈕（button）
type屬性值：
| input | submit | 提交按鈕，點(diǎn)擊后提交數(shù)據(jù)給后端服務(wù)器 |
| input | reset | 重置按鈕，點(diǎn)擊后恢復(fù)表單默認(rèn)值 |
| input | button | 普通按鈕，默認(rèn)無功能，之后配合js添加功能 |
注意點(diǎn)：
? 如果需要實(shí)現(xiàn)以上按鈕功能，需要配合form標(biāo)簽使用
? form使用方法：用form標(biāo)簽把表單標(biāo)簽一起包裹起來即可
button按鈕標(biāo)簽
button屬性值與input相同
| button | submit | 提交按鈕，點(diǎn)擊后提交數(shù)據(jù)給后端服務(wù)器 |
| button | reset | 重置按鈕，點(diǎn)擊后恢復(fù)表單默認(rèn)值 |
| button | button | 普通按鈕，默認(rèn)無功能，之后配合js添加功能 |
注意點(diǎn)：
? 谷歌瀏覽器 中button默認(rèn)是提交按鈕
? button標(biāo)簽是 雙標(biāo)簽 ，更便于包裹其他內(nèi)容：文字、圖片等
select下拉菜單標(biāo)簽
場景： 在網(wǎng)頁中提供多個選擇項的下拉菜單表單控件
標(biāo)簽組成：
? select標(biāo)簽：下拉菜單的整體
? option標(biāo)簽：下拉菜單的每一項
常見屬性：
? selected：下拉菜單的默認(rèn)選中
代碼示例：
textarea文本域標(biāo)簽
場景： 在網(wǎng)頁中提供可輸入多行文本的表單控件
標(biāo)簽名： textarea
常見屬性：
? cols：規(guī)定了文本域內(nèi)可見寬度
? rows：規(guī)定了文本域內(nèi)可見行數(shù)
注意點(diǎn)：
? 右下角可以拖拽改變大小
? 實(shí)際開發(fā)時針對于樣式效果推薦用CSS設(shè)
label標(biāo)簽
場景： 常用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系
標(biāo)簽名： label
使用方法①：
使用方法②：
示例代碼：
語義化標(biāo)簽
沒有語義的布局標(biāo)簽
場景： 實(shí)際開發(fā)網(wǎng)頁時會大量頻繁的使用到div和span這兩個沒語義的布局標(biāo)簽
div標(biāo)簽： 一行只顯示一個（獨(dú)占一行）
span標(biāo)簽： 一行可以顯示多個
有語義的布局標(biāo)簽（了解）
場景： 在HTML5新版本中，推出了一些有語義的布局標(biāo)簽供開發(fā)者使用
標(biāo)簽：
| header | 網(wǎng)頁頭部 |
| nav | 網(wǎng)頁導(dǎo)航 |
| footer | 網(wǎng)頁底部 |
| aside | 網(wǎng)頁側(cè)邊欄 |
| section | 網(wǎng)頁區(qū)塊 |
| article | 網(wǎng)頁文章 |
注意點(diǎn)：
? 以上標(biāo)簽顯示特點(diǎn)和div一致，但是比div多了不同的語義
字符實(shí)體
HTML中的空格合并現(xiàn)象
場景： 如果在html代碼中同時并列出現(xiàn)多個空格、換行、縮進(jìn)等，最終瀏覽器只會解析出一個空格
常見字符實(shí)體
場景： 在網(wǎng)頁中展示特殊符號效果時，需要使用字符實(shí)體替代
結(jié)構(gòu)： &英文；
常見字符實(shí)體
| 空格 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| " | 引號 | " |
| ’ | 撇號 | '(IE不支持） |
| ￠ | 分(cent) | ¢ |
| ￡ | 鎊(pound) | £ |
| ￥ | 元(yen) | ¥ |
| € | 歐元(euro) | € |
| § | 小節(jié) | § |
| ? | 版權(quán)（copyright） | © |
綜合案例代碼示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><table border="1" width="500" height="300"><caption>優(yōu)秀學(xué)生信息表格</caption><tr><Th>年紀(jì)</Th><Th>姓名</Th><Th>學(xué)號</Th><Th>班級</Th></tr><tr><td rowspan="2">高三</td><td>迪麗熱巴</td><td>110</td><td>三年二班</td></tr><tr><td>古力娜扎</td><td>111</td><td>三年一班</td></tr><tr><th>評語</th><th colspan="3">你們很優(yōu)秀</th></tr></table><h1>青春不常在，抓緊談戀愛</h1><hr><form action="">昵稱：<input type="text" placeholder="請輸入昵稱"><br><br>性別:<label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label><br><br>所在城市: <select><option value="北京">北京</option><option value="廣州">廣州</option><option value="上海" selected>上海</option></select><br><br>婚姻狀態(tài): <label for=""><input type="radio" name="mery" checked>未婚</label><label for=""><input type="radio" name="mery">已婚</label><label for=""><input type="radio" name="mery">保密</label><br><br>喜歡的類型:<label for=""><checkbox >可愛</checkbox></label><label for=""><checkbox >性感</checkbox></label><label for=""><checkbox >御姐</checkbox></label><label for=""><checkbox >小鮮肉</checkbox></label><label for=""><checkbox >大叔</checkbox></label><br><br>個人介紹:<textarea name="" id="" cols="50" rows="10" placeholder="個人介紹："></textarea><br><br><h2>我承諾</h2><ul><li>年滿十八歲、單身</li><li>抱著嚴(yán)肅的態(tài)度</li><li>真誠尋找另一半</li></ul><label><input type="checkbox">我同意所有條款</label><br><br><input type="submit" value="免費(fèi)注冊"></button><button type="reset" >重置</button></form> </body> </html>總結(jié)
以上是生活随笔為你收集整理的2022黑马程序员-前端学习第一阶段（Day02-HTML基础）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “这张图告诉你什么？”
- 下一篇： 前端学习（2963）：element-u