一：前端三層
二：HTML簡介
HTML：Hyper Text Markup Language 超文本標記語言
超文本：用超鏈接的方法組織的文本
標記語言：就是一套標記標籤
HTML負責描述頁面(網頁)的語義，從語義的角度描述頁面的結構。
HTML標籤：由尖括號包圍，通常是成對出現的(一個開始標籤，一個結束標籤)，如<p> </p>
HTML文檔：就是網頁
HTML元素：開始標籤到結束標籤內的所有代碼(包含標籤)
空元素(自關閉元素)：在開始標籤中進行關閉，沒有相應的結束標籤，如<br />
HTML屬性：是HTML元素提供的附加信息；屬性總是在元素的開始標籤中規定；始終爲屬性值加引號
HTML註釋：
<!-- 這是HTML的註釋 -->三：HTML基本結構
<!DOCTYPE html> 聲明文檔類型
<html> 根標籤
<head> 文檔頭部
<title>標題</title> 網頁標題
</head>
<body>
網頁內容 網頁真正顯示的內容
</body>
</html>四：HTML基本標籤介紹及標籤語義化
1，基本標籤介紹
標題：<h1>...<h6>；<h1> 主標題，<h6> 最小標題
段落：<p>
圖片：<img>
<img src="URL" alt="圖片加載失敗時顯示的替換文本" width="" height="" />超鏈接：<a>；href--hypertext reference 超文本引用
<a href="URL" title="鼠標懸停時顯示的文字" target="打開方式"></a>
<!-- <p><a id="tips"></a>目標部分</p> -->
<p><a name="tips"></a>目標部分</p>
<a href="#tips">目標錨，跳到當前文檔內指定的部分</a>
<a href="#">空鏈接,點擊效果：跳到頁面頂部</a><abbr> 表示一個縮寫詞
<address> 定義文檔作者的聯繫信息
<q> 定義引用文本
<blockquote> 定義塊引用
<cite> 定義作品的標題
<del> 定義被刪除文本
<ins> 定義被插入文本
<code> 單行代碼
<pre> 定義預格式化的文本；保留空格和換行符，常用來表示計算機的源代碼
<abbr title="World Health Organization">WHO</abbr>
<address>Shanghai,xuhui</address>
<q>to be or not to be,this is a question</q>
<blockquote cite=""></blockquote>
<cite>你的夢想是什麼</cite>
<del>刪除刪除刪除</del>
<ins>插入文本</ins>
<code>for i in range(10):print(i)</code>
<pre>
pwd = input('Enter your pwd').strip()
if pwd == '123':
print('login successful')
</pre><b> <i> <s> <u> 不再用於文本格式化，而可用作爲CSS鉤子
<figure> 規定獨立的流內容（圖像，圖表，代碼等）
<figcaption> 爲<figure>元素定義標題
<nav> 定義導航鏈接的部分
<header> 定義文檔或文檔部分區域的頁眉，應作爲介紹內容或導航鏈接欄的容器
<footer> 定義文檔或文檔部分區域的頁腳，應包含文檔作者姓名、版權信息、使用條款鏈接、聯繫信息等
<section> 定義了文檔的某個區域
<article> 定義獨立的內容，必須是獨立於文檔的其餘部分（論壇帖子、博客文章、新聞故事、評論等）
<aside> 定義<article>標籤外的內容，其內容應與附近的內容相關；可用於做文章的側欄
<div> 定義了文檔的區域；主要用於文檔佈局
<span> 將文本的一部分獨立出來
<process> 狀態指示器，可用來製作進度條
<audio> 定義音頻資源
<video> 定義視頻資源
<canvas> 通過腳本來繪製圖形（圖形容器）
<embed> 定義了一個容器，用來嵌入外部應用或者互動程序（插件）
<object> 定義一個嵌入的對象，如圖像、音頻、視頻、Flash...
<noscript> 定義在腳本未被執行時的替代內容（文本）；瀏覽器支持腳本，則不會顯示出該標籤內的文本
2，標籤語義化
標籤語義化：什麼樣的標籤幹什麼樣的事
意義：
1，網頁結構合理
2，有利於SEO：和搜索引擎建立良好溝通
3，方便其他設備解析
4，便於團隊開發和維護
語義好的網頁：讓網頁裸奔（去掉CSS樣式），結構依然清楚
五：HTML頭部
<!DOCTYPE html>
<html lang="en">
<head>
<title>定義文檔的標題</title>
<!-- 爲頁面上的所有鏈接規定默認地址/打開方式 -->
<base href="http://www.baidu.com/" />
<!-- 頁面上的所有鏈接設置爲在新頁面打開，不設置該屬性，則默認在當前頁面打開 -->
<base target="_blank" />
<!-- link標籤定義文檔與外部資源之間的關係 -->
<!-- 引入外部樣式表 -->
<link rel="stylesheet" type="text/css" href="1.css" />
<!-- 給網頁標題前放置小圖標 -->
<link rel="icon" href="favicon.ico" />
<style type="text/css">
/* 定義樣式信息，稱爲嵌套樣式表或文檔樣式表 */
</style>
<!-- meta標籤提供文檔的元數據 -->
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
<meta name="author" content="" />
<!-- 加載腳本文件 -->
<script></script>
</head>
<body>
</body>
</html>六：HTML列表
<body>
<!-- 有序列表 order list -->
<ol type="i" start="2">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ol>
<!-- 無序列表 unorder list -->
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<!-- 自定義列表 definition list -->
<dl>
<dt>列表項1標題</dt>
<dd>列表項1描述</dd>
<dd>列表項1描述</dd>
<dt>列表項2標題</dt>
<dd>列表項2描述</dd>
<dd>列表項2描述</dd>
<dd>列表項2描述</dd>
</dl>
</body>七：HTML表格
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>表格標題</caption>
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>總計</td>
<td>1000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>表格某行數據項1</td>
<td>表格某行數據項2</td>
</tr>
</tbody>
</table>
</body>colspan = "2" 單元格跨兩列，即合併列
rowspan = "2" 單元格跨兩行 ，即合併行
注：合併時需把被合併的行列去掉
注：當表格內容非常多時，表格會下載一點顯示一點，若加上<tbody>,則全部下載完才顯示
如果使用 thead、tfoot 以及 tbody 元素，就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有數據前呈現頁腳了
<thead>、<tbody> 以及 <tfoot> 很少被使用，這是因爲糟糕的瀏覽器支持
八：HTML表單
HTML表單是用於收集用戶信息的
input控件或其他表單控件是用來獲取用戶的信息，得到的信息是一個值，這個值需要賦給一個變量，這樣後臺程序才能引用到該值，這個變量的名字就是name屬性的值，所有一般一個表單控件都需要定義一個name屬性
value 屬性規定 <input> 元素的值。
value 屬性對於不同 input 類型，用法也不同：
對於 "button"、"reset"、"submit" 類型 - 定義按鈕上的文本
對於 "text"、"password"、"hidden" 類型 - 定義輸入字段的初始（默認）值
對於 "checkbox"、"radio"、"image" 類型 - 定義與 input 元素相關的值，當提交表單時該值會發送到表單的action URL。
注意：value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的；value 屬性不適用於 <input type="file">
| type值 | 描述 | type值 | 描述 |
| text | 默認；定義一個單行的文本字段（默認寬度爲 20 個字符） | submit | 定義提交按鈕 |
| password | 定義密碼字段（字段中的字符會被遮蔽） | image | 定義圖像作爲提交按鈕 |
| radio | 定義單選按鈕 | button | 定義可點擊的按鈕(通常與 JavaScript 一起使 用來啓動腳本) |
| checkbox | 定義複選框 | reset | 定義重置按鈕（重置所有的表單值爲默認值） |
| file | 定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳 | hidden | 定義隱藏輸入字段 |
<form action="login.php" method="post" name="login">
<!-- 表單分組控件 -->
<!-- <fieldset>
定義該組表單的標題
<legend>
個人信息
</legend>
</fieldset> -->
<div>
<label for="name">用戶名：</label>
<input type="text" name="name" id="name" placeholder="rock" />
<label for="pwd">密碼：</label>
<input type="password" name="password" id="pwd" />
</div>
<div>
<!-- 單選按鈕，需取相同的name -->
<input type="radio" name="gender" id="male" checked="checked" value="male">
<label for="male">male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">female</label>
</div>
<div>
<!-- 多選按鈕 -->
<input type="checkbox" name="hobbies" id="running" value="running">
<label for="running">running</label>
<input type="checkbox" name="hobbies" id="learnning" value="learnning">
<label for="learnning">learnning</label>
<input type="checkbox" name="hobbies" id="coding" value="coding">
<label for="coding">coding</label>
</div>
<label>hehe<input type="text" name="hehe" value="hehe"></label>
<div>
<input type="submit" value="submit">
<input type="button" value="button" οnclick="run()">
<input type="reset" value="reset">
<input type="file" name="book">
<input type="image" src="1111.png" alt="Submit">
<input type="date" name="birthday">
</div>
<div>
<!-- 下拉列表 -->
<label for="choose_car">您最喜歡的汽車品牌：</label>
<select name="car" id="choose_car">
<optgroup label="國產車品牌">
<option value="jili">吉利</option>
<option value="biyadi">比亞迪</option>
</optgroup>
<optgroup label="進口車品牌">
<option value="baoma">寶馬</option>
<option value="benci" selected="selected">奔馳</option>
</optgroup>
</select>
</div>
<div>
<textarea name="comment" id="" cols="30" rows="10" style="resize:none"></textarea>
</div>
</form>九：補充
1，絕對路徑與相對路徑
絕對路徑：帶上盤符的完整路徑，如 E:\python\1.jpg
相對路徑：1，圖片與HTML文件在同一文件夾 src="1.jpg"
2，圖片在文件的下一級目錄中 src="文件夾名/1.jpg"
3，圖片在文件的上一級目錄中 src="../1.jpg" 或 src="../文件夾名/1.jpg"
2，標籤分類：容器級、文本級
容器級標籤：該標籤內可以放置任何元素；如 <div>、<li>、<dt>、<dd>
文本級標籤：該標籤內只能放置文字，圖片和表單元素；如 <p>、<a>、<span>
3，字符實體
HTML中的預留字符必須被替換爲字符實體；實體名稱對大小寫敏感
| 預留字符(不全) | 字符實體 | 預留字符 | 字符實體 |
| 空格 | | & | & |
| < | < | × 乘號 | × |
| > | > | ÷ | ÷ |
| " | " | © 版權 | © |
字符實體結合音標符：
| 音標符 | 字符 | 字符實體 | 輸出結果 |
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
