一蒸播、HTML基礎(chǔ)標(biāo)簽
1磨总、文檔聲明
（1）<!DOCTYPE html>
文檔聲明熟菲，聲明當(dāng)前網(wǎng)頁(yè)版本
html5的文檔聲明：<!doctype html>或者<!DOCTYPE HTML>不區(qū)分大小寫(xiě)
（2）<meta>
meta標(biāo)簽用來(lái)設(shè)置網(wǎng)頁(yè)頂端元數(shù)據(jù)库北，可以通過(guò)meta標(biāo)簽來(lái)設(shè)置網(wǎng)頁(yè)的字符集，避免亂碼問(wèn)題
meta主要用于設(shè)置網(wǎng)頁(yè)中的一些元數(shù)據(jù)禀横，元數(shù)據(jù)不是給用戶看
meta標(biāo)簽有以下屬性可以設(shè)置：
charset: 指定網(wǎng)頁(yè)的字符集
name: 指定的數(shù)據(jù)名稱屁药，有兩個(gè)可選值
keywords: 表示網(wǎng)站的關(guān)鍵字，用于搜索引擎的搜索
description: 用于指定網(wǎng)站的描述
content: 指定數(shù)據(jù)的內(nèi)容
可以同時(shí)指定多個(gè)關(guān)鍵字柏锄，關(guān)鍵字間使用酿箭，隔開(kāi)
網(wǎng)站的描述為一兩句話，會(huì)顯示在搜索引擎搜索的結(jié)果中
http-equiv:用于網(wǎng)頁(yè)重定向
<meta charset="UTF-8">
<!-- 京東的meta -->
<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,VCD,DV,相機(jī),數(shù)碼,手表,存儲(chǔ)卡,京東" />
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電趾娃、數(shù)碼通訊缭嫡、電腦、家居百貨抬闷、服裝服飾妇蛀、母嬰、圖書(shū)笤成、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷评架、誠(chéng)信的服務(wù)，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />
<!-- 表示網(wǎng)頁(yè)在3秒后轉(zhuǎn)到百度 -->
<meta http-equiv="refresh" content="3; url=http://www.baidu.com">
（3）<title>
title中的內(nèi)容會(huì)顯示在瀏覽器的標(biāo)題欄炕泳，搜索引擎會(huì)主要根據(jù)title中的內(nèi)容來(lái)判斷網(wǎng)頁(yè)的主要內(nèi)容纵诞。title標(biāo)簽的內(nèi)容會(huì)作為搜索結(jié)果的超鏈接上的文字顯示
<title>Document</title>
2、實(shí)體
在網(wǎng)頁(yè)中編寫(xiě)的多個(gè)空格默認(rèn)情況會(huì)自動(dòng)被瀏覽器解析為一個(gè)空格培遵，在html中挣磨，有些時(shí)候，我們不能直接書(shū)寫(xiě)一些特殊符號(hào)荤懂。比如：多個(gè)連續(xù)的空格茁裙，字母兩側(cè)的大于小于號(hào)，如果我們需要在網(wǎng)頁(yè)中書(shū)寫(xiě)這些特殊符號(hào)节仿，則需要使用html中的實(shí)體（轉(zhuǎn)義字符）
實(shí)體的用法：
&實(shí)體的名字;
空格
>大于號(hào)
<小于號(hào)
©版權(quán)符號(hào)
3晤锥、語(yǔ)義化標(biāo)簽
網(wǎng)頁(yè)中html專門用來(lái)負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，所以在使用html標(biāo)簽時(shí)廊宪，用該關(guān)注的是標(biāo)簽的語(yǔ)義矾瘾，而不是它的樣式
（1）標(biāo)題標(biāo)簽
? h1~h6一共有六級(jí)標(biāo)題
? 從h1~h6重要性遞減
? h1在網(wǎng)頁(yè)中的重要性僅次于title標(biāo)簽，一般情況下一個(gè)頁(yè)面中只會(huì)有一個(gè)h1
? 一般情況下標(biāo)題標(biāo)簽只會(huì)使用h1~h3箭启，剩下的很少用
? 標(biāo)題標(biāo)簽都是塊元素壕翩，在頁(yè)面中獨(dú)占一行的元素稱為塊元素（block element）
（2）<hgroup>
hgroup標(biāo)簽用來(lái)為標(biāo)簽分組，可以將一組相關(guān)的標(biāo)題同時(shí)放入到hgroup中
<hgroup>
<h1>回鄉(xiāng)偶書(shū)</h1>
<h2>其一</h2>
</hgroup>
（3）<p>
p標(biāo)簽表示一個(gè)段落傅寡，也是一個(gè)塊元素
<p>zheshiyige1duna</p>
<p>zheshidierhe1duanluo1</p>
（4）強(qiáng)調(diào)
<em>
em標(biāo)簽用于表示語(yǔ)音語(yǔ)調(diào)的一個(gè)加重放妈，在頁(yè)面中不會(huì)獨(dú)占一行北救，為行內(nèi)元素（inline element）
所修飾的內(nèi)容在頁(yè)面中的表示為斜體顯示
<p>今天天氣<em>真好</em></p>
<strong>
strong與em都表示強(qiáng)調(diào)，但是比em的強(qiáng)調(diào)性更強(qiáng)芜抒。如果說(shuō)em標(biāo)簽所修飾的文本表示大聲喊叫的話珍策，那strong修的的文本就無(wú)異于尖叫了。應(yīng)盡量減少使用類似的過(guò)分強(qiáng)調(diào)重要性的標(biāo)簽宅倒。
所修飾的內(nèi)容在頁(yè)面中的表示為加粗顯示
<p>今天必須要完成<strong>作業(yè)</strong></p>
（5）引用
<blockquote>
blockquote表示一個(gè)長(zhǎng)引用攘宙，會(huì)換行，不自動(dòng)加引號(hào)
魯迅說(shuō)：
<blockquote>我沒(méi)說(shuō)過(guò)</blockquote>
在頁(yè)面的顯示為
魯迅說(shuō)：
我沒(méi)說(shuō)過(guò)
<q>
q表示一個(gè)短引用拐迁，不會(huì)換行蹭劈，自動(dòng)添加引號(hào)
子曰：<q>學(xué)而時(shí)習(xí)之，不亦樂(lè)乎</q>
在頁(yè)面的顯示為
子曰："學(xué)而時(shí)習(xí)之线召，不亦樂(lè)乎"
（6）布局規(guī)范
塊元素（block element）在網(wǎng)頁(yè)中一般通過(guò)塊元素來(lái)對(duì)頁(yè)面進(jìn)行布局
行內(nèi)元素（inline element）行內(nèi)元素主要用來(lái)包裹文本
一般情況會(huì)在塊元素中放行內(nèi)元素链方，而不會(huì)在行內(nèi)元素中放塊元素， 塊元素中基本什么都可以放
注意：p元素中不能放任何塊元素
瀏覽器在解析網(wǎng)頁(yè)時(shí)灶搜，會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)中不符合規(guī)范的內(nèi)容進(jìn)行修正
比如：
標(biāo)簽寫(xiě)在了根標(biāo)簽外部
p標(biāo)簽中嵌套了塊元素
根元素中出現(xiàn)了除head和body以外的子元素
.....
瀏覽器并不會(huì)在源碼中修改，而是在內(nèi)存中修改工窍，因此在網(wǎng)頁(yè)中右鍵查看源代碼并不會(huì)改變割卖，右鍵檢查就可以看到改變
<p>
<h1>我有錯(cuò)嗎</h1>
</p>
這種情況瀏覽器會(huì)自動(dòng)為p標(biāo)簽的前半部分補(bǔ)上后半部分，為后半部分補(bǔ)上前半部分患雏，h1標(biāo)簽正常顯示
</body>
</html>
<p>我錯(cuò)了嗎</p>
如果將標(biāo)簽寫(xiě)到了文檔的外面鹏溯，瀏覽器會(huì)自動(dòng)將p標(biāo)簽添加到body中
（7）結(jié)構(gòu)化語(yǔ)義標(biāo)簽
header表示網(wǎng)頁(yè)的頭部
main表示網(wǎng)頁(yè)的主體部分（一個(gè)頁(yè)面只會(huì)有一個(gè)main）
footer表示網(wǎng)頁(yè)的底部
nav表示網(wǎng)頁(yè)中的導(dǎo)航
aside表示和主體相關(guān)的側(cè)邊欄
article表示一個(gè)獨(dú)立的文章
section表示一個(gè)獨(dú)立的區(qū)塊，上面的標(biāo)簽都不能表示時(shí)使用section
上面提到的都是H5新增的標(biāo)簽淹仑，在實(shí)際開(kāi)發(fā)中用的非常少丙挽，多數(shù)情況下還是使用div，div可以代替以上所有標(biāo)簽
目前來(lái)講div結(jié)合span還是我們主要的布局元素匀借，div沒(méi)有語(yǔ)義颜阐，就用來(lái)表示一個(gè)區(qū)塊，span行內(nèi)元素吓肋，沒(méi)有任何意義凳怨，一般用于在網(wǎng)頁(yè)中選中文字
4、列表
html中的列表一共有三種：
（1）有序列表
使用ol標(biāo)簽創(chuàng)建是鬼，使用li表示列表項(xiàng)
會(huì)對(duì)列表項(xiàng)進(jìn)行編號(hào)肤舞，每一層嵌套都是用阿拉伯?dāng)?shù)字進(jìn)行編號(hào)
<ol>
<li>abc</li>
<ol>
<li>re</li>
<li>sa</li>
<ol>
<li>fd</li>
<li>sa</li>
</ol>
</ol>
</ol>
（2）無(wú)序列表
使用ul標(biāo)簽創(chuàng)建，使用li作為列表項(xiàng)
列表項(xiàng)前面為原點(diǎn)均蜜，嵌套第一層為空心圈李剖，第二層為實(shí)心方塊
（3）定義列表
使用dl標(biāo)簽創(chuàng)建，使用dt來(lái)表示定義的內(nèi)容囤耳，使用dd來(lái)對(duì)內(nèi)容進(jìn)行說(shuō)明
<dl>
<dt>結(jié)構(gòu)</dt>
<dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)</dd>
<dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)</dd>
<dd>結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)</dd>
</dl>
在頁(yè)面中的顯示為
結(jié)構(gòu)
結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)
結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)
結(jié)構(gòu)表示網(wǎng)頁(yè)的結(jié)構(gòu)
這其中用的最多的是ul列表之間可以相互嵌套
5篙顺、超鏈接
超鏈接可以讓我們從一個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面偶芍，或者是當(dāng)前頁(yè)面的其他位置，使用a標(biāo)簽來(lái)定義超鏈接慰安，屬性：
（1）href:
指定跳轉(zhuǎn)的目標(biāo)路徑腋寨，值可以是一個(gè)外部網(wǎng)站的地址也可以是內(nèi)部頁(yè)面的地址。當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部的頁(yè)面時(shí)化焕，一般我們都會(huì)使用相對(duì)路徑
相對(duì)路徑都會(huì)使用 . 或 .. 開(kāi)頭
./ 表示當(dāng)前文件所在目錄
../ 表示當(dāng)前文件所在目錄的上一級(jí)目錄
<a >百度</a>
<a href="../JavaScript基礎(chǔ)/基礎(chǔ)/水仙花數(shù).html">水仙花數(shù)</a>
可以直接將超鏈接的href屬性設(shè)置為#萄窜，這樣點(diǎn)擊超鏈接以后頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁(yè)面的頂部位置撒桨， 如果需要跳轉(zhuǎn)到當(dāng)前頁(yè)面的指定位置查刻，需要將href屬性值設(shè)置為：#目標(biāo)元素的id值
<a href="#bottom">回到底部</a>
<p>.....</p>
<a href="#" id="bottom">回到頂部</a>
注意：如果href屬性中什么都不寫(xiě)與寫(xiě)了#的效果一樣，會(huì)自動(dòng)跳轉(zhuǎn)到頂部
在開(kāi)發(fā)中可以用#作為超鏈接的占位符使用凤类，即定義一個(gè)超鏈接但是讓他什么也不做穗泵，但是#已經(jīng)用作跳轉(zhuǎn)頁(yè)面頂部。因此可以用javascript:;來(lái)作為href的屬性谜疤，此時(shí)點(diǎn)擊這個(gè)超鏈接什么也不會(huì)發(fā)生佃延，點(diǎn)擊后超鏈接顏色也不會(huì)改變。
<a href="javascript:;">這是一個(gè)超鏈接1</a>
（2）target:
用來(lái)指定超鏈接打開(kāi)的位置
_self默認(rèn)值夷磕，在當(dāng)前頁(yè)面中打開(kāi)超鏈接
_blank在一個(gè)新的頁(yè)面中打開(kāi)超鏈接
<a href="06列表.html" target="_self">當(dāng)前頁(yè)面打開(kāi)</a>
<a href="06列表.html" target="_blank">當(dāng)前頁(yè)面打開(kāi)</a>
6履肃、圖片標(biāo)簽
圖片標(biāo)簽用于向當(dāng)前頁(yè)面中引入一個(gè)外部圖片，使用img標(biāo)簽來(lái)引入外部圖片坐桩，img標(biāo)簽是一個(gè)自結(jié)束標(biāo)簽尺棋， img這種元素屬于替換元素（塊和行內(nèi)元素之間，具有兩種元素的特點(diǎn)）
（1）屬性值：
-
src：
指定外部圖片的路徑（路徑規(guī)則和超鏈接一樣） -
alt:
圖片的描述绵跷，這個(gè)描述默認(rèn)情況下不會(huì)顯示膘螟，有些瀏覽器會(huì)在圖片無(wú)法加載時(shí)顯示，搜索引擎會(huì)根據(jù)alt中的內(nèi)容來(lái)識(shí)別圖片碾局，如果不寫(xiě)alt屬性則圖片不會(huì)被搜索引擎找到 - 樣式
width:圖片的寬度
height:圖片的高度
寬度和高度中如果只修改了一個(gè)荆残，則另一個(gè)會(huì)等比例縮放
注意：
一般情況下在PC端，不建議修改圖片的大小净当，需要多大的圖片就裁多大脊阴。 但是在移動(dòng)端，經(jīng)常需要對(duì)圖片進(jìn)行縮放
<img src="https://tse1-mm.cn.bing.net/th/id/OIP.zlXYTkWANFf2FL1Wfvn62gHaHz?w=182&h=192&c=7&o=5&pid=1.7" alt="Iron-man" width="500px">
（2）圖片格式
jpeg(jpg):
支持的顏色比較豐富蚯瞧，不支持透明效果嘿期，不支持動(dòng)圖，一般用來(lái)顯示照片gif:
支持的顏色較少埋合，支持簡(jiǎn)單透明备徐，支持動(dòng)圖，顏色單一的圖片甚颂，動(dòng)圖png:
支持顏色豐富蜜猾，支持復(fù)雜透明秀菱，不支持動(dòng)圖，顏色豐富蹭睡，復(fù)雜透明圖片（專為網(wǎng)頁(yè)而生）webp:
這種格式是谷歌新推出的專門用來(lái)表示網(wǎng)頁(yè)中的圖片的一種格式衍菱，它具備其他圖片格式的所有優(yōu)點(diǎn)，而且文件還特別小肩豁，缺點(diǎn)是兼容性不好base64:
將圖片使用base64編碼脊串，這樣可以將圖片轉(zhuǎn)換為字符，通過(guò)字符的方式引入圖片清钥， 一般都是一些需要和網(wǎng)頁(yè)一起加載的圖片才會(huì)使用base64琼锋，網(wǎng)頁(yè)直接搜索base64即可找到在線轉(zhuǎn)換圖片網(wǎng)站
7、內(nèi)聯(lián)框架
內(nèi)聯(lián)框架iframe祟昭，用于向一個(gè)頁(yè)面中引入一個(gè)其他頁(yè)面
屬性：
src:
指定要引入的網(wǎng)頁(yè)路徑framebroder:
指定內(nèi)聯(lián)框架的邊框缕坎，默認(rèn)是0
同樣可以為內(nèi)聯(lián)框架指定高度和寬度
將騰訊網(wǎng)完整的加載到當(dāng)前的頁(yè)面中
<iframe src="https://www.qq.com" frameborder="0" width="500px" height="800px"></iframe>
8、音視頻
（1）音頻
audio標(biāo)簽用來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件篡悟，音頻文件引入時(shí)默認(rèn)情況下不允許用戶自己控制播放停止
屬性：
contros: 是否允許用戶控制播放
autoplay: 音頻文件是否自動(dòng)播放如果設(shè)置了autoplay 則音樂(lè)在打開(kāi)頁(yè)面時(shí)自動(dòng)播放但是目前來(lái)講大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂(lè)進(jìn)行播放
loop: 音樂(lè)是否循環(huán)播放
注意：上面的屬性都沒(méi)有屬性值
<audio src="音視頻/Just the Way You Are.mp3" controls autoplay loop></audio>
除了通過(guò)src來(lái)指定外部文件路徑外谜叹，還可以通過(guò)source來(lái)指定文件路徑，一般情況下都通過(guò)下面方式引用
<audio controls>
<!-- IE8不兼容audio搬葬，使用這種方式兼容的瀏覽器會(huì)正常顯示荷腊，不兼容則會(huì)顯示提示文字 -->
對(duì)不起，您所使用的瀏覽器不支持音頻播放踩萎。
<source src="音視頻/Just the Way You Are.mp3">
</audio>
如果想要在IE8使用音頻播放，可以通過(guò)embed標(biāo)簽實(shí)現(xiàn)
<audio controls>
<source src="音視頻/Just the Way You Are.mp3">
<embed src="音視頻/Just the Way You Are.mp3" type="audio/mp3" width="300px" height="100px">
</audio>
（2）視頻
使用video標(biāo)簽來(lái)向網(wǎng)頁(yè)中引入一個(gè)視頻很钓，標(biāo)簽中的屬性controls,autoplay,loop與audio的使用方式一樣
<video controls width="400px" height="300px">
<source src="音視頻/end.mp4">
<embed src="音視頻/end.mp4" type="video/mp4" width="400px" height="300px">
</video>
也可以通過(guò)視頻網(wǎng)站上的分享復(fù)制通用代碼直接使用其他網(wǎng)站的視頻
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=o0034qdrsic"
allowFullScreen="true" width="400px" height="300px"></iframe>
<iframe src="https://player.bilibili.com/player.html?aid=23867784&bvid=BV15p411R73R&cid=39922285&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
9香府、表格
（1）創(chuàng)建表格
-
普通表格
使用
table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格，在table標(biāo)簽中使用tr標(biāo)簽來(lái)創(chuàng)建行码倦，tr中使用td表示一個(gè)單元格網(wǎng)企孩，有幾個(gè)單元格就有幾列
使用rowspan縱向合并單元格
使用colspan來(lái)橫向合并單元格，參數(shù)為向右合并的單元格個(gè)數(shù)<table border="1" width="50%" align="center"> <tr> <td>a1</td> <td>a2</td> <td>a3</td> <td rowspan="2">a4</td> </tr> <tr> <td colspan="2">a1</td> <td>a3</td> </tr> </table>
-
長(zhǎng)表格
可以將一個(gè)表格分成三部分
頭部thead袁稽，th表示頭部單元格
主體tbody
底部tfoot<table border="1" width="50%" align="center"> <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合計(jì)</th> </tr> </thead> <tbody> <tr> <td>2020 1 1</td> <td>300</td> <td>300</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合計(jì)</td> <td>10000</td> </tr> </tfoot> </table>
（2）表格樣式
border-spacing指定邊框之間的距離
border-collapses設(shè)置邊框的合并
默認(rèn)情況下元素在td中是垂直居中的勿璃，可以通過(guò)vertical-align進(jìn)行調(diào)整
如果表格中沒(méi)有使用tbody而是直接使用tr，那么瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody推汽，并且將tr全部放到tbody中补疑，tr不是table的子元素.
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
border-spacing: 0px;
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 50px;
vertical-align: middle;
text-align: center;
}
tbody>tr:nth-child(even){
background-color: #bbffaa;
}
<table>
<tr>
<td>學(xué)號(hào)</td><td>姓名</td>
<td>性別</td><td>年齡</td>
<td>地址</td>
</tr>
<tr>
<td>1</td><td>孫悟空</td>
<td>男</td><td>25</td>
<td>花果山</td>
</tr>
</table>
（3）表單
在現(xiàn)實(shí)生活中表單用于提交數(shù)據(jù)，在網(wǎng)頁(yè)中也可以使用表單歹撒，網(wǎng)頁(yè)中的表單用于將本地的數(shù)據(jù)提交給遠(yuǎn)程的服務(wù)器莲组，使用form標(biāo)簽來(lái)創(chuàng)建一個(gè)表單。
form的屬性action為表單要提交的服務(wù)器地址
<form action="target.html">
<!-- 文本框暖夭，注意要想文本框中的數(shù)據(jù)提交到服務(wù)器中锹杈，必須為文本框指定一個(gè)name值 -->
用戶名
<input type="text" name="username">
<br>
<!-- 密碼框 -->
密 碼
<input type="password" name="password">
<br>
<!-- 單選按鈕
像這種選擇框撵孤，必須要指定一個(gè)value屬性，value屬性最終會(huì)作為用戶的填寫(xiě)值發(fā)送給服務(wù)器 -->
單選按鈕
<input type="radio" name="hello" value="a">
<input type="radio" name="hi" value="b">
<br>
<!-- 多選框 -->
多選框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" cheaked>
<br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">選項(xiàng)一</option>
<option value="ii" selected>選項(xiàng)二</option>
<option value="iii">選項(xiàng)三</option>
</select>
<br>
<!-- 提交按鈕 -->
<input type="submit" value="注冊(cè)">
</form>
autocomplete="off"用于關(guān)閉自動(dòng)補(bǔ)全（歷史記錄）竭望，readonly將表單項(xiàng)設(shè)置為只讀邪码，數(shù)據(jù)會(huì)提交；disabled將表單項(xiàng)設(shè)置為禁用咬清，數(shù)據(jù)不會(huì)提交闭专。
<form action="target.html" autocomplete="off">
<input type="text" name="username" value="hello" readonly>
<br>
<input type="text" name="username" value="hello" disabled>
<br>
<input type="text" name="username" autofocus>
<br>
<input type="submit">
<!-- 重置按鈕 -->
<input type="reset">
<!-- 普通按鈕 -->
<input type="button" value="按鈕">
<br>
<button type="button">按鈕</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
