瀏覽器請(qǐng)求數(shù)據(jù)過(guò)程
請(qǐng)求響應(yīng)
1.URL
- http://127.0.0.1/index.html（瀏覽器會(huì)自動(dòng)添加80）
- http://127.0.0.1:80/index.html（完整的格式）
拆分
- http:// URL協(xié)議的類(lèi)型
- 127.0.0.1 服務(wù)器IP地址 相當(dāng)于現(xiàn)實(shí)生活中的地址
- :80 服務(wù)器的端口號(hào) 相當(dāng)于現(xiàn)實(shí)生活中的門(mén)牌號(hào)碼
- index.html 需要訪問(wèn)的資源名稱
2.HTTP協(xié)議
HTTP是Hypertext Transfer Protocol的協(xié)議颤介，超文本傳輸協(xié)議
HTML基礎(chǔ)
1. HTML定義
HTML是HyperText markup Language的縮寫(xiě)， 超文本標(biāo)記語(yǔ)言
2. HTML發(fā)展史
3. DTD文檔聲明
- 什么是DTD文檔聲明?
- 由于HTML有很多個(gè)版本的規(guī)范赞赖，每個(gè)版本的規(guī)范之間又有一定的差異滚朵，所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁(yè)，我們需要在HTML文件的第一行告訴瀏覽器前域，我們當(dāng)前這個(gè)網(wǎng)頁(yè)是用哪一個(gè)版本的HTML規(guī)范來(lái)編寫(xiě)的辕近。
- DTD文檔聲明的注意點(diǎn)
- 任何一個(gè)標(biāo)準(zhǔn)的HTML網(wǎng)頁(yè)，第一行一定是DTD文檔聲明匿垄。也就是說(shuō)DTD文檔聲明必須寫(xiě)在HTML的第一行
- DTD文檔聲明不區(qū)分大小寫(xiě)
- <!DOCTYPE html>
- <!doctype html>
- DTD文檔聲明不是一個(gè)標(biāo)簽
- 雖然DTD文檔聲明的作用是用于告訴瀏覽器我們的網(wǎng)頁(yè)是用哪一個(gè)版本的標(biāo)準(zhǔn)編寫(xiě)的亏推，以便于方便瀏覽器解析和渲染。但是瀏覽器并不是完全依賴這個(gè)DTD文檔聲明年堆，瀏覽器有一套屬于自己的機(jī)制吞杭，也就是說(shuō)DTD文檔聲明不寫(xiě)網(wǎng)頁(yè)也能正常運(yùn)行，但是由于W3C規(guī)定第一行必須寫(xiě)上DTD文檔聲明变丧，所以為了遵守規(guī)定芽狗，無(wú)論怎么我們都應(yīng)該在第一行寫(xiě)上DTD文檔聲明
4. html、xhtm1和html5的區(qū)別
- html語(yǔ)法非常松散痒蓬、容錯(cuò)性強(qiáng)
- xhtml更為嚴(yán)格童擎，它要求標(biāo)簽必須小寫(xiě)、必須嚴(yán)格閉合攻晒、標(biāo)簽中的屬性必須使用引號(hào)等
- html5是html下一個(gè)版本顾复，所以除了非常松散、容錯(cuò)性強(qiáng)以外鲁捏，還增加許多新的特性
5. .htm和.html擴(kuò)展名區(qū)別
- DOS操作系統(tǒng)（win95或win98）下只能支持長(zhǎng)度為3的后綴名芯砸，所以是htm
- 但在windows后綴名長(zhǎng)度可以大于3位，所以windows下無(wú)所謂htm和html，html是為長(zhǎng)文件的格式命名的
- 所以htm是為了兼容過(guò)去的DOS命名格式存在的
6. HTML標(biāo)簽
html標(biāo)簽
-
作用：
- 用于告訴瀏覽器這是一個(gè)網(wǎng)頁(yè)假丧，也就是說(shuō)告訴瀏覽器我是一個(gè)HTML文檔
-
注意點(diǎn)：
- 其他所有的標(biāo)簽都必須寫(xiě)在html標(biāo)簽里面双揪，也就是寫(xiě)在html開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間
head標(biāo)簽
-
（1）作用：
- 用于給網(wǎng)站添加一些配置信息
- 例如：
- 指定網(wǎng)站的標(biāo)題/指定網(wǎng)站的小圖片
- 添加網(wǎng)站的SEO相關(guān)的信息（指定網(wǎng)站的關(guān)鍵字/指定網(wǎng)站的描述信息）
- 外掛一些外部的css/js文件
- 添加一些瀏覽器適配相關(guān)的內(nèi)容
-
（2）注意點(diǎn)：
- 一般情況下，寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容都不會(huì)顯示給用戶查看包帚，也就是說(shuō)一般情況下寫(xiě)在head標(biāo)簽內(nèi)部的內(nèi)容我們都看不到渔期。
-
（3）head里面的標(biāo)簽
-
title標(biāo)簽
- 作用：專門(mén)用戶指定網(wǎng)站的標(biāo)題，并且這個(gè)指定的標(biāo)題將來(lái)還會(huì)作為用戶保存網(wǎng)站的默認(rèn)標(biāo)簽
-
base標(biāo)簽
- 專門(mén)用來(lái)統(tǒng)一的指定當(dāng)前網(wǎng)頁(yè)中所有的超鏈接（a標(biāo)簽）需要如何打開(kāi)
- 注意點(diǎn)：base標(biāo)簽必須寫(xiě)在head標(biāo)簽的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽直接
- 格式：
<base target="_blank"> -
meta標(biāo)簽
作用：指定當(dāng)前網(wǎng)頁(yè)的字符集
-
為什么會(huì)出現(xiàn)亂碼現(xiàn)象渴邦？
- 因?yàn)槲覀冊(cè)诰帉?xiě)網(wǎng)頁(yè)的時(shí)候沒(méi)有指定字符集
-
如何解決亂碼現(xiàn)象疯趟？
- 在head標(biāo)簽中添加
<meta charset="GBK"/>，指定字符集
- 在head標(biāo)簽中添加
-
什么是字符集?
- 字符集就是字符的集合谋梭，也就是很多字符堆在一起迅办。其實(shí)字符集就像我們古代的“活字印刷術(shù)”，在活字印刷術(shù)中就是將很多有漢字的小章放到一個(gè)盒子中章蚣，然后需要印刷文字的時(shí)候再去盒子中取這個(gè)小章出來(lái)用，正式因?yàn)槿绱艘碳校猿鲥X(qián)了亂碼問(wèn)題纤垂。
-
GBK(GB2312)和UTF-8區(qū)別
- GBK(GB2312)里面存儲(chǔ)的字符比較少，僅僅存儲(chǔ)了漢字和一些常用外文磷账，體積比較小
- UTF-8里面存儲(chǔ)的世界上所有的文字峭沦，體積比較大
-
那么在企業(yè)開(kāi)發(fā)中我們應(yīng)該使用GBK(GB2312)還是UTF-8？
- 如果你的網(wǎng)站僅僅包含中文逃糟，那么推薦使用GB2312吼鱼，因?yàn)樗捏w積更小，訪問(wèn)速度更快
- 如果你的網(wǎng)站除了中文以外绰咽，還包含一些其他國(guó)家的語(yǔ)言菇肃，那么推薦使用UTF-8
- 懶人推薦：不管三七二十一，一律寫(xiě)UTF-8即可
- 注意點(diǎn)：
1. 在html文件中指定的字符集必須和保存這個(gè)文件的字符集一致取募，否則還會(huì)出現(xiàn)亂碼
2. 所以僅僅指定字符集不一定能解決亂碼問(wèn)題琐谤，還需要保存文件的時(shí)候，文件的保存格式必須和指定的字符集一致才能保證沒(méi)有亂碼問(wèn)題
-
body標(biāo)簽
-
作用：
- 專門(mén)用于定義HTML文檔中需要顯示給用戶查看的內(nèi)容（文字/圖片/音頻/視頻）
-
注意點(diǎn)
- 雖然說(shuō)有時(shí)候你可能將內(nèi)容寫(xiě)到了別的地方在網(wǎng)頁(yè)中也能看到玩敏，但是千萬(wàn)不要這么干斗忌，一定要將需要顯示的內(nèi)容寫(xiě)在body中
- 一對(duì)html標(biāo)簽中（一個(gè)html開(kāi)始標(biāo)簽和一個(gè)html結(jié)束標(biāo)簽）只能有一對(duì)body標(biāo)簽
br標(biāo)簽
- 由于html的作用就是用來(lái)給文本添加語(yǔ)義，而br標(biāo)簽的語(yǔ)義是不另起一個(gè)段落換行旺聚，而在企業(yè)開(kāi)發(fā)中一般情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落织阳，所以在企業(yè)開(kāi)發(fā)中很少使用br標(biāo)簽
img標(biāo)簽和a標(biāo)簽
title：用于告訴瀏覽器，當(dāng)鼠標(biāo)懸停在圖片上時(shí)砰粹，需要彈出的描述框中顯示什么內(nèi)容
alt其實(shí)是英文alternate的縮寫(xiě)唧躲，它的作用就是用于告訴瀏覽器，當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容（img標(biāo)簽特有）
-
src 路徑問(wèn)題注意點(diǎn)：
- 以后企業(yè)開(kāi)發(fā)中如果需要編寫(xiě)路徑，統(tǒng)一使用反斜杠/惊窖，不要使用正斜杠\刽宪。因?yàn)閷?lái)我們開(kāi)發(fā)的程序可能會(huì)部署到其他操作系統(tǒng)的服務(wù)器上谒府，而在其他的操作系統(tǒng)中路徑都是/瓜富，所以如果你寫(xiě)的不是/，可能會(huì)引發(fā)問(wèn)題
-
target屬性（a標(biāo)簽特有）
- 專門(mén)用于控制如何跳轉(zhuǎn)
- _self：用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn)合溺，也就是不新建界面跳轉(zhuǎn)毁欣。默認(rèn)就是 _slef
- _blank：用于在新的選項(xiàng)卡中跳轉(zhuǎn)庇谆，也就是新建界面跳轉(zhuǎn)
-
假鏈接
- 什么是假鏈接？
- 就是在點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接凭疮，就稱之為假鏈接
- 假鏈接存在的意義：
- 在企業(yè)開(kāi)發(fā)前期饭耳，其他的界面都沒(méi)有寫(xiě)出來(lái)，那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方执解，所以就只能使用假鏈接來(lái)代替寞肖。當(dāng)項(xiàng)目后期其他界面都已經(jīng)完成時(shí)再將假鏈接替換為真鏈接
- 假鏈接的格式：
兩者之間的區(qū)別：1. # 2. javascript:
#的假鏈接會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部，而javascript:的假鏈接不會(huì)自動(dòng)回到網(wǎng)頁(yè)頂部<h1>我是頂部</h1> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <a href="#">點(diǎn)我1</a> <a href="javascript:">點(diǎn)我2</a>
- 什么是假鏈接？
-
錨點(diǎn)
- 要想通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置衰腌，那么必須告訴a標(biāo)簽一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼新蟆，這樣a標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)到的目標(biāo)位置
- 如何與html中的標(biāo)簽綁定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼呢？
- 在html中右蕊，每一個(gè)標(biāo)簽都有一個(gè)名稱叫做id的屬性琼稻，這個(gè)屬性就是用來(lái)給標(biāo)簽指定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼的
- 想要實(shí)現(xiàn)通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定位置分為兩步：
- 給目標(biāo)位置的標(biāo)簽加一個(gè)id屬性，然后指定一個(gè)獨(dú)一無(wú)二的值
- 告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無(wú)二的身份證號(hào)碼是多少
- 格式：
<a href="#center">跳轉(zhuǎn)到中部</a> <h2 id="center">我是中部</h2> - 注意點(diǎn)：
- 通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置饶囚，是沒(méi)有過(guò)度動(dòng)畫(huà)的帕翻，是直接一下子就跳轉(zhuǎn)到了指定位置
- a 標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以外，還可以在跳轉(zhuǎn)到其他界面的時(shí)候萝风，直接跳轉(zhuǎn)到其他界面的指定位置
- 格式：
<a href="錨點(diǎn)測(cè)試界面.html#bottom">跳轉(zhuǎn)到錨點(diǎn)測(cè)試界面</a> <h2 id="bottom">我是錨點(diǎn)測(cè)試界面底端</h2>
列表標(biāo)簽
-
什么是列表標(biāo)簽嘀掸？
- 列表標(biāo)簽的作用：給一堆數(shù)據(jù)添加列表語(yǔ)義，也就是告訴搜索引擎告訴瀏覽器這一堆數(shù)據(jù)是一個(gè)整體
-
html中的列表標(biāo)簽的分類(lèi)
- 無(wú)序列表（最多）（unordered list）
- 有序列表（最少）（ordered list）
- 定義列表（其次）（definition list）
1. 無(wú)序列表
-
無(wú)序列表作用：
- 給一堆數(shù)據(jù)添加列表語(yǔ)義规惰，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒(méi)有先后之分
什么叫有先后之分横殴？例如：排行榜
什么叫沒(méi)有先后之分？例如：中國(guó)有哪些城市
-
無(wú)序列表格式:
<ul> <li>需要顯示的條目?jī)?nèi)容</li> </ul>- li其實(shí)是英文list item的縮寫(xiě)
- list是列表的意思卿拴，item是條目的意思衫仑，所以結(jié)合起來(lái)就是
列表?xiàng)l目的意思
-
注意點(diǎn)：
- 一定要記住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)
- 由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合缘挽，所以u(píng)l標(biāo)簽中不推薦包含其他標(biāo)簽瞄崇。也就是ul標(biāo)簽中只能看到li標(biāo)簽
-
無(wú)序列表的應(yīng)用場(chǎng)景
- 新聞列表
- 商品列表
- 導(dǎo)航條
2. 有序列表
- 有序列表作用：
- 給一堆數(shù)據(jù)添加列表語(yǔ)義呻粹，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分
<ol type="I"> <li>演員</li> <li>小丑</li> <li>女人不應(yīng)該讓男人太累</li> <li>男人不應(yīng)該讓女人流淚</li> </ol>
3. 定義列表
-
其實(shí)dt和dd都是英文的縮寫(xiě)
- dt是英文definition title的縮寫(xiě)，所以dt的含義就是用來(lái)定義列表中的標(biāo)題
- dt是英文definition description的縮寫(xiě)苏研，所以dd的含義就是用來(lái)定義標(biāo)題對(duì)應(yīng)的描述
-
定義列表的格式：
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> -
定義列表的應(yīng)用場(chǎng)景
- 做網(wǎng)站尾部的相關(guān)信息
- 做圖文混排
- 定義列表的注意點(diǎn)
- 和ul/ol一樣等浊，dl和dt/dd是一個(gè)整體，所以他們一般情況不會(huì)單獨(dú)出現(xiàn)摹蘑，都是一起出現(xiàn)
- 和ul/ol一樣筹燕，由于dl和dt/dd是一個(gè)組合標(biāo)簽，所以dl中建議只放dt和dd標(biāo)簽
- 一個(gè)dt可以沒(méi)有對(duì)應(yīng)的dd衅鹿，也可以有多個(gè)對(duì)應(yīng)的dd撒踪，但是無(wú)論有或者沒(méi)有dd都不推薦使用。推薦使用一個(gè)dt對(duì)應(yīng)一個(gè)dd
- 和li標(biāo)簽一樣大渤，當(dāng)需要豐富界面時(shí)制妄，我們可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽
表格標(biāo)簽
在過(guò)去表格標(biāo)簽用的非常非常的多，絕大多數(shù)的網(wǎng)站都是使用表格標(biāo)簽來(lái)制作的泵三，也就是說(shuō)表格標(biāo)簽是一個(gè)時(shí)代的代表耕捞。
-
表格標(biāo)簽的作用：
- 用來(lái)給一堆數(shù)據(jù)條件語(yǔ)義。表格是一種數(shù)據(jù)的展現(xiàn)形式烫幕，當(dāng)數(shù)據(jù)量非常大的時(shí)候俺抽，表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)形式
-
表格標(biāo)簽的格式：
<table> <tr> <td>需要顯示的內(nèi)容</td> </tr> </table>- 表格標(biāo)簽中的table代表++整個(gè)表格++，也就是一堆table標(biāo)簽就是一個(gè)表格
- 表格標(biāo)簽中的tr代表整個(gè)表格中的++一行數(shù)據(jù)++纬霞，也就是說(shuō)一對(duì)tr標(biāo)簽就是表格中的一行
- 表格標(biāo)簽中的td代表表格中一行中的++一個(gè)單元格++，也就是說(shuō)一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格
-
注意點(diǎn)：
- 表格標(biāo)簽有一個(gè)邊框?qū)傩郧裕@個(gè)屬性決定了邊框的寬度诗芜。默認(rèn)情況下這個(gè)屬性的值是0，所以看不到邊框
- 表格標(biāo)簽和列表標(biāo)簽一樣埃疫，它是一個(gè)組合標(biāo)簽伏恐，所以table/tr/td要么一起出現(xiàn)，要么一起不出現(xiàn)栓霜，不會(huì)單個(gè)出現(xiàn)
- 寬度和高度的屬性
- 可以在table和td標(biāo)簽中使用
- 表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來(lái)調(diào)整的翠桦，也可以通過(guò)給table標(biāo)簽設(shè)置width/height屬性的方式手動(dòng)指定表格的寬度和高度
- 如果個(gè)td標(biāo)簽設(shè)置width/height屬性，會(huì)修改當(dāng)前單元格的寬度和高度胳蛮，不會(huì)影響整個(gè)表格的寬度和高度
- 水平對(duì)齊和垂直對(duì)齊的屬性
- 水平對(duì)齊可以在table销凑、tr和td標(biāo)簽中使用；垂直對(duì)齊只能在tr和td標(biāo)簽中使用
- 給table標(biāo)簽設(shè)置align屬性仅炊，可以控制表格在水平方向的對(duì)齊方式
- 給tr標(biāo)簽設(shè)置align屬性斗幼，可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對(duì)齊方式
- 給td標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前單元格中內(nèi)容在水平方向的對(duì)齊方式
- 注意點(diǎn)：如果td中設(shè)置了align屬性抚垄，tr中也設(shè)置了align屬性蜕窿，那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來(lái)對(duì)齊
- 給tr標(biāo)簽設(shè)置valign屬性谋逻，可以控制當(dāng)前行中所有單元格中的內(nèi)容，在垂直方向的對(duì)齊方式
- 給td標(biāo)簽設(shè)置valign屬性桐经，可以控制當(dāng)前單元格中的內(nèi)容在垂直方向的對(duì)齊方式
- 注意點(diǎn)：如果td中設(shè)置了valign屬性毁兆，tr中也設(shè)置了valign屬性，那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來(lái)對(duì)齊
- 外邊距和內(nèi)邊距的屬性（只能給table標(biāo)簽使用）
- 外邊距就是單元格和單元格之間的距離阴挣，我們稱之為外邊距气堕。默認(rèn)情況下單元格和單元格之間的外邊距的距離是2px
- 內(nèi)邊距就是單元格的邊框和文字之間的間隙，我們稱之為內(nèi)邊距屯吊。默認(rèn)情況下內(nèi)邊距是1px
注意：以上講解的內(nèi)容僅僅作為了解送巡，以后在企業(yè)開(kāi)發(fā)中所有控制樣式的都是通過(guò)CSS
在表格標(biāo)簽中想通過(guò)指定外邊距為0來(lái)實(shí)現(xiàn)細(xì)線表格是不靠譜的，其實(shí)它是將2條線合并為了一條線盒卸，所以看上去很不舒服骗爆。
細(xì)線表格的制作方式：
- 給table標(biāo)簽設(shè)置bgcolor
- 給tr標(biāo)簽設(shè)置bgcolor
- 給table標(biāo)簽設(shè)置cellspacing="1px"
注意點(diǎn)：table、tr和td標(biāo)簽都支持bgcolor屬性
<table bgcolor="black" cellpadding="1px">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
-
表格標(biāo)題
- 在表格標(biāo)簽中提供了一個(gè)標(biāo)專門(mén)用來(lái)設(shè)置表格的標(biāo)題蔽介，這個(gè)標(biāo)簽叫做caption
- 只要將標(biāo)題寫(xiě)在caption標(biāo)簽中摘投，那么標(biāo)題就會(huì)自動(dòng)相對(duì)于表格的寬度居中
- caption標(biāo)簽的注意點(diǎn)：
- caption一定要寫(xiě)在table標(biāo)簽中，否則無(wú)效
- caption一定要緊跟在table標(biāo)簽后面
- 標(biāo)題單元格標(biāo)簽
- 在表格標(biāo)簽中提供了一個(gè)標(biāo)簽專門(mén)用來(lái)存儲(chǔ)每一列的標(biāo)題虹蓄，這個(gè)標(biāo)簽叫做th標(biāo)簽犀呼，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中，加粗文字
- 到此為止我們就發(fā)現(xiàn)薇组，其實(shí)表格中有兩種單元格外臂，一種是td，一種是th律胀，td是專門(mén)用來(lái)存儲(chǔ)數(shù)據(jù)的宋光，th是專門(mén)用來(lái)存儲(chǔ)當(dāng)前列的標(biāo)題
表格的結(jié)構(gòu)
由于表格中存儲(chǔ)的數(shù)據(jù)比較復(fù)雜，為了方便管理炭菌，以及提升語(yǔ)義罪佳，我們可以對(duì)表格中存儲(chǔ)的數(shù)據(jù)進(jìn)行分類(lèi)
- 表格中存儲(chǔ)的數(shù)據(jù)可以分為4類(lèi):
- 表格的標(biāo)題
- 表格的表頭信息
- 表格的主體信息
- 表格的表尾信息
<table>
<caption>表格的標(biāo)題</caption>
<thead>
<tr>
<th>每一列的標(biāo)題</th>
</tr>
</thead>
<tbody>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tbody>
<tfood>
<tr>
<td>數(shù)據(jù)</td>
</tr>
</tfood>
</table>
- caption作用：指定表格的標(biāo)題
- thead作用：指定表格的表頭信息
- tbody作用：指定表格的主體信息
- tfood作用：指定表格的附加信息
- 注意點(diǎn)：
- 如果我們沒(méi)有編寫(xiě)tbody，系統(tǒng)會(huì)給自動(dòng)添加tbody
- 如果指定了thead和tfood黑低，那么在修改整個(gè)表格的高度時(shí)赘艳，thead和tfood有自己默認(rèn)的高度，不會(huì)隨著表格的高度變化而變化
- 水平方向上的單元格合并:
- 可以給td標(biāo)簽添加一個(gè)colspan屬性克握，來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待（水平方向）
例如：
<td clospan="2"></td>
含義：把當(dāng)前單元格當(dāng)做兩個(gè)單元格來(lái)看待
- 垂直方向上的單元格合并：
- 可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性蕾管，來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待（垂直方向）
例如：
<td clospan="2"></td>
含義：把當(dāng)前單元格當(dāng)做兩個(gè)單元格來(lái)看待
- 注意點(diǎn)：
- 由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來(lái)看到，所以就會(huì)多出一些單元格菩暗，所以需要?jiǎng)h掉一些單元格才能正常顯示
一定到記住單元格合并永遠(yuǎn)都是向后或者向下合并娇掏，而不能向前或者向上合并
- 由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來(lái)看到，所以就會(huì)多出一些單元格菩暗，所以需要?jiǎng)h掉一些單元格才能正常顯示
表單標(biāo)簽
- 什么是表單
- 表單就是專門(mén)用來(lái)收集用戶信息的
- 什么是表單元素
- 什么是元素
- 在html中標(biāo)簽/標(biāo)記/元素都是指html中的標(biāo)簽
- 例如：<a> a標(biāo)簽/a標(biāo)記/a元素
表單元素其實(shí)還是HTML中的一些標(biāo)簽，只不過(guò)這些標(biāo)簽比較特殊勋眯，在瀏覽器重所有的表單標(biāo)簽都有特殊的外觀和默認(rèn)的功能
-
標(biāo)簽的格式:
<form> <表單元素> </form> -
常見(jiàn)的表單元素
input標(biāo)簽婴梧，input標(biāo)簽主要是type屬性下梢，這個(gè)屬性有很多類(lèi)型的取值，取值的不同就決定了input標(biāo)簽的功能和外觀
-
單選框
- 默認(rèn)情況下單選框不會(huì)互斥塞蹭，要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性孽江，然后name屬性還必須設(shè)置相同的值
- 要想讓單選框默認(rèn)選中某一個(gè)框子，可以給input標(biāo)簽添加一個(gè)checked屬性
- 在html中如果屬性的取值和屬性的名稱一樣番电，可以只寫(xiě)一個(gè)岗屏。但是在XHTML中必須寫(xiě)上取值，所以在企業(yè)開(kāi)發(fā)中我們推薦大家不要省略取值
<form> 性別： <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked="checked">保密 <input type="radio" name="sex" checked>保密 </form> -
多選框
<form> 愛(ài)好： <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox" checked>棒球 <input type="checkbox" checked>足浴 </form>- 多選框設(shè)置多個(gè)checked屬性漱办，單選按鈕也可以設(shè)置多個(gè)checked屬性这刷，但是瀏覽器只認(rèn)最后一個(gè)。
-
提交按鈕
- 作用：將表單中的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器
-
注意點(diǎn)
- 要想把表單中的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器娩井，必須滿足兩個(gè)條件
- 告訴表單需要提交到哪個(gè)服務(wù)器
- 可以通過(guò)form標(biāo)簽的action屬性來(lái)告訴表單暇屋，需要提交到哪個(gè)服務(wù)器
- 告訴表單，表單中的哪些數(shù)據(jù)需要提交
- 告訴表單需要提交到哪個(gè)服務(wù)器
<form action="http://baidu.com"> 性別： <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女 <input type="text" value="123" name="aa"> <input type="submit"> </form> https://www.baidu.com/?gender=on&aa=123 <!-- gender=on洞辣，可以通過(guò)設(shè)置value屬性來(lái)傳值 --> <form action="http://baidu.com"> 性別： <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女 <input type="text" value="123" name="aa"> <input type="submit"> </form> https://www.baidu.com/?gender=female&aa=123 <!-- 單選按鈕和多選按鈕的傳值方式是一樣的咐刨，都需要設(shè)置value屬性 --> - 要想把表單中的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器娩井，必須滿足兩個(gè)條件
-
label標(biāo)簽
- 默認(rèn)情況下文字和輸入框是沒(méi)有關(guān)聯(lián)關(guān)系的，也就是說(shuō)點(diǎn)擊輸入框不會(huì)聚焦扬霜，如果想點(diǎn)擊文字時(shí)讓對(duì)應(yīng)的輸入框聚焦定鸟，那么就需要讓文字和輸入框進(jìn)行綁定
- 要想讓輸入框和文字綁定在一起，那么我們可以使用label標(biāo)簽
- 綁定的格式：
- 將文字利用label標(biāo)簽包裹起來(lái)
- 給輸入框添加一個(gè)id屬性
- 在label標(biāo)簽中通過(guò)for屬性和輸入框中的id進(jìn)行綁定即可
<label for="account">賬戶：</label><input type="text" id="account"><br> <label for="pwd">密碼：</label><input type="password" id="pwd"><br> <label>密碼：<input type="password"></label><br> <label for="bbb">賬戶：</label><input type="text" id="aaa"><br> <label for="aaa">密碼：</label><input type="password" id="bbb"><br>
-
datalist標(biāo)簽
- 作用：給輸入框綁定待選項(xiàng)
- datalist格式：
<datalist> <option>待選內(nèi)容</option> </datalist>- 如何給輸入框綁定待選列表
- 搞一個(gè)輸入框
- 搞一個(gè)datalist列表
- 給datalist列表標(biāo)簽加一個(gè)id
- 給輸入框添加一個(gè)list屬性著瓶，將datalist的id對(duì)應(yīng)的值賦值給list屬性即可
但是這個(gè)標(biāo)簽大多數(shù)瀏覽器都不支持联予，所以不建議使用
-
select標(biāo)簽
- 作用：用于定義下拉列表
- 格式：
<select> <optgroup label="分組名稱"> <option>列表數(shù)據(jù)</option> </optgroup> </select>- 注意點(diǎn)：
- 下拉列表不能輸入內(nèi)容，但是可以直接在列表中選擇內(nèi)容
- 可以通過(guò)給option標(biāo)簽添加一個(gè)selected屬性來(lái)指定列表的默認(rèn)值
- 可以通過(guò)給option標(biāo)簽包裹一層optgroup標(biāo)簽來(lái)給下拉列表中的數(shù)據(jù)分類(lèi)
-
textarea標(biāo)簽
- 作用：定義一個(gè)多行輸入框
- 格式：
<textarea></textarea>- 注意點(diǎn)：
- 默認(rèn)情況下輸入框可以無(wú)限換行
- 默認(rèn)情況下輸入框有自己的寬度和高度材原，可以通過(guò)cols和rows來(lái)指定輸入框的寬度和高度
- 雖然指定了列數(shù)和行數(shù)沸久，但是還是可以無(wú)限往下輸入
- 默認(rèn)情況下輸入框是可以手動(dòng)拉伸的
多媒體標(biāo)簽
- video標(biāo)簽
- 作用：播放視頻
- 格式：
<video src=""></video>-
video標(biāo)簽的屬性
- src：用于告訴video標(biāo)簽需要播放的視頻地址
- autoplay：用于告訴video標(biāo)簽是否需要自動(dòng)播放視頻
- controls：用于告訴video標(biāo)簽是否需要顯示控制條
- poster：用于告訴video標(biāo)簽視頻沒(méi)有播放之前顯示的占位圖片
- loop：一般用于做廣告視頻，用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放
- preload：預(yù)加載視頻华糖，但是需要注意preload和autoplay相沖麦向，如果設(shè)置了autoplay屬性瘟裸，那么preload屬性就會(huì)失效
- muted：靜音
- width/height：和img標(biāo)簽一模一樣
video標(biāo)簽的第二種格式
<video> <source src="" type=""></source> <source src="" type=""></source> </video>-
第二種格式存在的意義：
- 由于視頻數(shù)據(jù)非常非常的重要客叉，所以五大瀏覽器廠商都不愿意支持別人的視頻格式，所以導(dǎo)致了沒(méi)有視頻格式是所有瀏覽器都支持的话告，這個(gè)時(shí)候W3C為了解決這個(gè)問(wèn)題兼搏，所以推出了第二個(gè)video標(biāo)簽的格式
- video標(biāo)簽的第二種格式存在的意義就是為了解決瀏覽器適配問(wèn)題
- video元素支持三種視頻格式，我們可以把這三種格式都通過(guò)source標(biāo)簽指定給video標(biāo)簽沙郭，那么以后當(dāng)瀏覽器播放視頻時(shí)佛呻，它就會(huì)從這三種中選擇一種自己支持的格式來(lái)播放
-
注意點(diǎn)：
- 當(dāng)前通過(guò)video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式，但是顯然所有瀏覽器都通過(guò)video標(biāo)簽播放視頻還有一個(gè)前提條件病线，就是瀏覽器必須支持HTML5標(biāo)簽吓著，否則同樣無(wú)法播放
- 在過(guò)去的一些瀏覽器是不支持HTML5標(biāo)簽的鲤嫡，所以為了讓過(guò)去的一些瀏覽器也能夠通過(guò)video標(biāo)簽來(lái)播放視頻，那么我們以后可以通過(guò)一個(gè)JS的框架——html5media來(lái)實(shí)現(xiàn)
-
audio視頻
- 作用：播放音頻
- 格式：
<audio src=""></audio> <audio> <source src="" type=""></source> </audio>- 注意點(diǎn)：
- audio標(biāo)簽和video標(biāo)簽的使用基本一樣绑莺，video標(biāo)簽中能使用的屬性在audio標(biāo)簽中大部分都能夠使用暖眼，并且功能都一樣。
- 只不過(guò)有3個(gè)屬性不能用纺裁，height/width/poster
-
詳情和概要標(biāo)簽
- 作用：利用summary標(biāo)簽來(lái)描述概要信息诫肠，利用details標(biāo)簽
- 格式：
<details> <summary>概要信息</summary> 詳細(xì)信息 </details> -
marquee標(biāo)簽
- 作用：跑馬燈
- 格式：
<marquee>內(nèi)容</marquee>- 屬性：
- direction：設(shè)置滾動(dòng)方向left/right/up/down
- scrollamount：設(shè)置滾動(dòng)屬性，值越大就越快
- loop：設(shè)置滾動(dòng)次數(shù)欺缘，默認(rèn)是-1栋豫，也就是無(wú)限滾動(dòng)
- behavior：設(shè)置滾動(dòng)類(lèi)型slide滾動(dòng)到邊界就停止，alternate滾動(dòng)到邊界就彈回
- 注意點(diǎn)：
- marquee標(biāo)簽不是W3C推薦的標(biāo)簽谚殊，在W3C官方文檔中也無(wú)法查詢這個(gè)標(biāo)簽丧鸯，但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好
'
- marquee標(biāo)簽不是W3C推薦的標(biāo)簽谚殊，在W3C官方文檔中也無(wú)法查詢這個(gè)標(biāo)簽丧鸯，但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好
字符實(shí)體
<
>
?
為什么html中有一部分標(biāo)簽會(huì)被廢棄？
- 因?yàn)楫?dāng)前html中的標(biāo)簽只有一個(gè)作用络凿，就是用來(lái)添加語(yǔ)義骡送，而早期的html標(biāo)簽中有一部分標(biāo)簽是沒(méi)有語(yǔ)義的，有一部分標(biāo)簽是用來(lái)修改樣式的絮记，所以這部分標(biāo)簽就被淘汰了
- 被廢棄的標(biāo)簽
<br><hr><font><b><u><i><s>
<b><u><i><s>這些標(biāo)簽都沒(méi)有語(yǔ)義的摔踱，都是用來(lái)修改樣式的
- b(bold)加粗文本，沒(méi)有任何語(yǔ)義的
- u(underlined)給文本添加下劃線怨愤，沒(méi)有任何語(yǔ)義的
- i(italic)將文本傾斜派敷，沒(méi)有任何語(yǔ)義的
- s(strikethrough)給文本添加下劃線，沒(méi)有任何語(yǔ)義的
注意點(diǎn)：在企業(yè)開(kāi)發(fā)中撰洗，不到萬(wàn)不得已一定不要使用這些被廢棄掉的標(biāo)簽篮愉，如果一定要使用，一般情況下都是用來(lái)作為CSS的鉤子來(lái)使用
| 標(biāo)簽 | 語(yǔ)義 |
|---|---|
| strong == b | 定義重要性強(qiáng)調(diào)的文字 |
| ins == u | 定義插入的文字 |
| em == i | 定義強(qiáng)調(diào)的文字 |
| del == s | 定義被刪除的文字 |
webstorm開(kāi)發(fā)工具
- 如何在webstorm中利用快捷鍵創(chuàng)建一個(gè)新的.html的文件
- 同時(shí)按Ctrl + Alt + Insert
- 如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的末尾
- 按下End鍵
- 如何在WebStorm中讓光標(biāo)移動(dòng)到當(dāng)前行的最前面
- 按下Home鍵
- 如何在WebStorm中讓光標(biāo)在多行中閃爍
- 按住Alt鍵不放差导，然后再按住鼠標(biāo)的左鍵不放试躏，然后在拖動(dòng)鼠標(biāo)即可
- 如何在WebStorm中快速的復(fù)制光標(biāo)所在的那一行
- Ctrl + D
- 如何在WebStorm中快速的刪除光標(biāo)所在的那一行
- Ctrl + X
- 如何在WebStorm中讓標(biāo)簽包裹一段內(nèi)容，也就是自動(dòng)在一段內(nèi)容前后加上標(biāo)簽
- Ctrl + Alt + T设褐，然后按下回車(chē)颠蕴，然后輸入相應(yīng)的標(biāo)簽即可
- 如何在WebStorm中快速編寫(xiě)一個(gè)ul格式
- ul>li
- 含義：生成一對(duì)ul標(biāo)簽，然后在這對(duì)ul標(biāo)簽中再生成一對(duì)li標(biāo)簽
- ul>li*3
- 含義：生成一對(duì)ul標(biāo)簽助析，然后在這對(duì)ul標(biāo)簽中再生成3對(duì)里標(biāo)簽
- 公式寫(xiě)完需要按下tab鍵
- 快速移動(dòng)選中的代碼犀被，上下移動(dòng)
- 往上移動(dòng)Ctrl + Shift + ↑（方向鍵上）
- 往下移動(dòng)Ctrl + Shift + ↓（方向鍵下）
- 快速合并和展開(kāi)代碼（合并和展開(kāi)的是某一個(gè)標(biāo)簽）
- 合并：Ctrl + -
- 展開(kāi)：Ctrl + +
- 快速合并和展開(kāi)代碼（合并和展開(kāi)選中的所有標(biāo)簽）
- 合并：Ctrl + Shift + -
- 展開(kāi)：Ctrl + Shift + +
- 快速新啟一行
- Shift + Enter
