HTML
超文本標記語言 Hyper Text Markup Language
- PS: “超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素
語言特點：
- 簡單性
- 可擴展性
- 跨平臺性
- 通用性
主要作用：
- 負責頁面的架構佈局
文件後綴：
- .html
- .htm
HTML是一門標記語言，是一門非編程語言，不具備編程語言的程序邏輯。它的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。
HTML由標籤、指令與轉義字符等組成
- 標籤：被尖括號（<>）包裹，以字母開頭，以字母，數字，減號（-）組成，可以被瀏覽器解析的標記。（PS：標籤分爲系統標籤和自定義標籤）
- 指令：被尖括號（<>）包裹，以感嘆號（!）開頭的標記。（栗子： < !DOCTYPE html> ）
- 轉義字符：被&與;包裹的特殊字母組合或者#開頭的十六進制數字（栗子：& lt；，<；）點我查看所有轉義字符
- PS：所有字符請使用英文字符
HTML發展史：你點我我就告訴你HTML的發展歷史
第一個頁面
HTML由標籤、指令與轉義字符等組成（重點強調）
- 標籤：被尖括號（<>）包裹，以字母開頭，以字母，數字，減號（-）組成，可以被瀏覽器解析的標記。（PS：標籤分爲系統標籤和自定義標籤）
- 指令：被尖括號（<>）包裹，以感嘆號（!）開頭的標記。（栗子： < !DOCTYPE html> ）
- 轉義字符：被&與;包裹的特殊字母組合或者#開頭的十六進制數字（栗子：& lt；，<；）
筆記代碼：
<!-- 註釋 command + / -->
<!-- 標籤: 由<>包裹, 由字母開頭, 可以結合合法字符, 能被瀏覽器解析的標記 -->
<!-- 爲什麼使用標籤: 標籤具有作用域(名稱空間, 控制範圍), 可以賦予功能 -->
<!-- 一個頁面文件就是一個html, 有且僅有一個html根標籤, 只有一兒(body)一女(head) -->
<!-- 規定文檔類型: html代表該文件採用的是h5語法標準 -->
<!-- 指令: <>內以!開頭的 -->
<!DOCTYPE html>
<html style='color: red;'>
<head>
<!-- 頁面文件頭 | 樣式表 | 腳本 | 頁面描述... | (後勤工作) -->
<!-- 設置文件編碼格式 -->
<meta charset="utf-8">
<!-- 頁面標籤標題(網頁標題) -->
<title>first page</title>
</head>
<body style='color: orange'>
<!-- 頁面顯示內容都屬於body標籤 -->
<!-- 也可以出現樣式 | 腳本 -->
<!-- nbsp代表空白字符 lt(#60)代表小於號 gt(#62)代表大於號 -->
egon is <dsb>
</body>
</html>
<!-- 瞭解知識點：一個空白字符大約4字符 -->
標準模板：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>頁面標籤標題</title>
</head>
<body>
</body>
</html>
常用標籤及標籤的分類
- 無語義標籤
<!-- div(搭建頁面架構): 最常用的標籤, 沒有之一 -->
<div></div>：用來構建頁面結構
<!-- span(搭建文本架構: 可以直接包裹文本, 也可以包裹其他文本類(內聯類型的)標籤): 文本最常用標籤 -->
<span></span>： 用來構建文本結構
- 常用語義標籤
<!-- 標題標籤 -->
<!-- n取值範圍：1~6 -->
<!-- 一般一個頁面會出現一次, 作爲該頁面的總標題出現 -->
<!-- 六級標籤比普通文本小 -->
<hn></hn>
<!-- 鏈接標籤 -->
<!-- herf: 標籤的全局屬性, 超鏈接, 規定協議 -->
<!-- https比http協議更安全 -->
<a href="https:\\www.baidu.com" target="_blank">前往百度</a>
<!-- 圖片標籤 -->
<!-- src: 數據源, 可以加載網絡| 本地| 動態圖片 -->
<!-- alt: 圖片加載失敗時的文本提示 -->
<!-- title: 鼠標懸浮產生的文本提示(任意標籤都具有該全局屬性) -->
<img src="" alt="" title="">
<!-- 段落標籤 -->
<p></p>
<!-- 原文本標籤（基本不用） -->
<per></per>
<!-- 換行標籤 -->
<br />
<!-- 分割線標籤 -->
<hr />
- 文本標籤
<i></i> 斜體字
<em></em> 斜體字，表示強調
<b></b> 粗體字
<strong></strong> 粗體字，表示強調(語氣更強)
<del></del> 刪除的文本
<ins></ins> 插入的文本
<sub></sub> 下標字
<sup></sup> 上標字
<ruby>
拼音<rt>pinyin</rt>
</ruby> 中文註音，h5新增
- 組合標籤
<!-- 表單 -->
<!-- 被form包裹的input內容可以提交給後臺, 單獨使用的input內容只能在前臺(js)使用 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 表格 -->
<table>
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
<!-- span作爲文本架構, 刪除樣式的文本再由具體的文本類標籤del嵌套 -->
<span>$1000<del>$2300</del></span>
<span>文本<sup>上角標</sup></span>
- 其他標籤
<section></section> 塊
<small></small> 小號字體
PS：段落標籤中放的也是文本內容，爲什麼要把它和文本標籤區分開呢？思考一下
標籤分類：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標籤的分類</title>
</head>
<body>
<!-- 系統標籤 | 自定義標籤: 系統沒有的滿足標籤語法的所有標記 -->
<cata title='XXX' style='color: red'>cata</cata>
<!-- 行塊標籤(display) -->
<!-- 塊: 換行顯示 -->
<p>test</p>
<p>test2</p>
<!-- 行: 同行顯示 -->
<span>sss</span>
<span>sss</span>
<!-- 單結構 | 組合結構 -->
<div>單結構</div>
<!-- 被form包裹的input內容可以提交給後臺, 單獨使用的input內容只能在前臺(js)使用 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 單雙標籤 -->
<!-- 雙: 收尾分離 -->
<!-- 主內容: 可以包含文本, 也可以包含子標籤(具有作用域) -->
<div></div>
<span></span>
<!-- 單: 首尾連體 -->
<!-- 主功能: 無須子內容, 標籤就可以代表所有的功能語義 -->
<hr />
<br />
<!-- input標籤的內容 -->
<!-- 既不屬於行標籤也不屬於塊標籤 -->
<!-- value用來接收用戶輸入的值 -->
<input type="text" value="" placeholder="">
</body>
</html>