<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html标签</title>
</head>
<body>
<p>标题独占一行</p>
<hr>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是一个段落</p>
<br>
<u>我是一个下划线</u>
<s>我是一个删除线</s>
<b>我是加粗</b>
<i>我是斜体</i>
<del>我是一个删除线</del>
<strong>我是加粗</strong>
<ins>我是一个下划线</ins>
<em>我是斜体</em>
<!-- 图片标签，alt是图片加载失败所显示的文字 -->
<!-- width和height属性只设置一个就行，另外一个等比例缩放，防止图片变形 -->
<img src="./img/申鹤.png" alt="图片加载失败" width="1000px" height="800px" title="这是title文字，鼠标悬停的时候显示">
<br>
<!-- 插入音频，属性controls显示播放的控件；autoplay自动播放（部分浏览器不支持）；loop循环播放 -->
<audio src="./music/等到世界颠倒(治愈系) - 浪子然哥.mp3" controls>我是一个音频标签</audio>
<!-- 插入视频，属性同上。谷歌浏览器可以视频自动播放，但是要静音播放，加一个muted -->
<video src=""></video>
<!-- 链接标签。href跳转地址；target打开方式；_blank打开新窗口；_self默认值，在当前窗口打开 -->
<a href="https://www.baidu.com" target="_blank">点我去百度</a>
<!-- ul中只能放li，li中可以随意放 -->
<!-- 无序列表 -->
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 自定义列表，默认显示缩进效果 -->
<dl>
<dt>自定义列表</dt>
<dd>自定义列表</dd>
</dl>
<!-- 表格，caption大标题，自动居中；th头标签，自动居中加粗 -->
<table border="1px" width="500px" height="300px">
<caption>表格测试</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td >1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<!-- 合并单元格。
1.明确需要合并哪几个单元格
2.通过左上原则，确定保留谁删除谁
上下合并——>只保留最上的，删除其他
左右合并——>只保留最左的删除其他
3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan） -->
<table border="1px">
<tr>
<th>属性名</th>
<th>属性值</th>
<th>说明</th>
</tr>
<tr>
<td>rowspan</td>
<td>合并单元格个数</td>
<td>跨行合并，将多行的单元格垂直合并</td>
</tr>
<tr>
<td>colspan</td>
<td>合并单元格个数</td>
<td>跨列合并，将多行的单元格水平合并</td>
</tr>
</table>
<!-- 举例 -->
<!-- 跨行合并 -->
<table border="1px">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
<!-- 跨列合并 -->
<table border="1px">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- 表单，用来收集用户输入的内容 -->
<form action="">
<!-- 文本输入框 -->
<input type="text"name="username">
<!-- 密码框 -->
<input type="password" name="password">
<!-- 单选，只能选一个 -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>
<!-- 可以选两个 ，多选-->
<input type="radio" value="nan">男
<input type="radio"value="nv">女
<br>
<!-- 多选按钮 -->
<input type="checkbox" name="host" value="1">游泳
<input type="checkbox" name="host" value="2">游戏
<!-- 文件选择框 -->
<input type="file">
<!-- 隐藏域 -->
<input type="hidden">
<!-- 普通按钮 -->
<input type="button" value="我是">
<!-- 重置表单按钮，恢复默认设置 -->
<input type="reset" name="">
<!-- 提交按钮 -->
<input type="submit">
<!-- 提交按钮，button标签如果不写type属性，默认submit -->
<button>按钮</button>
<!-- 下拉选择框 -->
<select>
<option>河南</option>
<option>河北</option>
</select>
<!-- 文本区域-->
<textarea></textarea>
</form>
<!-- 合并，按着文字也可以进行选择 -->
<label for="man">
<input id="man" type="radio" name="sex">男
</label>
<label for="woman">
<input id="woman" type="radio" name="sex">女
</label>
<!-- 没有语义的布局标签（div、span） -->
<!-- div标签：一行只显示一个（独占一行） -->
<div>div标签1</div>
<div>div标签2</div>
<!-- span标签：一行可以显示多个 -->
<span>span标签1</span>
<span>span标签2</span>
<br>
<!-- 实体字符，空格 分号结尾 -->
什么是的撒哇多尬 速度快
</body>
</html>