HTML中的a标签，img标签，列表标签以及视频、音频标签学习笔记

• HTML5标签语义化

1. 标签名代表了标签中内容的意思，让正确的标签干正确的事情，如标题使用标题标签
2. 结构化标签
   1. HTML5新增了哪些标签
      1. header               头部标签
      2. nav                     导航链接部分
      3. main                   页面主要内容，它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
      4. section              定义文档中的节（section、区段）
      5. article                定义页面独立的内容区域
      6. aside                  定义页面的侧边栏内容
      7. footer                定义section或document的页脚
   2. 什么是标签的语义（面试）
      1. 去掉css样式也能很好体现HTML结构
      2. 用户体验：title属性，alt属性
      3. 针对特殊群体（读屏机器，SEO等）
      4. 后期维护及更新
      5. 有利于搜索引擎优化

• a标签

  1. 什么是超链接
     1. 概念：从当前页面跳转到另一个页面，或当前页面的不同区域，或另外的网站
     2. 分类
        1. 外部链接：从当前网站跳转到其他网站
        2. 内部链接：从当前项目里，跳转到不同文件
        3. 锚点链接：在当前页面里，不同区域之间跳转
  2. a标签（双标签）
     1. 作用：a标签定义一个超链接
     2. 基本语法：<a 属性=”属性值”>标签内容</a>
     3. 属性
        1. href属性：定义需要跳转的目标地址（url），url：统一资源定位符
        2. name属性：定义锚点的名称
        3. target属性：表示在哪个窗口打开url地址
           1. _blank：新建窗口打开
           2. _self：在当前窗口打开（默认值）
     4. 注意：
        1. a标签是行内元素，并且是一个双标签（必须写内容才能看到a标签）
        2. 重点掌握href属性
  3. 绝对路径与相对路径
     1. 绝对路径：绝对路径以协议（http://、https://）或者以“/”作为前缀
     2. 相对路径：以文件本身所在的目录为参照，进行路径的定位
        1. 同一级文件之间跳转
           1. ./：                    表示当前目录进行定位，可以不写
           2. /目录名：        表示进入目录
        2. 不同目录文件之间的跳转
           1. ../：                   表示返回上一层目录，可以使用多个../来表示返回多级

                                                                                                   目录

• img标签

  1. 作用：网页中嵌入图像
  2. 语法：<img src=”引入图像的地址(url)” alt=””>
  3. 属性
     1. 必选
        1. src：        表示引入图像具体地址
        2. alt：         表示图像加载失败时显示的文字（1.用户体验，2.seo设置关键字）
     2. 可选
        1. width：   表示图像宽度
        2. height：  表示图像高度
        3. title：      图片说明（鼠标hover上图像时显示）

注意：

宽度和高度任意设置一个值时，图像会进行等比例缩放

                   img标签是一个行内标签，是一个单标签（自关闭），可置换标签

                   img标签可以支持多种格式图片（jpg，bmp，png，gif）

• 扩展

  1. audio标签：定义网页中加入声音
     1. 语法：<audio src=”音乐文件路径url” autoplay=”autoplay”>

您的浏览器不支持audio标签

                                       </audio>

1. 1. 1. 属性：
         1. src：                  表示声音的地址url
         2. autoplay：       表示自动播放
         3. controls：        表示播放控件
         4. muted：           输出时静音
         5. preload：         音频在页面加载时加载，并预备播放
      2. 支持三种音频格式：ogg，mp3，wav等

注意：audio标签是html5中新标签，可能在某些低版本浏览器中不支持，需要加上提示文字。

1. 1. video标签：定义网页中加入视频
      1. 语法：<video src=”视频文件路径url” autoplay=”autoplay”>

您的浏览器不支持video标签

                                       </video>

1. 1. 1. 属性：
         1. src：                  表示播放视频的url
         2. controls：        表示播放控件
         3. autoplay：       自动播放
         4. width：             设置播放器宽度
         5. height：           设置播放器高度
         6. poster：           表示海报
      2. 支持的格式：ogg，MPEG4，WebM等
   2. source标签：主要用于audio和video标签支持的格式文件进行选择性播放
      1. 语法：<source src="资源地址url" type="资源类型">

注意：src的值为资源地址，type的值为资源的类型。可以指定多个资源，浏览器将自动选择支持的资源进行播放。

常用的类型：

用于视频：

• video/ogg
• video/mp4
• video/webm

用于音频：

• audio/ogg
• audio/mpeg

• 列表标签

  1. 概念：列表主要用于制作网页中数据列表或导航
  2. 分类：

     1. 无序列表（ul）：列表项之间属于并列关系

        1. 语法：<ul>

                                                                          <li>内容部分</li>

                                                                   </ul>

1. 1. 1. 说明：
         1. li标签表示列表的列表项，一个列表里面可以放多个列表项
         2. ul标签表示定义无序列表，并没有实际作用
         3. 注意
            1. ul>li 结构固定，必须配合使用，并且ul是一个块级元素
            2. 如果需要嵌套标签，都放在li里面
            3. li前面默认有小圆点（标志）
            4. 默认样式后期在项目中要去掉（style=”list-style:none”）

      2. 有序列表（ol）：表示有顺序或重要性的列表

         1. 语法：<ol>

                                                       <li>内容部分</li>

                                                 </ol>

1. 说明：
2. ol标签表示定义有序列表，表示一个列表区域
3. li标签表示列表的列表项，一个列表里面可以放多个列表项
   1. 注意
      1. ol>li结构固定，必须配合使用（块级标签）
      2. li标签里面可以嵌套任何标签（包括自身）
      3. 有序列表ol上的type属性可以设置li前面的编号
      4. 常见type属性值：
         1. A 代表列表项前面显示的是大写字母；
         2. a表示显示小写字母；
         3. I代表用大写罗马数字显示；
         4. i代表用小写罗马数字显示。
         5. 默认情况下显示数字；
      5. 定义列表（dl）：定义了定义列表
         1. 语法：<dl>

                                                    <dt>名词或概念</dt>

                                                    <dd>对名词或概念的解释或说明</dd>

                                                 </dl>

1. 1. 1. 1. 说明：
            1. dl标签表示定义定义列表的区域，并没有实际效果
            2. dt标签表示名词或概念
            3. dd标签表示对名词或概念的解释或说明
         2. 注意：
            1. dl>dt,dd结构固定，必须配合使用
            2. dt标签和dd标签里可以嵌套任何标签
            3. dl标签默认有样式一般配合css进行修饰