目錄
HTML定義
標(biāo)簽
HTML基本骨架
常見(jiàn)標(biāo)簽
標(biāo)題標(biāo)簽
?段落標(biāo)簽
?換行與水平線標(biāo)簽
?文本格式化標(biāo)簽
????????圖像標(biāo)簽
????????絕對(duì)路徑與相對(duì)路徑
????????超鏈接標(biāo)簽
????????音頻與視頻標(biāo)簽
?列表標(biāo)簽
無(wú)序列表
有序列表
?定義列表
表格標(biāo)簽?
表格結(jié)構(gòu)標(biāo)簽
合并單元格
表單標(biāo)簽
input標(biāo)簽
?input標(biāo)簽占位文本
真正實(shí)現(xiàn)單選功能
上傳多個(gè)文件
下拉菜單標(biāo)簽
文本域標(biāo)簽?
label標(biāo)簽
button標(biāo)簽?編輯
?無(wú)語(yǔ)義的布局標(biāo)簽
div標(biāo)簽
span標(biāo)簽
字符實(shí)體
HTML定義
HTML是一種超文本標(biāo)記語(yǔ)言，超文本即我們?cè)诰W(wǎng)頁(yè)中看到的鏈接，標(biāo)記指的是語(yǔ)言中的標(biāo)簽
標(biāo)簽
標(biāo)簽一般成對(duì)出現(xiàn)，結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多一個(gè)/
此外標(biāo)簽一般分為單標(biāo)簽與雙標(biāo)簽
HTML基本骨架
?其中,HTML標(biāo)簽代表整個(gè)網(wǎng)頁(yè)，head標(biāo)簽代表網(wǎng)頁(yè)的頭，它里面存放給瀏覽器看的內(nèi)容，比如CSS，body代表網(wǎng)頁(yè)的主體，用于存放給用戶(hù)看的信息
這里也可以看出標(biāo)簽之間的關(guān)系共有兩種：兄弟關(guān)系、父子關(guān)系
常見(jiàn)標(biāo)簽
標(biāo)題標(biāo)簽
標(biāo)題標(biāo)簽有6種，標(biāo)簽名為h1~h6
標(biāo)簽顯示效果為
- 文字加粗
- 字號(hào)逐漸變小
- 獨(dú)占一行
?段落標(biāo)簽
標(biāo)簽名為p（雙標(biāo)簽）
顯示特點(diǎn)：
- 獨(dú)占一行
- 段落之間存在間隙
?換行與水平線標(biāo)簽
- 換行：<br>單標(biāo)簽
- 水平線：<hr>單標(biāo)簽
?
?文本格式化標(biāo)簽
作用：為文本添加特殊格式，用于突出重點(diǎn)，例如加粗、傾斜、下劃線、刪除線等
?
圖像標(biāo)簽
標(biāo)簽名：img
標(biāo)簽屬性src用于指定圖像的位置?
除src屬性外，img標(biāo)簽還有以下屬性
這里的width屬性與height屬性在改變時(shí)瀏覽器會(huì)自動(dòng)等比例調(diào)整，這兩個(gè)屬性了解即可
絕對(duì)路徑與相對(duì)路徑
絕對(duì)路徑：在windows系統(tǒng)中是從磁盤(pán)開(kāi)始的路徑，在其他系統(tǒng)可能是從根目錄開(kāi)始的路徑（統(tǒng)一使用/即可）
相對(duì)路徑：從當(dāng)前文件所在位置開(kāi)始的路徑
超鏈接標(biāo)簽
標(biāo)簽名：a
屬性href用于指定跳轉(zhuǎn)地址
如上圖所示，target屬性指定為_(kāi)blank可以使得頁(yè)面跳轉(zhuǎn)是開(kāi)啟一個(gè)新頁(yè)面而不是覆蓋當(dāng)前頁(yè)面
在開(kāi)發(fā)中如果暫時(shí)不清楚跳轉(zhuǎn)地址的話可以將href屬性值定位#
音頻與視頻標(biāo)簽
音頻標(biāo)簽名：audio
值得說(shuō)明的是，這里因?yàn)閷傩灾蹬c屬性名一樣所以可以簡(jiǎn)寫(xiě)為屬性名即可
?視頻標(biāo)簽名video
?
?列表標(biāo)簽
無(wú)序列表
標(biāo)簽：ul嵌套li，ul是無(wú)序列表，li是列表?xiàng)l目
?
注意ul標(biāo)簽里只能包裹li標(biāo)簽
但是li標(biāo)簽里可以包裹任意標(biāo)簽
有序列表
標(biāo)簽：ol嵌套li，ol是有序列表，li是列表?xiàng)l目
?定義列表
定義列表通常用于一個(gè)網(wǎng)頁(yè)的底部，如下圖所示
標(biāo)簽：dl嵌套dt和dd，dl是定義列表，dt是定義列表的標(biāo)題，dd是定義列表的描述/詳情
表格標(biāo)簽?
????????
?
- table標(biāo)簽屬性border-collapse
- 默認(rèn)屬性值separate
- 屬性值collapse可以使得table標(biāo)簽與th標(biāo)簽td標(biāo)簽的邊框合并
表格結(jié)構(gòu)標(biāo)簽
作用：使用表格結(jié)構(gòu)標(biāo)簽把內(nèi)容劃分區(qū)域，使得表格結(jié)構(gòu)更加清晰，語(yǔ)義更清晰
注意這些標(biāo)簽是對(duì)瀏覽器說(shuō)明的，只是加強(qiáng)語(yǔ)義?
且編寫(xiě)table標(biāo)簽后F12查看發(fā)現(xiàn)table下自帶tbody標(biāo)簽，是因?yàn)樵诰帉?xiě)頁(yè)面沒(méi)寫(xiě)<tbody>時(shí)，瀏覽器會(huì)直接幫我們創(chuàng)建這些標(biāo)簽所對(duì)應(yīng)的對(duì)象。隱式的<tbody>會(huì)把頭<thead>、腳<tfoot>全部包含進(jìn)去。
合并單元格
注意不能跨結(jié)構(gòu)標(biāo)簽進(jìn)行合并單元格?
<!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">
<thead>
<tr>
<th>姓名</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>總分</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>總結(jié)</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
</body>
</html>表單標(biāo)簽
作用：收集用戶(hù)信息
標(biāo)簽名：form標(biāo)簽
在form標(biāo)簽里統(tǒng)一管理相關(guān)標(biāo)簽
使用場(chǎng)景：
- 登陸頁(yè)面
- 注冊(cè)頁(yè)面
- 搜索頁(yè)面
input標(biāo)簽
<input required type="text">
//required屬性表示該標(biāo)簽內(nèi)容 非空?
<!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>
文本框:<input type="text">
<br><br>
密碼框:<input type="password">
<br><br>
單選框:<input type="radio">
<br><br>
多選框:<input type="checkbox">
<br><br>
文件上傳:<input type="file">
</body>
</html>
這里的文本框默認(rèn)得到焦點(diǎn)后會(huì)擁有一個(gè)邊框樣式outline
如果想要?jiǎng)h除該默認(rèn)樣式使用outline:none即可
?input標(biāo)簽占位文本
即input標(biāo)簽中的placeholder屬性
<!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>
文本框:<input type="text" placeholder="請(qǐng)輸入用戶(hù)名">
<br><br>
密碼框:<input type="password" placeholder="請(qǐng)輸入密碼">
</body>
</html>
真正實(shí)現(xiàn)單選功能
注意這里的checked屬性在多選框中同樣適用
上傳多個(gè)文件
在原先的input標(biāo)簽中添加屬性multiple即可一次上傳多個(gè)文件
下拉菜單標(biāo)簽
標(biāo)簽：select嵌套o(hù)ption，select標(biāo)簽是下拉菜單整體，option是下拉菜單的每一項(xiàng)
其中selected屬性是用于選定默認(rèn)選擇哪一項(xiàng)
文本域標(biāo)簽?
作用：多行輸入文本的表單控件
標(biāo)簽：textarea
如果不希望文本域的寬度與高度可以被用戶(hù)改變的話，可以添加resize: none
label標(biāo)簽
作用：增大點(diǎn)擊范圍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" id="man" name="gender"><label for="man">男</label>
<label><input type="radio" name="gender">女</label>
</body>
</html>button標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" placeholder="請(qǐng)輸入你的內(nèi)容">
<br><br>
<input type="password" placeholder="請(qǐng)輸入密碼">
<br>
<button type="button">普通按鈕</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
</body>
</html>
?無(wú)語(yǔ)義的布局標(biāo)簽
div標(biāo)簽
它是獨(dú)占一行的
span標(biāo)簽
它是不換行的
字符實(shí)體
概念上類(lèi)似語(yǔ)言中的轉(zhuǎn)義字符
??
header標(biāo)簽
HTML?<header>?元素用于展示介紹性?xún)?nèi)容，通常包含一組介紹性的或是輔助導(dǎo)航的實(shí)用元素。它可能包含一些標(biāo)題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱(chēng)，等等。
即header標(biāo)簽是一個(gè)布局標(biāo)簽，并且要求:文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-591906.html
header標(biāo)簽中必須包含一個(gè)標(biāo)題標(biāo)簽，并且子元素不唯一，否則不適用header標(biāo)簽。如果僅是為了樣式，請(qǐng)使用DIV標(biāo)簽，避免header標(biāo)簽的濫用。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-591906.html
到了這里，關(guān)于HTML5學(xué)習(xí)簡(jiǎn)記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
