首页 > 其他分享 >HTML5有序无序标签

HTML5有序无序标签

时间:2023-09-08 16:26:49浏览次数:33  
标签:有序 55 标签 无序 HTML5 66 快捷方式

标签分为有序标签和无序标签,有序标签为<ol><li>,无序标签分为<ul><li>

有序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>第一</li>
        <li>第二</li>
    </ol>                   <!--有序列表标签-->
    <ol type="A">           <!--type属性 更改标签序号 有五种格式-->
        <li>
            777
        </li>
        <li>666</li>
    </ol>
    <ol type="I">
        <li>水果
            <ol>
                <li>
                    苹果
                </li>
                <li>
                    香蕉
                </li>
            </ol>
        </li>
    </ol>                   <!--有序标签之间的相互嵌套-->
</body>
</html>

有序标签可以通过利用type属性改变序号样式,快捷方式为ol>li*i,其中i为所需要的标签数

无序便签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>            <!--默认-->
        <li>
            11
        </li>
        <li>22</li>

    </ul>           <!--空心-->
    <ul type="circle">
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="square">      <!--方块-->
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="none">      <!--无-->
        <li>55</li>
        <li>66</li>
    </ul>
    <ul type="square">      <!--方块-->
        <li>55
            <ul>
                <li>77</li>
            </ul>
        </li>
        <li>66
            <ol>
                <li>99</li>
            </ol>
        </li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>           <!--ul>li*3  快捷方式-->
</body>
</html>

无序标签与有序标签类似,都可通过type属性改变标签样式,快捷方式为ul>li*i;

标签之间可以相互嵌套。

标签:有序,55,标签,无序,HTML5,66,快捷方式
From: https://www.cnblogs.com/songs7/p/17687859.html

相关文章

  • Web阶段:第十四章:JSTL标签库
    JSTL标签库JSTL标签库全称是指JSPStandardTagLibraryJSP标准标签库。是一个不断完善的开放源代码的JSP标签库。EL表达式主要是为了替换jsp中的表达式脚本,而标签库则是为了替换代码脚本。这样使得整个jsp页面变得更佳简洁。JSTL由五个不同功能的标签库组成。功能范围URI......
  • git操作修改历史版本tag标签的代码,并发布新标签
    场景:当项目已经迭代多个版本之后,突然发现旧版本1.0.1出现了紧急bug,需要及时处理;如果直接用新版本替换上去是存在极大隐患的,且时间来不及;所以需要直接在1.0.1版本的基础上去修复bug,然后发布一个新版本去更新,这样才会更加稳妥,影响范围也会最小;操作流程如下:1.列出所有标签gitt......
  • HTML5与CSS3实现动态网页(下)
    js完整的javascript是有ECMAScript(语法)BrowserObjects(DOMBOM)特性组成的。//单行注释/**/多行注释ECMASxript中的一切(变量函数名和操作符)都区分大小写1:什么是标识符变量函数属性的名字或者函的参数2:表示符命名规则有字符数字下划线或$符号......
  • HTML5与CSS3实现动态网页(下)
    js完整的javascript是有ECMAScript(语法)BrowserObjects(DOMBOM)特性组成的。//单行注释/**/多行注释ECMASxript中的一切(变量函数名和操作符)都区分大小写1:什么是标识符变量函数属性的名字或者函的参数2:表示符命名规则有字符数字下划线或$符号组成不能以......
  • js中监听到浏览器标签页的新增、切换等变化
    在JavaScript中,可以使用visibilitychange事件来监听浏览器标签页的新增、切换等变化。这个事件会在页面的可见性状态发生变化时触发。下面是一个示例代码,展示如何使用visibilitychange事件来监听标签页的变化:document.addEventListener('visibilitychange',function(){......
  • Vue简单浮动标签(simple floating labels)
    简介及使用教程Vue简单浮动标签(simplefloatinglabels)是一个基于Vue.js的简单浮动表单标签组件,支持自定义颜色、边框及错误信息。安装npmivue-simple-floating-labels使用引入组件importFloatingLabelfrom'vue-simple-floating-labels'exportdefault{......
  • HTML5超文本链接和文本标签
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • 吸引读者关注:有效利用标签、标题和摘要
    吸引读者关注:有效利用标签、标题和摘要嗨,小红书的小伙伴们!今天我来和大家分享一些吸引读者关注的绝佳技巧——如何有效利用标签、标题和摘要。这些简单而重要的元素,能够让你的帖子在红海中脱颖而出,吸引更多的读者进入你的世界。跟着我一起探索吧!标签:让你的内容更准确被索引首......
  • 如何隐藏mui TextField标签?
    要隐藏MUI(Material-UI)的TextField标签,您可以使用CSS来修改其样式。以下是一种可能的方法:为TextField添加一个自定义的CSS类名或ID,以便在CSS中进行样式修改。例如,假设您给TextField添加了custom-textfield类名:<TextFieldclassName="custom-textfield"label="L......
  • vue3+typescript +uniapp中select标签
    <select:value="state.year"@change="handleSelectChange($event.target)"> <option:value="i"v-for="iinstate.yearrange">{{i}}</option> </select> ts的代码:``相当于v-model<se......