做一个简单的页面——基础（3）

最新推荐文章于 2024-03-01 20:04:46 发布

Guoli丨

最新推荐文章于 2024-03-01 20:04:46 发布

阅读量111

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_65762277/article/details/127929080

版权

10.行内与块元素

行内元素（inline element）用来包裹文字
特点：
1、不会独占一行
2、宽高是被内容撑开的，内容有多宽它就多宽
常用行内元素：span、strong、em、del等

块元素（block element）用来布局
特点：
1、会独占一行
2、默认情况下，块元素的宽度是视口的100%
3、默认情况下，块元素的高度是被内容撑开的
常用块元素：div、p、h1-h6、header、main、footer、nav

行内块元素
特点：
兼具块元素和行内元素特点
常用行内块元素：img

注意：
1、块元素主要是用来布局，里面可以放任何元素,块元素、行内元素、行内块元素
2、行内元素主要用来包裹文字的，一般情况下不能放块元素
3、p标签是个特殊的块元素，它里面不能放块元素
4、a标签是个特殊的行内元素，它里面什么都能放

11.列表

1.有序列表用ol创建列表，li表示列表项
2:无序列表用ul创建列表，li表示列表项
3:定义列表用dl创建列表，dt表示下定义，dd表示对定义的解释
类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释
注意：1、列表之间是可以互相嵌套的，ul，ol，li是块元素
2、可以使用type属性更改项目符号
ol 它的项目符号：1、a、A、I 等，默认项目符号是‘1’
ul 它的项目符号:
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆

12.超链接

超链接： 2个功能，2个属性，1个补充

功能：1、从一个页面跳到另一个页面
2、在当前页面进行跳转（楼梯导航/锚点功能）

属性：
href属性指向跳转的地址
绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对的
相对地址：它的地址值跟超链接的html文件位置相关
./ 当前目录下跳转 ./可省略，默认是./
../ 跳出当前目录，来到上一级目录
注意：很多路径规则都是一样，包括图片、音视频跳转等
target属性指定超链接页面打开的方式
可选值：
_self 在当前页面打开超链接默认值一般情况下，国外网站常用
_blank 新开页面打开超链接一般情况下，国内常用

13.图片格式

PEG(JPG)
                   - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
                   - 一般用来保存照片等颜色丰富的图片

               GIF
                   - GIF支持的颜色少，只支持简单的透明，支持动态图
                   - 图片颜色单一或者是动态图时可以使用gif

               PNG
                   - PNG支持的颜色多，并且支持复杂的透明，不支持动图
                   - 可以用来显示颜色复杂的透明的图片
                   专为网页而生的

           webp
               -谷歌新推出的专门用来表示网页的一种格式
               -它具有其他图片格式的所有优点，而且文件格式还很小
               -缺点：兼容性不好

               base64
               -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
               -一般都是需要和网页一起加载的图片才会使用base64

           图片的使用原则：
               效果不一致，使用效果好的
               效果一致，使用小的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>热门活动&nbsp;&nbsp;&nbsp;&nbsp;更多</h1>
<ul type="disc">
    <li><a href="https://y.qq.com/"><img src="./图/img1.png" alt="200"></a><br>
 推荐活动丨原创音乐现金榜T榜</li><br>
 <li><a href="https://y.qq.com/"><img src="./图/img2.png" alt="200"></a><br>
    推荐节目丨《TAImusic》爆笑来袭</li><br>
    <li><a href="https://y.qq.com/"><img src="./图/img3.png" alt="200"></a><br>
        推荐歌单丨继续宠爱张国荣</li><br>
        <li><a href="https://y.qq.com/"><img src="./图/img4.png" alt="200"></a><br>
            推荐活动丨330金属音乐巡演 成都小酒馆音乐空间</li>


</ul>

</body>
</html>

效果展示