HTML（超文本標(biāo)記語(yǔ)言——HyperText Markup Language）：定義了網(wǎng)頁(yè)內(nèi)容的含義和結(jié)構(gòu)
標(biāo)題標(biāo)簽（Heading）<h*></h*>
HTML 包括六個(gè)級(jí)別的標(biāo)題，<h1>-<h6>，用的最多的是 3-4 級(jí)標(biāo)題。
不要使用標(biāo)題元素來(lái)加大、加粗字體，因?yàn)闃?biāo)題對(duì)于無(wú)障礙訪問(wèn)和搜索引擎優(yōu)化等問(wèn)題非常有意義。
注：可以嘗試在 <img> 元素上面添加一個(gè)合適的標(biāo)題。一個(gè)頁(yè)面盡量只有一個(gè)h1標(biāo)簽
<h1>主標(biāo)題</h1>
<h2>頂層標(biāo)題</h2>
<h3>子標(biāo)題</h3>
<h4>次子標(biāo)題</h4>
<h5>標(biāo)題</h5>
<h6>標(biāo)題</h6>
HTML 標(biāo)題.png
段落（Paragraph）<p></p>
- paragraph 段落
<p> 文本內(nèi)容 </p>
水平線標(biāo)簽hr
- horizontal 橫線
- <hr />是單標(biāo)簽
換行標(biāo)簽br
- <br />
div 和 span標(biāo)簽
- div span 是沒(méi)有語(yǔ)義的 我們?cè)诰W(wǎng)頁(yè)布局主要的2個(gè)盒子 css+div
- div 就是 division 的縮寫(xiě) 分割， 分區(qū)的意思 其實(shí)有很多div 來(lái)組合網(wǎng)頁(yè)。
- span 跨度，跨距；范圍
- div標(biāo)簽 用來(lái)布局的，但是現(xiàn)在一行只能放一個(gè)div
- span標(biāo)簽 用來(lái)布局的，一行上可以放好多個(gè)span
總結(jié)
| 標(biāo)簽 | 作用 | 說(shuō)明 |
|---|---|---|
| <hx></hx> | 標(biāo)題標(biāo)簽 | 作為標(biāo)題使用，并且依據(jù)重要性遞減 |
| <p></p> | 段落標(biāo)簽 | 可以把 HTML 文檔分割為若干段落 |
| <hr /> | 水平線標(biāo)簽 | 一條線 |
| <br /> | 換行標(biāo)簽 | 相當(dāng)于回車 |
| <div></div> | div標(biāo)簽用來(lái)布局的 | 一行只能放一個(gè)div |
| <span></span> | span標(biāo)簽用來(lái)布局的 | 一行上可以放多個(gè)span |
文本格式化標(biāo)簽
image.png
注： b 只是加粗 strong 除了可以加粗還有 強(qiáng)調(diào)的意思， 語(yǔ)義更強(qiáng)烈。
標(biāo)簽屬性
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" > 內(nèi)容 </標(biāo)簽名>
注：標(biāo)簽屬性：屬性與屬性之間用空格隔開(kāi)
圖像標(biāo)簽img
<img src="圖像URL" />
image.png
- 用戶有視覺(jué)障礙。視障用戶可以使用屏幕閱讀器來(lái)朗讀
alt屬性的內(nèi)容。- 有些錯(cuò)誤使圖像無(wú)法顯示。
alt屬性可以起到作用。
src 圖片的路徑
alt與title區(qū)別：alt 圖片顯示不出，文字就顯示 title 鼠標(biāo)經(jīng)過(guò)圖片的時(shí)候顯示文字
- 標(biāo)簽可以擁有多個(gè)屬性，必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面。
- 屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開(kāi)。
- 任何標(biāo)簽的屬性都有默認(rèn)值，省略該屬性則取默認(rèn)值。
- 采取 鍵值對(duì) 的格式 key="value" 的格式
<body>
<!-- 給圖片寬高的時(shí)候 一般只給寬或高 這樣可以等比例縮放 -->
<!-- 標(biāo)簽樣式一般沒(méi)有單位 -->
<img src="timg.jpg" alt="小豬佩奇" title="小豬佩奇" width="200" border="5">
</body>
鏈接標(biāo)簽
anchor 的縮寫(xiě)：錨
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
如果網(wǎng)址開(kāi)始部分省略了
https://或者http://，可能會(huì)得到錯(cuò)誤的結(jié)果。
-
href: 這個(gè)屬性聲明超鏈接的web地址，當(dāng)這個(gè)鏈接被點(diǎn)擊瀏覽器會(huì)跳轉(zhuǎn)至href聲明的web地址。例如：。 -
title: 標(biāo)題title屬性為超鏈接聲明額外的信息，比如你將鏈接至的那個(gè)頁(yè)面。例如：title="The Mozilla homepage"。當(dāng)鼠標(biāo)懸停在超鏈接上面時(shí)，這部分信息將以工具提示的形式顯示。 -
target: 目標(biāo)target屬性用于指定鏈接如何呈現(xiàn)出來(lái)。例如，target="_blank"將在新標(biāo)簽頁(yè)中顯示鏈接。默認(rèn)_self為默認(rèn)值。
<body>
<!-- 1.外部鏈接 -->
<a title="百度一下">百度</a>
<!-- 2.內(nèi)部鏈接 -->
<a href="demo.html">內(nèi)部的鏈接</a>
<!-- 3.空鏈接 -->
<a href="#">我是空鏈接</a>
<!-- 4.我是錨點(diǎn)鏈接 -->
<div id="ch"></div>
<a href="#ch">第1集</a>
<!-- 5.圖片鏈接 -->
<a ><img src="timg.jpg" alt="圖片鏈接"></a>
</body>
鏈接標(biāo)簽
href屬性是必須要寫(xiě)
新窗口打開(kāi)一個(gè)鏈接target=“_blank”
注釋
<!-- 注釋語(yǔ)句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + /
注釋內(nèi)容前后各一個(gè)空格字符，注釋位于要注釋代碼的上面，單獨(dú)占一行
路徑：絕對(duì)路徑和相對(duì)路徑
絕對(duì)路徑
以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。
| 路徑 | 代表 |
|---|---|
| ./ 或者不寫(xiě) | 代表同一級(jí)路徑 |
| ../ | 代表上一級(jí)路徑 |
| / | 代表下一級(jí)路徑 |
相對(duì)路徑
絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑
base標(biāo)簽
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 把所有的連接 都默認(rèn)添加 target="_blank" -->
<base target="_blank" />
</head>
- base 可以設(shè)置整體鏈接的打開(kāi)狀態(tài)
- base 寫(xiě)到 <head> </head> 之間
預(yù)格式化文本pre標(biāo)簽
- 保留輸入格式 輸出
比較少用，因?yàn)椴缓谜w控制。
特殊字符
image.png
- 是以運(yùn)算符
&開(kāi)頭,以分號(hào)運(yùn)算符;結(jié)尾。 - 他們不是標(biāo)簽，而是符號(hào)。
注：推薦使用
