1.標(biāo)題和段落標(biāo)簽
<mark>標(biāo)題標(biāo)簽</mark>，只有h1 ~h6 這6個標(biāo)題標(biāo)簽跃惫，字體大小依次減小。
<h1>1級標(biāo)題</h1>
<h2>2級標(biāo)題</h2>
<h3>3級標(biāo)題</h3>
<h4>4級標(biāo)題</h4>
<h5>5級標(biāo)題</h5>
<h6>6級標(biāo)題</h6>
<mark>段落標(biāo)簽</mark>：p標(biāo)簽
<p>
段落內(nèi)容
</p>
2.圖片標(biāo)簽
支持圖片格式：gif艾栋、jpg爆存、jpeg、png蝗砾、bmp先较、webp。
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
屬性：
src：圖片的資源地址悼粮，支持本地圖片闲勺、網(wǎng)絡(luò)圖片；
alt：圖片說明扣猫，當(dāng)圖片加載失敗時會顯示該內(nèi)容
title：用于鼠標(biāo)放到圖片上時顯示文字霉翔；
3.超鏈接
<mark>頁面跳轉(zhuǎn)</mark>
標(biāo)簽：<a>
<!-- 超鏈接 -->
<a >百度</a>
<a target="_blank">新標(biāo)簽打開百度</a>
<a target="_parent">parent方式打開百度</a>
<a target="_top">top方式打開百度</a>
屬性：
href：超鏈接跳轉(zhuǎn)地址，可以是本地路徑/相對路徑苞笨、url地址，若是url地址時務(wù)必添加http或https子眶，否則無法正常跳轉(zhuǎn)頁面瀑凝；
target：定義超鏈接頁面的打開方式，有以下幾個值：
- _self：內(nèi)容在<mark>當(dāng)前頁面</mark>顯示
- _blank：內(nèi)容在<mark>新的頁面</mark>顯示臭杰；
- _parent：在父窗體中打開鏈接粤咪，在窗口與頂級框架中，等同于_self
- _top：在當(dāng)前窗體打開鏈接渴杆，并替換當(dāng)前的整個窗體(框架頁)寥枝，清除所有包含的框架
<mark>錨點跳轉(zhuǎn)</mark>
即頁面內(nèi)部位置跳轉(zhuǎn)宪塔，通過給超鏈接的href屬性設(shè)置以#{id值}的方式實現(xiàn)頁面內(nèi)部錨點跳轉(zhuǎn)。
示例如下：
<p id="p0">
<a href="#p1">錨點跳轉(zhuǎn)1</a>
<a href="#p2">錨點跳轉(zhuǎn)2</a>
</p>
<p>
...
<p id="p1">
...
</p>
<p id="p2">
...
</p>
</p>
<p>
<a href="#p0">回到頂部</a>
</p>
上述代碼定義了幾個p標(biāo)簽囊拜，給其設(shè)置了id值某筐，然后給超鏈接a標(biāo)簽的屬性href設(shè)置跳轉(zhuǎn)錨點。
4.文本修飾標(biāo)簽
| 標(biāo)簽 | 標(biāo)簽功能說明 |
|---|---|
<b > |
bold的縮寫冠跷，文字加粗 |
<strong > |
文字加粗南誊，閱讀時會被加重讀音，推薦使用 |
<i > |
italic的縮寫蜜托，字體傾斜 |
<em > |
字體傾斜抄囚，有加強語氣 |
<u > |
underline的縮寫，文字下劃線 |
<s> |
strike的縮寫橄务，文字帶刪除線 |
<del> |
delete的縮寫幔托，文字帶刪除線 |
<sup > |
文字上標(biāo)簽，如：22 |
<sub > |
文字下標(biāo)簽蜂挪，如：O2 |
示例如下：
<p><b>b標(biāo)簽 文字加粗</b></p>
<p><strong>strong標(biāo)簽 文字加粗重挑，閱讀時會被加重讀音</strong></p>
<p><i>我會傾斜</i></p>
<p><em>我會傾斜，有強調(diào)作用</em></p>
<p><u>我是下劃線標(biāo)簽</u></p>
<p><s>刪除線標(biāo)簽</s></p>
<p><del>del刪除線標(biāo)簽</del></p>
<p>π * 3<sup>2</sup></p>
<p>CO<sub>2</sub></p>
5.列表標(biāo)簽
HTML中列表分為：有序列表锅劝、無序列表攒驰、自定義列表。
| 類型 | 標(biāo)簽 | 說明 |
|---|---|---|
| 有序列表 | <ol >故爵、<li > |
有順序 |
| 無序列表 | <ul >玻粪、<li > |
無序 |
| 自定義列表 | <dl >、<dt >诬垂、<dd > |
—— |
<mark>有序列表</mark>：
語法：<ol><li></li></ol>劲室，
規(guī)定ol標(biāo)簽中不能有其它內(nèi)容，若想添加其它內(nèi)容结窘，必須放在li標(biāo)簽中很洋。
列表的序號默認(rèn)為阿拉伯?dāng)?shù)字，從1開始隧枫。
可以通過ol標(biāo)簽的type屬性進(jìn)行設(shè)置序號的類型喉磁。
- 1，阿拉伯?dāng)?shù)字順序
- A官脓，大寫字母順序
- a协怒，小寫字母順序
- I，大寫羅馬數(shù)字順序卑笨，I孕暇、II、III、IV妖滔、V隧哮、VI、VII座舍、VIII沮翔、IX、X ······
- i簸州，小寫羅馬數(shù)字順序鉴竭，i ii iii iv v vi vii viii ······
可以通過ol標(biāo)簽的start屬性進(jìn)行設(shè)置列表的起始序號，數(shù)值形式岸浑。
如下示例：
<ol type="i" start="2">
<li>小米</li>
<li>華為</li>
<li>OPPO</li>
</ol>
<mark>無序列表</mark>：
<p>無序列表</p>
<ul type="disc">
<li>小米</li>
<li>華為</li>
<li>OPPO</li>
</ul>
type屬性有以下幾個值：
- disc：實心圓
- circle：空心圓
- none：無樣式
- square：方塊
<mark>自定義列表</mark>：<dl>搏存、<dt>、<dd>
dl：definition list的縮寫矢洲，定義列表璧眠；
dt：definition term的縮寫，可以理解為標(biāo)題读虏，定義術(shù)語责静；
dd：definition description的縮寫，定義描述
如下示例：
<p>自定義列表</p>
<dl>
<dt>自定義列表的標(biāo)題</dt>
<dd>小米</dd>
<dd>華為</dd>
<dd>OPPO</dd>
</dl>
6.table標(biāo)簽
涉及標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
<table > |
表格 |
<caption> |
表格頭部盖桥，標(biāo)題 |
<tr > |
行 |
<td > |
單元格 |
<th > |
單元格灾螃，文字加粗 |
<thead > |
表格頭，內(nèi)包含 |
<tbody > |
表格正文內(nèi)容揩徊，內(nèi)包含 |
<tfoot > |
表格尾腰鬼，內(nèi)包含 |
<colgroup > |
列分組 |
table屬性
- border：表格邊框粗細(xì)；
- cellspacing：單元格的間距塑荒；
- cellpadding：單元格的內(nèi)邊距熄赡；
- width：表格寬度
- height：表格高度
- align：表格在父布局中居中
- bgcolor：表格背景色
- bordercolor:表格邊框顏色
td屬性
- rowspan：單元格跨行的數(shù)量
- colspan：單元格跨列的數(shù)量
- bgcolor：單元格背景色
- align：單元格文字居中
示例：
<table border="1" align="center" width="600" cellspacing="0" cellpadding="0" bordercolor="#fff" bgcolor="#d8eaef" >
<caption>阿里職級與薪資</caption>
<colgroup span="1" bgcolor="#92c5d5"></colgroup>
<thead bgcolor="#66a9be">
<tr >
<th rowspan="2">序號</th>
<th colspan="6">技術(shù)崗與管理崗的職級薪資</th>
</tr>
<tr>
<th>P序列</th>
<th>P級名稱</th>
<th>M序列</th>
<th>M級名稱</th>
<th>薪資</th>
<th>股票</th>
</tr>
</thead>
<tbody align="center">
<tr>
<th>1</th>
<td>P6</td>
<td>資深工程師</td>
<td>M1</td>
<td>主管</td>
<td>20W-35W</td>
<td>幾乎不授予</td>
</tr>
<tr>
<th>2</th>
<td>P7</td>
<td>技術(shù)專家</td>
<td>M2</td>
<td>經(jīng)理</td>
<td>30W-50W</td>
<td>2400股</td>
</tr>
<tr>
<th>3</th>
<td>P8</td>
<td>高級專家</td>
<td>M3</td>
<td>高級經(jīng)理</td>
<td>45W-80W</td>
<td>6400股</td>
</tr>
<tr>
<th>4</th>
<td>P9</td>
<td>資深專家</td>
<td>M4</td>
<td>總監(jiān)</td>
<td>80W-100W</td>
<td>16000股</td>
</tr>
<tr>
<th bgcolor="#92c5d5">5</th>
<td>P10</td>
<td>研究員</td>
<td>M5</td>
<td>高級總監(jiān)</td>
<td>150W+</td>
<td>20000股</td>
</tr>
</tbody>
<tfoot>
<tr>
<th bgcolor="#acc47a">說明</th>
<td colspan="6" bgcolor="#d8e1c6">P-Profession M-Manager,馬云在阿里的級別是M10</td>
</tr>
</tfoot>
</table>
7.塊級元素和內(nèi)聯(lián)元素
<mark>塊級元素</mark>：獨占一行，block塊元素
常見塊級元素：
- 標(biāo)題元素：
h1~h6 - 段落元素：
p - 列表元素：
ol齿税、ul彼硫、li、dl凌箕、dt拧篮、dd - 表格元素：
table、tr牵舱、td串绩、th、thead仆葡、tbody、tfoot、caption - 分塊元素：
div
inline內(nèi)聯(lián)元素：不會獨占一行沿盅，只占用必要的寬度把篓。
常見內(nèi)聯(lián)元素：
- 文本修飾元素：
b、strong腰涧、i韧掩、em、sub窖铡、sup疗锐、u、del费彼、s - 鏈接元素：
a - 換行元素：
br - 圖片元素：
img - 范圍元素：
span
**注意：內(nèi)聯(lián)元素不能嵌套塊級元素
8.表單
標(biāo)簽：<form>
form屬性
- action滑臊，用來指定處理提交表單格式，通常是一個url地址或一個電子郵件地址
- method箍铲，默認(rèn)為get雇卷，值為post/get，數(shù)據(jù)提交方式
- name颠猴，對表單進(jìn)行標(biāo)記
- enctype关划，數(shù)據(jù)提交給服務(wù)器時的形式，默認(rèn)：application/x-www-form-
urlencoded - target翘瓮，指定提交后文檔顯示位置贮折，值：
_blank、_self资盅、_parent调榄、_top - accept-charset="gbk"，設(shè)置編碼格式律姨，針對非IE瀏覽器
- _charset="gbk"振峻，設(shè)置編碼格式，針對IE瀏覽器
表單標(biāo)簽需要放在<form>標(biāo)簽內(nèi)使用择份，常用標(biāo)簽如下
| 標(biāo)簽 | 描述 | 屬性 |
|---|---|---|
<input > |
單行文本框 | type(值參考后內(nèi)容)扣孟、name、id荣赶、readonly(只讀)凤价、disable禁用 |
<textarea > |
多行文本輸入框 | name、id拔创、cols(列數(shù))利诺、rows(行數(shù)) |
<input type="radio" > |
單選框 | name(控制分組)、id剩燥、checked(選中) |
<input type="checkbox" > |
復(fù)選框 | |
<input type="file" > |
文件選擇控件 | |
<select > |
下拉菜單 | 包裹<option>標(biāo)簽實現(xiàn)慢逾、 multiple(選擇多行)立倍、size(展示的行數(shù)) |
<label > |
標(biāo)簽 | for |
<fieldset > |
表單控件分組 | <fieldset><legend>標(biāo)題</legend><fieldset> |
<button > |
雙標(biāo)簽按鈕 |
type屬性，可以分為文本輸入框侣滩、密碼輸入框口注、按鈕、單選框君珠、復(fù)選框等寝志，其值如下：
- text，普通文本輸入框策添，默認(rèn)值
- password材部，密碼輸入框，以
·替代實際輸入值 - email唯竹，郵件地址文本輸入框
- tel乐导，用于提供輸入電話號碼的文本框，tel類型通常會和 pattern屬性配合使用
- url摩窃，用于輸入URL地址的文本框
- number：數(shù)字輸入框兽叮，
value初始值，max最大值,min最小值猾愿，sep數(shù)字間隔 - button鹦聪，普通按鈕
- submit，提交按鈕蒂秘，
value屬性改變按鈕的文本 - reset泽本，重置按鈕，
value屬性改變按鈕的文本 - radio：單選框姻僧，通過
name屬性值控是否同組规丽，checked設(shè)置選中 - checkbox，復(fù)選框撇贺，通過
checked屬性指定默認(rèn)選中項 - image赌莺，圖像形式的提交按鈕，同button松嘶，通過
src屬性指定圖像 - hidden艘狭，隱藏域?qū)τ谟脩羰遣豢梢姷模ǔＳ糜诤笈_的程序
- file翠订，文件選擇器
- search巢音，用于輸入搜索關(guān)鍵詞的文本框
- color，顏色設(shè)置框尽超，選擇顏色值
- range官撼，提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為
滑動條似谁，屬性類似number - datetime傲绣，以下幾個屬性是日期掠哥、時間相關(guān)選擇器
- datetime-local
- date
- month
- week
- time
示例：
<form action="">
<!-- 輸入框 -->
輸入文字：<input type="text">
<br>
敏感信息：<input type="password">
<br>
<!-- 多行文本框 -->
多行文本框：<textarea name="" id="" cols="30" rows="3"></textarea>
<br>
<!-- 單選 -->
選擇性別：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<br>
<!-- 多選框 -->
選擇科目：<input type="checkbox" name="subjects" id="1" checked>語文
<input type="checkbox" name="subjects" id="2">數(shù)學(xué)
<br>
<!-- 下拉單選擇框 -->
下拉單選擇框：
<select name="" id="">
<option value="1">語文</option>
<option value="2" selected>數(shù)學(xué)</option>
</select>
<br>
<!-- 下拉多選選擇框 -->
下拉多選選擇框：
<select name="" id="" multiple>
<option value="1">語文</option>
<option value="2" selected>
9.其它標(biāo)簽
-
分割線：
<hr>width/size：分別控制水平線的寬度和高度
noshade：用來去掉水平線陰影
color：用于定義水平線顏色
align：用來調(diào)整水平線水平對齊方式，默認(rèn)水平居中
預(yù)格式化的文本：
<pre>秃诵，將完全安裝HTML源代碼的內(nèi)容顯示龙致。-
<map>，定義一個圖像的映射顷链，在不同區(qū)域?qū)崿F(xiàn)點擊不同位置的跳轉(zhuǎn)name，與img標(biāo)簽的屬性
usemap相關(guān)聯(lián)屈梁，在圖像和地圖間創(chuàng)建關(guān)系嗤练。-
<area>子標(biāo)簽，單標(biāo)簽在讶，定義圖片上的熱點區(qū)域煞抬，實現(xiàn)熱點區(qū)域的位置、大小及形狀
herf：用來定義熱點區(qū)域鏈接的目標(biāo)地址
shape：用來定義區(qū)域的形狀构哺，取值：default(所有區(qū)域)革答、rect、circle曙强、poly(多邊形)
coords：用來定義可點擊區(qū)域的坐標(biāo)残拐。與shape屬性搭配使用
10.iframe
碎片化處理的，類似Android的fragment碟嘴。
語法：<iframe ></iframe>
屬性有：
src：定義頁面路徑
width：定義寬度
height：定義高度
frameborder：定義邊框溪食，默認(rèn)有邊框，通過設(shè)置0取消邊框
-
scrolling：控制是否顯示框架的滾動條娜扇，值有：
yes错沃，始終顯示滾動條
auto，在需要的情況下顯示滾動條
no雀瓢，從不顯示滾動條
name：通常與
<a>的target屬性關(guān)聯(lián)
