html中的標(biāo)簽是用來(lái)給文本添加語(yǔ)義的章喉，不是用來(lái)修改文本樣式的
h標(biāo)簽 - 標(biāo)題
一共6級(jí)標(biāo)題，獨(dú)占一行
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
p標(biāo)簽 - 段落
作用：告訴瀏覽器哪些文字是一個(gè)段落
獨(dú)占一行
<p>一段文字</p>
hr標(biāo)簽 - 水平分割線
作用：添加水平分割線
獨(dú)占一行
<hr>
img標(biāo)簽 - 圖片
不是獨(dú)占一行了
屬性：
src - 圖片資源路徑
width - 寬度
height - 高度
title - 鼠標(biāo)懸停圖片的時(shí)候的提示信息
alt - 圖片沒(méi)有找到是的信息
注意：
直接設(shè)置寬和高會(huì)導(dǎo)致圖片變形狱意，如果希望能保證寬高比躲株，只需要設(shè)置寬或者高的一個(gè)失息，瀏覽器就會(huì)自動(dòng)去計(jì)算另外一個(gè)
br標(biāo)簽 - 換行
企業(yè)開(kāi)發(fā)中氯质，很少用到br募舟。即便是淘寶，整個(gè)頁(yè)面就4個(gè)
<br>
br標(biāo)簽的語(yǔ)義:在不開(kāi)啟新的段落的情況下?lián)Q行 -- 也就是說(shuō)br換行的上下2段是一個(gè)完整的段落（而我們使用p標(biāo)簽換行闻察，會(huì)重新起一個(gè)新段落）
路徑問(wèn)題
企業(yè)開(kāi)發(fā)中不會(huì)使用絕對(duì)路徑的,都是相對(duì)路徑。因?yàn)榇a是從服務(wù)器加載的琢锋，本地根本沒(méi)有
相對(duì)路徑：在html文件所在的當(dāng)前文件夾去查找
絕對(duì)路徑：
- 開(kāi)發(fā)中一律使用反斜杠/,
- 使用絕對(duì)路徑的可移植性很差辕漂，換個(gè)盤符就找不到了
a標(biāo)簽
a標(biāo)簽的作用：控制頁(yè)面與頁(yè)面之間的跳轉(zhuǎn)，也可以當(dāng)前頁(yè)面的跳轉(zhuǎn)
格式：
<a href="跳轉(zhuǎn)的鏈接">展示給用戶的內(nèi)容</a>
a標(biāo)簽的特點(diǎn)：
- 都有下劃線
- 鼠標(biāo)移動(dòng)在a標(biāo)簽時(shí)吴超，鼠標(biāo)會(huì)變成小??圖標(biāo)
注意：
- 一個(gè)a標(biāo)簽必須有一個(gè)href屬性钉嘹，否則a標(biāo)簽不知道跳轉(zhuǎn)到哪里
- a標(biāo)簽不僅可以讓包裹的文字可以點(diǎn)擊，也可以讓包裹的圖片能夠被點(diǎn)擊
- 如果通過(guò)a標(biāo)簽的href屬性指定一個(gè)網(wǎng)絡(luò)上的url地址鲸阻，那么必須加上http://或者h(yuǎn)ttps://
a標(biāo)簽的屬性：
target -- 專門用來(lái)控制如何跳轉(zhuǎn)
_self（默認(rèn)值） --在當(dāng)前頁(yè)面跳轉(zhuǎn)
_blank --在新頁(yè)面進(jìn)行跳轉(zhuǎn)
title屬性 -- 和img的title屬性一樣跋涣，都是用來(lái)控制器鼠標(biāo)懸停時(shí)的提示
base標(biāo)簽
這個(gè)標(biāo)簽是專門用來(lái)指定所有的a標(biāo)簽，點(diǎn)擊時(shí)候的跳轉(zhuǎn)方式的
- base標(biāo)簽必須寫在<head>標(biāo)簽的開(kāi)始和結(jié)束之間
- 如果摸個(gè)標(biāo)簽有特殊需求鸟悴，可以重新設(shè)置target陈辱，來(lái)覆蓋原來(lái)的值
假鏈接
在項(xiàng)目開(kāi)發(fā)初期，跳轉(zhuǎn)的頁(yè)面還沒(méi)有寫好细诸，只能先跳轉(zhuǎn)到假鏈接沛贪，當(dāng)項(xiàng)目后期其他界面都完成時(shí)再把真鏈接替換上去
假鏈接的格式：
- javascript:
2者的區(qū)別
#的假鏈接會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部，而javascript:的假鏈接不會(huì)回到頂部
京東返回頂部的功能實(shí)現(xiàn) - 使用#假鏈接
錨點(diǎn)
在當(dāng)前頁(yè)面跳轉(zhuǎn)到不同的位置
格式:
<a href="#center">跳轉(zhuǎn)到中部</a>
<h2 id="center">我是中部</h2>
注意點(diǎn):
1.通過(guò)我們的a標(biāo)簽跳轉(zhuǎn)到指定的位置, 是沒(méi)有過(guò)度動(dòng)畫(huà)的, 是直接一下子就跳轉(zhuǎn)到了指定位置
2.a標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以外, 還可以在跳轉(zhuǎn)到其它界面的時(shí)候直接跳轉(zhuǎn)到其它界面的指定位置
格式:
<a href="13-錨點(diǎn)測(cè)試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點(diǎn)測(cè)試界面</a>
<h2 id="bottom">我是錨點(diǎn)測(cè)試界面33333</h2>
ul/ol/dl 列表標(biāo)簽
1.什么是列表標(biāo)簽?
列表標(biāo)簽的作用: 給一堆數(shù)據(jù)添加列表語(yǔ)義, 也就是告訴搜索引擎告訴瀏覽器這一堆數(shù)據(jù)是一個(gè)整體
2.HTML中列表標(biāo)簽的分類
2.1無(wú)序列表(最多)(unordered list)
2.2有序列表(最少)(ordered list)
2.3定義列表(其次)(definition list)
ul
1.無(wú)序列表作用:
給一堆數(shù)據(jù)添加列表語(yǔ)義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒(méi)有先后之分
什么叫有先后之分?
例如: 排行榜
什么叫沒(méi)有先后之分?
例如: 中國(guó)有哪些城市
2.無(wú)序列表格式:
<ul>
<li>需要顯示的條目?jī)?nèi)容</li>
</ul>
li其實(shí)是英文list item的縮寫
list是列表的意思
item是條目的意思
所以結(jié)合起來(lái)就是 列表?xiàng)l目的意思
注意點(diǎn):
1.一定要記住ul標(biāo)簽是用來(lái)給一堆數(shù)據(jù)添加列表語(yǔ)義的, 而不是用來(lái)給他們添加小圓點(diǎn)的
- ul標(biāo)簽和li標(biāo)簽是一個(gè)整體, 是一個(gè)組合. 所以一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn), 不會(huì)單個(gè)出現(xiàn). 也就是說(shuō)不會(huì)單獨(dú)使用一個(gè)ul標(biāo)簽或者單獨(dú)使用一個(gè)li 標(biāo)簽, 都是結(jié)合在一起使用
3.由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合, 所以u(píng)l標(biāo)簽中不推薦包含其它標(biāo)簽, 也就是說(shuō)以后你在ul標(biāo)簽中只會(huì)看到li標(biāo)簽
無(wú)序列表應(yīng)用場(chǎng)景:
1.新聞列表
2.商品列表
3.導(dǎo)航條
==ul類似iOS中的tableView/collectionView,li類似iOS中的cell==
ul不管是水平還是垂直方向都可以，所以更類似collectionView
ol - 有序列表
可以直接跳過(guò)了利赋，開(kāi)發(fā)中很少用到水评，比ol就是多了一個(gè)1，2媚送，3中燥，4的序號(hào)
dl - 定義列表
開(kāi)發(fā)中還是會(huì)用到的
- 和ul/ol一樣, dl和dt/dd是一個(gè)整體, 所以他們一般情況下不會(huì)單獨(dú)出現(xiàn), 都是一起出現(xiàn)。
- 和li標(biāo)簽一樣, 當(dāng)需要豐富界面時(shí), 我們可以在dt和dd標(biāo)簽中繼續(xù)添加其它標(biāo)簽
用途：
- 圖文混排（人物簡(jiǎn)介）
- 做網(wǎng)站尾部的相關(guān)信息
table - 表格標(biāo)簽
基本可以忽略了塘偎，曾經(jīng)是一個(gè)時(shí)代的代表褪那，以前基本都是用table來(lái)搭建的界面，現(xiàn)在逐漸被div式塌，css取代了
form 表單
用途：收集用戶數(shù)據(jù)博敬，上傳后臺(tái)
表單的格式:
<form>
<表單元素>
</form>
常見(jiàn)的表單元素
input
select
textarea
input標(biāo)簽
input標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
注意:
表單元素一定要寫在表單中
<form>
<!--明文輸入框-->
賬號(hào):<input type="text"><br>
<!--暗文輸入框-->
密碼:<input type="password"><br>
<!--給輸入框設(shè)置默認(rèn)值-->
賬號(hào):<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"><br>
<!--
單選框
注意點(diǎn):
1.默認(rèn)情況下單選框不會(huì)互斥, 要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性, 然后name屬性還必須設(shè)置相同的值
2.要想讓單選框默認(rèn)選中某一個(gè)框子, 那么可以給input標(biāo)簽添加一個(gè)checked屬性
3.在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個(gè). 但是在XHTML中必須寫上取值, 所以在企業(yè)開(kāi)發(fā)中我們推薦大家不要省略取值
-->
性別:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多選框-->
愛(ài)好:
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>
<form action="http://www.520it.com">
<!--明文輸入框-->
賬號(hào):<input type="text" name="aa"><br>
<!--暗文輸入框-->
密碼:<input type="password" name="bb"><br>
<!--
定義普通按鈕
可以通過(guò)value屬性來(lái)給按鈕指定標(biāo)題
作用: 配合JS完成一些操作
-->
<input type="button" value="我是按鈕">
<!--
圖片按鈕
作用: 配合JS完成一些操作
-->
<input type="image" src="images/register.jpg">
<!--
重置按鈕
作用: 用于清空表單中已經(jīng)填寫好的數(shù)據(jù)
注意點(diǎn):
如果想想改重置按鈕默認(rèn)的按鈕標(biāo)題可以通過(guò)value屬性來(lái)修改
-->
<input type="reset" value="清空">
<!--
提交按鈕
作用: 將表單中已經(jīng)填寫好的數(shù)據(jù), 提交到遠(yuǎn)程服務(wù)器
注意點(diǎn):
要想把表單中填寫好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器, 必須具備兩個(gè)條件
1.需要給form表單添加一個(gè)action的屬性, 通過(guò)這個(gè)action屬性指定需要提交到的服務(wù)器地址
2.需要給需要提交到服務(wù)器的表單元素添加一個(gè)name屬性
-->
<input type="submit">
<!--
隱藏域
作用 : 配合提交按鈕將一些數(shù)據(jù)默默的悄悄咪咪的提交到服務(wù)器
Ajax
-->
<input type="hidden" name="cc" value="kukuku">
</form>
label標(biāo)簽
1.默認(rèn)情況下文字和輸入框是沒(méi)有關(guān)聯(lián)關(guān)系的, 也就是說(shuō)點(diǎn)擊文字輸入框不會(huì)聚焦, 如果想點(diǎn)擊文字時(shí)讓對(duì)應(yīng)的輸入框聚焦, 那么就需要讓文字和輸入框進(jìn)行綁定
2.要想讓輸入框和文字綁定在一起, 那么我們可以使用Label標(biāo)簽
3.綁定的格式:
3.1將文字利用label標(biāo)簽包裹起來(lái)
3.2給輸入框添加一個(gè)id屬性
3.3在label標(biāo)簽中通過(guò)for屬性和輸入框中的id進(jìn)行綁定即可
<label for="account">賬號(hào):</label><input type="text" id="account">
datalist標(biāo)簽
1.datalist標(biāo)簽
作用: 給輸入框綁定待選項(xiàng)
2.datalist格式:
<datalist>
<option>待選項(xiàng)內(nèi)容</option>
</datalist>
3.如何給輸入框綁定待選列表
1.搞一個(gè)輸入框
2.搞一個(gè)datalist列表
3.給datalist列表標(biāo)簽添加一個(gè)id
4.給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
請(qǐng)輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
其他表單元素
- select
- textarea
1.select標(biāo)簽
作用: 用于定義下拉列表
格式:
<select>
<optgroup label="分組名稱">
<option>列表數(shù)據(jù)</option>
</optgroup>
</select>
注意點(diǎn):
1.下拉列表不能輸入內(nèi)容, 但是可以直接在列表中選擇內(nèi)容
2.可以通過(guò)給option標(biāo)簽添加一個(gè)selected屬性來(lái)指定列表的默認(rèn)值
3.可以通過(guò)給option標(biāo)簽包裹一層optgroup標(biāo)簽來(lái)給下拉列表中的數(shù)據(jù)分類
<select>
<optgroup label="北京">
<option>朝陽(yáng)區(qū)</option>
<option>昌平區(qū)</option>
<option>通州區(qū)</option>
</optgroup>
<optgroup label="廣州">
<option>天河區(qū)</option>
<option>越秀區(qū)</option>
<option>黃浦區(qū)</option>
</optgroup>
</select>
2.textarea標(biāo)簽
作用: 定義一個(gè)多行輸入框
格式:
<textarea>
</textarea>
注意點(diǎn):
1.默認(rèn)情況下輸入框可以無(wú)限換行
2.默認(rèn)情況下輸入框有自己的寬度和高度
3.可以通過(guò)cols和rows來(lái)指定輸入框的寬度和高度, 但是雖然指定了列數(shù)和行數(shù), 但是還是可以無(wú)限往下輸入
4.默認(rèn)情況下輸入框是可以手動(dòng)拉伸的
