html结构-two

实体

产生原因

• 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

• 在HTML中有些时候，我们不能直接书写一些特殊符号比如

  • 多个连续的空格

  • 字母两侧的大于和小于号

• 如果我们需要在网页中书写这些特殊符号，需要使用html中的实体（转义字符）

实体的语法

• &实体的名字；

实体	代表
&nbsp；	无换行的空格
&gt；	大于号
&lt；	小于号
&copy；	版权符号

列表（list）

html的三种列表

• 1、有序列表

• 2、无序列表

• 3、定义列表

列表特点

• 列表之间可以互相嵌套

有序列表

• <o1>
      <li>结构</li>
      <li>表现</li>
      <li>行为</li>
  </o1>
  ​
  ​
  展示
  1.结构
  2.表现
  3.行为

• 无序列表，使用o1标签来创建无序列表

• 使用li 表示列表项

无序列表

• <u1>
      <li>结构</li>
      <li>表现</li>
      <li>行为</li>
  </u1>
  ​
  展示
  -结构
  -表现
  -行为

• 无序列表，使用u1标签来创建无序列表

• 使用li 表示列表项

定义列表

• <dl>
      <dt>结构</dt>
      <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
      <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
  </dl>
  ​
  展示
  结构
  结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落
  结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落

• 使用dl标签来创建一个定义列表

• 使用dt来表示定义的内容

• 使用dd来对内容进行解释说明

超链接

概念

• 超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他的位置

• 超链接也是一个行内元素,在a 标签中可以嵌套除它自身外任何的元素

• 当一个行内写多个超链接时，会因限制大小自动换行

格式

• <a>超链接</a>
  <br><br>        ---->       <br>*2
  <a>超链接</a>

属性

• href指定跳转的目标路径

• 值可以是一个外部网站的地址

• 值也可以写一个内部页面的地址

• <a href="https://www.baidu.com">超链接</a>
  <br><br>   
  <a href="https://www.baidu.com">超链接</a>
  
  <a href="同一目录下的地址（也就是名字）">超链接</a>
  <br><br>   
  <a href="同一目录下的地址（也就是名字）">超链接</a>
  
  超链接为页面显示的可以点击的东西

  识之律者提醒这是百度的超链接

  注意事项

• 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用 ./ 或 ../ 开头

• ./ 可以省略不写，如果不写 ./ 也不写../ 则就相当于写了 ./

• ./ 表示当前文件所在的目录

  • 在这里当前页面就是09.相对路径.html

  • ./ 就等于09.相对路径.html所在的目录

• ../ 表示当前文件所在的目录的上一级目录

• / 表示当前文件的下一级文件（子文件）

• target 属性，用来指定超链接打开的位置

• 可选值

  • _self 默认值 在当前页面中打开超链接

  • _blank 在一个新的页面中打开超链接

• 转到当前页面的顶部的位置

  • 可以直接将超链接的herf属性设置为# 这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

• id 属性（唯一不重复）

  • 每一个标签都可以添加一个id属性

  • id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

  • id属性区分大小写 由字母开头（数字也可但不推荐）

• 跳转到页面的指定位置

  • 将 href 属性设置 href="#目标元素的id属性值"

  • 在开发中可以将#作为超链接的路径的占位符使用 href="#"

  • 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 故也可用作占位符 href="javascript"

img图片标签

定义

• 图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签属性（单个使用）

src 属性

• src属性指定的是外部图片的路径（路径规则和超链接是一样的）

  • <img src="./****/***/***.gif">

  •  <img src="http://www.baidu.com">
    

alt 属性

• alt属性 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

  • <img src="./****/***/***.gif" alt="图片的描述">

  • <img src="http://www.baidu.com" alt="图片 描述">

width 属性

• width 图片的宽度(单位是像素)

  • <img width="200" src="./****/***/***.gif" alt="图片的描述">

height属性

• height 图片的高度（单位是像素）

  • <img height="400" src="./****/***/***.gif" alt="图片的描述">

注意事项

• 宽度和高度中如果只修改了一个，啧另一个会等比例缩放

  • 一般情况下在PC端，不建议修改图片的大小，需要多大的图片就裁多大

  • 但是再移动端，经常需要对图片进行缩放（大图缩小）

