網頁結構
<!-- 文檔聲明 -->
<!DOCTYPE html>
<!-- 根目錄 -->
<html lang="en">
<!-- 頭部 -->
<head>
<!-- 指定字符集 -->
<!-- UTF-8國際通用編碼格式,包括了所有國家的字符 -->
<meta charset="UTF-8">
<!-- 指定網頁的標題 -->
<title>百度一下</title>
</head>
<!-- 身體 -->
<body>
<h1>你好</h1>
<h1> 雙標籤 </h1>
</body>
</html>
HTML標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
div{
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<!-- 標籤要寫在body裏 -->
<!-- 標籤分爲兩類:
雙標籤: h1~h6 p span div b strong i em s del u ins a
單標籤: br hr img
-->
<!-- 標題標籤 -->
<h1>我是1級<span>標題</span></h1>
<h2>我是2級標題</h2>
<h3>我是3級標題</h3>
<h4>我是4級標題</h4>
<h5>我是5級標題</h5>
<h6>我是6級標題</h6>
<!-- 段落標籤 -->
<p>Lorem <br>換行標籤 amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident</p>
<!-- 水平線標籤 -->
<hr>
<span>定義行內區域</span>
<div>定義塊級區域</div>
<!-- 註釋快捷鍵: ctrl+/ -->
<b>定義粗體文本</b>
<strong>定義粗體文本</strong>
<i>斜體</i>
<em>斜體</em>
<s>刪除線</s>
<del>刪除線</del>
<u>下劃線</u>
<ins>下劃線</ins>
<!-- 超鏈接(重點) -->
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
<!-- href裏面寫#,阻止頁面跳轉 -->
<a href="#">百度一下,你就知道</a>
<!-- 本地頁面跳轉 -->
<a href="01-網頁結構.html" title="標題">本地頁面跳轉</a>
<!-- 相對路徑 -->
<!-- 在頁面中插入圖片 -->
<img src="img1.jpg" alt="我是這張圖片" title="顯示提示文字" width="200">
<!-- 找兄弟的子元素(往下找用 / ) -->
<img src="img/img1.jpg">
<!-- 找父親的兄弟(往上找 ../ ) -->
<img src="../../img1.jpg">
<img src="../../img/img1.jpg">
<!-- 絕對路徑 -->
<img src="C:\Users\41616\Pictures\Burner-4k.jpg" width="500">
<!-- 網絡圖片 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589801452803&di=8787c8a1e90fcffc4cd3ab1f8bdf4820&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F586e154595341.jpg" width="300">
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 不管編輯器裏面多少空格,都縮小從一個 -->
hello word
<p>< ©</p>
</body>
</html>