一、常用標籤
HTML(Hypertext Markup Language)，超文本標記語言。
超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。
超級文本標記語言之所以稱爲超文本標記語言，是因爲文本中包含了所謂“超級鏈接”點。
常用標籤:
doctype：<!doctype html> 網頁文檔聲明
網頁註釋 註釋的意義
html：<html></html> 網頁根標籤
head：<head></head> 網頁屬性定義
body：<body></body> 網頁內容定義
header：<header></header> 網頁頭部內容定義
section：<section></section> 網頁模塊內容定義
footer：<footer></footer> 網頁頁腳內容定義
<h1>~<h6> 標題標籤
<p></p> 段落標籤
<div></div> 塊標籤
<video></video> 視頻標籤
<audio></audio> 音頻標籤
<hr/> 風騷的分隔線
<br/> 換行標籤
<img src=“”/> 圖片標籤
<b/i/em/u/del></..> 文本修飾標籤
<table></table> 表格標籤
<a></a> 超鏈接標籤
<form></form> 表單標籤，包含<input></input>、<textarea></textarea>、<select></select>
列表標籤 ul / ol / dl
表單元素標籤
二、項目案例
1.第一個html頁面
<!DOCTYPE html>
<html>
<head>
<!-- title爲網頁標題標籤，唯一可見的，meta設置頁面屬性，自結束標籤
--> <meta charset="utf-8">
<title>徐璐新聞</title>
</head>
<body>
<!--hn，n爲1-6爲內容標題標籤，會換行，爲塊標籤-->
<h1>花花</h1>
<h2>花花/h2>
<h3>花花</h3>
<h4>花花</h4>
<h5>花花</h5>
<h6>花花</h6>
<h7>花花</h7>
<!--p爲承載段落的標籤，會換行，爲塊標籤-->
<!--b爲加粗標籤-->
<!--u爲下劃線強調標籤-->
<!--i爲斜體標籤-->
<!--br/爲換行標籤，自結束，能換行爲塊標籤，不會換行爲行標籤-->
<!--del爲刪除標籤-->
<!--span標籤承載的是文字，不會換行，爲行標籤-->
<p><b>出道</b>以來，花花便彷彿乘着風在<u>娛樂圈</u>馳騁，從《***》》到《****》，她總能演到適合自己的角色。<br/>但成名的代價就是所有優缺點會被衆人放大審視，她很坦然：“我都以<i>‘打不死的小強’</i>精神調整情緒。
</p>
”這份樂觀是<del>不外露的</del>耀眼光芒，帶着她走向更寬廣的未來。
<!--img標籤也是自結束標籤，後面的爲屬性，src表示路徑,alt爲圖片找不到時的提醒文字，title爲圖片的名字，鼠標懸在圖片時可以看到-->
<p>
<img src="C:/Users/admin/Desktop/新建文件夾/1.png" alt="當圖片不顯示時提示的文字" title="這是一張圖片">
</p>
<p>
<!--video 視頻標籤，src爲路徑，controls爲添加播放控制，autoplay爲自動播放-->
<video src="" controls="" autoplay=""></video>
</p>
<p>
<!--video 音頻標籤，src爲路徑，controls爲添加播放控制，autoplay爲自動播放-->
<audio src="" controls="" autoplay=""> </audio>
</p>
<!--div是一個塊標籤,自己佔滿一行，具有盒子模型，涉及到佈局問題-->
<div>這是一個div</div>
</body>
</html>
2.a鏈接和錨點
<!DOCTYPE html>
<html>
<head>
<title>a鏈接和錨點的使用</title>
<style type="text/css">
div {
background: red;
height:1000px;
width: 500px;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- a標籤可以通過href鏈接到某個模塊，加#表示頁面不會跳轉，而是滾動到鏈接的模塊，div一般通過id來定義自己的模塊，便於被鏈接-->
<a href="#zb">好店直播</a>
<a href="#ts">品質特色</a>
<a href="#rm">實惠熱賣</a>
<a href="#xh">猜你喜歡</a>
<div id="zb">好店直播</div>
<a href="#zb">好店直播</a>
<a href="#ts">品質特色</a>
<a href="#rm">實惠熱賣</a>
<a href="#xh">猜你喜歡</a>
<div id="ts">品質特色</div>
<a href="#zb">好店直播</a>
<a href="#ts">品質特色</a>
<a href="#rm">實惠熱賣</a>
<a href="#xh">猜你喜歡</a>
<div id="rm">實惠熱賣</div>
<a href="#zb">好店直播</a>
<a href="#ts">品質特色</a>
<a href="#rm">實惠熱賣</a>
<a href="#xh">猜你喜歡</a>
<div id="xh">猜你喜歡</div>
</body>
</html>
3.form表單標籤
<!DOCTYPE html>
<html>
<head>
<title>表單標籤的使用</title>
</head>
<body>
<form action="#" method="get"><!-- form爲表單標籤，action屬性表示輸入的數據提交到的地址，若爲#表示頁面不會跳轉，method方法常用兩個值get和post，form標籤中比較重要的標籤有input、textarea和select，其中input類型不同又有很多種用法,form標籤中，name屬性必不可少 -->
<label for="username">賬號:</label>
<input type="text" name="username" placeholder="請輸入用戶名" /><!-- type爲text表示文本類型，placeholder屬性可以填寫提示文字 -->
<br>
<label for="password">密碼:</label>
<input type="password" name="password" placeholder="請輸入密碼"/><!-- type爲password類型時，輸入密碼後顯示黑色圓點，而不是文本 -->
<br>
<label for="">性別:</label>
<input type="radio" name="gender" value="男"/>男<!-- type爲radio時表示單選框，注意一定要規定name屬性，name相同的爲同一組，否則會出現多選 -->
<input type="radio" name="gender" value="女"/>女
<br>
<label for="tel">電話:</label>
<input type="text" name="tel"/>
<br>
<label for="email">郵箱:</label>
<input type="email" name="email" required/><!-- type爲email時表示輸入的必須爲郵箱類型，required表示若輸入不爲郵箱就會出現錯誤提示 -->
<br>
<label for="inters">興趣愛好:</label>
<input type="checkbox" name="inters" value="籃球"/>籃球
<input type="checkbox" name="inters" value="游泳"/>游泳
<input type="checkbox" name="inters" value="跑步"/>跑步
<input type="checkbox" name="inters" value="唱歌"/>唱歌
<input type="checkbox" name="inters" value="看書"/>看書
<br><!-- type爲checkbox類型時爲多選框，value的值爲真實的最終會被提交的數據，後面的表示向客戶展示的數據 -->
<label for="url">個人博客:</label>
<input type="url" name="url" required><!-- type爲url類型時表示網址，用法同email一樣 -->
<br>
<label for="addr">家庭地址:</label>
<select name="addr" id="addr"> <!-- select也是表單標籤的一種，表示下拉框，下拉內容通過option標籤定義 -->
<option value="-1">請選擇家庭所在城市:</option>
<option value="鄭州">鄭州</option>
<option value="平頂山">平頂山</option>
<option value="洛陽">洛陽</option>
<option value="新鄉">新鄉</option>
<option value="開封">開封</option>
<option value="周口">周口</option>
<option value="信陽">信陽</option>
<option value="漯河">漯河</option>
<option value="安陽">安陽</option>
<option value="鶴壁">鶴壁</option>
</select> <br>
<label for="intrs">個人描述:</label>
<textarea cols="30" rows="5" placeholder="個人描述"></textarea><!-- textarea表示文本域，也是表單標籤的一種，表示多行，可自定義文本域的大小 -->
<br>
<label for="image"></label>
<input type="file" name="image"/><!-- type爲file類型，表示可以上傳文件 -->
<br>
<label for="submit"></label>
<input type="submit" name="submit" value="註冊" /><!-- subimt表示提交 -->
<label for=""></label>
<input type="reset" name="reset" value="重置" / ><!-- reset表示重置 -->
</form>
<button>h5的按鈕</button><!-- 只是一個按鈕 -->
</body>
</html>