七分鐘學會 HTML 網頁製作
什麼是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="//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> |
頁面分區 |
