![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
一个html文件分为两个部分，第一个部分就是<!DOCTYPE html>，第二个部分就是<html>...</html>
<!DOCTYPE html> 表示文档的类型为html
顾名思义，doc是文档，type是类型，合起来就是表示文档类型
<html>标签代表着根元素，整个网页的内容都是包含在它里面
<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><!-- 还包括引入css样式文件、js文件等内容-->
头部结构主要用于描述网站的基本特征，包括网页标题、字符编码、视口设置等内容，以及需要引入的css样式文件、js文件等声明。这些内容主要是用于浏览器和搜索引擎加载网页时进行解析，用户并不关注这些内容。
<meta>标签可以理解为元数据标签，即说明数据的数据。把网页的内容理解为数据，那么说明这些数据所具备的基本特征也是通过数据来表示的。这与近期十分火热的“元宇宙”概念颇为相似。
<body>这就是对应了网页所呈现的具体内容了，是通过浏览器渲染之后展现给用户看到的内容。
（1）div+class模式
<div class="header">header</div><div class="main">main</div><div class="footer">footer</div>
（2）语义化标签
<header>header</header><main>main</main><footer>footer</footer>
绝大多数程序员还是喜欢 div + class 模式
1.语义化标签主要用于SEO优化，目前至少90%以上的项目是基于移动端,不依赖或不在乎搜索引擎；
2.语义化标签太少了,不如语义更明确的class，让人阅读代码时更容易理解。
<a>(1)跳转至站外
<a href=https://www.php.cn/html/html-links.html">HTML链接的详细说明</a>
(2)在指定的窗口打开
<a href="https://www.xuexi.cn" target="study">学习强国</a><iframe frameborder="1" name="study" width="500" height="500"></iframe>
<a>标签的target属性大有用处，既可以指定跳转方式为”_blank”，“_self”等，也可以跳转到某一个指定name属性的iframe。
（3）站内跳转
<a href="#top"></a><div id="top">回到顶部</div><!--可以通过设置CSS样式让div保持在页面顶部-->
（4）图像标签
<a href=""><img src="dog.jpg" alt="dog" /></a>
(1)有序列表
<ol><li><a href="">有序列表1</a></li><li><a href="">有序列表2</a></li><li><a href="">有序列表3</a></li></ol>
有序列表较为少用，一般通过无序列表Ul结合css进行替代。
（2）无序列表
<ul><li><a href="">无序列表1</a></li><li><a href="">无序列表2</a></li><li><a href="">无序列表3</a></li></ul>
（3）自定义列表
<dl><dt>国籍</dt><dd>中国</dd><dt>性别</dt><dd>男</dd></dl>
表示表格结构的标签：<table>,<caption>,<thead>,<tbody>,<tfoot>
展示表格数据的标签：<tr>,<td>
<table border="1" cellspacing="0" cellpadding="5"><caption>PHP中文网第17期课程安排</caption><thead><tr align="center"><td>阶段序号</td><td width="150">阶段信息</td><td width="150">教学内容</td><td width="150">直播地址</td></tr></thead><tbody><tr><td>第一阶段</td><td>前端开发基础与案例教学</td><td>HTML5/CSS3/ES6/实战…</td><td>https://www.php.cn/course/1259.html</td></tr><tr><td>第二阶段</td><td>PHP编程与实例教学</td><td>PHP/MySQL/MVC/Composer/…</td><td>https://www.php.cn/course/1260.html</td></tr><tr><td>第三阶段</td><td>Vue3/Laravel/API商城/Uniapp/高并发项目优化</td><td>Vue3/Laravel/API商城/Uniapp/高并发项目优化</td><td>https://www.php.cn/course/1261.html</td></tr></tbody><tfoot><tr><td>上课时间</td><td colspan="3">晚20:00 - 22:00 (双休日/法定节假日除外)</td></tr></tfoot></table>
iframeiframe常用于管理后台
<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2><iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="taobao"></iframe>