• img元素属于 替换元素（块元素和行元素之间，具有两种元素的特点）

图片的格式

jpeg(jpg)

• 支持的颜色比较丰富，不支持透明效果，不支持动图

• 一般用来显示照片

gif

• 支持的颜色比较少，支持简单透明，支持动图

• 颜色单一的图片，动图

png

• 支持的颜色丰富，支持复杂透明，不支持动图

• 颜色丰富，复杂透明的图片（专为网页而生）

webp

• 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

• 它具备其他图片格式的所有优点，而且文件还特别的小

• 缺点

  • 兼容性不好

选择

• 效果一样，用小的

• 效果不一样，用效果好的

base64

• 将图片使用base64进行编码，这样可以将图片转化为字符，通过字符的形式来引入图片

• 将其编码 所得编码

• 一般都是一些需要和网页一起加载的图片才会使用base64

• 希望加载速度很快的用base64加载

内联框架

iframe 标签

• 内联框架，用于向当前页面中引入一个其他页面

• src 指定要引入的网页的路径

  • < iframe src="网站网址" width=”数“ height=“数 ”>

• frameborder 指定内联框架的边框

  • < iframe src="网站网址" width=”数“ height=”数 “ frameborder="数（当数为0时无边框）">

音频视频播放

audio标签（音频）

• audio标签用来向页面中引入一个外部的音频文件

• 音视频文件引入时，默认情况下不允许用户自己控制播放停止

  • <audio src="文件路径同超链接"></audio>

controls 属性

• controls 是否允许用户控制播放

  • <audio src="文件路径同超链接" controls>

autoplay 属性

• autoplay自动播放

  • <audio src="文件路径同超链接" controls autoplay>

• 如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会对音乐进行播放

loop属性

• loop 循环播放

  • <audio src="D:\图片\前端学习用\周深 - Rubia.mp3" controls autoplay loop>

    rubia

<audio src="D:\图片\前端学习用\周深 - Rubia.mp3" controls autoplay loop>

source 属性

• 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件

  • <audio>
        <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
    </audio>

    rubia

<audio>
    <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
</audio>

• 当浏览器不支持时

  • <audio controls>
        您的浏览器不支持播放该音频，请升级浏览器
        <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
    </audio>

  • 支持的浏览器显示播放器

  • 不支持的浏览器显示文字

• 可以同时指定多个文件

  • <audio controls>
        您的浏览器不支持播放该音频，请升级浏览器
        <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
         <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
         <source src="D:\图片\前端学习用\周深 - Rubia.mp3" controls loop>
        <embed src="音频地址同超链接格式" type="audio/mp3" width="40">
    </audio>

  • 有效解决兼容性问题

  • 多个文件写多种支持

embed标签（老版本标签）

• 让老版本浏览器播放音视频

  • <embed src="音频地址同超链接格式">

• width 控制宽度 height 控制高度

• audio 文件是大的类型

• /后跟具体格式

• <embed src="音频地址同超链接格式" type="audio/mp3" width="40">

video 标签（视频）

• video 标签用来向页面中引入一个外部的音频文件

• 使用方式和audio基本上是一样的

• 因此要注意当无controls时也无法用户控制播放浏览器翻译完后无法直接看到

  • <video controls>
        <source src="D:\图片\前端学习用\周深 - Rubia.mp4">
    </video>
    ​
    ​
    <video controls>
        <source src="D:\图片\前端学习用\周深 - Rubia.mp4"controls autoplay loop>
        <embed src="D:\图片\前端学习用\周深 - Rubia.mp4" type="video/mp4">
    </video>
    ​
    <video src="./soure/周深%20-%20Rubia.mp4" controls loop></video>
    ​
    <video src="D:\图片\前端学习用\周深 - Rubia.mp4" controls autoplay loop></video>

    ​

  • <video src="D:\图片\前端学习用\周深 - Rubia.mp4"></video>
    
    <video>
        <source src="D:\图片\前端学习用\周深 - Rubia.mp4"controls autoplay loop>
    </video>