HTML文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素
<!-- 告诉浏览器是一个html文档 --><!DOCTYPE html><!-- 当前语言 --><html lang="en"><!-- 头元素: 它的内容不在页面中显示，这是给浏览器和搜索引擎使用 --><head><!-- 当前文档编码集 --><meta charset="UTF-8" /><!-- viewport：视口,当前文档在浏览器中可以被用户看到的部分--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 文档头部元素title --><title>HTML文档结构</title><!-- 所有元素都要大小写，元素都要有结束元素，个别元素除外，例如：<a>、<img> --></head><!-- 文档主体元素body --><body><!-- 页眉header --><header><!-- 导航nav --><nav><!-- 链接元素a:可用于不同页面的跳转、下载文件、打电话、发邮件、锚点等地方使用 --><a href="">网站首页</a><a href="">合作案例</a><a href="">新闻资讯</a><a href="">关于我们</a></nav></header><!-- 主体main --><main><!-- 图片引用元素img --><img src="" alt="轮播图" /><!-- 时间元素time --><time>时间</time><!-- 地址元素address --><address>地址</address><!-- 删除线元素del --><del>删除线</del><!-- 进度条元素peogress --><progress value="30" max="100"></progress><!-- 通用块元素div：容器、盒子 --><div><!-- P是段落元素，id是唯一的，能不用就不用，但在两种情况下非要有用：锚点、表单元素控件三大通用属性：p、id、class --><p style="color: blue;">PHP中文网</p><p id="name">PHP中文网</p><p class="user">PHP中文网</p></div><div><!-- 无序列表 列表可以嵌套--><ul><li>这是广告</li><li>这也是广告</li><li>这还是广告</li></ul><!-- 有序列表 列表可以嵌套--><ol><li>阿里巴巴</li><ol><li>阿里云</li><li>淘宝</li><li>天猫</li></ol><li>腾讯</li><li>百度</li></ol></div></main><!-- 页脚footer --><footer><!-- 导航nav --><nav><p><!-- 行内元素span，不能直接暴露，应该放在一个块元素中 --><span>关于我们：</span><a href="">baidu.com</a><a href="">taobao.com</a></p></nav></footer><!-- 自定义列表：通常用来写页脚 --><dl><dt>地址:</dt><dd>四川省成都市</dd><dt>邮箱:</dt><dd>445627221@qq.com</dd></dl></body></html>
运行效果图
