链接、图像、列表、计数器

最新推荐文章于 2024-06-14 08:20:46 发布

薯片

最新推荐文章于 2024-06-14 08:20:46 发布

阅读量194

点赞数

分类专栏： HTML与CSS基础知识文章标签： html

本文链接：https://blog.csdn.net/weixin_52102646/article/details/114495800

版权

HTML与CSS基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

你好！这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。

链接和图像

链接

链接元素

释

HTML <a>元素用来定义HTML页面中的超链接，超链接可以创建跳转到其他HTML页面、文件，同一HTML页面内的另一个指定位置、电子邮件地址或任何其他URL的超链接。

使用<a>元素时，需要设置href属性，该属性的作用是用来设置跳转到指定HTML页面或其他链接的地址。
如果使用<a>元素时没有设置href属性的话，那么<a>元素将是无效的

具体语法如下：

<a>这是一个没有设置href属性的a元素</a>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接元素</title>
</head>
<body>
    <!--
        <a>元素：链接元素
        *属性
         *href:设置要跳转的HTML页面的路径（绝对路径和相对路径）
        *默认样式
         *字体颜色是蓝色
         *文字具有下划线效果
         *鼠标悬停在链接文字上时，鼠标样式改变
        *默认跳转方式：在当前页面进行跳转
    -->
    <a href="演示页面.html">演示页面</a>
    <!--<a>元素没有设置href属性的话，显示效果就是普通文本（不在是链接）
        *如果你确实要使用链接，href属性是不能省略的
        *将href属性的值设置为“#”，称为伪链接    
    -->
    <a>演示页面</a>
    <!--
        target属性：设置链接的跳转方式
        * _self:默认值，表示在当前窗口进行跳转
        * _blank：表示在新窗口/页签跳转
        在老版本浏览器中存在的值（都是以窗口方式打开页面）
        * _parent:表示在父级窗口打开新页面
        * _top:表示在顶级窗口打开新页面
    -->
    <a target="_blank：表示在新窗口" href="演示页面.html">演示页面</a>
</body>
</html>

Email链接

释：

在<a>元素的href属性值中增加mailTo:前缀即可，即格式为 mailTo:+Email地址

具体语法如下：

<a target="_blank" href="mailto:front-end@example.com">联系我们</a>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email链接</title>
</head>
<body>
    <!--
        <a>元素可以作为一个Email链接
        *href属性值的格式：mailTo:Email地址
        *默认样式和普通的链接是一致的
        *当点击链接时，自动打开你操作系统中的邮件软件到发邮件的界面
         *前提：你的操作系统必须要安装邮件软件
        *应用场景：官网底部的信息部分，存在"联系我们"
    -->
    <a href="mailto:501636356@qq.com">联系我们</a>
</body>
</html>

锚点

释：

HTML <a>元素的href属性与当前HTML页面中其他元素的id属性值配合使用，可以实现锚点功能，该功能常出现展示文档的网站或者电商网站的楼层效果
    
所谓锚点，就是指当点击链接文本时，跳转到当前页面的指定元素位置，想要实现这种锚点功能只需要在<a>元素的href属性值设置为 #ID属性值 的格式即可

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
</head>
<body>
    <!--
     HTML页面中的锚点：通过一个超链接指向当前HTML页面中的某个位置
     1.在<a>元素的href属性值的格式：#ID属性值（某个元素的）
     2.在指定的元素中设置ID属性值，与<a>元素的href属性值中的ID属性值保持一致
     当点击锚点时，页面自动的跳转到当前页面中对应的元素显示位置
     *当前HTML页面的地址发生变化：增加<a>元素的href属性值
    -->
    <a href="#first">第一章</a>
    <a href="#second">第二章</a>
    <br>
    <br>
    <br>
    <a id="first">第一章</a>
    <a id="second">第二章</a>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部</title>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <span id="top">顶部</span>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a href="#top">回到顶部</a>
</body>
</html>

下载功能

释：

