認識html標簽
1.!DOCTYPE 文檔結構類型
2.<html>開始標記
</html>閉合標記
3.charset 字符編碼集
常用字符集：UTF-8、GB2312、GBK等
4.<meta>單標記
5.<h1>h1到h6的標題
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
6.<p>段落
7.<ul>無序列表
- 不要獨自駕車去山區
- 不要跟別人的男朋友駕車去山區
- 不要跟別人的老婆駕車去山區
- 不要跟帶別人的狗駕車去山區
<ul>
<li>不要獨自駕車去山區</li>
<li>不要跟別人的男朋友駕車去山區</li>
<li>不要跟別人的老婆駕車去山區</li>
<li>不要跟帶別人的狗駕車去山區</li>
</ul>
8.<ol>有序列表
- 不要獨自駕車去山區
- 不要跟別人的男朋友駕車去山區
- 不要跟別人的老婆駕車去山區
- 不要跟帶別人的狗駕車去山區
<ol> <li>不要獨自駕車去山區</li> <li>不要跟別人的男朋友駕車去山區</li> <li>不要跟別人的老婆駕車去山區</li> <li>不要跟帶別人的狗駕車去山區</li> </ol>
9.<dl>定義列表
- 名字
- 是一個人的標識
<dl>
<dt>名字</dt>
<dd>是一個人的標識</dd>
</dl>
10.<pre>預格式
11.<blockquote>大引用
這是一個大引用
<blockquote>這是一個大引用</blockquote>
12.<q>小引用
這是一個小引用
<q>這是一個小引用</q>
13.<span>跨越多個字符
這是一個紅色的詞
<p>這是一個<span style="color:blue;">紅色</span>的詞</p>
14.<a>超鏈接
<a href="鏈接" target="_blank">
15.<img>圖片
<img src="" alt="提示" />
16.<div>區塊
17.<strong><b>加粗
加粗
<strong>加粗</strong>
18.<em><i>斜體
斜體
<em>斜體</em>
19.<sup>上標
22
2<sup>2</sup>
20.<sub>下標
log2
log<sub>2</sub>
21.<abbr>縮寫
DOTA
<abbr title="Defend Of Ancient">DOTA</abbr>
22.<figure>定義說明
圖片
<figure>
<img src="XXX" alt="圖片">
<figcaption>圖片</figcaption>
</figure>
23.<audio>音頻
<audio src="XXX" controls autoplay></audio>
controls使可控 autoplay自動播放
24.<video>視頻 支持格式：MP4 webm ogg
<video src="" controls autoplay loop></video>
loop循環播放
25.<table>表格
| 1-1 | 1-2 | |
| 2-1 | 2-2 | 2-3 |
| 3-2 | 3-3 | |
<table border="1">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
tr表示表格行，td表示表格數據，table-row，border設置邊框線粗細，
colspan合並行，rowspan合並列
th表頭，加粗 caption大表頭
26.<style>樣式控制 置於head標簽中
table{
border-collapse: collapse;
}
為表格添加上邊框
27.<form>表單
<form action="XXX" method="get">
<input type="text" placeholder="請輸入賬號" />
<input type="password" maxlength="6" />
<input type="button" value="點擊我" />
<input type="reset" value="清空" />
<input type="submit" value="提交" />
<button>新的提交按鈕</button>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
班長<input type="checkbox" />
學委<input type="checkbox" checked />
紀委<input type="checkbox" />
<select name="" id="">
<option value="">北京</option>
<option value="">南京</option>
<option value="">東京</option>
<option value="">西京</option>
</select>
<textarea name="" id=""></textarea>
</form>
action提交外部鏈接 method提交方式：get post
input類型：文本框(text)，密碼框(password)；點擊按鈕(button)，重置按鈕(reset)，提交按鈕(submit)；單選(radio)；多選(checkbox)
placeholder：預定義文本框內容；maxlength:最大輸入限制；value：文字內容；name：命名，用於表單提交數據；for：ID選擇；checked：默認選擇
<lable>可以增強用戶體驗
<select>創建下拉欄，使用<option>編輯選項
<textarea>一個可以多行輸入的文本框
28.<mark>高亮
<p>我是<mark>中國人</mark></p>
29.<nav>導航欄
科技 體育 軍事
<nav>
<a href="XX">科技</a>
<a href="XX">體育</a>
<a href="XX">軍事</a>
</nav>
30.<header><footer><article><section><aside>等h5新語義標簽
header頁眉 footer頁腳 article內容 section區塊 aside側邊欄
31.行內元素，塊級元素
行內：
塊級：
inline-block行內塊
認識html標簽