??HTML是一種超文本標記語言豫柬，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標記語言。
“超文本”就是指頁面內(nèi)可以包含圖片僵蛛、鏈接互纯，甚至音樂瑟幕、程序等非文字元素。
html 超文本標記語言
H Hyper
T text (超鏈接，圖片只盹，視頻辣往，音頻等)
M markup(標記，標簽)
L language
??HTML之所以稱為超文本標記語言殖卑，是因為文本中包含了所謂“超級鏈接”點站削。所謂超級鏈接，就是一種URL指針孵稽，通過激活（點擊）它许起，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一菩鲜。
??HTML是一種規(guī)范园细，一種標準，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分睦袖。網(wǎng)頁文件本身是一種文本文件珊肃，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理馅笙，畫面如何安排伦乔，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件董习，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容烈和，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程皿淋，編制者只能通過顯示效果來分析出錯原因和出錯部位招刹。但需要注意的是，對于不同的瀏覽器窝趣，對同一標記符可能會有不完全相同的解釋疯暑，因而可能會有不同的顯示效果。
認識HTML語法
<!--文檔生明頭：告訴瀏覽器你要用h5標準來解析當前html文檔-->
<!DOCTYPE html>
<!--class是類名哑舒，表示一類元素的名字妇拯，可以多個使用
id是身份標識,這個名字必須是唯一的，其他元素不能叫這個名字了
-->
<!--路徑問題：
絕對路徑：表示路徑的完整描述信息
相對路徑：根據(jù)相對位置得到的路徑信息
/進入文件夾
/當前文件夾
../上一層文件夾
-->
記一些相對有意義的html語法
a鏈接
<a href="#targetId">錨點測試</a>
<div id="targetId">四大名著是中國文學(xué)史中的經(jīng)典作品洗鸵，是世界寶貴的文化遺產(chǎn)</div>
<!--
給a鏈接設(shè)置錨點越锈，它就會跳去id名相同的地方
-->
<a target="_blank">打開一個新的網(wǎng)頁</a>
<!--a鏈接的target標簽
_blank
瀏覽器總在一個新打開、未命名的窗口中載入目標文檔膘滨。
_self
這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標甘凭，它使得目標文檔載入并顯示在相同的框架
或者窗口中作為源文檔。這個目標是多余且不必要的火邓，除非和文檔標題 <base>
標簽中的 target 屬性一起使用丹弱。
_parent
這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集德撬。
如果這個引用是在窗口或者在頂級框架中，那么它與目標 _self 等效蹈矮。
_top
這個目標使得文檔載入包含這個超鏈接的窗口砰逻，
用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。
提示：這些 target 的所有 4 個值都以下劃線開始泛鸟。
任何其他用一個下劃線作為開頭的窗口或者目標都會被瀏覽器忽略蝠咆，
因此，不要將下劃線作為文檔中定義的任何框架 name 或 id 的第一個字符北滥。
-->
table中的一些屬性
border 邊框
cellspacing 單元格與單元格之間的間隙
cellpadding 內(nèi)容到邊框的距離
tr：行
td：列
rowspan 合并行
colspan 合并列
ul,li 無序列表
ol,li 有序列表
start 開始下標
type指定序列號類型 比如circle 空心圓
reversed 倒序
實體字符
實體字符(都是以&開頭;結(jié)尾)
> 大于
< 小于
英文空格
 中文空格
