基础认知

Web标准

• 构成：结构、表现、行为

HTML标签的结构

• 需要确定开始结束包裹内容的选择双标签

  • 文字要加粗

• 不需要开始结束的选择单标签

• HTML标签与标签之间的关系

  • 父子关系（嵌套关系）

  • 兄弟关系（并列关系）

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="">
    
    <img src="2.gif" alt="这是月亮">   
    
    <img src="2.jpg" alt="这是月亮" title="嗯哼" width="200">   
    
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="">

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

<img src="../2.jpg" alt="">
<img src="../images/2.jpg" alt="">

10、音频标签

<audio src="./firework.mp3" controls autoplay loop>audio>

11、视频标签

<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>
?

<br>
<a href="#">空链接，不知道跳转到哪a>