HTML个人学习笔记（day 2）

四、HTML标签学习(排版标签)

     4.1.1 标题标签

      标题标签：h系列标签

<h1>1级标题</h1>    
<h2>2级标题</h2>    
<h3>3级标题</h3>    
<h4>4级标题</h4>    
<h5>5级标题</h5>
<h6>6级标题</h6>

       h系列标签的特点： 1. 文字都有加粗

                                       2. 文字都有变大,并且文字从h1-h6文字逐渐减小

                                       3. 独占一行

      4.1.2 段落标签

       段落标签：<p></p>

  <p>我是一段文字</p>

       p标签的特点：1. 段落之间存在间隙

                               2. 独占一行

      4.1.3 换行标签

       换行标签：<br>

       换行标签的特点： 1. 单标签

                                     2. 让文字强制换行

      4.1.4 水平线标签

       水平线标签：<hr>

       场景：分割不同主题内容的水平线

       换行标签的特点： 1. 单标签

                                     2. 在页面中显示一条水平线   

---

四、HTML标签学习(文本格式化标签)

    4.2.1 文本格式化标签的介绍

     文本格式化标签的介绍：加粗、下划线、倾斜、删除线等效果

 加粗:  <b>  <strong>

 倾斜:  <i>   <em>

下划线: <u>   <ins>  

删除线: <s>   <del>       

      后面的标签是突出重要性的强调语境，也是同样的用法。

---

四、HTML标签学习(媒体标签)

     4.3.1 图片标签

      图片标签：< img src = " " alt " ">

      场景：在网页中显示图片

      特点： 1. 单标签

                  2. img标签需要展示对应的效果，需要借助标签的属性进行设置!

        <img src="cat.jpg ">

      4.3.2 图片标签的alt属性

图片的alt标签: <img src="cat.jpg " alt="猫">

alt属性值:替换文本

•  当图片加载失败时,才加载alt文本内容
•  当图片加载成功时,就不加载alt文本内容

       4.3.3 图片标签的title属性

图片的title标签: <img src="cat.gif" alt="猫" title="这是title文字，鼠标闲停的时候会显示文本内容">

tltle属性值:提示文本

•   当鼠标悬停时,才显示的文本
•   注意点：title属性不仅仅可以用于图片标签,还可以用于其它标签

        4.3.4 图片标签的width和height属性

<!-- width和height属性只需要给出一个值,另一个等比例缩放，好处就是图片不变形  -->
图片标签的width属性: <img src="cat.gif" alt="猫咪" title="这是一只猫咪" width="200">
   
图片标签的width和height属性: <img src="cat.gif" alt="猫咪" title="这是一只猫咪" width="500" height="150">

width和height属性值: 宽度和高度(数字)

•    如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)

•    如果同时设置了width和height两个,若设置不当此时图片可能会变形

   

       4.3.5 路径中的绝对路径 (了解)

        绝对路径: 指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径  

•  盘符开头：D:\day01\images\1.jpg
•  盘符不方便,当别人的电脑没有D盘，就看不了你发的文件

       4.3.6 路径中的相对路径 (常用)      

        相对路径(常用)：从当前文件开始出发找目标文件的过程 

        当前文件：当前的html网页

        目标文件：要找到的图片

        相对路径分类：

•   同级目录
•   下级目录
•   上级目录        

        4.3.6.1 相对路径-同级目录

         同级目录：当前文件和目标文件在同一目录

•   方法一：<img src ="目标图片.gif">
•   方法二：<img src ="./目标图片.gif">

        4.3.6.2 相对路径-下级目录

         下级目录：目标文件在下级目录中

代码步骤:
         1. 先知道在哪个文件夹里面 ->文件夹名字
         2. 进入这个文件夹 -> /
         3. 此时看到目标文件直接喊她 -> 直接写目标文件名字  

         4.3.6.3 相对路径-上级目录

          上级目录：目标文件在上级目录中

代码步骤:
        1. 先找出当前的文件夹，到上一级目录-> ../
        2. 此时看到目标文件直接喊她 -> 直接写目标文件

          4.3.7 音频标签

            音频标签：<audio src = "./music.mp3" contorols> </audio>

            场景: 在页面中插入音频      

   属性名                           功能
    src                          音频的路径
  controls                     显示播放的控件
  autoplay             自动播放(部分浏览器不支持 Google)
    loop                          循环播放

注意点: 音频标签目前支持的三种格式: MP3、Wav、Ogg

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

                

           4.3.8 视频标签

             视频标签：<video src = "./video.mp4" controls> <video>

             场景：在页面中插入视频

   属性名                      功能  
    src                     视频的路径   
  controls                 显示播放的路径
  autoplay        自动播放(谷歌浏览器中需配合muted实现静音播放)
   loop                     循环播放
     

注意点：视频标签目前支持的三种格式: MP3、Wav、Ogg

<video src="./1.mp4"  controls autoplay muted  loop width="700px" height="400px"></video>

---

the end！