什么是HTML
- Hyper Text Markup Language（超文本標(biāo)記語言）
- 標(biāo)簽控制排版
- 體積小掉丽，方便傳輸
編寫HTLML
推薦使用：VS Code
<!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>末晨曦吖</title>
</head>
<body>
<div id="app">
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</div>
</body>
<style scoped>
body{
padding: 0;
margin: 0;
}
</style>
</html>
HTML文件結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head>
<title>末晨曦吖</title>
</head>
<body></body>
</html>
- 起始行
<!DOCTYPE html>告訴瀏覽器這是一個(gè)HTML文檔 - 開始標(biāo)簽
<html> - 結(jié)束標(biāo)簽
</html>
html根標(biāo)簽异雁，標(biāo)簽都是成對(duì)出現(xiàn)的捶障，標(biāo)簽中可以嵌套文本或其他標(biāo)簽
-
<head>中定義文檔的描述信息 -
<title>定義title，它會(huì)顯示在瀏覽器上
HTML常用標(biāo)簽
標(biāo)題標(biāo)簽
<h1>這是標(biāo)題 1</h1>
<h2>這是標(biāo)題 2</h2>
<h3>這是標(biāo)題 3</h3>
<h4>這是標(biāo)題 4</h4>
<h5>這是標(biāo)題 5</h5>
<h6>這是標(biāo)題 6</h6>
效果：
1111111111111.png
段落標(biāo)簽
<p>這是一個(gè)段落片迅。</p>
<p>這是一個(gè)段落残邀。</p>
<p>這是一個(gè)段落。</p>
效果：
222222222222222.png
文本樣式標(biāo)簽
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動(dòng)輸出</code><br><br>
這是 <sub> 下標(biāo)</sub> 和 <sup> 上標(biāo)</sup><br><br>
<del>我是帶刪除線的文本</del>
效果：
33333333333.png
列表標(biāo)簽
無序列表
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
效果：
44444444.png
有序列表
<ol>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
<ol start="50">
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ol>
效果：
55555555555555.png
超鏈接標(biāo)簽
<a target="_blank">跳轉(zhuǎn)到 B 站</a>
效果：
66666666666666.png
多媒體標(biāo)簽
圖片標(biāo)簽
<img src="./smiley.gif">
視頻標(biāo)簽
<video src="./video .mp4" controls></video>
音頻標(biāo)簽
<audio src="./audio .mp3" controls></audio>
div標(biāo)簽
塊級(jí)元素柑蛇，并沒具體的實(shí)際意義芥挣，主要作用是調(diào)整布局樣式；
<div>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落耻台。</p>
</div>
布局標(biāo)簽
<headet> |
頭部信息 |
|---|---|
<nav> |
導(dǎo)航欄 |
<aside> |
側(cè)邊欄 |
<main> |
內(nèi)容區(qū)域 |
<footer> |
底部信息 |
<article> |
文章詳情 |
<section> |
頁面分區(qū) |
