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重點知識的總結，如果文章有任何錯誤和建議，請各位大佬盡情評論留言！如果這篇文章對你有些許幫助，希望可愛親切的您點個贊推薦一手，非常感謝啦！最後，感謝各位大佬們看到了這裡！願你韶華不負，青春無悔！
