html5——图片-列表-音视频-内联框架-标签的分类

《独自往前》

已于 2023-09-12 15:06:07 修改

阅读量171

点赞数

CC 4.0 BY-SA版权

于 2023-06-20 18:54:05 首次发布

本文链接：https://blog.csdn.net/Singe_lq/article/details/131313416

本文介绍了HTML中的<img>标签，包括src、alt、title属性以及图片的类型如JPEG、GIF、PNG。同时讲解了有序和无序列表的使用，以及定义列表的结构。还提到了音视频元素如<video>和<audio>的属性，内联框架<iframe>的应用，以及HTML标签的分类和元素嵌套规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片

<!--

1.是什么？标签名 img

2.属性

src：输入引入图片的地址

绝对路径：与当前文件位置无关

比如：网址

相对路径：与当前文件位置有关

在同一个文件夹下

./或者省略./

不在同一个文件夹下

../代表上一级目录 ../../代表上上级目录

alt：当图片不能正常显示时，显示alt里面的内容

title：鼠标悬停时，显示title里面的内容

-->

<!--

图片的类型

JPEG：支持的颜色表较多，图片可以压缩，但是不支持透明=》保存照片等颜色丰富的图片

GIF：支持颜色较少，支持简单透明和动图=》图片颜色单一或动图

PNG：支持颜色多，支持复杂透明，但不支持动图=》用来显示颜色复杂的透明图片，多用于网页

webp：谷歌推出专门用来表示网页的一种格式，具备其他格式的所有优点，文件格式小，但是兼容性不好

base64：将图片使用base64编码，图片转换成字符，通过字符形式来引入=》需要和网页一起加载的图片才会使用base64

-->

    <img src="https://img-s.msn.cn/tenant/amp/entityid/AA1cJUsi.img?                
          w=300&h=156&q=90&m=6&f=jpg&x=501&y=177&u=t" alt="">
    <img src="../第一天 基础知识/标题图标.png" title="鼠标悬停时显示的title内容">
    <img src="./第一天 基础知识/标题图标.png" alt="alt内容：这是错误的图片地址">
    <!-- webp图片部分浏览器不兼容显示 -->
    <img src="./标题图标.webp" alt="webp类型的图片">

列表

<!--

列表分类：有序列表无序列表定义列表

有序列表：有一定的顺序

标签：ol 划分有序列表的范围

li 定义项

属性：

start="num" 默认从num开始排序

type="" 设置列表样式类型

无序列表：

标签：ul 划分无序列表的范围

li 定义项

属性：type="" 设置列表样式类型

square 实心矩形

circle 空心圆

disc 默认值实心圆

定义列表：

标签：dl 划分定义列表的范围

dt 定义项

dd 解释定义项

-->

    <ol start="5" type="I">
        <!-- li*4{lorem$} -->
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <li>lorem4</li>
    </ol>
    <ul type="square">
        <li>无序列表1
            <ul>
                <li>lroem1</li>
                <li>lroem2</li>
            </ul>
        </li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
    <dl>
        <dt>蔬菜</dt>
        <dd>白菜</dd>
        <dd>黄瓜</dd>
        <dd>西红柿</dd>
    </dl>
    <dl>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>西瓜</dd>
        <dd>荔枝</dd>
        </dd>
    </dl>

音视频

<!--

视频 video

属性：

src 设置引入视频的地址

controls 显示控件

autoplay 设置自动播放，默认浏览器有相关限制所以不会自动播放

要与 muted 一起连用

muted 设置静音播放

loop 设置循环播放

-->

     <video src="" controls autoplay muted loop></video>
     <!-- 解决兼容性问题 -->
     <video controls>
        <source src="" type="video/mp4">
        <source src="" type="video/webm">
     </video>

<!--

音频 audio

-->

      <audio src="" controls autoplay></audio>
      <!-- 解决兼容性问题 -->
      <audio controls>
        <source src="" type="audio/mepg">
        <source src="" type="audio/ogg">
      </audio>

内联框架

<!--

内联框架

iframe

属性

src：引入页面的地址

width：设置宽度

height：设置高度

-->

     <iframe src="https://www.bilibili.com" frameborder="2" width="500px" height="300px">    
     </iframe>

标签的分类

<!--

1.标签的分类---标签的数量

双标签：开始标签+结束标签 <标签名></标签名>

单表签：只有一个标签组成的元素 <标签名>或者<标签名/>

2.标签的分类---元素性质

块元素（block）独占一行，可以设置宽高

常见块元素：p h1-6 ul li ol dl dt dd div header...

行元素（inline）不独占一行，设置宽高没有效果

常见行元素：a span em i b strong...

行内块元素（inline-block）不独占一行，可以设置宽高

常见行内块元素：img input button td iframe...

-->

<!--

元素之间的嵌套：一般情况，元素基本都可以相互嵌套，不能交叉嵌套，开始标签与结束标签要匹配

1.p标签不能嵌套块元素

2.a标签不能嵌套p标签和a标签

-->

    <!-- 嵌套 -->
    <!-- 错误写法 -->
    <p>
    <h2>的他惜。</h2>
    </p>
    <!-- 错误写法 -->
    <a href="#">
        <p>应后才他。</p>
    </a>
    <a href="#">
        <a href="">疾在</a>
    </a>
    <!-- 正确 -->
    <a href="#"><h2>Lorem, ipsum.</h2></a>
    <a href="#"><div>Lorem ipsum dolor sit.</div></a>
    <!-- 交叉嵌套 -->
    <p><span>我是p中span标签</p></span>