基础认知
Web标准
-
构成：结构、表现、行为
HTML标签的结构
-
需要确定开始结束包裹内容的选择双标签
-
文字要加粗
-
-
不需要开始结束的选择单标签
-
HTML标签与标签之间的关系
-
父子关系（嵌套关系）
- <head> <title></title> </head>
-
兄弟关系（并列关系）
-
<head></head>
<body></body>
-
<head></head>
-
1、标题标签
-
标题标签特点
-
文字都有加粗
-
文字都有变大，但是从h1到h6文字逐渐减小
-
独占一行
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6> -
2、段落标签
-
段落标签特点
-
段落之间存在间隙
-
独占一行
-
<p>此元素包含 全局属性 。alink超链接选中之后的文本颜色。此方法不符合规范，请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分（以('#')开始的部分）发改变时调用的函数。</p>
<p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>
3、换行标签
-
换行标签特点：
-
单标签
-
让文字强制换
-
<p>此元素包含 全局属性。<br>超链接选中之后的文本颜色。此方法不符合规范，请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分（以('#')开始的部分）发改变时调用的函数。</p>
<p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>
4、水平线标签
-
水平线标签特点：
-
单标签
-
在页面中显示一条水平线
-
<h1>这是文章标题</h1>
<hr>
<p>此元素包含 全局属性 。alink超链接选中之后的文本颜色。此方法不符合规范，请使用 CSS 的 color 属性和 :active 伪类替代。backgroundonfocus文档获得焦点时调用的函数。onhashchange文档当前地址的片段标识部分（以('#')开始的部分）发改变时调用的函数。</p>
<p>onlanguagechange 用户选择的语言发生改变时调用的函数。onload文档完成加载时调用的函数。onmessag档接收到消息时调用的函数。</p>
</body>
5、文本格式化标签
-
文本格式化标签特点：
-
效果一样，特别强调文字的重要性就用strong、ins、em、del（表示的强调语义更强烈）
-
并不自动换行
-
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
6、图片标签
<img src="">
<!-- alt替换文本：当图片加载失败时，才显示的文本 -->
<img src="2.gif" alt="这是月亮">
<!-- title提示文本：当鼠标悬停时，才显示的文本 ，还可以用于其他标签-->
<img src="2.jpg" alt="这是月亮" title="嗯哼" width="200">
<!-- width和height属性
注意点：
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）。推荐，因为图片不会变形
如果同时设置了width和height两个，若设置不当此图片可能会变形
-->
</body>
7、绝对路径
<!-- 不推荐使用 -->
<img src="D:\install\code\day01\images\1.jpg" alt="" width="200">
8、相对路径
-
相对路径（常用）：
-
从当前文件开始找目标文件的过程
-
相对文件分类：
-
同级目录---当前文件和目标文件在同一个文件夹中
-
下级目录---目标文件在下级目录中
-
上级目录---目标文件在上级目录中
-
<!-- 同级目录 -->
<img src="./2.jpg" alt="">
<img src="2.jpg" alt="">
<!-- 下级目录 -->
<img src="./images/6.jpg" alt="">
<img src="images/6.jpg" alt="">
<!-- 上级目录 见09-->
9、相对路径--上级目录
<img src="../2.jpg" alt="">
<img src="../images/2.jpg" alt="">
10、音频标签
<!-- controls--显示播放的控件 autoplay--自动播放（部分浏览器不支持） loop--循环播放-->
<audio src="./firework.mp3" controls autoplay loop></audio>
11、视频标签
<!-- controls--显示播放的控件 autoplay--自动播放（谷歌浏览器中需配合muted实现静音播放） loop--循环播放-->
<video src="./video.mp4" controls autoplay muted loop></video>
12、链接标签
-
href的作用是跳转地址
-
target：目标网页的打开形式
-
_self：默认值，在当前窗口中跳转（覆盖原网页）
-
_blank：在新窗口中跳转（保留原网页）
-
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<br>
<a href="./01-标题标签.html">点我呀，点了就去01-标题标签</a>
<!-- 当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接） -->
<br>
<a href="#">空链接，不知道跳转到哪</a>