精华内容
下载资源
问答
  • 无序列表

    2021-02-07 11:24:38
    无序列表的作用: 给一堆数据添加列表语义,没有顺序之分 格式: <ul> <li>需要显示的条目内容</li> </ul> li是list item的缩写 list:列表 item:条目 结合起来就是列表条目的意思。 ul...

    无序列表的作用:

    给一堆数据添加列表语义,没有顺序之分

    格式:

    <ul>
    	<li>需要显示的条目内容</li>
    </ul>
    

    li是list item的缩写
    list:列表
    item:条目
    结合起来就是列表条目的意思。

    ul和li标签是一个整体,组合,一起出现。ul标签中只会看到li标签。

    应用场景

    • 新闻列表
    • 商品列表
    • 导航条

    练习1

    小技巧

    注释快捷键:

    单行注释:

    Ctrl + / 
    

    或 先按CTRL+K,再按CTRL+U

    取消单行注释:

    Ctrl + /
    

    或 先按CTRL+U,再按CTRL+K

    块注释

    Alt + Shift + A
    
    练习代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>14-无序列表练习</title>
    
    </head>
    
    <body>
        <h1>搜狐热点新闻</h1>
        <hr width="500px" align="left">
        <!-- Ctrl+/ 注释,圆点disc实心,circle空心 -->
        <ul type="circle">
            <li>新闻1</li>
        </ul>
    
    
    </body>
    
    </html>
    
    效果

    在这里插入图片描述

    练习2

    小技巧
    • 按快捷键Alt + B 就可以在默认浏览器下打开你写的页面。
    • 使用快捷键 Shift + Alt + B 可以选择其他浏览器打开

    注意需要安装插件
    在这里插入图片描述
    VSCode常用快捷键

    1) !+enter : 快速生称html代码框架
    
    2) shift+alt+向下的方向键: 向下复制当前行
    
    3) shift+alt+向上的方向键: 向上复制当前行
    
    4) ctrl+S: 保存
    
    5)shift+alt+F: 格式化代码
    
    6) ctrl+F: 查找和替换
    

    直接按!号然后回车就有默认的格式
    在这里插入图片描述

    练习代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>16-无序列表练习2</title>
    
        <h1>四大名著</h1>
        <ul>
            
            <li>
                <h2>《三国演义》</h2>
                <p>具体描述</p>
            </li>
            <li>
                <h2>《红楼梦》</h2>
                <p>具体描述</p>
            </li>
            <li>
                <h2>《水浒传》</h2>
                <p>具体描述</p><!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>16-无序列表练习2</title>
    
        <h1>四大名著</h1>
        <ul>
            
            <li>
                <h2>《三国演义》</h2>
                <p>具体描述</p>
            </li>
            <li>
                <h2>《红楼梦》</h2>
                <p>具体描述</p>
            </li>
            <li>
                <h2>《水浒传》</h2>
                <p>具体描述</p>
            </li>
            <li>
                <h2>《西游记》</h2>
                <p>具体描述</p>
            </li>
            
    
        </ul>
    
    </head>
    </html>
    <!-- ul中只放li标签,但企业开发中li标签中添加其他的标签来丰富界面 -->
            </li>
            <li>
                <h2>《西游记》</h2>
                <p>具体描述</p>
            </li>
            
    
        </ul>
    
    </head>
    </html>
    <!-- ul中只放li标签,但企业开发中li标签中添加其他的标签来丰富界面 -->
    
    效果

    在这里插入图片描述

    练习3

    小技巧
    <!-- ul标签可以有li标签,li中还可以添加ul丰富界面 
    alt+B 直接在默认浏览器上运行
    ul>li含义:生成一对ul标签,然后在这对ul标签中再生成一对li标签
    ul>li*3含义:生成一对ul标签,然后在这对ul标签中再生成3对li标签
    ul>li*3>h2+ul>li*3-->
    
    练习代码
    <!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>17-无序列表练习3</title>
    </head>
    <body>
        <h1>物品清单</h1>
        <ul>
            <li>
                <h2>水果</h2>
                <ul>
                    <li>葡萄</li>
                    <li>橙子</li>
                    <li>苹果</li>
                </ul>
            </li>
            <li>
                <h2>蔬菜</h2>
                <ul>
                    <li>萝卜</li>
                    <li>青菜</li>
                    <li>香菜</li>
                </ul>
            </li>
            <li>
                <h2>零食</h2>
                <ul>
                    <li>辣条</li>
                    <li>腰果</li>
                    <li>瓜子</li>
                </ul>
            </li>
        </ul>
    </body>
    </html>
    
    
    效果

    在这里插入图片描述

    展开全文
  • 此时,没有顺序的文本排列方式称为无序列表无序列表是项目列表,列表内容可以按任意顺序排列。列表项前不是用连续编号而是用一个特定符号来标记,默认是在每一列表项前加上一个圆点。无序列表开始于标签,并且结束...

    在网页中,可以用很多方法来排列文本项目,可以将多种项目没有顺序地排列在一起,也可以给每个项目赋予编号后再进行排列。此时,没有顺序的文本排列方式称为无序列表。

    无序列表是项目列表,列表内容可以按任意顺序排列。列表项前不是用连续编号而是用一个特定符号来标记,默认是在每一列表项前加上一个圆点。无序列表开始于

    • 标签,并且结束于
    。它的列表项封闭在1i>标签对中,显示时列表项前都有项目符号,但是可以使用样式修改。
    • 标签定义无序列表,
    • 标签定义列表项目。语法形式如下:

      <1i>项目名称1i>

    • 项目名称

    <1i>项目名称

    无序列表标签ul

    ul标签用于设置无序列表,在每个列表项目文字之前,以项目符号作为每条列表项的前缀,各个列表没有级别之分。其中,

    • 表示无序列表的开始,
    表示无序列表的结束;表示一个列表项的开始,表示一个列表项的结束。

    无序列表的项目符号

    无序列表的项目符号,默认情况下是“.”,而通过ul标签的type属性可以改变无序列表的项目符号,避免项目符号的单调,语法格式如下:

    <1i>项目名称1i>

    项目名称

    <1i>项目名称

    其中,type属性值决定了列表项目的符号。当type属性值为disc时,项目符号为“.”;当type属性值为circle时,项目符号为“。”;当type属性值为square时,项目符号为“-”。

    无序列表去掉点

    无序列表怎么去掉点呢?可以在相关的页面找到head部分写入,给li加上list-style-type:none这个样式就可以了消除黑点。

    在制作网页时,如果需要把各个项目美观地排列在一起,建议用户使用无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代,也可以在CSS样式表中定义样式来去掉无序列表中的点。

    使用无序列表标签ul的type属性(使用CSS的list-style来代替),用户可以指定出现在列表项前的项目符号的样式,其取值以及相应的符号样式如下:

    disc:指定项目符号为一个实心圆点(默认值是disc,是否使用该值在浏览器中效果都一样);

    circle:指定项目符号为一个空心圆点;

    square:指定项目符号为一个实心方块;

    none:无项目符号。

    无序列表在展示相关内容时会达到最佳效果。其中的每一项都应该有同等的重要性。可能的话,让每一项的长度保持接近,就不会有明显的主次之分。保持统一的外观能让眼睛更舒适,使列表显得不那么杂乱。

    展开全文
  • 用于组织数据的列表学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。...在后面的CSS样式学习中将大量使用到列表元素的高级作用。...具体结构如图4.17所示。4.4.2 制作无序列表顾名思...

    用于组织数据的列表

    学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

    4.4.1  列表的结构组成

    HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由

    组成。具体结构如图4.17所示。

    4.4.2  制作无序列表

    顾名思义,无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表,其列表标签采用

    • 列表项一
    • 列表项二
    • 列表项三
    • 列表项四
    • 列表项五

     4.4.3  制作有序列表

    顾名思义,有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号,如1、2、3或a、b、c等。在D:\web\目录下创建网页文件,命名为ul_ol.htm,编写代码如代码4.17所示。

    代码4.17  列表的设置:ul_ol.htm

    列表的设置

    网页前台技术

    • HTML
    • CSS
    • JavaScript
    • FLASH

    网页后台的学习

    1. ASP
    2. ASP.net
    3. PHP
    4. CGI
    5. Ruby
    6. Python

    在浏览器地址栏输入http://localhost/ul_ol.htm,浏览效果如图4.18所示。

    图4.18  列表的设置

    展开全文
  • 有序列表、无序列表、定义列表 三种列表标签和语义 标签 语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></d1> 定义列表 无序列表 无序列表顾名思义就是“没有...

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

    三种列表标签和语义

    标签 语义
    <u1></u1> 无序列表
    <o1></o1> 有序列表
    <d1></d1> 定义列表

    无序列表

    无序列表顾名思义就是“没有可以顺序的”列表。它使用<u1></u1>标签,ul是英文unordered list(无序列表)的简写,而在<u1></u1>标签里面,每一个列表项都是<li></li>标签,li是英文list item(列表项)的简写。

    无序列表特点

    1、<ul>标签和<li>标签是一对父子组合标签,二者都不可单独使用。

    2、<ul>的子标签只能是<li>标签,其他任何标签都不行。

    3、<li>标签只能放到<ul>或者<ol>标签中。

    4、<li>标签是容器,它的内部可以放任何标签。如下面这段代码:

    <body>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>
                橘子
                <p>橘子又便宜又好吃</p>
            </li>
        </ul>
    </body>

    可以看到<li>标签里面是可以放其他标签的,比如<p>标签,网页效果如下:

    在这里插入图片描述

    列表的嵌套

    因为<li>标签中可以放任何标签,因此可以在列表中在嵌套列表,但仍需要遵守上面的几点规则,如下面这段代码:

    <body>
        <ul>
            <li>
                <h2>长沙市</h2>
                <ul>
                    <li>雨花区</li>
                    <li>芙蓉区</li>
                    <li>天心区</li>
                </ul>            
            </li>
            <li>
                <h2>岳阳市</h2>
                <ul>
                    <li>君山区</li>
                    <li>岳阳县</li>
                    <li>岳阳楼区</li>
                </ul>
            </li>
            </li>
        </ul>
    </body>

    在这段代码中,可以看到,<ul>标签和<li>标签还是成对出现的,<ul>的子标签还是<li>标签,网页效果如下:

    在这里插入图片描述

    无序列表的tpye属性

    无序列表是有type属性的,用来定义前导符号的样式。

    描述
    disc 默认值,实心圆
    circle 空心圆
    square 实心方块

    但在HTML5中基本已经不用的,用css代替。

    有序列表

    它使用<o1></o1>标签,ol是英文ordered list(无序列表)的简写,而在<o1></o1>标签里面,每一个列表项都是<li></li>标签,li是英文list item(列表项)的简写。因此有序列表特点跟无序列表差不多。

    <o1>标签的type属性

    <o1>标签可以设置type属性的,用来设置编号的类型。

    意义
    a 表示小写英文字母编号
    A 表示大写英文字母编号
    i 表示小写罗马数字编号
    I 表示大写罗马数字编号
    1 表示数字编号(默认)

    这个看值就很容易理解其意义。

    <o1>标签的start属性

    start属性值必须是一个整数且必须为阿拉伯数字,是用来指定列表标号的起始值。

    <body>
        <h1>城市名称</h1>
        <ol type="A" start="3">
            <li>北京</li>
            <li>上海</li>
            <li>杭州</li>
            <li>深圳</li>
            <li>天津</li>
        </ol>
    </body>

    在这里插入图片描述

    可以看到城市名称按照大写英文字母编号,且从第三个字母开始。

    <o1>标签的reversed属性

    reversed属性指定列表中的条目是否是倒叙排列,该属性不需要值。

    定义列表

    需要逐条给出定义描述的列表就是定义列表。示例代码如下:

    <body>
        <dl>
            <dt>无序列表</dt>
            <dd>“没有可以顺序的”列表,列表项包含在&lt;li>&lt;/li>标签对中,无序列表以&lt;ul>&lt;/ul>定义,项目前有符号缩进</dd>
            <dt>有序列表</dt>
            <dd>列表项包含在&lt;li>&lt;/li>标签对中,有序列表以&lt;ol>&lt;/ol>定义,项目前有数字或者字母缩进</dd>
            <dt>定义列表</dt>
            <dd>需要逐条给出定义描述的列表</dd>
        </dl>
    </body>

    <dl>标签是英文definition list(定义列表)的简写,<dt>标签是英文data term(数据项)的简写,<dd>标签是英文data definition(数据定义)的简写。

    <dt>标签和<dd>标签出现在<dl>定义列表标签中,可以交替出现,也可以不交替出现,而是分别出现在不同的定义列表中。

    我们在使用定义列表时应该看语义,而不是看样式,只要语义上有’'解释说明“含义的文字,且为列表形态,就应该使用定义列表。

    展开全文
  • html5有序列表无序列表自定义列表

    千次阅读 2020-09-06 20:03:45
    1.无序列表 无序列表代码如下 <h2>1.无序列表</h2> <p>你喜欢的水果有哪些</p> <ul> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> <li&...
  • ul标签用来创建一个无序列表 <ul></ul> li标签用于向无序列表里面添加内容 <ul> <li>李老</li> <li>李王</li> <li>李刘</li> <li>李哥</...
  • 有序列表和无序列表的网页HTML代码讲解本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。用于组织...
  • 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript...
  • 用于组织数据的列表 ...在后面的CSS样式学习中将大量使用到列表元素的高级作用。  4.4.1 列表的结构组成 ...大部分网页应用中的列表均采用无序列表,其列表标签采用<ul></ul>,编写方法如下:  <li
  • HTML 无序列表

    2020-03-04 18:07:07
    无序列表 < ul>标签表示HTML面中项目的无序列表, 一般会以项目符号呈现列表项,而列表项使用< li>标签定义。 无序列表的基本语法格式如下: <ul> <li>列表项1</1i> <1i>列表...
  • 下面小编就为大家带来一篇浅谈html有序列表、无序列表与定义列表。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 5.3 无序列表

    2018-03-10 13:37:29
    一、无序列表简介 默认情况下,无序列表的项目符号是●,不过可以通过无序列表type属性来改变无序列表的列表项符号。 &lt;ul&gt; &lt;li&gt;无序列表项&lt;/li&gt; &lt;li&gt;...
  • js无序列表

    2015-02-15 21:55:16
    使用js实现无序列表,适合每一位初学者的小例子。
  • 1、修改wangeditor编辑器的无序列表与有序列表为单独一个无序列表 2、解决了wangeditor编辑器点击无法撤销问题 (找到源码wangEditor.js 中列表设置的源码位置,挺容易找的) 1、注释改部分代码   2、把this...
  • 介绍链表前我们先了解下什么是列表。在对基本数据结构的讨论中,我们使用 Python 列表来实现所呈现的抽象数据类型。...更具体地,我们将这种类型的列表称为无序列表。我们可以将列表视为具有第一项,第二项,第三...
  • 测试无序列表

    2018-01-03 15:48:39
    我这里再测试一下无序列表 开始 结束 然后 最终没有了 就是这样子 如果不是语法的呢? 列表1 列表2 如果是有序列表呢? 测试1 测试2 测试3 结束了 over
  • 1. 列表总结 标签名 ...无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下: <ul> <li>列表项1</li> <li>列表项2</li> <li>列

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,655
精华内容 5,862
关键字:

无序列表