本文详细介绍了Web标准的三个组成部分：HTML负责页面结构，CSS处理样式，JavaScript处理交互。重点讲解了HTML的基本结构和常用标签，包括标题、换行、水平线、文本格式化、图片、音频和视频的插入，以及链接的使用。同时，讨论了路径的相对和绝对表示，以及在实际开发中的应用。
Web标准的构成：
Web标准中分成三个构成：
- 结构：HTML, 页面元素和内容
- 表现：CSS, 网页元素的外观和位置等页面样式（如颜色、大小等）
- 行为： JavaScript, 网页模型的定义与交互
Web标准要求页面实现：结构、表现、行为三层分离
- HTML身体 CSS样式 Js交互的动态效果
HTML页面结构：
页面中的固定结构是要通过特点的HTML标签进行描述的。
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>HTML骨架结构的标签：
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
一般情况下，使用的开发工具都是VS Code，当然也可以用别的，Dreamweaver、Webstorm、Sublime、Hbuilder等。
语法规范
1.HTML注释
方便阅读代码者观看，快捷键 ctrl+/
2.HTML标签的结构
- 标签由< > /英文单词或字母组成，<>里面的东西成为标签名。
- 常见的标签由两部分组成，就是双标签，前部分开始标签，后部分结束标签，两部分之间是内容。
- 少数部分由一部分组成，称之为：单标签，自成一体，无法包裹内容。
<br />，我们称为单标签。注意：/之前有一个空格。原则上比群殴爱你都应有结束符即 / 。 - 注意：实际开发中不建议给单标签加斜线，任何标签都建议不要大写。
3.标签关系
包含关系（父子关系）
<head>
<tilte></tilte>
</head>并列关系（兄弟关系）
<head></head>
<body></body>HTML标签学习
1.标题标签
为使网页更语义化，会在网页中用到标题标签。
代码：h系列标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
1~6级标题，重要程度依次递减
- 文字都会加粗
- 文字都会变大，并且从h1-h6文字逐渐减小
- 独占一行
2.换行标签
让文字强制换行显示——<br>
特点：单标签， 让文字强制换行
3.水平线标签
分割不同主题内容的水平线——<hr>，主题的分割转换
特点：单标签 ，在页面中显示一条水平线
4.文本格式化标签
需要让文字加粗、下划线、倾斜、删除线等效果,代码如下：
| 标签 | 说明 |
| b（strong） | 加粗 |
| u（ins） | 下划线 |
| i（em） | 倾斜 |
| s(del) | 删除线 |
语义：突出重要性的强调语境
5.媒体标签
- 图片标签
在网页中显示图片，代码：<img src=" " alt=" ">。
特点：单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置。
属性注意：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
alt是替换文本，当图片加载失败时，才显示alt的文本。
title是提示文本，当鼠标悬停时，才显示的文本。title属性不仅可以用于图片标签，还可以用于其他标签。
width:宽度；height:高度（数字），如果只设置width和height中的一个，另一个没设置就会等比例缩放（此时图片不会变形），如果同时设置两个，若设置不当此时图片可能会变形。
路径：页面需要加载图片，需要先找到对应的照片
- 绝对路径（了解）
目录下的绝对位置，可以直接到达的目标位置，通常从盘符开始。
盘符开头：E:\Web前端\test\day01\1.ipg
- 网络地址
完整的网络地址：https://i-blog.csdnimg.cn/blog_migrate/9acf311f758917b671b2c15859040411.png
- 相对路径（常用）
同级路径：当前文件和目标文件在同一目录中
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同级路径 | . | 如：<img src="目标图片.png" >或<img src="./目标图片.png"> |
| 下级路径 | / | 如：<img src="image/目标图片.png" /> |
| 上级路径 | ../ | 如：<img src="../image/baidu.png" /> |
注意：相对路径为 /（正斜杆），绝对路径为 \（反斜杆），实际开发中一般都用不相对路径和网络地址。/（正斜杆）是windows环境下，而linux系统依旧是反斜杠。
2.音频标签
在页面中插入音频 <audio src=" ./music.mp3" controls></adudio>
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意：音频标签目前支持三种格式：mp3、wav、ogg
3.视频标签
页面中插入视频。<video src="./video.mp4" controls></video>
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
注意：视频标签目前支持三种格式：MP4、WebM、Ogg
4.链接标签
点击之后，从一个页面跳转到另一个页面。称呼有a标签，超链接，锚链接。
代码：<a href="./目标网页.html">超链接</a>
特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
当开发网站初期，还不知道跳转地址的值，href的值可以写为#（空链接）点击之后回到网页顶部；href作用是跳转地址。
target属性：目标网页的打开形式
| 取值 | 效果 |
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
