前端之 HTML 前言 python 基礎、網路編程、併發編程與資料庫要開始告一段落了，從現在開始進入前端的學習。前端的東西多且雜，需要好好地練習。 什麼是前端 前端即網站前臺部分，運行在 PC 端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5、CSS3，前端框架的應用，跨 ...
前端之 HTML
前言
python 基礎、網路編程、併發編程與資料庫要開始告一段落了，從現在開始進入前端的學習。前端的東西多且雜，需要好好地練習。
什麼是前端
前端即網站前臺部分，運行在 PC 端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5、CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種屏幕解析度，完美的動效設計，給用戶帶來極高的用戶體驗。
前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的 HTML 和 CSS 以及 JavaScript。
- 廣義前端：所有用戶可以直接看見並交互的界面；
- 狹義前端：瀏覽器上運行的用戶交互界面。
什麼是 HTML
HTML 是一種超文本標記語言（Hyper Text Markup Language），主要負責完成頁面的結構設計，一般以.html或者.htm 尾碼結尾。
超文本指頁面內可以包含圖片、鏈接甚至音樂、程式等非文字元素。
標記語言
標記語言為非編程語言，不具備編程語言具備的程式邏輯。
html 為前端頁面的主題，由標簽、指令與轉義字元（實體）等組成
標簽：被尖括弧包裹，由字母開頭包含合法字元的，可以被瀏覽器解析的標記。eg：系統標簽、自定義標簽。
指令：被尖括弧包裹，由 !開頭的標記。eg：<!doctype html>
轉義字元：被&與;包裹的特殊字母組合或#開頭的十進位數。eg：<>
文檔類型
<!-- 標簽語法規範 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
第一個頁面
基礎模板
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>第一個頁面</title>
</head>
<body>
</body>
</html>模板解讀
- DOCTYPE：指定文檔類型，規定 html 標簽語法；
- html：文檔根標簽，標註著文檔（頁面）的開始與結束；
- head：文檔頭標簽，可以引用腳本文件、指定樣式表、書寫代碼邏輯塊、提供元信息；
- body：文檔主體標簽，包含文檔所有文本與超文本內容；
- title：文檔 tag 標題標簽，設置文檔 tag 的標題內容。
其他核心模板標簽
1. meta（元標簽）
字元編碼
<meta charset='utf-8'>
<meta http-equiv='content-type' content='text/html;charset=utf-8'/>
SEO
<meta name='keywords' content='8-12個以英文逗號隔開的單詞或詞語'>
<meta name='description' content='80字以內的一段話，與網站內容相關'>
移動適配
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>2. link（鏈接標簽）
外聯樣式表
<link rel='stylesheet' type='text/css' href='style.css'/>
文檔 tag 圖標
<link rel='shortcut icon' type='image/x-icon'
href='http://www.baidu.con/favicon.ico'/>3. style（樣式標簽）
內聯樣式表
<style></style>4. sctipt（腳本標簽）
<script type='text/javascript'></script>html 常用標簽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本標簽</title>
</head>
<body>
<!-- 無意義標簽 -->
<!-- div：最常用標簽，沒有之一（搭建頁面架構） -->
<div></div>
<!-- span：文本最常用標簽 -（構建文本架構，可以直接包裹文本，也可以包裹其他文本類（內聯類型標簽）-->
<span></span>
<!-- span 作為文本架構，刪除樣式的文本再由具體的文本類標簽 del 嵌套 -->
<span>$1000<del>$2300</del></span>
<!-- 標題標簽：h1~h6 -->
<!-- 一般一個頁面會出現一次，作為該頁面的總標題出現 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
普通文本
<h6>六級標題</h6>
<!-- 段落標簽 -->
<p>段落段落段落段落段落</p>
<!-- 原生標簽 -->
<pre>
呵 呵
</pre>
<!-- 分割線 -->
<hr></hr>
<!-- 換行 -->
<br />
<br />
<br />
<!-- 文本類標簽 -->
<!-- 斜體 -->
<i>斜體</i>
<!-- 斜體強調 -->
<em>斜體強調</em>
<!-- 加粗 -->
<b>加粗</b>
<!-- 加粗強調 -->
<strong>加粗強調</strong>
<!-- 由 ruby 和 rt 兩個標簽配合使用 -->
<ruby>
拼音<rt>pinyin</rt>
</ruby>
<!-- 插入文本 -->
<ins></ins>
<!-- 上角標 -->
<span>文本<sup>上角標</sup></span>
<!-- 鏈接標簽 -->
<!-- href 標簽的全局屬性，超鏈接，規定協議-->
<!-- 不規定的話：會在當前文件路徑做路徑拼接 -->
<a href="https://www.baidu.com" target="_self">通往百度</a>
<!-- 圖片標簽 -->
<!-- src 圖片源地址可以載入網路|本地|動態圖片 alt：圖片資源載入時文本提示 title：滑鼠懸浮產生的文本提示（任意標簽都可以具有該全局屬性）-->
<img src="" alt="" title="小柯基">
<!-- 表格 -->
<table>
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<th>單元格</th>
<th>單元格</th>
</tr>
</table>
<!-- 表單 -->
<form >
<input type="text">
<input type="text">
</form>
</body>
</html>標簽的分類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽的分類</title>
</head>
<body>
<!-- 系統標簽 | 自定義標簽: 系統沒有的滿足標簽語法的所有標簽 -->
<zero title="XXX" style="color: red">zero</zero>
<!-- 行塊標簽(display) -->
<!-- 塊: 換行顯示 -->
<p>測試1</p>
<p>測試2</p>
<!-- 行:同行顯示 -->
<span>測試3</span>
<span>測試4</span>
<!-- 單結構 | 組合結構 -->
<div>單結構</div>
<!-- 被form包裹的input內容可以提交給後臺,單獨使用的input內容只能在前臺(js)使用 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 單雙標簽 -->
<!-- 雙: 首尾分離 -->
<!-- 主內容:可以包含文本,也可以包含子標簽 (具有作用域) -->
<div></div>
<span></span>
<!-- 單: 首尾連體 -->
<!-- 主功能: 不需要子內容,標簽就可以代表所有的功能語義 -->
<hr />
<br />
<!-- input的內容 -->
<input type="text" value="abc" placeholder="請輸入">
</body>
</html>HTML 特殊符號轉義