在HTML5版本中为<a>元素新增了download属性，该属性用于设置下载文件的URL，用户点击链接时，浏览器会提示用户
将其保存到本地

具体语法如下：

<a href="files/fonts.zip" download="font.zip">下载文件</a>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载功能</title>
</head>
<body>
    <!--
        <a>元素实现下载功能
        *href属性：设置下载文件的路径
          *浏览器提供的功能：
            *如果能在浏览器中显示的，直接显示
            *如果不能在浏览器中显示的，提供下载
        *download属性：设置下载文件的路径：
         *不能单独使用：<a>元素如果不设置href属性的话，不是一个链接
         *浏览器会优先选择浏览器所支持的方式
         *单纯提供下载功能
    -->
    <!--<a href="CSS和HTML\05 链接和图像\链接\ml.zip" download="ml.zip">文件下载</a>
    -->
    <!--<a href=微信图片_20201210184806.jpg>图片</a>-->
    <a href=微信图片_20201210184806.jpg download="CSS和HTML\05 链接和图像\链接\微信图片_20201210184806.jpg">图片</a>
</body>
</html>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像链接</title>
    <style>
        a img{
            width: 1000px;
            height: auto;
        }
    </style>
</head>
<body>
    <a href="D:\作业\task\CSS和HTML\05 链接和图像\演示页面.html">
        <img src="D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg" >
    </a>
</body>
</html>

伪类选择器

动态伪类选择器

分类：

伪类选择器	类型	描述
e:link	链接锚点伪类选择器	匹配的e元素，定义了超链接并且未被访问过
e:visited	链接锚点伪类选择器	匹配的e元素，定义了超链接并且已被访问过
e;active	用户行为伪类选择器	匹配的e元素，定义了超链接并且被激活
e:hover	用户行为伪类选择器	匹配的e元素，定义了超链接并且用户鼠标悬停在链接文本内容
e:focus	用户行为伪类选择器	匹配的e元素，定义了超链接并且获得焦点

具体语法如下：

a:link{ color:blue}/*未访问的链接*/
a:visited{ color:pink}/*已访问的链接*/
a:hover{ color:green}/*鼠标移动到链接上*/
a:active{ color:yellow}/*选定的链接*/

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态伪类选择器</title>
    <style>
        /*表示链接未被访问的样式*/
        a:link{
            color: brown;
        }
        /*表示链接已被访问的样式*/
        a:visited{
            color: cyan;
        }
        /*表示鼠标悬停的样式*/
        a:hover{
            color: darkorange;
        }
        /*<a>元素一般配合:active伪类使用，而不是:focus伪类*/
        /*元素被激活时的样式*/
        a:active{
            color: cornflowerblue;
        }
        /*为<a>元素设置：focus的样式会覆盖:active的样式*/
        a:focus{
            color: darkslategrey;
        }
        /*动态伪类可以和HTML任何元素配合使用*/
        h1:hover{
            color: dodgerblue;
        }
        /*
         :focus获取焦点时的样式
         :focus伪类和<input>元素配合使用，效果明显
         */
        input:focus{
            color: indigo;
        }
    </style>
</head>
<body>
    <a href="演示页面.html">演示页面</a>
    <h1>动态伪类选择器</h1>
    <input type="text">
</body>
</html>

目标伪类选择器

释：

目标伪类选择器指的是CSS中的:target伪类选择器，该伪类选择器用来设置<a>元素锚点功能中的目标元素的样式

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标伪类选择器</title>
    <style>
        p:target{
            background-color: indigo;
        }
        /*在目标元素中增加一个伪类元素*/
        p:target::before{
            font: 70% sans-serif;
            content: "✔💕";
            color: khaki;
            margin-right: .25em;
        }
        /*在目标元素中使用italic样式*/
        p:target i {
            color: lightcoral;
        }
    </style>
