HTML 介紹
引用
最全面的前端筆記來(lái)啦修陡,包含了入門(mén)到入行的筆記沧侥,還支持實(shí)時(shí)效果預(yù)覽。小伙伴們不需要在花時(shí)間去寫(xiě)筆記魄鸦,或者是去網(wǎng)上找筆記了宴杀。面試高頻提問(wèn)和你想要的筆記都幫你寫(xiě)好了。支持移動(dòng)端和PC端閱讀拾因,深色和淺色模式旺罢。
原文鏈接:https://note.noxussj.top/
::: warning 注意
HTML 的基礎(chǔ)結(jié)構(gòu)必須要掌握
:::
什么是 HTML ?
超文本標(biāo)記語(yǔ)言(英語(yǔ):HyperText Markup Language 绢记,簡(jiǎn)稱(chēng):HTML )是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言扁达。
您可以使用 HTML 來(lái)建立自己的 WEB 站點(diǎn),HTML 運(yùn)行在瀏覽器上蠢熄,由瀏覽器來(lái)解析跪解。
超文本
超越普通文本的特性,不僅是文字护赊,還可以有圖片惠遏、圖形、表格骏啰、動(dòng)畫(huà)、音頻抽高、視頻判耕、鏈接、程序等非文本信息翘骂。
標(biāo)記語(yǔ)言
將上述超文本的信息組合起來(lái)進(jìn)行展示(包含結(jié)構(gòu)和數(shù)據(jù))的一種語(yǔ)言壁熄。
HTML 基礎(chǔ)結(jié)構(gòu)
- html 標(biāo)簽:根節(jié)點(diǎn)標(biāo)簽
- head 標(biāo)簽:頭部標(biāo)簽帚豪,主要存放網(wǎng)站的基本描述信息
- body 標(biāo)簽:正文標(biāo)簽,主要存放網(wǎng)頁(yè)顯示的內(nèi)容
<html>
<head>
<title>我是網(wǎng)站標(biāo)題</title>
<style></style>
</head>
<body>
<h1>我是正文內(nèi)容</h1>
<script></script>
</body>
</html>
標(biāo)簽
標(biāo)簽是 HTML 的核心部分草丧。
特性
- 標(biāo)簽由兩個(gè)尖括號(hào)包含起來(lái)的關(guān)鍵字狸臣,例如
<html>
- 標(biāo)簽一般都是成對(duì)的出現(xiàn),開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽昌执,例如
<html>
</html>
- 也有一些標(biāo)簽是單標(biāo)簽烛亦,例如
<br />
<img />
- 瀏覽器渲染的時(shí)候不會(huì)單純的顯示該標(biāo)簽,而是解析該標(biāo)簽后轉(zhuǎn)換成另外一種形式進(jìn)行展示
分類(lèi)
<table border="0" cellspacing="0" cellpadding="0" width="auto">
<thead>
<tr>
<th>類(lèi)型</th>
<th>布局方式</th>
<th>尺寸</th>
<th>嵌套</th>
<th>案例</th>
</tr>
</thead>
<tbody>
<tr>
<td>塊元素</td>
<td>獨(dú)占一行</td>
<td>可設(shè)置寬高</td>
<td>可嵌套任何元素</td>
<td>display: block<br />display: flex</td>
</tr>
<tr>
<td>行內(nèi)元素</td>
<td>占用的位置由內(nèi)容決定</td>
<td>寬度高度由內(nèi)容決定</td>
<td>建議只嵌套行內(nèi)元素</td>
<td>display: inline</td>
</tr>
<tr>
<td>行內(nèi)塊元素</td>
<td>占用的位置由內(nèi)容決定</td>
<td>寬度高度由內(nèi)容決定</td>
<td>可嵌套任何元素</td>
<td>display: inline-block<br />display: inline-flex</td>
</tr>
</tbody>
</table>