什麼是HTML 點擊打開視頻講解更加詳細 Hyper Text Markup Language（超文本標記語言） 標簽控制排版 體積小，方便傳輸 編寫HTLML 推薦使用：VS Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
什麼是HTML
- Hyper Text Markup Language（超文本標記語言）
- 標簽控制排版
- 體積小，方便傳輸
編寫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>我的第一個標題</h1>
<p>我的第一個段落。</p>
</div>
</body>
<style scoped>
body{
padding: 0;
margin: 0;
}
</style>
</html>
HTML文件結構
<!DOCTYPE html>
<html lang="en">
<head>
<title>末晨曦吖</title>
</head>
<body></body>
</html>
- 起始行
<!DOCTYPE html>告訴瀏覽器這是一個HTML文檔 - 開始標簽
<html> - 結束標簽
</html>
html根標簽，標簽都是成對出現的，標簽中可以嵌套文本或其他標簽
<head>中定義文檔的描述信息<title>定義title，它會顯示在瀏覽器上
HTML常用標簽
標題標簽
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
效果：
段落標簽
<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
效果：
文本樣式標簽
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup><br><br>
<del>我是帶刪除線的文本</del>
效果：
列表標簽
無序列表
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
效果：
有序列表
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
<ol start="50">
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
效果：
超鏈接標簽
<a href="https://www.bilibili.com/" target="_blank">跳轉到 B 站</a>
效果：
多媒體標簽
圖片標簽
<img src="./smiley.gif">
視頻標簽
<video src="./video .mp4" controls></video>
音頻標簽
<audio src="./audio .mp3" controls></audio>
div標簽
塊級元素，並沒具體的實際意義，主要作用是調整佈局樣式；
<div>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</div>
佈局標簽
<headet> |
頭部信息 |
|---|---|
<nav> |
導航欄 |
<aside> |
側邊欄 |
<main> |
內容區域 |
<footer> |
底部信息 |
<article> |
文章詳情 |
<section> |
頁面分區 |