</head>
<body>
    <h3>Table of Content</h3>
    <ol>
        <li><a href="#p1">Jump to the first paragraph!</a></li>
        <li><a href="#p2">Jump to the second paragraph!</a></li>
        <li><a href="#nowhere">This link goes nowhere,
            because the target doesn"t exist.</a></li>
    </ol>

    <h3>My Fun Artical</h3>
    <p id="p1">You can target <i>this paragraph</i> using a URL fragment.Click on the 
    link above to try out!</p>
    <p id="p2">This is <i>another paragraph</i>, also accessible 
    from the links above.Isn"t that delightful?</p>
</body>
</html>

图像

图像元素

释：

HTML <img>元素在HTML页面中表示一个图像，用来引入HTML页面外部的一张图片，该元素是一个空元素
图片都属于页面的外部资源，外部资源过多时，会导致页面加载速度变慢，影响性能

具体语法如下：

<img src=".files/HTML.jpg" alt="HTML5">

img属性：

src属性：必选项
alt属性：可选项

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像元素</title>
</head>
<body>
    <!--
        <input>元素：在HTML页面中显示一张图片
        *属性
         *src：设置图片的路径
         *alt：设置当鼠标悬停图片上时显示的信息
        *默认样式：显示图片原大小
    -->
    <!--<img src="D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg" alt="风景">
    -->
    <!--
        <input>元素可以设置显示的大小
        *（已废弃）元素的属性：
         *width:表示宽度
         *height:表示高度
        *CSS样式属性：
         *width:表示宽度
         *height:表示高度
        *注意：设置图片显示的大小时，一定要注意图片的高宽比
         *只设置高度或宽度
         *只设置宽度或高度的值，另一个属性的值设置为auto
    -->
    <!--<img width="800px" height="500px"
    src="D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg" alt="风景">
    -->
    <!--<img style="width: 800px;height: 450px;" 
    src="D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg" alt="风景">
    -->
    <img style="width: 800px;height: auto;" 
    src="D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg" alt="风景">
</body>
</html>

背景图像

CSS中有关background的属性：

background-image属性
background-repeat属性
background-position属性
background-size属性
background-attachment属性

background-image属性

设置一张背景图像
属性值为：

none:该关键字表示没有背景图像
url(path)函数:用来引入要显示的背景图像的路径

具体语法如下：

body{
	background-image:url("files/HTML5.jpg");
}

background-repeat属性

background-repeat属性：设置背景图片的平铺方式

repeat：默认值，背景图片默认会铺满整个元素区域
no-repat:背景图片水平方向和垂直方向都不重复
repeat-x:背景图片在水平方式重复
repeat-y:背景图片在垂直方式重复

background-position属性

属性值：

关键字：center,left,right,top,bottom
长度值
百分比值

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像</title>
    <style>
        body{
            /*设置背景图像*/
            background-image: url("D:\作业\task\CSS和HTML\05 链接和图像\图像\了.jpg");
            /*
             background-repeat属性：设置背景图片的平铺方式
             * repeat：默认值，背景图片默认会铺满整个元素区域
             * no-repat:背景图片水平方向和垂直方向都不重复
             * repeat-x:背景图片在水平方式重复
             * repeat-y:背景图片在垂直方式重复
            */
            background-repeat: no-repeat;
            /*
             background-size属性：设置背景图像的显示大小
             *如果是两个值的话：1.宽度；2.高度
            */
            background-size: 800px auto;
            /*
             background-position属性：设置背景图像的显示位置
             *垂直方向的top、center和bottom是指背景图片的位置
            */
            background-position: center top;
        }
    </style>
</head>
<body>
    
</body>
</html>

background-size属性

CSS background-size属性用来设置背景图像在HTML页面中的显示大小

属性值为：

cover：缩放背景图像以完全覆盖背景区，可能部分背景图像部分看不见
contain：缩放背景图像以完全装入背景区，可能背景区部分空白
一个值：表示设置背景图像的宽度为这个值，而高度值为auto
两个值：第一个值表示设置背景图像的宽度，第二个值表示设置背景图像的效果

background-attachment属性

