HTML基礎
1. 標題
HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
2.段落
HTML 段落是通過標簽<p>來定義的。
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
3.折行
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 < br > 標簽：
<p>這個<br>段落<br>演示了分行的效果</p>
4.水平線
<hr> 標簽在 HTML 頁面中創建水平線。
5.注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
注釋寫法如下:
6.列表
6.1無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用<ul>標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
| 屬性 | 值 | 描述 |
|---|---|---|
| square | 實心方塊 | |
| type | circle | 空心圓 |
| disc | 實心圓 |
6.2有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於<ol>標簽。每個列表項始於<li>標簽。
列表項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
| 屬性 | 值 | 描述 |
|---|---|---|
| 1 | 數字序號 | |
| a | 小寫字母 | |
| type | A | 大寫字母 |
| i | 小寫羅馬字母 | |
| I | 大寫羅馬字母 |
7.div和span標簽
7.1div 標簽
<div>是一個塊級元素，通常與CSS配合使用，用於頁面布局
<div>標簽可以把文檔分割為獨立的，不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
<div>是一個塊級元素。這意味着它的內容自動地開始新的一行。實際上，換行是<div>固有的唯一格式表現。可以通過<div>的class或id應用和外的樣式
<div>content</div>
常用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left、right、center | 規定div元素中內容的對齊方式，以后可以用樣式取代它 |
7.2span 標簽
<span>被用來組合文檔中的行內元素，審判沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於為部分文本設置樣式屬性。
<span>content</span>
8 格式化標簽
8.1font
規定文本的字體顏色、字體尺寸、字體樣式
常見屬性：color（顏色名、十六進制，rgb）
size（字體大小）
face（字體風格）
8.2pre
定義預格式化的文本。被包圍在pre的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
8.3文本標簽
<b>加粗文本</b> 或者<strong>加粗文本</strong>
<i>斜體文本</i>
<u>下划線<u/>
<del>刪除線<del/>
<code>電腦自動輸出</code>
<sub> 下標</sub> 和 <sup> 上標</sup>
9.超鏈接a標簽
HTML 鏈接是通過標簽<a>來定義的。
HTML 鏈接由<a>標簽定義。鏈接的地址在 href 屬性中指定
使用 target 屬性，
常用屬性
href： 必須屬性，鏈接的地址在 href 屬性中指定
target ：你可以定義被鏈接的文檔在何處顯示。
_self 表示當前頁面（默認）
_blank 表示打開新頁面進行跳轉
9.1a標簽實現錨點
利用a標簽的name屬性：
<a name="top"></a>
利用一般標簽的id屬性：div id="", a id=""等；
<div id="top"> </div>、<a id="top"><a/>
錨點定位，#別忘記了
<a href="#top">返回首部<a/>
10. 圖像標簽 img
在 HTML 中，圖像由<img> 標簽定義。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
img標簽，是一個行內標簽，不會自動換行
<img src="" alt="" />
必須屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 規定圖像的替代文本，一般在圖片無法正常顯示占位的文字。 |
| src | URL | 規定顯示圖像的URL |
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | top、bottom、middle、left、right | 規定如何根據周圍的文本來排列圖像 |
| border | pixels | 定義圖像周圍的邊框 |
| height | pixels、% | 定義圖像的高度 |
| width | pixels、% | 定義圖像的寬度 |
| title | 文本 | 當鼠標在圖片上時顯示的文字 |
11.表格
<tab></tab>標簽定義HTML表格
<tr></tr>標簽定義表格的行，tr元素包含一個或者多個td\th
<td></td>標簽定義HTML表格中的標准單元格
<th></th>標簽定義表格內的表頭單元格。th元素內部的文本通常會呈現為劇中的粗體文本，而td元素內的文本通常是左對齊的普通文本
簡單的HTML表格table元素以及一個或多個tr、hd或td元素組成。
理解：table相當於表格的外框，tr相當於行，td為一個單元格，th為有標題作用的單元格，同時th中的內容有加粗效果。
table標簽常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right、left、center | 表格對齊方式 |
| border | px | 規定表格邊框的寬度 |
| width | px、% | 規定表格的寬度 |
table標簽中，width:px、%
% ：參考的是上一級元素的寬度，如果上一級元素未設置，則參考屏幕寬度
height：表格的高度
tr標簽常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | right、left、center | 定義表格行的內容對齊方式 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 定義表格的背景顏色，以后用樣式取代 |
| valign | top、middle、bottom | 規定表格中內容的垂直對齊方式，以后用樣式取代 |
css樣式：
border-collapse：collapse; 合並表格邊框
合並單元格
的colspan和rowspan分別規定單元格橫跨的列數和行數
縱向合並：rowspan
橫向合並：colspan
12.表單
12.1form標簽
表單是一個包含表單元素的區域。
表單使用表單標簽 <form> 來設置:
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
注：
- 表單用於向服務器傳輸數據，form元素是塊級元素，其前后會產生折行。
- 表單提交時，必須設置表單元素的name屬性值，否則無法獲取數據
- 表單需要結合表單元素去使用
常用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| action | URL | 規定當提交表單時向何處發送表單數據 |
| method | get、post | 規定用於發送form-data的HTTP方法 |
| name | Form_name | 規定表單的名稱 |
| target | _ bank(空白窗口)、_ self(當前窗口) 、_parent_top framename | 規定在何處打開action URL（提交數據時打開窗口的方式） |
method：表單提交方式：get、post
get：默認，主動的獲取方式，數據放在url上(瀏覽器中地址欄的后面)，數據的容量有限，安全性差，有緩存(會將數據保存在瀏覽器中)
post：數據放在請求時體中，數據量理論上沒有限制，相對安全，沒有緩存。post請求需要服務器的支持
所有標簽都有的屬性：
- id屬性：用來標識元素的唯一性
- name屬性：提交數據時的參數名
- stytle屬性：設置元素的行內樣式（具體樣式）
- class屬性：設置元素的樣式名
12.2input標簽
<input>標簽用於收集用戶信息。
常用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 定義圖像輸入的替代文本 |
| checked | checked | 規定此input元素首次加載時禁用此元素 |
| disabled | diaabled | 當input元素加載時禁用此元素 |
| readonly | readonly | 規定輸入字段為只讀 |
| maxlength | number | 規定輸入的字符串最大長度 |
| value | value | 規定input元素的值 |
| type | text password radio checkbox file hidden ibutton submit reset date |
規定input元素的類型。文本框、密碼框、單選框、復選框、文件域、隱藏域、普通按鈕、提交按鈕、重置按鈕、日期框 |
注：
- 單選框需要通過name屬性設置為一組，復選框也是一樣的
- 如果是上傳文件的表單，則表單需要設置一個屬性 enctype="multipart/form-data",提交方式為post請求
- 沒有name屬性是無法提交數據的！！！
文本域（Text Fields）
文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
瀏覽器顯示如下：
注意:表單本身並不可見。同時，在大多數瀏覽器中，文本域的默認寬度是 20 個字符。
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
Password: <input type="password" name="pwd">
</form>
瀏覽器顯示效果如下:
注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
瀏覽器顯示效果如下:
復選框（Checkboxes）
<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
瀏覽器顯示效果如下:
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
瀏覽器顯示效果如下:
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
12.3textarea標簽
該標簽定義多行的文本輸入控件。文本區中可容納無限數量的文本，可以通過cols和rows屬性來規定text area的尺寸。cols規定文本區內的可見寬度。rows規定文本區內的可見行數。
<textarea>content<textarea/>
12.4lable標簽
<lable>標簽為input元素定義標注（標記）
lable元素不會呈現任何的特殊效果。
lable標簽的for屬性應當與相關元素的id屬性相同，此時點擊lable標簽會自動為元素聚焦
12.5button標簽
input按鈕：
type="button" 普通按鈕
type="submit" 提交按鈕
type="reset" 重置按鈕
button按鈕：
type="button" 普通按鈕
type="submit"（默認） 提交按鈕
type="reset" 重置按鈕
注：button按鈕為雙標簽，標簽之間可以添加內容（文本或標簽等）
不給type的話 ：
<button>按鈕</button>————這個是"submit"（默認提交按鈕，而不是普通按鈕
12.6select標簽
<select>用於定義下拉列表。
<select name="student" > //下拉框
<option value ="">小學生</option> //下拉框的選項標簽
<option value="">中學生</option>
<option value="">大學生</option>
</select>
select常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉框 |
| multiple | multiple | 規定可選多個選項 |
| name | name | 規定下拉列表的名稱 |
| size | number | 規定下拉列表中可見選項的數目 |
option常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用該下拉選項 |
| selected | selected | 規定選項（首次顯示在列表中）表現為選中狀態 |
| value | text | 定義送往服務器的選項值 |
13.HTML常見字符實體
 |
