自己对html的记忆与理解都在以下截图和源码里 ，若有缺失与错误请联系我指正
源代码运行出来的截图我解释一下吧
ps板块就是截图里用横线隔开的
第一个板块使用了HTML的列表标签与超链接标签 将有序列表里面套入了无序列表和自定义列表 展现了列表中的li中可以套入其他标签
第二个板块使用了表格标签、图片标签、文本标签、span标签、超链接标签 说明了表格标签的单元格内可以使用其他标签和文本标签是block元素 span是inline元素
第三个板块使用了文本的修饰标签 段落<p></p>
加粗<strong></strong>换行<br>
倾斜<i></i>删除线<del></del>下划线<u></u>上标<sup></sup>下标<sub></sub>
第四个板块使用了表单标签和input标签 及其各种Type值的使用 ，这也是最重要的，主要用于提交信息
第五个板块是视频和音频播放的标签是h5出的比较新的标签
还有其他常用的本身没有什么实际作用的标签 ：
section表示区块 article表示文章 header表示页眉
footer表示页脚 nav表示导航 aside表示侧边栏
注意：这里我写的“表示”，我的理解就是span 和div标签换了个名字让人更容易读懂知道这是用来干什么的,其本身是没有任何其他的含义，最主要就是方便后续的维护。
<!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">
<!-- <style>
/* .table{
border-collapse:collapse ;
border:2px solid red;
}
td ,th{
width: 50px;
height: 50px;
border: 1px solid green;
text-align: center;
} */
img{
width: 50px;
height: 50px;
}
a{
margin: 10px;
}
td{
text-align: center;
}
</style> -->
<title>Document</title>
</head>
<body>
<ol>
<li>
<ul>
<li><a href="#form">超文本连接</a></li>
<li><img src="./address" alt="图片加载失败"></li>
<li>第三个无序列表的li</li>
</ul>
</li>
<li>第二个有序列表的li</li>
<li>
<dl>
<dt>自定义列表</dt>
<dd>第一个解释</dd>
<dd>第二个解释</dd>
</dl>
</li>
</ol>
<hr>
<table id="table" border="1">
<tr>
<th colspan="3"> </th>
<th>
<p>一段文本
<p>另外一段文本</p>
</p>
</th>
<th>
<p>一段文本<span>另外一段文本</span></p>
</th>
<th><a href="https://www.baidu.com">去百度</a></th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="2" colspan="2">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>电影</td>
<td>语文</td>
<td>体育</td>
</tr>
<tr>
<td>2</td>
<td><img src="./address" alt="图片加载失败" title="空图片"></td>
<td><input type="text" placeholder="单纯的文本框" maxlength="5"></td>
<td><input type="password" placeholder="密码框" value="ddiidjd"></td>
<td>语文</td>
<td>语文</td>
</tr>
</table>
<hr>
<div>
<h1>文本修饰标签</h1>
<p>这是一个段落我没有被强行换行显示了</p>
<p>这是一个段落<br>我被强行换行显示了</p>
我要开始其他操作了<strong>我被加粗了</strong><br>
还有其他操作的<em>我被倾斜了</em><br>
看看怎么删除<del>被删了</del><br>
下面画条杠<u>我下面有条杠</u><br>
想知道2的2次方怎么搞吗？2 <sup>2</sup><br>
我还能下去2<sub>2</sub>
</div>
<div>
<h2>下面是广告</h2>
版权 © ™®
</div>
<hr>
<h3>下面是最常用的获取信息的标签form</h3>
<form action="do" method="post" id="form">
<div><label>男<input type="radio" name="sex"></label>
<label>女<input type="radio" name="sex"></label>
</div>
<div>
<label>唱歌<input type="checkbox" name="hobby"></label>
<label>跳舞<input type="checkbox" name="hobby"></label>
<label><img src="./imges/del.png" alt="这是加载成功的图片" width="30px" height="30px"><input type="checkbox"
name="hobby"></label>
</div>
<input type="file"><span>上传文件</span>
<input type="image" src="./imges/del.png" width="40px" height="40px"><span>图片样式提交</span>
<select>
<option value="1">下拉框一</option>
<option value="2" selected>下拉框二</option>
<option value="3">下拉框三</option>
</select>
<input type="datetime-local" name="" id="">
<div>
<textarea name="text" id="text1" cols="30" rows="10">文本域</textarea>
</div>
</form>
<hr>
<audio src="#" controls loop="1" >这是个音频</audio>
<video src="#" controls loop="1" poster="./imges/del.png"></video>
</body>
</html>
第一次写，如有什么错误或指教请联系我。若觉得很菜的请不要看也不要联系我，我怕忍不住跟你亲切的聊天。感谢各位大佬的理解