设置背景图像的位置是在视口内固定的，还是跟随所在的元素区域滚动

属性值：

fixed:表示背景图像相对于视口固定
local:表示背景图像相对于元素的内容固定
scroll:表示背景图像相对于元素本身固定，而不是随着元素的内容滚动，但对元素边框是有效的

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景关联</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid blueviolet;

            background-image: url("D:\作业\task\CSS和HTML\05 链接和图像\图像\8504219.jpg");
            background-size: 300px auto;
            background-repeat: no-repeat;
            /*background-position: center top;*/

            overflow: scroll;
            /*
             background-attachment属性:设置背景图像是否滚动
             *fixed：表示背景图像相对于浏览器窗口是固定的
             *local：表示背景图像相对于内容是固定的，跟随内容一起滚动
             *scroll：表示背景图像相对于元素本身是固定的，跟随元素一起滚动
            */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>nsxkl sxkmxl akdjel xdcmlsxk dckxsl dkxsse rufhcdn dcjke jhebde edjdknedj ejdekdkjed ejkdkebdkejdnejkdbejkdbejkd ejdnejkfnefiudnwiudb wkjsnwkjsw wjksnwjksnwkns
        whsjkwnkjsw sjknwjksnkjedc wkdwdwd wksmqlkwsnkjsw swkjdmlk dewlsnwjhdeirf rcuifnedbied eiudenbfnfrfnekjfbe 3ej d3jem jcnvrovr gtbcnxow ecjknmde rrvjnorindfoir fjkfnoowkpsoj
        bxjkxunizxbiudwsxwsu cexwdd gtgt bgtfr sjskn wio rfue fdjcn djsdbdx</p>
        <p>nsxkl sxkmxl akdjel xdcmlsxk dckxsl dkxsse rufhcdn dcjke jhebde edjdknedj ejdekdkjed ejkdkebdkejdnejkdbejkdbejkd ejdnejkfnefiudnwiudb wkjsnwkjsw wjksnwjksnwkns
        whsjkwnkjsw sjknwjksnkjedc wkdwdwd wksmqlkwsnkjsw swkjdmlk dewlsnwjhdeirf rcuifnedbied eiudenbfnfrfnekjfbe 3ej d3jem jcnvrovr gtbcnxow ecjknmde rrvjnorindfoir fjkfnoowkpsoj
        bxjkxunizxbiudwsxwsu cexwdd gtgt bgtfr sjskn wio rfue fdjcn djsdbdx</p>
        <p>nsxkl sxkmxl akdjel xdcmlsxk dckxsl dkxsse rufhcdn dcjke jhebde edjdknedj ejdekdkjed ejkdkebdkejdnejkdbejkdbejkd ejdnejkfnefiudnwiudb wkjsnwkjsw wjksnwjksnwkns
        whsjkwnkjsw sjknwjksnkjedc wkdwdwd wksmqlkwsnkjsw swkjdmlk dewlsnwjhdeirf rcuifnedbied eiudenbfnfrfnekjfbe 3ej d3jem jcnvrovr gtbcnxow ecjknmde rrvjnorindfoir fjkfnoowkpsoj
        bxjkxunizxbiudwsxwsu cexwdd gtgt bgtfr sjskn wio rfue fdjcn djsdbdx</p>
        <p>nsxkl sxkmxl akdjel xdcmlsxk dckxsl dkxsse rufhcdn dcjke jhebde edjdknedj ejdekdkjed ejkdkebdkejdnejkdbejkdbejkd ejdnejkfnefiudnwiudb wkjsnwkjsw wjksnwjksnwkns
        whsjkwnkjsw sjknwjksnkjedc wkdwdwd wksmqlkwsnkjsw swkjdmlk dewlsnwjhdeirf rcuifnedbied eiudenbfnfrfnekjfbe 3ej d3jem jcnvrovr gtbcnxow ecjknmde rrvjnorindfoir fjkfnoowkpsoj
        bxjkxunizxbiudwsxwsu cexwdd gtgt bgtfr sjskn wio rfue fdjcn djsdbdx</p>
        <p>nsxkl sxkmxl akdjel xdcmlsxk dckxsl dkxsse rufhcdn dcjke jhebde edjdknedj ejdekdkjed ejkdkebdkejdnejkdbejkdbejkd ejdnejkfnefiudnwiudb wkjsnwkjsw wjksnwjksnwkns
        whsjkwnkjsw sjknwjksnkjedc wkdwdwd wksmqlkwsnkjsw swkjdmlk dewlsnwjhdeirf rcuifnedbied eiudenbfnfrfnekjfbe 3ej d3jem jcnvrovr gtbcnxow ecjknmde rrvjnorindfoir fjkfnoowkpsoj
        bxjkxunizxbiudwsxwsu cexwdd gtgt bgtfr sjskn wio rfue fdjcn djsdbdx</p>
    </div>