實體名稱對大小寫敏感！ |
|---|---|
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |||
| < | 小於號 | < | < |
| > | 大於號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
雖然 html 不區分大小寫，但實體字符對大小寫敏感。
13.1標簽的分類
HTML中標簽元素三種不同的類型：塊元素，行內元素，行內塊元素
塊級元素
元素都從新的一行開始，並且其后的元素也另起一行;元素的高度、寬度、行高以及頂和底邊距都可以設置；元素寬度在不設置情況下，是它本身父容器的100%（和父元素寬度一致），除非設定一個寬度。
html中常見的塊級元素：`
| 標簽 | 描述 |
|---|---|
<caption> |
定義表格標題。 |
<div> |
定義文檔中的節。 |
<dl> |
定義定義列表。 |
<dt> |
定義定義列表中的項目。 |
<form> |
定義供用戶輸入的 HTML 表單。 |
<h1> to <h6> |
定義 HTML 標題。 |
<header> |
定義 section 或 page 的頁眉。 |
<hr> |
定義水平線。 |
<li> |
定義列表的項目。 |
<ol> |
定義有序列表。 |
<p> |
定義段落。 |
<pre> |
定義預格式文本。 |
<section> |
定義 section。 |
<table> |
定義表格。 |
<td> |
定義表格中的單元。 |
<th> |
定義表格中的表頭單元格。 |
<thead> |
定義表格中的表頭內容。 |
<time> |
定義日期/時間。 |
<tr> |
定義表格中的行。 |
<ul> |
定義無序列表。 |
行內元素
和其他元素都在一行上；元素的高度、寬度及頂部和底部的邊距不可設置；元素的寬度就是它包含的文字或者圖片的寬度，不可改變。
html中常見的行內元素：
| 標簽 | 描述 |
|---|---|
<a> |
定義錨。 |
<b> |
定義粗體字 |
<br> |
定義簡單的折行。 |
<button> |
定義按鈕 (push button)。 |
<del> |
定義被刪除文本。 |
<i> |
定義斜體字。 |
<img> |
定義圖像。 |
<input> |
定義輸入控件。 |
<label> |
定義 input 元素的標注。 |
<q> |
定義短的引用。 |
<select> |
定義選擇列表（下拉列表）。 |
<span> |
定義文檔中的節。 |
<strong> |
定義強調文本。 |
<sub> |
定義下標文本。 |
<sup> |
定義上標文本。 |
<textarea> |
定義多行的文本輸入控件。 |
行內塊元素
和其他元素都在一行上；元素的高度、寬度、行高以及頂部和底部的邊距都可以設置。
img：用於標記網頁中的圖像 ，有屬性src:圖片資源路徑 ，alt:提示信息 當圖片加載失敗 ，以指定文本形式代替圖片顯示
button：按鈕
input：輸入框，有屬性type輸入框類型，有屬性值（text表示文本輸入框，file文件選擇器，password密碼輸入框，email郵箱輸入框，number數字輸入框，button按鈕）。placeholder占位字符，用於提示輸入框應該輸入的內容。value表示輸入框中的內容。name和后台服務器交互時，必須攜帶name屬性，發送請求時的參數名。
單選 type=“radio” 表示一個單選選項處於同一組單選框只能選中一個值，將多個radio的name屬性值設置為相同的值
type="checkbox"復選框
label:和input標簽綁定到一塊使用，有屬性for，屬性值就是input輸入框的id值。checked屬性為標簽選中狀態
select:下拉列表
option:下拉選項
總結：
注:
以上是HTML重點知識的總結，如果文章有任何錯誤和建議，請各位大佬盡情評論留言！如果這篇文章對你有些許幫助，希望可愛親切的您點個贊推薦一手，非常感謝啦！最后，感謝各位大佬們看到了這里！願你韶華不負，青春無悔！
