列表、超链接简介、相对路径、超链接的其他用法、图片标签、图片的格式、内联框架、音视频播放、CSS属性书写顺序（重点）、页面布局整体思路——html

嘻嘻哈哈二郎神

已于 2023-02-13 15:38:09 修改

阅读量562

点赞数 1

分类专栏： HTML 文章标签： html 前端

于 2022-12-12 14:40:49 首次发布

本文链接：https://blog.csdn.net/weixin_70320000/article/details/128284441

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、列表（list）

在html 中也可以创建列表，html列表一共有三种：

1.有序列表（ordered list）

2.无序列表(unordered list)

3.定义列表(defined list)

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

使用 li 表示列表项

有序列表，使用ol 标签来创建有序列表

使用 li 表示列表项

自定义列表，使用dl 标签来创建定义列表

使用dt 来表示定义的内容

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

注：dl 中只能包含 dt 和 dd；dt 和 dd个数没有限制，经常是一个dt 对应多个 dd；dt 和 dd是兄弟关系，不是包含关系。

自定义列表的使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号，如下方。

ul使用得比较多，主要用来做网页的菜单（竖向、横向）

列表之间可以互相嵌套

<body>
    <ul>
        <li>铅笔</li>
        <li>尺子</li>
        <li>橡皮</li>
    </ul>
    <ol>
        <li>铅笔</li>
        <li>尺子</li>
        <li>橡皮</li>
    </ol>
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>
    <!--列表之间可以互相嵌套-->
    <ul>
        <li>
            aa 
            <ul>
                <li>aa-1</li>
                <li>aa-2</li>
            </ul>
        </li>
    </ul>
</body>

二、超链接简介

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

使用 a 标签来定义超链接

超链接也是一个行内元素，在a 标签中可以嵌套除它自身外的任何的元素（包括块元素）

属性：

href 指定跳转的目标路径 （超文本引用（hypertext reference）；超链接）

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

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

三、相对路径

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

相对路径都会使用 .. 或 .开头

../

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

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

四、超链接的其他用法

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

可选值：

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

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

可以直接将超链接的href 属性设置为 #,这样点击超链接以后

页面不会发生跳转，而是跳转到页面的顶部位置

可以跳转到页面的指定位置，只需将href 属性设置 #目标元素的id属性值

id 属性 （唯一不重复的）

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

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

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

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

<body>
    <a href="https://www.baidu.com">超链接</a>

    <a href="学习.html" target="_blank">超链接</a>

    <a href="javascript:;"></a>
    <a href="#p3">去第三个自然段</a>
    <a href="#bottom">去底部</a>
    <p>就将计就计简介</p>
    <p>哈哈哈哈哈</p>
    <p id="p3">啦啦啦啦啦啦</p>
    <a href="#" id="bottom">回到顶部</a>
</body>

五、图片标签

图片标签用于向当前页面中引入一个外部图片

使用img 标签来引入外部图片， img标签是一个自结束标签

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

属性：

src 属性（源属性source）指定的是外部图片的路径（路径规则和超链接是一样的，1.相对路径 2. 去网页上搜索得到想要的照片右键“复制图片地址”)

alt 属性 对图片的描述，描述默认情况下不会显示，有些浏览器会在图片无法加载时显示

搜索引擎会根据alt 中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所搜索

width 图片的宽度（单位是像素）

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

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

注意：一般情况下在PC端，不建议修改图片的大小，需要多大的图片就裁多大。因为大图放小，浪费内存；小图放大会失真。但是在移动端，经常需要对图片进行缩放（大图缩小）

<img src="https://img0.baidu.com/it/u=3054904784,1385577059&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" alt="钢铁侠">

六、图片的格式

jpeg(jpg)

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

- 一般用来显示照片

- 产品类的图片常用 jpg 格式

gif

- 支持的颜色比较少，最多只能储存256色，支持简单透明，支持动图

- 颜色单一的图片，动图

- 常用于一些图片小动画效果

png

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

- 颜色丰富，复杂透明度（专为网页而生）

- 想要切成背景透明的图片，选择png 格式

webp

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

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

- 缺点：兼容性不好

PSD

- Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿

- 对前端最大优点，可以直接从上面复制文字，获得图片，还可以测量大小和距离

base64

- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的实行来引入图片

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

直接去搜base64在线转化，将图片添加转换，复制base64编码，放入img的src属性中即可

效果一样，用小的

效果不一样，用效果好的

七、内联框架

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

src 指定要引入的网页路径

frameborder 指定内联框架的边框

<body>
    <iframe src="https://www.bilibili.com" frameborder="0" width="400" height="800"></iframe>
    <h1>hello</h1>
</body>

八、音视频播放

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

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

属性：

controls 是否允许用户控制播放，有就允许控制，没有就不允许

autoplay 音频文件是否自动播放，加上就自动播放，autoplay="autoplay"的简写

如果设置了autoplay 则音频在打开页面时会自动播放

但是目前来讲大部分浏览器都不会自动对音频进行播放

但谷歌浏览器禁用了自动播放，还需要添加 muted属性来解决自动播放问题

muted 静音播放 muted="muted"可简写为muted

loop 音频是否循环播放

poster 加载等待的画面图片，属性值为图片地址imgurl

怎么切换浏览器的版本

除了通过src来指定外部文件的路径以外，还可以通过source标签来指定文件的路径，已解决浏览器的兼容问题

如何从网页上扒取音视频，首先找到网页，然后f12 检查，选择音视频元素，点击其中的 src属性值，右键选择 “在新标签页中打开” ，然后在打开的新标签页中右键选择 “ 将视频另存为”即可下载下来视频。

<body>
    <audio src="" controls loop autoplay></audio>
    <!-- 还可以通过source来指定文件的路径 -->
    <audio>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <!-- 可以放多个音频文件，但最多只执行一个，这样可以解决浏览器的兼容问题 -->
        <source src=".mp3">
        <source src=".ogg">
        <embed src=".mp3" type="audio/mp3" width="300" height="100">
    </audio>    
</body>

video标签 向网页中引入一个视频

使用方式和audio基本一样的

<body> 
    <video controls>
        <source src=".webm">
        <source src=".mp4">
        <embed src=".mp4" type="video/mp4">
    </video>
    <!-- 引入腾讯视频中一段视频，选择复制代码，粘贴 -->
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=z0044divzwu" allowFullScreen="true"></iframe>
</body>

之前都是使用相对路径引入音视频，但是一般不这样做，如果引入网站的音视频，只需打开，点击分享，选择复制代码，然后粘贴到文件中即可

多媒体标签总结：

1.音频标签和视频标签使用方式基本一致

2. 浏览器支持情况不同，音频格式有mp3、Wav、ogg ，视频格式有mp4、WebM、ogg

3. 谷歌浏览器把音频和视频自动播放禁止了

4. 可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JS解决）

5. 视频标签是重点，经常设置自动播放，不使用 controls 控件，循环和设置大小属性