大齡電力汪前端學習路（HTML基礎篇）

02-19

經過在谷裡面將近兩個月的學習，現在已經將HTML和CSS的基本內容大概學完，一直想對自己學過的內容做一個回顧和總結。今天下班就乘著這股勁頭整理了一些自己學過的HTML筆記，寫出來跟大家分享一下。內容不算精妙，頂多算是個筆記總結，見笑啦！

HTML（超文本標記語言——HyperText Markup Language）是構成Web世界的基石。它描述並定義了一個網頁的內容。其他除HTML以外的技術則通常用來描述一個網頁的表現／展示效果（CSS）或功能（JavaScript）。

以上為MDN上對HTML的解釋，大家可以簡單的看一看。現在我們日常學習的都是HTML 5的內容，至於HTML的歷史，那麼大家可以自行去網上搜索一下，我就不在這裡浪費時間給大家介紹啦！下面就給大家簡單的介紹下我們所學的HTML 5吧！

HTML 5的結構

<!DOCTYPE html> 定義HTML文檔類型，此為標準HTML 5的文檔聲明<html lang="en"> 定義HTML文檔的語言類型<head><meta charset="UTF-8"> 定義HTML文檔字元類型,UTF-8是現在使用最廣泛的網頁編碼<title>Document</title> 定義文檔的標題</head><body> 瀏覽器呈現的頁面內容 <header> 頁面頭部（HTML 5特有標籤） <h1>HTML 5</h1> 一級標題 </header> <main> 頁面主體（HTML 5特有標籤） </main> <footer> 頁面底部（HTML 5特有標籤） </footer></body></html> HTML文件結束標記

段落標籤

段落，用於定義網頁中的一段文本，段落與段落之間自動換行。

<p>...</p>

標題標籤

<h1>...</h1> 一級標題<h2>...</h2> 二級標題<h3>...</h3> 三級標題<h4>...</h4> 四級標題<h5>...</h5> 五級標題<h6>...</h6> 六級標題

（重要程度依次遞減次遞減）

文字特殊樣式

<b>...</b> 加粗<strong>...</strong> 加粗（強調語氣）<i>...</i> 斜體<em>...</em> 斜體（強調語氣）<u>...</u> 下劃線<del>...</del> 刪除線（表示刪除）<sub> 下標<sup> 上標

塊元素

<div>...</div>

語義為「一大塊」，用於給頁面劃分區塊，讓結構更清晰。擁有margin（外邊距），padding（內邊距），border（邊框），content（內容）等屬性

按鈕

換行/分割線/注釋

<br> 換行<hr> 水平分割線 注釋

超鏈接

<a href="..." target="_blank">...</a>

href：表示對應鏈接地址。

target：代表此鏈接打開方式，默認為本窗口打開，_blank重新打開一個窗口瀏覽對應鏈接網站。

<a href="#id名">...</a>

「#」代表錨點。在下文標籤中加個id名後，當滑鼠點擊文字，就可以直接跳轉至對應的位置。

圖片

<img src=" " alt=" ">

src：指定圖片來源地址

alt：當圖片無法顯示時的提示文本，同時方便視覺障礙人士閱讀本網頁。

跨域

用於在頁面中嵌入另一個頁面，注意跨域操作問題，本頁面JS無法控制嵌入頁面。

<iframe src="http://jirengu.com" name=mypags>...</iframe><p><a href="http://www.w3cschool.cc" target="mypage">W3Cschool.cc</a></p>

列表

1，有序列表

1，<ol> order list 。

2，用於表示帶步驟或者編號的並列內容。

3，<ol>的直接子元素是<li>，如想嵌套其它元素則只能在<li>標籤中嵌套其它元素。

<ol> <li>...</li> <li>...</li> <li>...</li></ol>

2，無序列表

1，<ul> unsort list。

2，用於表示並列的內容。

3，<ul>的直接子元素是<li>，如想嵌套其它元素則只能在<li>標籤中嵌套其它元素。

<ul> <li>...</li> <li>...</li> <li>...</li></ul>

3，自定義列表

<dl> <dt>...</dt> 自定義列表項 <dd>...</dd> 自定義列表項的解釋 <dd>...</dd> 自定義列表項的解釋 <dt>...</dt> 自定義列表項 <dd>...</dd> 自定義列表項的解釋 <dd>...</dd> 自定義列表項的解釋</dl>

表格<table></table>

表格基本結構

<table>
<caption>表格標題</caption> <tr> <td>我是第一行的第一個單元格</td> <td>我是第一行的第二個單元格</td> </tr> <tr> <td>我是第二行的第一個單元格</td> <td>我是第二行的第二個單元格</td> </tr> </table>

colspan：水平合併單元格（跨列）

rowspan：垂直合併單元格（跨行）

表格的表頭<th>是<td>單元格的一種變體，實質上是一種單元格加粗和居中。

表單<form>...</form>

<form action="" method="get/post">...</form>

定義供用戶輸入的HTML表單（action裡面的值是需要提交表單上送地址，method提交方式裡面的值只能選擇get或post，建議使用post）

文本輸入框

<label for="username">...</label><input id="username" type="text" placeholder="請輸入用戶名">

<label>標籤的for裡面的值，應該和它對應的<input裡面的id值對應，就可以實現滑鼠選中<label>標籤裡面的內容，自動跳轉到對應的文本框。placeholder代表文本框內的提示文字

密碼輸入框

<label for="password">...</label><input id="password" type="password" placeholder="請輸入密碼">

複選按鈕

<label for="xxx">...</label><input id="xxx" type="checkbox" checked>

checked表示默認被選中的。

單選按鈕

<label for="xxxx">...</label><input id="xxxx" type="radio" name="xxxxx">

單選按鈕的多個name值必須一樣，才可以實現單選作用。

提交按鈕

<input type="submit" value="ok">

valeu的值就是按鈕內顯示出來的內榮，<submit>標籤必須寫在<form>表單內部，將表單內容提交對應地址。

重置標籤

<input type="reset">

圖片標籤（有提交功能）

<input type="image">

多行文本框

<textarea cols="一行多少字元" rowa="多少行"><textarea>

列表框

<select size="一次顯示多少個" multiple="可多選"><option>下拉菜單1</option><option>下拉菜單2</option></select>

隱藏域

<input type="hidden"/>

文件域

<input type="file"/>

註：所有的<input裡面必須要有name，name可以和它的id重名，其中id作為標籤的唯一標識，name則是作為可與伺服器交互數據的HTML元素的標示，用於表單提交，只有加了name屬性的標籤元素才會提交到對應的伺服器；value代表對應標籤的值，用戶需要輸入的我們可以不加value，但是用戶選擇的我們必須加value值。

以上僅為本人作為一個初學者在日常學習中接觸到的一些基本HTML標籤，如有錯誤請在評論中指出，謝謝！