</body>
</html>

精灵图（雪碧图）

只显示精灵图中的某个指定小图标,运用background-position设置位置

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        body{
            background-color: rgb(253, 250, 250);
        }
        .tuzi{
            /*<div>元素默认情况下，高度为0*/
            width: 100px;
            height: 100px;
            /*通过background使用雪碧图
             1.background-image属性引入雪碧图
               background-repeat:no-repeat; - 将雪碧图设置为不重复
             2.background-position属性：设置雪碧图的位置
              *水平方向：
                a.如果向左移动，值为负值
                b.如果向右移动，值为正值
                c.值如果为零，表示不移动
              *垂直方向：
                a.如果向上移动，值为负值
                b.如果向下移动，值为正值
                c.值如果为零，表示不移动
            */
            background-image: url("image/1.jpg");
            background-repeat: no-repeat;
            background-position: -55px -55px;
        }
    </style>
</head>
<body>
    <!--
        雪碧图：
        1.将多张图片资源整合成一张图片资源->图片的处理
        2.在HTML页面中如何使用雪碧图->通过CSS的background属性实现
    -->
    <div class="tuzi"></div>
</body>
</html>

列表

列表元素

什么是列表元素

填写文档时经常会使用列表方式呈现一系列平行的内容，在HTML页面中同样通过了列表元素来完成类似的功能

分为：

有序列表
无序列表
定义列表

有序列表和无序列表的默认效果：

background-image属性
background-repeat属性
background-position属性
background-size属性
background-attachment属性

有序列表

释：

HTML <ol>元素表示有序列表，默认情况下使用数字作为列表编号，而<li>元素则表示列表项，定义在有序列表中

具体语法如下：

<ol>
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
</ol>

注意：

<ol>元素默认使用数字作为编号，可以通过type属性进行修改，该属性的值具有5种类型：

“a”：表示小写字母编号
“A”：表示大写字母编号
“i”：表示小写罗马数字编号
“I”：表示大写罗马数字编号
“1”：默认值，表示数字编号

type

属性的值默认情况下会作用到整个有序列表。说明：type属性在HTML4版本中被弃用，但在HTML5版本中被重新引入，如果不是为了元素的语义化，该属性可以使用CSS中的list-style-type属性进行替代

reversed

布尔型，设置列表采取倒叙的方式（注意：该属性只需要定义属性名即可，不用设置属性值）

具体语法如下：

<ol reversed>
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
</ol>

start

整数值，设置列表序号开始的值。

value

