学习HTML的第一天

---

一、基本认知

1. 网页由文字、图片、音频、视频、超链接组成。
2. 代码是通过浏览器转换成网页
3. 渲染引擎

浏览器	内核
IE	Trident （猎豹、360极速浏览器、百度浏览器）
FireFox	Geoko（火狐浏览器内核）
Safari	Webkit （苹果浏览器内核）
Chrome/Opera	Blink（是Webkit的分支）

4. Web标准：HTML（结构）作页面元素和内容；CSS（表现）作页面样式；JS（行为）作页面交互。
5. HTML：超文本标记语言
6. HTML是通过标签对网页中的内容来进行描述的
7. HTML标签：

标签	含义
html标签	网页的整体
head标签	网页的头部
body标签	网页的身体
title标签	网页的标题

8. 标签结构：两部分组成的为双标签，可包裹内容；一部分组成的单标签，无法包裹内容
9. 属性注意点：“属性名” = “属性值”
   ①标签的属性写在开始标签内部
   ②标签上可以同时存在多个属性
   ③属性之间以空格隔开
   ④标签名与属性之间必须以空格隔开
   ⑤属性之间没有顺序之分
10. 标签与标签之间的关系：父子关系（嵌套关系）、兄弟关系（并列关系）、

二、标签介绍

1.排版标签

标题标签

--双标签
  <h1>我是1级标题</h1>
  <h2>我是2级标题</h2>
  <h3>我是3级标题</h3>
  <h4>我是4级标题</h4>
  <h5>我是5级标题</h5>
  <h6>我是6级标题</h6>  

段落标签

--双标签
<p>
</p>

换行标签

--单标签
<br>

水平线标签

--单标签
<hr>

2.文本格式化标签

   <!-- 
    文本格式化标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果
   -->
  <!-- 第一组 -->
  <b>加粗</b>
  <u>下划线</u>
  <i>倾斜</i>
  <s>删除线</s>

  <br>

  <!-- 第二组：推荐使用，语义更加强烈  -->
  <strong>加粗</strong>
  <ins>下划线</ins>
  <em>倾斜</em>
  <del>删除线</del>

3.媒体标签

图片标签

属性	说明
src	指定需要展示的图片路径
slt	替换文本，当图片加载失败时，展示的文字
title	鼠标悬停在图片上时，才展示的文字
width	图片的宽度
height	图片的高度

    <!-- 
    图片标签：img 单标签
    作用：在网页中展示一张图片

    属性：
      1、src：告诉浏览器要显示哪一张图片
          属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可）
      2、alt：替换文本
        当图片加载失败时（如：路径写错了），才显示的文字
      3、title：提示文本
        当鼠标悬停在图片上时，才显示的文字
      4、width：图片的宽度
      5、height：图片的高度
      
      注意点：
        1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放
        2、如果同时设置了两个，若设置不当此时图片可能会变形

   -->
  <img src="cat.gif" alt="这是一只小猫" title="震惊！小猫咪竟然会干这种事？">

路径

• 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
  示例：D:\day01\images\1.jpg（盘符开头）；https://www.itcast.cn/2018czgw/images/logo.gif（完整的网络地址）
• 相对路径：从当前文件开始出发找目标文件的过程

相对路径分类	代码步骤
同级目录	直接写目标文件的名字（快捷操作./）
下级目录	1. 先知道在哪个文件夹里面 → 文件夹名字；2. 进入这个文件夹 → /；3. 此时看到目标文件直接喊她 → 直接写目标文件名（快捷操作./）
上级目录	1. 先出当前文件夹，到上一级目录 → …/；2. 此时看到目标文件直接喊她 → 直接写目标文件（快捷操作…/）

音频标签

• 音频标签目前支持三种格式：MP3、Wav、Ogg

    <!-- 
    多媒体标签：

      音频标签：audio
        属性：
          1、src：路径
          2、controls：播放的控件
          3、autoplay：自动播放（部分浏览器不支持）
          4、loop：循环播放

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

视频标签

• 视频标签目前支持三种格式：MP4 、WebM 、Ogg

    <!-- 
    视频标签：video
      属性：
          1、src：路径
          2、controls：播放的控件
          3、autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted可以完成静音的自动播放
          4、loop：循环播放
   -->
  <video src="./video.mp4" controls autoplay muted loop></video>

4.链接标签

显示特点：

• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

  <!-- 
    超链接：a标签  双标签
    作用：点击之后跳转网页

    属性：
      1、href：告诉浏览器点击之后跳转去哪一个网页
        取值：路径
          1、外部链接：互联网上的绝对路径
          2、内部链接：推荐使用相对路径

      2、target：目标网页的打开方式
          取值：
            1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖
            2、_blank：在新窗口中进行跳转，原网页保留
   -->

   <a href="https://www.baidu.com/" target="_blank">点击之后去百度网页</a>
   <a href="./15-视频标签.html" target="_blank">点击之后去刚刚书写的视频网页</a>

空链接

  <!-- 
    空链接：
      1、点击之后回到顶部
      2、开发中不确定该链接最终跳转位置（先用空链接占个位置）
   -->