我奮斗怠惶，所以我快樂
- 下面是對HTML的知識點做一個總結(jié)（這是一個艱辛的過程宰啦，不過還是很happy）。
一氓栈、基本概念
對于沒有任何計算機基礎(chǔ)知識的小伙伴來說，可能在學(xué)習(xí)HTML之前婿着，需要去了解一些基本概念授瘦，這樣方便對后面知識點的學(xué)習(xí)、理解與掌握竟宋。
二提完、HTML的基礎(chǔ)知識
- 什么是HTML？
HTML是超文本標(biāo)記語言（全稱：Hypertext Markup Language）丘侠，主要是用來給文本添加語義的徒欣，它利用各種標(biāo)簽來標(biāo)識文檔的結(jié)構(gòu)以及標(biāo)識超鏈接的信息。
- HTML基本結(jié)構(gòu)及說明
<!DOCTYPE html> <!-- 文檔聲明蜗字，告訴瀏覽器以html5的標(biāo)準(zhǔn)渲染頁面 -->
<html> <!-- 告訴瀏覽器這是一個html文檔 -->
<head> <!-- 用于給網(wǎng)站添加一些配置信息 -->
<title></title> <!-- 用于指定網(wǎng)站的標(biāo)題 -->
</head>
<body>
<!-- 用于定義html文檔中需要顯示給用戶查看的內(nèi)容（文字/圖片/音頻/視頻等） -->
</body>
</html>
-
head內(nèi)部標(biāo)簽
-
meta標(biāo)簽
作用：指定字符集
格式：
<meta charset="GBK" /> <meta charset="UTF-8" />-
GBK(GB2312)和UTF-8區(qū)別
1打肝、GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外 文脂新，體積比較小。
2粗梭、UTF-8里面存儲的世界上所有的文字争便，體積比較大。
-
-
常見的DOCTYPE有如下幾種
-
XHTML1.0
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
HTML4.0.1
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
HTML5
- <!DOCTYPE html>
-
-
HTML標(biāo)簽分類
- 單標(biāo)簽：只有開始標(biāo)簽沒有結(jié)束標(biāo)簽, 也就是由一個<>組成的
如：<hr>楼吃、<br> 等- 雙標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽, 也就是由一個<>和一個組成的
如：<html></html> -
HTML標(biāo)簽關(guān)系分類
-
并列關(guān)系(兄弟/平級)
<head></head> <body></body> -
嵌套關(guān)系(父子/上下級)
<head> <meta charset="UTF-8" /> <title>百度一下,你就知道123</title> </head>
-
-
常用開發(fā)工具
- Sublime始花、WebStorm、Dreamwaver
三孩锡、HTML的基礎(chǔ)標(biāo)簽
-
H系列標(biāo)簽
作用：給文本添加標(biāo)題語義
語法：<h#>標(biāo)題文字</h#>酷宵，其中“#”代表數(shù)字1-6中的任意一個，從數(shù)字1到數(shù)字6躬窜，標(biāo)題大小排列由大到小(數(shù)字越大浇垦，標(biāo)題字號就越小)。
-
段落標(biāo)簽
<p>這里表示段落</p> -
分割線標(biāo)簽：
<hr> -
強制換行標(biāo)簽：
<br> -
span標(biāo)簽：
- 作用：用來組合文檔中的行內(nèi)元素荣挨。
-
img標(biāo)簽
作用：插入圖片
格式：
-
img標(biāo)簽的其他屬性：
alt：圖片無法顯示時的提示信息（文字/圖片）
title：當(dāng)鼠標(biāo)移動到圖片上時顯示的文本
width：設(shè)置圖片的寬度
height：設(shè)置圖片的高度
注意點：
img標(biāo)簽插入的圖片默認(rèn)不是占一整行的空間男韧；如果想讓圖片等比拉伸，只設(shè)置圖片的高度或者寬度即可默垄。
-
相對路徑和絕對路徑
絕對路徑：從電腦的具體盤符開始尋找資源
格式：
相對路徑：一個文件相對于另一個文件的位置尋找需要的資源
-
相對路徑設(shè)置規(guī)則：
-
相對路徑同級：
此虑；意思是在.html文件所在的文件夾下，找到名為pic的這一張圖片（pic.png和.html文件在同一文件夾內(nèi)）口锭。
-
相對路徑下級：
朦前；意思是在.html文件所在的文件夾下，找到名為images的文件夾,然后再從images文件夾下找到名為pic的這一張圖片（images文件夾和.html文件在同一文件夾內(nèi)）鹃操。
-
相對路徑上級：
韭寸；意思是在放.html文件的文件夾下，找到名為pic的圖片（pic.png和.html文件所在的文件夾在同一文件夾內(nèi)）荆隘。
-
相對路徑同級：
-
a標(biāo)簽（超鏈接）
- 格式：
<a >xxxxxxxxx</a> -
a標(biāo)簽中的屬性：
href：指定跳轉(zhuǎn)的目標(biāo)地址（可以是網(wǎng)絡(luò)地址恩伺，可以是本地地址）
target：是否保留原始界面 取值：_blank（保留，即在新窗口打開目標(biāo)地址）椰拒； _self（不保留晶渠，即在當(dāng)前界面打開目標(biāo)地址）
title：懸停文本（只有當(dāng)鼠標(biāo)移動到超鏈接上時才會顯示）
-
a標(biāo)簽的其他用法：
-
假鏈接
- 格式1：
<a href="#">xxxxxxxxxxxxx</a> 點擊之后會自動回到瀏覽器頂部- 格式2：
<a href="javascript:">xxxxxxxxxxxx</a> 點擊之后不會自動回到瀏覽器頂部錨點鏈接（跳轉(zhuǎn)到當(dāng)前頁面指定的位置）
格式：
<a href="#location">跳轉(zhuǎn)到指定的位置</a>-
在頁面的指定位置給任意一個標(biāo)簽添加一個id屬性
例如：
<p id="location">這個是最終跳轉(zhuǎn)到的目標(biāo)</p>
-
base標(biāo)簽和a標(biāo)簽結(jié)合使用
格式：
```
<base target="_blank" />
```
- 注意點：
>
1、base標(biāo)簽必須嵌套在head標(biāo)簽里面
2燃观、 如果a標(biāo)簽中指定了target乱陡，base標(biāo)簽中也指定了target，那么會按照a標(biāo)簽中指定的來執(zhí)行
-
列表標(biāo)簽
-
無序列表（unordered list）
- 格式：
<ul> <li></li> <li></li> <li></li> </ul>- 應(yīng)用場景：導(dǎo)航條仪壮、新聞列表、商品列表等胳徽。
-
有序列表（ordered list）
- 格式：
<ol> <li></li> <li></li> <li></li> </ol>- 應(yīng)用場景：排行榜
-
定義列表（definition list）
-
格式：
<dl> <dt>pc網(wǎng)頁制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項目實戰(zhàn)</dd> </dl> 應(yīng)用場景：圖文混排积锅、網(wǎng)站底部相關(guān)信息
-
-
-
表格標(biāo)簽
-
格式：
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> </table> -
表格中的屬性：
border：指定邊框的寬度爽彤，默認(rèn)情況下表格的邊框?qū)挾葹?，看不到
cellspacing：指定表格之間的間隙缚陷，默認(rèn)值是2個像素
cellpadding：指定單元格邊緣和內(nèi)容之間的內(nèi)邊距适篙，默認(rèn)值是1個像素
width：指定表格的寬度，默認(rèn)情況下表格的寬度是由內(nèi)容自動計算出來的
height：指定表格的高度箫爷，默認(rèn)情況下表格的高度是由內(nèi)容自動計算出來的
align：規(guī)定水平方向?qū)R方式嚷节，它的取值有：center、left虎锚、right
valign：規(guī)定垂直方向?qū)R方式硫痰，它的取值有：center、top窜护、bottom
bgcolor：設(shè)置表格/行/單元格的背景顏色
-
注意：
因為HTML僅僅是用來添加語義的效斑，所以這些屬性僅作為了解，企業(yè)開發(fā)中用css代替
-
表格中的其他標(biāo)簽：
caption標(biāo)簽：給整個表格設(shè)置標(biāo)題
注意：
一定要嵌套在table標(biāo)簽內(nèi)部才有效
一定要緊跟在table標(biāo)簽后面 -
單元格標(biāo)題標(biāo)簽
- th標(biāo)簽：給每一列設(shè)置標(biāo)題
-
表格的結(jié)構(gòu)
thead標(biāo)簽：用來存放每一列的表頭
tbody標(biāo)簽：用來存放頁面中的主體數(shù)據(jù)柱徙，如果不寫會自動加上
tfoot標(biāo)簽：用來存放表格的頁腳
注意：
由于部分瀏覽器對table的這種結(jié)構(gòu)支持不是很好缓屠，所以在企業(yè)開發(fā)中一般都不用嚴(yán)格的按照這種結(jié)構(gòu)來編寫
-
合并單元格
-
橫向合并：
colspan：合并當(dāng)前列的哪幾個單元格
-
縱向合并：
rowspan：合并當(dāng)前行的哪幾個單元格
-
-
-
表單標(biāo)簽
作用：用于收集用戶信息, 讓用戶填寫、選擇相關(guān)信息
格式：
<form> 所有的表單內(nèi)容护侮，都要寫在form標(biāo)簽里面 </form> input標(biāo)簽
這個標(biāo)簽有很多type的取值敌完，取值的不同就決定了input標(biāo)簽的功能和外觀不同
-
常用type類型：
<input type="" name="" value="" /> 明文輸入框
type="text" 單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox" 多項選擇
type="button" 按鈕
type="submit" 提交
type="image" 圖片提交
type="file" 上傳文件
type="reset" 重置
type="hidden" 隱藏
type="color" 定義取色板
type="date" 定義日期選擇器
type="email" 郵箱驗證
type="url" URL驗證
給單選設(shè)置默認(rèn)值：
<input type="radio" name="age" checked="checked" /> 年齡
- 注意：給單選、多選設(shè)置默認(rèn)值羊初，前提是同一組內(nèi)容必須設(shè)置相同name屬性
-
label標(biāo)簽
作用： label標(biāo)簽不會向用戶呈現(xiàn)任何特殊效果滨溉。不過，它為鼠標(biāo)用戶改進了可用性
注意：
表單元素要有一個id凳忙，然后label標(biāo)簽就有一個for屬性业踏，for屬性和id相同就表示綁定了
所有表單元素都可以通過label綁定
-
數(shù)據(jù)列表
datalist標(biāo)簽（輸入datalist存放的數(shù)據(jù)，會有提示功能）
作用：給輸入框綁定待選項
格式：
<datalist> <option>待選項內(nèi)容</option> </datalist> -
多行文本框(文本域)
textarea標(biāo)簽
作用： 用于在表單中定義多行的文本輸入控件
格式：
<textarea cols="30" rows="10">內(nèi)容</textarea>-
注意點：
cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見寬度
ows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見行數(shù)
默認(rèn)情況下輸入框是可以手動拉伸的涧卵，可以利用css禁止縮放
格式：
<style type="text/css"> textarea{ resize: none; } </style>
-
下拉列表
select標(biāo)簽（只能選擇勤家，不能輸入）
-
格式：
<select> <option>北京</option> <option>河北</option> <option>河南</option> <option>山東</option> <option>山西</option> <option>湖北</option> <option>貴州</option> </select> -
給下拉列表設(shè)置默認(rèn)值
<select> <option>北京</option> <option>河北</option> <option>河南</option> <option>山東</option> <option>山西</option> <option>湖北</option> <option selected="selected">貴州</option>
</select>
- 給下拉列表添加分組<select>
<optgroup label="北京市">
<option>海淀區(qū)</option>
<option>昌平區(qū)</option>
<option>朝陽區(qū)</option>
</optgroup><optgroup label="廣州市"> <option>天河區(qū)</option> <option>白云區(qū)</option> </optgroup></select>
-
多媒體標(biāo)簽
-
video標(biāo)簽
作用：播放視頻
格式1：
<video src=""></video>- 格式2：(為了解決瀏覽器的適配問題而存在)
<video> <source src="" type=""> </video> -
video標(biāo)簽的屬性
src：告訴video標(biāo)簽需要播放的視頻地址
autoplay：告訴video標(biāo)簽是否需要自動播放視頻
controls：告訴video標(biāo)簽是否需要顯示控制條
poster：告訴video標(biāo)簽視頻沒有播放之前顯示的占位圖片
loop： 告訴video標(biāo)簽循環(huán)播放視頻，一般用于做廣告視頻
preload：告訴video標(biāo)簽預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會失效
muted：告訴video標(biāo)簽視頻靜音
width/height： 和img標(biāo)簽中的一模一樣
注意點：
video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標(biāo)簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標(biāo)簽, 否則同樣無法播放
過去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標(biāo)簽來播放視頻, 可以通過JS框架中的html5media來實現(xiàn)
-
audio標(biāo)簽
作用： 播放音頻
格式1：
<audio src=""></audio>- 格式2：
<audio> <source src="" type=""> </audio>- 注意點：
audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣. 只不過有3個屬性不能用, height/width/poster
-
詳情和概要標(biāo)簽（details標(biāo)簽/summary標(biāo)簽）
作用：利用summary標(biāo)簽來描述概要信息, 利用details標(biāo)簽來描述詳情信息默認(rèn)情況下是折疊展示, 想看見詳情必須點擊
格式：
<details> <summary>概要信息</summary> 詳情信息 </details>
-
-
marquee標(biāo)簽（移動的字體和圖片）
作用：跑馬燈效果
格式：
<marquee>移動文字或圖片</marquee>-
marquee標(biāo)簽中的屬性
direction：設(shè)置滾動方向 left/right/up/down（默認(rèn)是向左循環(huán)移動柳恐，移動范圍在 其父對象的有效區(qū)域內(nèi)伐脖。）
scrollamount： 設(shè)置滾動速度, 值越大就越快
loop： 設(shè)置滾動次數(shù), 默認(rèn)是-1, 也就是無限滾動
behavior：設(shè)置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回
scrolldelay：移動對象的延時<marquee scrolldelay=”1000”>走走停
</marquee> scrolldelay以時間為單位，用毫秒表示乐设。移動的區(qū)域和背景：<marquee width=”100” height=”100” bgcolor=”pink”></marquee>
注意點：
marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無法查詢這個標(biāo)簽, 但是各大瀏覽器對這個標(biāo)簽的支持非常好
- W3C推出的新的標(biāo)簽
<strong>著重內(nèi)容</strong>
<ins>新插入的文本</ins> ins是Inserted的縮寫
<em>強調(diào)內(nèi)容</em> em是Emphasized的縮寫
<del>已刪除的文本</del> del是Deleted的縮寫
發(fā)現(xiàn)HTML的標(biāo)簽不是一般的多讼庇，要是全部記住，這得多燒腦啊近尚。別擔(dān)心：記不住的話可以去這里查看蠕啄。
