![]()
html文档结构，功能和作业
<!--文档结构-->
<!DOCTYPE html>
<!--根元素：浏览器渲染html的起点，入口> <html lang="zh-CN"> <!--头元素：浏览器，搜索引擎SEO-->
<head></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>文档结构</title>
<!--页面主体-->
<body><h1>老师辛苦了!</h1></body>
![]()
演示布局元素,重点是 tag+class
<div class="header">页眉</div>
<div class="main">主体</div>
<div class="footer">页脚</div>
![]()
图文的语义化解决方案
<figure>
<!--图片-->
<img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png"alt=:""/>
<!--文字-->
<figcaption>第二十二期-前端开发</figcaption>
</figure>