基本构成
<!--文档类型--><!DOCTYPE html><!--根元素 页面语言--><html lang="zh-CN"><head><meta charset="UTF-8" /><!-- 为ie提供兼容模式，可写可不写 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- 设置视口：可视窗口 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 经典模式 --><div class="header"></div><div class="main"></div><div class="footer"></div><!-- class权重小于id，有利于样式复用 --><!-- 语义化布局标签 --><header></header><main></main><footer></footer><!-- 绝大多数还是用div+class模式 --><!-- 个人习惯，标签可使用太少，不如div+class更丰富 --></body></html>
常用标签
a标签
1.跳转
<a href="https://www.php.cn" target=_blank>PHP中文网</a>
target属性值：
| 属性 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
2.站内跳转 锚点（指定id，href值为对应id）
<a href="#hello">点我快速直达</a>
<h2 id="hello" style="margin-top: 1000px">我是h2</h2>
<a href="#">回到顶部</a>
3.指定窗口打开 嵌入iframe指定name a标签添加target指定
<a href="https://tmall.com" target="tmall">天猫</a>
<iframe frameborder="1" name="tmall"></iframe>
img标签
<img src="链接" alt="文字描述以及图片失效时显示的文字" />
img标签无闭合
列表与导航
1.有序列表（使用较少）标签为<ol>
<h3>奥运奖牌榜</h3>
<ol>
<li>美国：113</li>
<li>中国：88</li>
<li>日本：58</li>
</ol>
输出效果
2.无序列表 标签为<ul> 可借助css实现更多样式
<h3>无序奖牌榜</h3>
<ul>
<li>美国：113</li>
<li>中国：88</li>
<li>日本：58</li>
</ul>
输出效果
3.自定义列表(一般页尾等描述部分使用比较多)
<dl style="display: grid; grid-template-columns: 3em 16em">
<dt>标题：</dt>
<dd>这里是内容</dd>
<dt>标题：</dt>
<dd>这里是内容2</dd>
</dl>
4.无序+css实现导航
<ul class="menu" style="display: flex; place-content: space-around"><li class="item"><a href="" class="">首页</a></li><li class="item"><a href="" class="">教学视频</a></li><li class="item"><a href="" class="">社区问答</a></li><li class="item"><a href="" class="">资源下载</a></li><li class="item"><a href="" class="">关于我们</a></li></ul>
效果和下面语义化类似
<nav class="menu" style="display: flex; place-content: space-around"><a href="" class="">首页</a><a href="" class="">教学视频</a><a href="" class="">社区问答</a><a href="" class="">资源下载</a><a href="" class="">关于我们</a></nav>
表格相关
1.构成
table+caption(表格标题)+thead(表头)+tbody(表格主题)+tr(表行)+td(单元格)+tfoot(表尾)
2.注意点
tbody为主体，一个表中可以存在多个
td需要在tr中，所有数据都是写在td内
单元格的合并，一定要写到起始单元格
3.案例
<!DOCTYPE html><html lang="zh-CN"><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>* {text-align: center;}table {border: 1px solid rgba(41, 39, 39, 0.329);width: 700px;margin: 0 auto;}td {border: 1px solid rgba(41, 39, 39, 0.329);height: 20px;}</style><title>Document</title></head><body><h1>个人简历表</h1><table><tbody><tr><td width="80">姓名</td><td width="100"></td><td width="80">性别</td><td width="100"></td><td width="80">出身年月</td><td width="100"></td><td rowspan="3">照片</td></tr><tr><td>身份证号码</td><td></td><td>民族</td><td></td><td>政治面貌</td><td></td><!-- <td></td> --></tr><tr><td>婚姻状况</td><td></td><td>健康状况</td><td></td><td>身高</td><td></td><!-- <td></td> --></tr></tbody></table><table><tbody><tr><td width="80">现户口所在地</td><td></td><td width="80">所学专业</td><td></td><td width="80">学历</td><td></td></tr><tr><td width="80">最后毕业学校</td><td></td><td width="80">毕业时间</td><td></td><td width="80">技术职称</td><td></td></tr><tr><td width="80">现工作单位</td><td></td><td width="80">参加工作时间</td><td></td><td width="80">现从事专业</td><td></td></tr></tbody></table><table><tbody><tr><td width="100" rowspan="6">主要简历</td><td>起止年月</td><td>在何单位（学校）</td><td>任何职务</td></tr><tr><!-- <td></td> --><td></td><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td></tr><tr><!-- <td></td> --><td></td><td></td><td></td></tr></tbody></table></body></html>
输出效果