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>
运行效果图