html5標準網頁聲明
<!DOCTYPE html>
必要結構
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
渲染效果：
body部分：
<h1>標題標籤</h1>
渲染效果
標題標籤
<p>段落標籤</p>
渲染效果：
段落標籤
<strong>加粗</strong>
渲染效果
加粗
<em>斜體</em>
渲染效果
斜體
<p>
添加在結尾，換行標籤，單閉合<br/>
表示一個空格<br>
</p>
渲染效果：
添加在結尾，換行標籤，單閉合
表示一個空格
<hr>水平分割線
<h2>無序列表</h2>
<!--unordered list -->
<ul>
<li>當代女大學生人美心善！</li>
<li>當代女大學生雙商爆表！</li>
</ul>
渲染效果:
無序列表
- 當代女大學生人美心善！
- 當代女大學生雙商爆表！
<h2>有序列表之web前端課程排行</h2>
<!--ordered list -->
<ol>
<li>vue框架學習</li>
<li>Javascript高級編程</li>
<li>react全家桶</li>
</ol>
<hr>
渲染效果：
有序列表之web前端課程排行
- vue框架學習
- Javascript高級編程
- react全家桶
<h2>定義列表</h2>
<!--definition list-->
<dl>
<dt>
幫助中心
</dt><!--definition title-->
<dd>購物指南</dd><!--definition description-->
<dd>訂單操作</dd>
<dd>賬戶管理</dd>
</dl>
<hr>
渲染效果：
<h2>製作表格</h2>
<table border="1" cellspacing="0">
<caption>商品清單</caption>
<tr>
<th>產品名稱</th>
<th>品牌</th>
<th>數量</th>
<th>入庫時間</th>
</tr>
<td>電視機</td>
<td>小米</td>
<td>200</td>
<td>2018</td>
<tr>
<td>電冰箱</td>
<td>海爾</td>
<td>200</td>
<td>2019</td>
</tr>
<tr>
<td>電風扇</td>
<td>小米</td>
<td>2000</td>
<td>2015-09</td>
</tr>
<tr>
<td>電視機</td>
<td>奇異果</td>
<td>200</td>
<td>2018</td>
</tr>
</table>
<hr>
渲染效果：
製作表格
| 產品名稱 | 品牌 | 數量 | 入庫時間 |
|---|---|---|---|
| 電視機 | 小米 | 200 | 2018 |
| 電冰箱 | 海爾 | 200 | 2019 |
| 電風扇 | 小米 | 2000 | 2015-09 |
| 電視機 | 奇異果 | 200 | 2018 |
<h2>表格橫向使用和縱向合併</h2>
<table border="1" cellspacing="0">
<caption>商品清單</caption>
<tr>
<th>產品名稱</th>
<th>品牌</th>
<!--橫向合併,合併的列數-->
<th colspan="2">數量和入庫時間</th>
</tr>
<td>電視機</td>
<td rowspan="3">小米</td>
<!--縱向合併，合併的行數-->
<td>200</td>
<td>2018</td>
<tr>
<td>電冰箱</td>
<td>200</td>
<td>2019</td>
</tr>
<tr>
<td>電風扇</td>
<td>2000</td>
<td>2015-09</td>
</tr>
<tr>
<td>電視機</td>
<td>奇異果</td>
<td>200</td>
<td>2018</td>
</tr>
</table>
<hr>
渲染效果：
表格橫向使用和縱向合併
| 產品名稱 | 品牌 | 數量和入庫時間 | |
|---|---|---|---|
| 電視機 | 小米 | 200 | 2018 |
| 電冰箱 | 200 | 2019 | |
| 電風扇 | 2000 | 2015-09 | |
| 電視機 | 奇異果 | 200 | 2018 |
<h2>a標籤</h2>
<a href="http://www.baidu.com" title="點擊一下，瞭解更多">百度一下</a><br>
<a href="http://www.baidu.com" target="_blank">用新的標籤頁打開百
渲染效果：
a標籤
百度一下用新的標籤頁打開百度
<h2>img標籤</h2>
<img src="https://t8.baidu.com/it/u=1484500186
,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?
sec=1594699637&t=ae0a8e42ac2
1d1a2e8940c7932176230" width="350" height="200"
alt="母子" title="可可愛愛">
<hr>
渲染效果：（圖片加載不出來，主要看alt和tittle屬性的效果）
img標籤
<!--表單控件-->
<h2>form標籤</h2>
<form action="http://www.baidu.com" method="post">
<p>
<input type="text" placeholder="請輸入用戶名">
</p>
<p>
<input type="password" placeholder="請輸入密碼">
</p>
<p>
<input type="submit" value="立即註冊">
</p>
</form>
渲染效果：
<!--表單控件-->
<h2>form標籤</h2>
<form action="http://www.baidu.com" method="post">
<em>單選框的實現</em><br>
male:<input type="radio" name="sex" >
female:<input type="radio" name="sex" checked="checked">
<!--給類型加同樣的屬性值，就能達到互斥效果 checked是選中的意思-->
</p>
渲染效果：
<form action="http://www.baidu.com" method="post">
<em>複選框</em>
<br>
<h5><strong>你喜歡的課程：</strong></h5>
web前端<input type="checkbox">
django<input type="checkbox">
algorithm<input type="checkbox">
</p>
<hr>
</form>
渲染效果：
form action="http://www.baidu.com" method="post">
<p>
<strong>下拉列表實現單選</strong>
<br>
<select name="class">
<option>html5</option>
<option>css</option>
<option selected="selected">javascript</option>
<option>vue</option>
</select>
</p>
</form>
渲染效果
form action="http://www.baidu.com" method="post">
<p>
<strong>下拉框實現多選</strong>
<br>
<select multiple="multiple" name="核心價值觀">
<option>愛國</option>
<option>敬業</option>
<option 誠信="selected">javascript</option>
<option>友善</option>
</select>
</p>
</form>
渲染效果：
form action="http://www.baidu.com" method="post">
<strong>文本預輸入框，多行輸入,內容重置</strong>
<br>
<h4>個人簡介</h4>
<p>
<textarea cols="50" rows="10"></textarea>
<input type="submit" value="保存">
<input type="reset" value="重置">
</p>
</form>
渲染效果
form action="http://www.baidu.com" method="post">
<h4>lable標籤</h4>
<label for="birthday">你的生日:</label>
<input type="text" id="birthday">
</form>
渲染效果：
<h2>div標籤類似於一個容器，可以對各種內容進行包裹</h2>
<div>
<p>div</p>
</div>
渲染效果：
div標籤類似於一個容器，可以對各種內容進行包裹
div