什么是 HTML？
HTML 是用來描述網(wǎng)頁的一種語言仅叫。
- HTML 指的是超文本標(biāo)記語言（Hyper Text Markup Language）
- HTML 不是一種編程語言，而是一種標(biāo)記語言（Markup Language）
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽（Markup Tag）
- HMTL使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)茄菊。
- HMTL 標(biāo)簽由尖括號包圍的關(guān)鍵詞唱捣，比如<html>
- HMTL 標(biāo)簽通常是成對出現(xiàn)的，比如 <p></p> 概说，為雙標(biāo)簽碧注。當(dāng)然也有單標(biāo)簽，如<br /> <hr />糖赔。
- 雙標(biāo)簽中的第一次標(biāo)簽是開始標(biāo)簽萍丐，第二個標(biāo)簽是結(jié)束標(biāo)簽。
- 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽放典。
HTML 文檔 = 網(wǎng)頁
- HTML 文檔描述網(wǎng)頁
- HTML 文檔包含 HTML 標(biāo)簽和純文本
- HTML 文檔頁被稱為網(wǎng)頁
Web 瀏覽器的作用是讀取 HTML 文檔逝变，并以網(wǎng)頁的形式顯示出它們基茵。瀏覽器不會顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容壳影。
<!DOCTYPE html>
<html lang="en">
<head>
<!---- base 是單標(biāo)簽：讓頁面中所有的鏈接打開狀態(tài)拱层，target="_blank"代表鏈接打開新網(wǎng)頁-->
<!---- target="_self"代表當(dāng)前網(wǎng)頁打開鏈接-->
<base target="_blank" />
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 是指文檔使用HTML的版本
- <html> 與 </html> 之間的文本描述網(wǎng)頁
- <head> 與 </head> 之間是網(wǎng)頁的頭部，可以引入css及js
- <body> 與</body>> 之間的文本是可見頁面內(nèi)容
HTML常用標(biāo)簽
<h1>定義標(biāo)題標(biāo)簽<h1> <!--h1 到 h6-->
<p>定義段落標(biāo)簽</p>
<b>定義加粗標(biāo)簽</b>
<strong>推薦加粗標(biāo)簽</strong>
<i>定義傾斜標(biāo)簽</i>
<em>推薦傾斜標(biāo)簽</em>
<s>定義刪除線標(biāo)簽</s>
<del>推薦刪除線標(biāo)簽</del>
<u>定義下劃線標(biāo)簽</u>
<ins>推薦下劃線標(biāo)簽</ins>
<a href="#">定義錨標(biāo)簽态贤，鏈接標(biāo)簽</a>
<!--a 標(biāo)簽可以網(wǎng)頁跳轉(zhuǎn)舱呻， target="_blank" 指打開新的網(wǎng)頁跳轉(zhuǎn)鏈接
target="_self" 指當(dāng)前頁面打開新的鏈接 -->
<a target="_blank">百度</a>
<!--a 標(biāo)簽頁可以實(shí)現(xiàn)錨點(diǎn)定位:錨點(diǎn)定位適合于較長的頁面触幼，我們可以點(diǎn)擊關(guān)鍵詞奸晴，從而快速到達(dá)頁面的某一個位置-->
<a href="#introduce">點(diǎn)擊跳到個人介紹</a>
<h3 id="introduce">個人介紹</h3>
<!-- 圖片標(biāo)簽:src 屬性是必須的 ,img是單標(biāo)簽滔金，
圖片添加了alt屬性, alt 屬性 當(dāng)圖片顯示不出的時候會顯示文字夭苗，
title 當(dāng)鼠標(biāo)懸停的時候出現(xiàn)的文字, border 圖片邊框 -->
<img src="...XX.png" alt="我是一只羊" title="我很酷" border="10">
<!--- 代表一個空格--->
 