"引號("")
&&號
form表單
form應(yīng)用場景：登錄/注冊頁面
form表單
??數(shù)據(jù)傳輸(可能是將本地數(shù)據(jù)傳到后臺,也有可能是從后臺請求數(shù)據(jù))
??action 指定服務(wù)器(后臺/接收數(shù)據(jù))地址
??method 指定通訊的方法(常用get/post/put/delete)
input屬性
name屬性：指定向后臺傳值的手段(后臺通過這個字段來獲取用戶輸入)
placeholder 空白內(nèi)容時提示內(nèi)容
autofocus 自動聚焦
autocomplete 自動提示之前提交的內(nèi)容
required 該字段是必填的否則無法提交
disabled 禁用
readonly 只讀
step 步幅multiple 設(shè)置多選
<form action="http://192.168.199.141:3000/test.js" method="post" enctype="multipart/form-data" > <!--post可以用這個enctype="multipart/form-data"上傳文件-->
<div>
姓名：<input type="text" name="userName" id="userName" value="" placeholder="請輸入內(nèi)容" autofocus required="required"/>
</div>
<div>
密碼：<input type="password" name="psw" id="" value="" />
</div>
<div>
頭像：<input type="file" name="avatar" accept="image/*" multiple/> <!--accept設(shè)置選擇什么文件-->
</div>
<!--
type:number 并不是說刚操，你只能輸入數(shù)字，而是html會將內(nèi)容盡量轉(zhuǎn)化為數(shù)字
他在移動端是非常有意義的再芋，例如電話號碼輸入框(彈出數(shù)字鍵盤)
-->
<div>
年齡：<input type="number" name="avatar" step="3"/>
</div>
<div>
性別：<br />
<label for="boy">男：<input id="boy" type="radio" name="gender" value="0"/></label>
<label for="girl">女：</label>
<input id="girl" type="radio" name="gender" value="1"/>
</div>
<div>
愛好：<br />
<label>電影：<input type="checkbox"/></label>
<label>音樂：<input type="checkbox"/></label>
<label>運動：<input type="checkbox"/></label>
</div>
<div>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</div>
</form>
<!--下拉框-->
<!--selected屬性剛開始顯示的option-->
<select name="city">
<option value="0">北京市</option>
<option value="1">上海市</option>
<option selected="selected" value="2">廣州市</option>
<option value="3">深圳市</option>
</select>
<!--文本框-->
<!--resize: none;禁止拉伸文本框
cols列合并
rows行合并-->
<textarea style="resize: none;" name="" id="" cols="40" rows="10"></textarea>
audio標簽
<!--
loop：循環(huán)播放
h5允許自定義標簽
prelosd 自動加載
-->
<audio loop="loop" controls>
<!--
利用source解決音頻兼容問題
-->
source type="audio/mpeg" src="audio/七里香.mp3" />
<source type="audio/ogg" src="audio/七里香.ogg"/>
</audio>
<!--<script type="text/javascript">
document.addEventListener("click",function(){
alert("帥哥")
document.querySelector("audio").play()
})
</script>-->
video標簽
<!--
width/height 設(shè)置自動寬高
controls 顯示控制臺
preload 設(shè)置預(yù)加載模式
muted 靜音
poster 設(shè)置海報地址
autoplay 自動播放
三種視頻格式
MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器
-->
<video width="800" height="" controls="controls" preload="auto" poster="img/小丑.jpg"
<source src="audio/q.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
當前瀏覽器不支持 video直接播放菊霜，點擊這里下載視頻： <a href="myvideo.webm">下載視頻</a>
</video>
圖片熱區(qū)地圖功能
1.img標簽要寫usermap屬性，指定要使用的map
2.map標簽要使用name屬性
3.map中area的shape屬性有三個值可選rect/circle/poly
<img src="img/小丑.jpg" usemap="#map1"/>
<map name="map1">
矩形：<area shape="rect" coords="212,32,239,55" alt="" />
多邊形：<area shape="poly" coords="258,127,215,186,300,186" alt="" />
圓形：<area shape="circle" coords="267,66,30" alt="" />
</map>
重要的meta標簽
<!--設(shè)置頁面編碼-->
<meta charset="UTF-8">
<!--頁面描述-->
<meta name="description" content="這里的文字描述網(wǎng)站內(nèi)容的"/>
<!--設(shè)置頁面關(guān)鍵字-->
<meta name="keywords" content="HTML CSS JavaScript"/>
<!--設(shè)置頁面緩存方式-->
<meta http-equiv="cache-control" content="no-cache" />
<!--聲明作者信息-->
<meta name="author" content="guxing,2357966040@qq.com"/>
<!--指定渲染引擎的類型和版本-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<!--移動端關(guān)閉電話號碼識別-->
<meta name="format-detection" content="telephone=no" />
<!--關(guān)閉郵箱地址識別-->
<meta name="format-detection" content="email=no" />
<!--如果想同時關(guān)閉電話和郵箱識別济赎，可以把它們寫到一條 meta 內(nèi)-->
<meta name="format-detection" content="telephone=no,email=no" />
<!--解決防盜鏈-->
<meta name="referrer" content="never"/>
設(shè)置標簽圖標
<link rel="shortcut icon" type="text/css" href="img/bitbug_favicon.ico"/>
<title>meta標簽</title>