整数值，设置当前列表项在有序列表的序号

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <!--<ol>元素：表示有序列表
        *默认的编号    
    -->
    <ol>
        <!--<li>元素：表示列表项-->
        <li>芒果</li>
        <li>草莓</li>
        <li>橘子</li>
    </ol>
    <!--type属性：设置有序列表的编号形式-->
    <ol type="I">
        <li>芒果</li>
        <li>草莓</li>
        <li>橘子</li>
        <li>榴莲</li>
        <li>桃子</li>
    </ol>
    <!--reversed属性：（HTML5新增）设置列表项编号为倒叙，只需要设置属性名称即可-->
    <ol reversed>
        <li>芒果</li>
        <li>草莓</li>
        <li>橘子</li>
        <li>榴莲</li>
        <li>桃子</li>
    </ol>
    <!--start属性：整数值，设置列表项的编号是从几开始-->
    <ol start="5" type="a">
        <li>芒果</li>
        <li>草莓</li>
        <li>橘子</li>
        <li>榴莲</li>
        <li>桃子</li>
    </ol>
    <ol>
        <li>芒果</li>
        <!--type属性：设置当前列表项的编号形式-->
        <li type="a">草莓</li>
        <!--value属性：设置当前列表项的编号值-->
        <li value="5">橘子</li>
        <li>榴莲</li>
        <li>桃子</li>
    </ol>
</body>
</html>

无序列表

释：

HTML <ul>元素表示无序列表(unorder-list)，默认情况下使用disc作为列表编号，而<li>元素则表示列表项，定义在无序列表中

具体语法如下：

<ul>
    <li>iPhone手机</li>
    <li>小米手机</li>
    <li>华为手机</li>
</ul>

属性值：

disc：默认值，表示实心圆
circle：表示空心圆
square：表示实心方块

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <!--<ul>元素：表示无序列表-->
    <ul>
        <li>小米手机</li>
        <li>iPhone手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
    <!--type属性：设置列表项的符号-->
    <ul type="circle">
        <li>小米手机</li>
        <li>iPhone手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
</body>
</html>

列表的嵌套

有序列表嵌套有序列表：

<ol>
    <li>iPhone
        <ol>
            <li>iphone 5</li>
            <li>iphone 6</li>
            <li>iphone 7</li>
        </ol>
    </li>
    <li>小米手机</li>
    <li>华为手机</li>
</ol>

定义列表

HTML

元素在HTML4版本中称为定义列表，在HTML5版本中称为描述列表。该元素是一个包含术语定义及描述的列表，其中术语定义使用的是元素，描述使用的是

元素，该元素通常应用于例如词汇表，键值对列表等

具体语法如下：

<dl>
    <dt>爱好</dt>
    	<dd>干饭</dd>
    	<dd>干饭</dd>
    	<dd>干饭</dd>
    <dt>职业</dt>
    	<dd>程序员</dd>
    	<dd>程序员</dd>
    	<dd>程序员</dd>
</dl>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>
<body>
    <!--<dl>元素：表示定义列表-->
    <dl>
        <!--<dt>元素：表示术语定义-->
        <dt>爱好</dt>
            <!--<dd>元素：表示术语描述-->
        <dd>干饭</dd>
        <dd>干饭</dd>
        <dd>干饭</dd>
        <dt>职业</dt>
        <dd>程序员</dd>
        <dd>程序员</dd>
        <dd>程序员</dd>
    </dl>
</body>
</html>

列表样式

什么是列表样式

列表样式主要是针对HTML页面中的列表元CSS所提供的样式。

list-style分为以下属性：

list-style-type属性
list-style-image属性
list-style-position属性

项目符号样式

list-style-type属性

用来设置列表元素的项目符号

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目符号</title>
    <style>
        ol{
            list-style-type: decimal-leading-zero;
        }
        ul{
            list-style-type: circle;
        }
    </style>
</head>
<body>
    <ol>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
    <ul>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
</body>
</html>

list-style-image属性

用来设置某个图像为列表元素的项目符号

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目符号图像</title>
    <style>
        ol{
            list-style-image: url("1.png");
        }
        ul{
            list-style-image: url("1.png");
        }
    </style>
</head>
<body>
    <!--
        如果通过list-style-image CSS属性引入项目符号图像 ->
        有序列表和无序列表的样式一致
        如何选择使用HTML元素呢？->看元素的语义化
    -->
    <ol>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
    <ul>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
</body>
</html>

list-style-position属性

