基础认知

Web标准

构成：结构、表现、行为

HTML标签的结构

需要确定开始结束包裹内容的选择双标签
- 文字要加粗
不需要开始结束的选择单标签
HTML标签与标签之间的关系
- 父子关系（嵌套关系）
  - <head> <title></title> </head>
- 兄弟关系（并列关系）
  - <head></head>
    <body></body>

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>

HTML5-part1

基础认知

Web标准

HTML标签的结构

1、标题标签

2、段落标签

3、换行标签

4、水平线标签

5、文本格式化标签

6、图片标签

7、绝对路径

8、相对路径

9、相对路径--上级目录

10、音频标签

11、视频标签

12、链接标签

相关文章