<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签01</title>
</head>
<body>
<!--
html文档中常用标签
1.标题于段落
2.文本修饰
3.列表
4.表格
5.表单
6.图片与媒体
7.布局标签
8.其它标签
-->
<!-- 是一个块级标签，所谓块级标签是指他默认独占一行，并且支持宽高，后面还会细说 -->
<!-- 1.标题和段落 -->
<h1>不靠谱的承诺</h1>
<h2>不靠谱的承诺</h2>
<p>说好一起到白头，你却偷偷局了油</p>
<P>说好一起当学渣，你却偷偷当学霸</P>
<!-- 水平分割线 -->
<hr />
<!-- 2.文本修饰 -->
<div>
<!-- 字体加粗 -->
<p>说好一起到<strong>白头</strong>，你却偷偷局了油</p>
<!-- em字体倾斜 -->
<P>说好一起当<em>学渣</em>，你却偷偷当学霸</P>
</div>
<!-- 水平分割线 -->
<hr>
<!-- 3.列表 -->
<div>
<h3>购物清单</h3>
<!-- 无需列表 -->
<ul>
<li>1.暖手宝一个，30元，被窝太冷</li>
<li>2.笔记本电脑一台，5000，学php编程</li>
<li>3.充气娃娃一个(勃勃款)，2000，孤枕难眠</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>暖手宝一个，30元，被窝太冷</li>
<li>笔记本电脑一台，5000，学php编程</li>
<li>充气娃娃一个(勃勃款)，2000，孤枕难眠</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>邓鹏生</dt>
<dd>广西桂林全走</dd>
<dt>邓鹏生</dt>
<dd>广西桂林全走</dd>
<dt>邓鹏生</dt>
<dd>广西桂林全走</dd>
</dl>
</div>
<!-- 4.表格 -->
<!--
表格是最重要的格式化数据的工具
其实上面的列表内容非常适合用表格来展示
通过分析，上面列表加上表头需要一个四行四列的表格进行展示
完整表格，涉及标签:table,caption,thead,tbody,tfoot,th,th,td
表格至少涉及三个标签:table(表格),tr,th/td(单元格)
-->
<table border="1" cellspacing='0'>
<caption style="font-weight:bolder;">购物清单</caption>
<thead style="background-color:lightblue;">
<tr>
<th>id</th>
<th>品名</th>
<th>价格</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td align="center">暖手宝</td>
<td align="center">30</td>
<td align="center">被窝太冷</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">笔记本电脑</td>
<td align="center">5000</td>
<td align="center">学php编程</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">充气娃娃</td>
<td align="center">2000</td>
<td align="center">孤枕难眠</td>
</tr>
</tbody>
</table>
<!-- 5.表单 -->
<!-- (1)表单是最重要的交互工具，用户可以通过表单，将数据提交到后端服务器上进行处理
(2)表单涉及:form,label,input,select,textarea,button标签
(3)表单form标签中的元素，又陈伟表单控件，每个控件除了部分公共属性外，还有一些特殊属性
-->
<form action="check.php" method="GET">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="清输入用户名">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="清输入密码">
</div>
<div>
<label>性别:</label>
男<input type="radio" name="sex" value="1" /> 女<input type="radio" name="sex" value="-1" />
</div>
<div>
<label>爱好:</label>
篮球<input type="checkbox" name="hibby[]" value="1"/> 足球<input type="checkbox" name="hibby[]" value="2" />
看书<input type="checkbox" name="hibby[]" value="3" />
</div>
<div>
<label>城市：</label>
<select>
<option value="1">广东</option>
<option value="2">广西</option>
<option value="3">湖南</option>
<option value="4">湖北</option>
</select>
</div>
</form>
<!-- 图片 -->
<img src="static/images/001.jpg" alt="一张图片" width="200" />
<!-- 视频 -->
<video src="static/video/西瓜JUN - 长生诀.mkv" controls autoplay></video>
</body>
</html>