用来设置列表元素的项目符号的位置

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目符号图像</title>
    <style>
        ol{
            list-style-position: inside;
        }
        ul{
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <ol>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
    <ul>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
</body>
</html>

CSS list-style属性是一个简写属性

具体语法如下：

ul{
	list-style:url("files/1.jpg") outside;
}

去掉项目符号

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目符号</title>
    <style>
        ol,ul{
            /*
             list-style:none;或者list-style-type:none;
             *都是可以去掉项目符号
             *项目符号所在区域依旧显示在HTML页面中
            */
            list-style: none;
            /*margin属性去掉列表上下的空白区域*/
            margin: 0px;
            /*padding属性去掉列表中项目符号所在的区域*/
            padding: 0px;
        }
    </style>
</head>
<body>
    <ol>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
    <ul>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ul>
</body>
</html>

计数器

什么是计数器

CSS中的计数器本质上来说就是由CSS维护的变量，计数器的值可以通过CSS规则递增来跟踪计数器的使用次数

有序列表是一个简单的计数器，计数器可以实现编号更复杂的情况

counter-reset属性

CSS counter-reset属性用来将计数器重置为给定的值

属性值分为：

要重置为计数器的名称
要在元素每次出现时将计数器重置为的值
none：不执行计数器复位

counter-increment属性

CSS counter-increment属性用来设置计数器每次增加的值

属性值为：

要增加为计数器的名称
要在元素每次出现时将计数器增加为的值
none：任何计数器都不能递增

counter()函数

CSS counter()函数用来简单的将计数器的内容显示在HTML页面中，counter()函数返回一个字符串

具体语法如下：

conter(custom-ident,counter-style)

custom-ident参数：表示计数器的名称
counter-style参数：表示显示样式

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <style>
        /*
         1.用来设置CSS的计数器
         *counter-reset属性：重置计数器的指定值
         *counter-increment属性：设置计数器每次累加的值
         2.用来显示CSS的计数器
            *counter()函数
            *counters()函数
        */
        ol{
            list-style: none;
            /*值->计数器的名称（自定义）*/
            counter-reset: counterList;
            padding: 0;
            margin: 0;
        }
        ol li{
            counter-increment: counterList;
        }
        /*ol li::before{
            content: counter(counterList)".";
        }*/
        ol li::before{
            content: "第"counter(counterList)"章.";
        }
    </style>
</head>
<body>
    <ol>
        <li>小米手机</li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
</body>
</html>

counters()函数

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套计数器</title>
    <style>
        ol{
            list-style: none;
            counter-reset: counterList;
            /*padding: 0;*/
            margin: 0;
        }
        ol li{
            counter-increment: counterList;
        }
        ol li::before{
            /*2.使用counters()函数设置嵌套的项目符号*/
            content: counters(counterList,".")" ";
        }
    </style>
</head>
<body>
    <!--1.HTML列表结构是嵌套结构-->
    <ol>
        <li>小米手机
            <ol>
                <li>小米
                    <ol>
                        <li>小米手机1</li>
                        <li>小米手机2</li>
                        <li>小米手机3</li>
                    </ol>
                </li>
                <li>红米
                    <ol>
                        <li>红米1</li>
                        <li>红米2</li>
                        <li>红米3</li>
                    </ol>
                </li>
                <li>米家
                    <ol>
                        <li>米家1</li>
                        <li>米家2</li>
                        <li>米家3</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>华为手机</li>
        <li>魅族手机</li>
    </ol>
</body>
</html>

薯片

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
链接、图像、列表、计数器

CSS与HTML的基础知识（四）链接和图像链接链接元素Email链接锚点下载功能伪类选择器动态伪类选择器目标伪类选择器图像图像元素背景图像background-image属性background-repeat属性background-position属性background-size属性background-attachment属性精灵图（雪碧图）列表列表元素什么是列表元素有序列表typereversedstartvalue无序列表列表的嵌套定义列表列表样式什么是列表样式项目符号样式list-style-t
复制链接

扫一扫