<!---hr是分割線標(biāo)簽--->
<hr />
<!---br是換行標(biāo)簽--->
<br />
- 列表標(biāo)簽: 有序列表缰雇、無序列表衡查、自定義列表
<!-- 無序列表个盆，規(guī)范： ul 標(biāo)簽里面只放li標(biāo)簽吧凉， li標(biāo)簽內(nèi) 無限制-->
<ul>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
</ul>
<!-- 有序列表假抄， ol 帶序列號 -->
<ol>
<li>中國</li>
<li>美國</li>
<li>俄羅斯</li>
</ol>
<!-- 自定義列表 -->
<dl>
<dt>定義標(biāo)題</dt>
<dd>定義描述怎栽、解釋</dd>
</dl>
- 表格標(biāo)簽
<!--表格標(biāo)簽是用來處理數(shù)據(jù)的，cellspacing 設(shè)置單元格與單元格之間的空白間距宿饱，默認(rèn)2像素熏瞄，
cellpadding 單個單元格內(nèi)邊距 默認(rèn)1像素，
align 設(shè)置表格在網(wǎng)頁中的對齊方式-->
<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
<caption>火影忍者演員表</caption> <!--表格的標(biāo)題 __-->
<thead> <!--thead標(biāo)簽只里面是表頭結(jié)構(gòu)--->
<tr> <!--tr行標(biāo)簽-th表頭標(biāo)簽谬以，td單元格標(biāo)簽, tr 只放td標(biāo)簽强饮，th 表頭標(biāo)簽-->
<th>姓名</th>
<th>性別</th>
<th>年sds齡</th>
</tr>
</thead>
<tbody> <!--tbody標(biāo)簽只里面是表主體結(jié)構(gòu)--->
<tr> <!--行標(biāo)簽-, tr 只放td標(biāo)簽，td可以放任何元素-->
<td>姓名</td> <!--單元格標(biāo)簽--->
<td>性別</td>
<td rowspan="2">sdkd</td> <!--rowspan跨行合并單元格--->
</tr>
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
<tr>
<td>姓名</td>
<td colspan="2">合并之后的單元格</td> <!--colspan跨列合并單元格--->
</tr>
</tbody>
</table>
- 表單：目的是收集用戶信息 包括表單控件为黎，表單信息邮丰，表單域
<!-- input 表單控件。1. 是個單標(biāo)簽铭乾。2.可以通過type 屬性控制形狀剪廉。 -->
<!--type是text為文本框，value 是控件默認(rèn)值, name 控件名稱, maxlength最大長度-->
<p> 用戶名：<input type="text" name="username" value="請輸入名字" maxlength="5" /> </p>
<!--type是password為密碼框-->
<p> 密 碼：<input type="password" name="" /> </p>
<!--type是radio為單選框炕檩，單選框如果是一組斗蒋，我們通過相同的name值來是實(shí)現(xiàn)單選,checked代表默認(rèn)選中-->
<p> 性 別：<input type="radio" name="sex" checked="checked" value="female" />女 <input type="radio" name="sex1" value="male" /> 未知</p>
<!--type是checkbox為多選框，單選框如果是一組笛质，我們通過相同的name值來是實(shí)現(xiàn)單選-->
愛 好: <input type="checkbox" name="intrest" checked="checked" /> 足球 <input type="checkbox" name="intrest"> 籃球 <input type="checkbox" name="intrest"> 羽毛球
普通按鈕: <input type="button" name="" value="搜索"> 普通按鈕
<!--提交按鈕吹泡，默認(rèn)是提交表單--->
<input type="submit" name="" value="提交表單">
<!-- 重置按鈕，默認(rèn)是重置表單--->
<input type="reset" name="" value="重置表單">
<!-- 圖片按鈕--->
<input type="image" name="" value="" src="images/im.jpg">
<!-- 文件按鈕：打開本地文件--->
上傳頭像:<input type="file" name="">
<!-- label標(biāo)簽：用戶綁定一個表單元素经瓷，當(dāng)點(diǎn)擊lable標(biāo)簽時爆哑，被綁定的表單元素就會獲得輸入焦點(diǎn) -->
<label>輸入賬號: <input type="text" name=""></label>
<!-- 如果lable 里面有多個表單控件，想定位到某個 可以通過for id來完成 -->
<label for="two">輸入賬號: <input type="text" name=""> <input type="text" name="" id="two"></label>
<h4>文本域</h4>
<textarea>請輸入留言</textarea>
<h4>下拉框</h4>
<select>
<option>點(diǎn)擊選擇您的城市</option>
<option>北京</option>
<option selected="selected">上海</option>
</select>
<!-- 三個域名: -->
<ol>
<li>文本域: textarea</li>
<li>文件域: input type="file"</li>
<li>表單域: form 收集表單控件信息并且提交的</li>
</ol>
<h4>表單域</h4>
<!--action提交表單信息的接口, method 請求方式-->
<form action="demo.pht" method="get">
<p>用戶名：<input type="text" name="" placeholder="hg"></p>
<p>密 碼：<input type="password" name="username"></p>
<input type="submit" name=""> <input type="reset" name="passowrd">
</form>
HTML5新增標(biāo)簽
<header>語義：定義頁面的頭部 頁眉</header>
<nav>語義：定義導(dǎo)航欄</nav>
<aside>語義：定義側(cè)邊欄</aside>
<article>語義：定義文章顯示</article>
<section>語義：定義區(qū)域</section>
<footer>語義：定義頁面的底部 頁腳</footer>
<!-- datalist 和 input 搭配使用舆吮，關(guān)鍵字搜索 -->
<input type="text" name="" value="輸入明星" list="star" />
<datalist id="star">
<option>東礦機(jī)</option>
<option>速度英</option>
<option>說的</option>
<option>非試點(diǎn)</option>
</datalist>
<!-- fieldset元素 將表單內(nèi)相關(guān)元素分組 打包揭朝，legend配合使用 -->
<fieldset>
<legend>用戶名登錄</legend> <!--標(biāo)題-->
用戶名: <input type="text" name="">
<br />
密 碼: <input type="password" name="">
</fieldset>
<fieldset>
<form>
<legend>HTML5新增input type 類型</legend>
<p>郵箱<input type="email" name=""></p>
<p>電話<input type="tel" name=""></p>
<p>只能是數(shù)字<input type="number" name=""></p>
<p>網(wǎng)址<input type="url" name=""></p>
<p>搜索框<input type="search" name=""></p>
<p>區(qū)域<input type="range" name=""></p>
<p>時間<input type="time" name=""></p>
<p>年月日<input type="date" name=""></p>
<p>年月<input type="month" name=""></p>
<p>星期<input type="week" name=""></p>
<p>顏色<input type="color" name=""></p>
<input type="submit">
</form>
</fieldset>
<form>
<!----autofocus 當(dāng)頁面加載時 input自動獲取輸入焦點(diǎn)---->
<p>用戶名:<input type="text" name="" placeholder="請輸入用戶名" autofocus="autofocus"></p>
<!----mutiple 可以上傳文件多選文件---->
<p>多文件上傳:<input type="file" name="" multiple="multiple"></p>
<h4>自動記錄完成</h4>
1.autocomplete 首先需要提交按鈕
2.autocomplete 需要name屬性值
3.autocomplete on代表打開記錄 队贱，off 代表關(guān)閉記錄
<form action="">
<p>姓名：<input type="text" name="username" autocomplete="off"></p>
<!----required必選項(xiàng) ---->
<p>密碼：<input type="password" name="" required="required"></p>
<p>提交：<input type="submit" name=""></p>
</form>
</form>
<!----embed 插入網(wǎng)絡(luò)視頻 ---->
<embed src='http://player.youku.com/player.php/sid/XNDEyNDExMDIyNA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<!----autoplay 打開網(wǎng)頁自動播放， loop = "-1" 為無線循環(huán), controls 是否顯示默認(rèn)播放控件 ---->
<audio src="" autoplay="autoplay" loop="-1" controls></audio>
<!----為了瀏覽器兼容潭袱，我們需要做三種聲音文件 ogg mp3 wav ---->
<audio controls autoplay>
<source src="...xx.mp3" />
<source src="...xx.ogg" />
<source src="...xx.wav" />
</audio>
<video src="..XX.mp4"></video>
<video controls autoplay>
<source src="...xx.mp4" />
<source src="...xx.ogg" />
<source src="...xx.webM" />
</video>
