一 基本標簽（塊級標簽和內聯標簽）
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線 <div><span>
塊級標簽：<p><h1><table><ol><ul><form><div>
內聯標簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點
- 總是在新行上開始；
- 寬度缺省是它的容器的100%，除非設定一個寬度。
- 它可以容納內聯元素和其他塊元素
inline元素的特點
- 和其他元素都在一行上；
- 寬度就是它的文字或圖片的寬度，不可改變
- 內聯元素只能容納文本或者其他內聯元素
特殊字符
< > " © ®
<br>標簽
<br>可插入一個簡單的換行符。
<br>標簽是空標簽（意味着它沒有結束符，因此下面的這個是錯誤的：<br></br>）
1.1 HTML中塊級標簽和內聯標簽的區別
| 塊級元素 | 行內元素 |
| 獨占一行,默認情況下，其寬度自動填滿其父元素寬度 | 相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化 |
| 可以設置width，height屬性 | 行內元素設置width，height屬性無效 |
| 可以設置margin和padding屬性 | 行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。 |
| 對應於display:block | 對應於display:inline； |
二，head標簽
我們首先來介紹一下head標簽的主要內容和作用，文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其他方面的應用（移動端）的等。 以下標簽是可以用在head標簽中的：
<head lang='en'>
<title>標題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
三，title標簽
在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標簽頁的標題欄中。可以把它看成是一個網頁的標題。主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。
下面做一個小練習，創建一個帶有我們自定義標題內容的網頁：
<!DOCTYPE HTML>
<html>
<head>
<title>戰爭熱誠</title>
</head>
<body></body>
</html>
將上面的文件另存為a.html，然后用瀏覽器打開，就可以看到下面的內容。
上面我們介紹了title標簽的用法，接下來我們繼續看一下head標簽中可以使用的其他標簽：
上面我們介紹了title標簽的用法，接下來我們繼續看一下head標簽中可以使用的其他標簽：
四，meta標簽
Meta標簽介紹：
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位於文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
常用的meta標簽：
- http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒后跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
- 2. name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="戰爭熱誠">
五，body標簽
想要在網頁上展示出來的內容一定要放在body標簽中。 把我們之前海燕那一段HTML代碼貼過來，保存到一個HTML格式的文件中。
<!DOCTYPE HTML>
<html>
<head>
<title>戰爭熱誠</title>
</head>
<body>
<h1>海燕</h1>
<p>在蒼茫的大海上，</p>
<p>狂風卷集着烏雲。</p>
<p>在烏雲和大海之間，</p>
<p>海燕像黑色的閃電，</p>
<p>在高傲地飛翔。</p>
</body>
</html>
使用瀏覽器打開，看一下效果：
上面也出現了字體的大小，這是什么呢？ 這里就簡單介紹一下。
六，標題標簽h1~h6
<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。 由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標簽層級來構建文檔的結構。因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用css來定義來達到漂亮的顯示效果。 標題標簽通常用來制作文章或網站的標題。
h1~h6標簽的默認樣式：
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>戰爭熱誠</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
請看上面代碼 <h1>和<h2>書寫在一行上展示，但是在瀏覽器的效果卻是換行了，如下：
文本樣式標簽主要用來對HTML頁面中的文本進行修飾，比如加粗，斜體，線條樣式等等，，，，
1. `<b></b>`：加粗 2. `<i></i>`：斜體 3. `<u></u>`：下划線 4. `<s></s>`：刪除線 5. `<sup></sup>`：上標 6. `<sub></sub>`：下標
現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標簽。
這兩個標簽都是表示強調，但是兩者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。
在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。兩個標簽相比，我們通常會推薦大家使用`<strong>`表示強調。
七，段落標簽p
<p>,paragraph的簡寫。定義段落
<body>
<p>我們大多數都是想法太多實踐太少，或者簡單點說就是想不勞而獲</p>
<p>為了改變自己，我決定好好學習，多做事情，少說話</p>
</body>
瀏覽器展示特點：
- 跟普通文本一樣，但我們可以通過css來設置當前段落的樣式
- 是否又獨占一行呢？ 答案是的 塊級元素
超鏈接標簽a
href:要連接的資源路徑 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容. name: 定義一個頁面的書簽. 用於跳轉 href : #id.（錨）
超級鏈接<a>標記代表一個鏈接點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文本或圖片連接到其他的頁面、文本或圖像
<body>
<h1>
<!-- a鏈接 超鏈接
target:_blank 在新的網站打開鏈接的資源地址
_self 在當前網站打開鏈接的資源地址
title: 鼠標懸停時顯示的標題
-->
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下載包</a>
<a href="mailto:zhaoxu@tedu.cn">聯系我們</a>
<!-- 返回頁面頂部的內容 -->
<a href="#">跳轉到頂部</a>
<!-- 返回某個id -->
<a href="#p1">跳轉到p1</a>
<!-- javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼，
而 javascript:; 表示什么都不執行，這樣點擊<a>時就沒有任何反應。 -->
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
</h1>
</body>
- target:_blank 在新的網站打開鏈接的資源地址
- target：_self 在當前網站打開鏈接的資源地址
- title: 表示鼠標懸停時顯示的標題
鏈接其他表現形式：
- 目標文檔為下載資源 例如：href屬性值，指定的文件名稱，就是下載操作(rar、zip等)
- 電子郵件鏈接 前提：計算機中必須安裝郵件客戶端，並且配置好了郵件相關信息。 例如：
<ahref="mailto:zhaoxu@tedu.cn">聯系我們</a> - 返回頁面頂部的空鏈接或具體id值的標簽 例如：
<a href="#">內容</a>或<a href="#id值">內容</a> - javascript:是表示在觸發
<a>默認動作時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a> - javascript:;表示什么都不執行，這樣點擊
<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</a
八，列表標簽ul，ol
<ul>: 無序列表
<ol>: 有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
網站頁面上一些列表相關的內容比如說物品列表、人名列表等等都可以使用列表標簽來展示。通常后面跟<li>標簽一起用，每條li表示列表的內容
<ul>:unordered lists的縮寫 無序列表 <ol>:ordered listsde的縮寫 有序列表
<!-- 無序列表 type可以定義無序列表的樣式-->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定義有序列表的樣式 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
ol標簽的屬性：
type：列表標識的類型
- 1：數字
- a：小寫字母
- A：大寫字母
- i：小寫羅馬字符
- I：大寫羅馬字符
列表標識的起始編號
- 默認為1
ul標簽的屬性： type：列表標識的類型
- disc：實心圓(默認值)
- circle：空心圓
- square：實心矩形
- none：不顯示標識
九，盒子標簽div
<div>可定義文檔的分區 division的縮寫 譯：區 <div> 標簽可以把文檔分割為獨立的、不同的部分,請看下面代碼我們將他們進行分區
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>常用標簽一</title>
</head>
<body>
<div id="wrap">
<div class="para">
<p style="height: 1000px" id="p1">段落</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下載包</a>
<a href="mailto:zhaoxu@tedu.cn">聯系我們</a>
<a href="#">跳轉到頂部</a>
<a href="#p1">跳轉到p1</a>
<a href="javascript:alert(1)">內容</a>
<a href="javascript:;">內容</a>
</h1>
</div>
<!-- <h2>戰爭熱誠</h2>
<h3>戰爭熱誠</h3>
<h4>戰爭熱誠</h4>
<h5>戰爭熱誠</h4>
<h6>戰爭熱誠</h6> -->
<div class="para">
<!-- 定義段落 通常指文章一段內容 -->
<p>好好學習，天天向上</p>
<p>有時候把，我覺得有些人真的厲害，為什么那么厲害呢</p>
<p>有時候把，又覺得自己超級笨，為什么自己那么笨呢</p>
</div>
<div class="lists">
<!-- 無序列表 -->
<ul type="circle">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 -->
<ol type="a">
<li>我的賬戶</li>
<li>我的訂單</li>
<li>我的優惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
分析上面代碼可以下面的層次結構
<div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div>
我們將文檔放在一個父級的區（div）中，它里面包含四塊區（div）域，瀏覽器查看效果,你會發現每小塊區域都是獨占一行的，所以div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你可以看成給這個區域起個名字。id是唯一的，一個頁面中不能有兩個重復的id，跟身份證號碼一樣，class可以設置同樣的屬性值，並且可以設置多個，例如class=’para n1‘
十，圖片標簽<img>
src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
一個網頁除了有文字，還會有圖片。我們使用<img/>標簽在網頁中插入圖片。
語法：
<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
注意：
- src設置的圖片地址可以是本地的地址也可以是一個網絡地址。
- 圖片的格式可以是png、jpg和gif。
- alt屬性的值會在圖片加載失敗時顯示在網頁上。
- 還可以為圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度
<div>
<span>與行內元素展示的標簽<span>
<span>與行內元素展示的標簽<span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能實戰" style="width: 200px;height: 200px">
</div>
- 瀏覽器查看效果：行內塊元素
- 5. 與行內元素在一行內顯示
- 6. 可以設置寬度和高度
- 7. span標簽可以單獨摘出某塊內容，結合css設置相應的樣式
十一，表格標簽table
表格由<table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合並單元格）
<th>: table header <tbody>(不常用): 為表格進行分區.
<div class="table"> <table> <!--表格頭--> <thead> <!--表格行--> <tr> <!--表格列，【注意】這里使用的是th--> <th></th> </tr> </thead> <!--表格主體--> <tbody> <!--表格行--> <tr> <!--表格列，【注意】這里使用的是td--> <td></td> </tr> <tr> <td></td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td></td> </tr> </tfoot> </table> </div>
表格行和列的合並
rowspan 合並行(豎着合並) colspan 合並列(橫着合並)
小練習：
<body>
<div class="table">
<table border="1" cellspacing="0">
<!--表格頭-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】這里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主體-->
<tbody>
<!--表格行-->
<tr>
<td rowspan="3">上午</td>
<!--表格列，【注意】這里使用的是td-->
<td>語文</td>
<td>數學</td>
<td>英文</td>
<td>生物</td>
<td>化學</td>
</tr>
<tr>
<!--表格列，【注意】這里使用的是td-->
<td>語文</td>
<td>數學</td>
<td>英文</td>
<td>生物</td>
<td>化學</td>
</tr>
<tr>
<!--表格列，【注意】這里使用的是td-->
<td>語文</td>
<td>數學</td>
<td>英文</td>
<td>生物</td>
<td>化學</td>
</tr>
<tr>
<td rowspan ="2">下午</td>
<!--表格列，【注意】這里使用的是td-->
<td>語文</td>
<td>數學</td>
<td>英文</td>
<td>生物</td>
<td>化學</td>
</tr>
<tr>
<!--表格列，【注意】這里使用的是td-->
<td>語文</td>
<td>數學</td>
<td>英文</td>
<td>生物</td>
<td>化學</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">課程表</td>
</tr>
</tfoot>
</table>
</div>
</body>
十二，表單標簽 form
表單是一個包含表單元素的區域
表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、輸入框(input)、單選框（）
表單的作用
表單用於顯示、手機信息，並將信息提交給服務器
1，語法
<form>允許出現表單控件</form>
表單標簽<form>
表單用於向服務器傳輸數據。
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.
action: 表單提交到哪. 一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 默認取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> 標簽的屬性和對應值
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；
而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的
value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：
type
=
"button"
,
"reset"
,
"submit"
-
定義按鈕上的顯示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定義輸入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定義與輸入相關聯的值
checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使.
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
戶端編程，而在css和javascript中使用的
value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：
|
1
2
3
4
5
|
type
=
"button"
,
"reset"
,
"submit"
-
定義按鈕上的顯示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定義輸入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定義與輸入相關聯的值
|
checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使.
上傳文件注意兩點：
1 請求方式必須是post
2 enctype="multipart/form-data"
<select> 下拉選標簽屬性
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：
value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>為每一項加上分組
<textarea> 文本域
name: 表單提交項的鍵.
cols: 文本域默認有多少列
rows: 文本域默認有多少行
<label>
<label for="www">姓名</label> <input id="www" type="text">
<fieldset>
<fieldset> <legend>登錄吧</legend> <input type="text"> </fieldset>
屬性見下表：
表單控件分類，見下圖：
<form action="http://www.baidu.com" method="get">
<!-- input -->
<!--文本框-->
<p>
用戶名稱：
<input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
</p>
<p>
用戶密碼：
<input type="password" name="txtUsepwd">
</p>
<p>
確認密碼：
<input type="password" name="txtcfmpwd" disabled>
</p>
<!--單選框-->
<p>
用戶性別：
<input type="radio" name="sexrdo" value="男">男
<input type="radio" name="sexrdo" value="女" checked=''>女
</p>
<!--復選框-->
<p>
用戶愛好：吃
<input type="checkbox" name="chkhobby" value="吃" checked> 喝
<input type="checkbox" name="chkhobby" value="喝"> 玩
<input type="checkbox" name="chkhobox" value="玩"> 樂
<input type="checkbox" name="chkhobox" value="樂" checked>
</p>
<!-- 按鈕 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按鈕">
</p>
<!--文件選擇框-->
<p>
請上傳文件：
<input type="file" name="txtfile">
</p>
<!--textarea-->
<p>
自我介紹：
<textarea name="txt" cols="20" rows="5"></textarea>
</p>
<!--選擇框-->
<!--滾動列表 multiple設置以后實現多選效果，ctrl+鼠標左鍵進行多選-->
<p>籍貫：
<select name="sel" size="3" multiple>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州" selected>廣州</option>
</select>
</p>
</form>
十三，其他標簽
換行標簽 <br>
<br>標簽用來將內容換行，其在HTML網頁上的效果相當於我們平時使用word編輯文檔時使用回車換行。
分割線 <hr>
<hr>標簽用來在HTML頁面中創建水平分隔線，通常用來分隔內容
特殊符號
瀏覽器在顯示的時候會移除源代碼中多余的空格和空行。 所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML代碼中的所有連續的空行（換行）也被顯示為一個空格。
舉個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>戰爭熱誠的博客</title> </head> <body> <p> 好好學習 我們會掙好多錢的 </p> </body> </html>
上面的代碼在瀏覽器中最終的顯示效果為：
所以HTML代碼對縮進的要求並不嚴格，我們通常使用縮進來讓我們的代碼結構更清晰，僅此而已。
特殊字符
在上一個實例中，我們演示了HTML中輸入空格、回車都是沒有作用的。要想輸入空格，需要用特殊符號 -- 。
常用的特殊字符：
HTML特殊符號對照表：http://tool.chinaz.com/Tools/HtmlChar.aspx