HTML5-列表的使用



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>ios</li>
        <li>android</li>
        <li>html</li>
        <li>CSS</li>
    </ul>
    <ul type="disc">
        <li>ios</li>
        <li>android</li>
        <li>html</li>
        <li>CSS</li>
    </ul>
    <ul type="circle">
        <li>ios</li>
        <li>android</li>
        <li>html</li>
        <li>CSS</li>
    </ul>
    <ul type="square">
        <li>ios</li>
        <li>android</li>
        <li>html</li>
        <li>CSS</li>
    </ul>
    <ol type="a">
        <li>html5</li>
        <li>css</li>
        <li>ios</li>
        <li>windows</li>
    </ol>
    <ol start="10">
        <!-- <ol start="10">[从10开始]-->
        <li>html5</li>
        <li>css</li>
        <li>ios</li>
        <li>windows</li>
    </ol>
    <ul>
        <li>宠物</li>
            <ul>猫</ul>
            <ul>狗</ul>
            <ul>...</ul>
        <li>人类</li>
            <ul>中国</ul>
            <ul>法国</ul>
            <ul>...</ul>
        <li>植物</li>

    </ul>
    <br/>
    <ol>
        <li>宠物</li>
            <ol>猫</ol>
            <ol>狗</ol>
            <ol>...</ol>
        <li>人类</li>
            <ol>中国</ol>
            <ol>法国</ol>
            <ol>...</ol>
        <li>植物</li>

    </ol>
    <br/>
    <dl>
        <dl>HelloWorld</dl>
            <dd>HTML5教程-DIVCSS布局HTML5教程栏目</dd>
        <dl>this is web page</dl>
            <dd>HTML5教程-DIVCSS布局HTML5教程栏目</dd>
        <dl> web page</dl>
            <dd>HTML5教程-DIVCSS布局HTML5教程栏目</dd>
    </dl>
</body>
</html>
时间: 2024-07-30 09:05:20

HTML5-列表的使用的相关文章

HTML5列表、块和布局

-----------------siwuxie095 HTML5 列表 标签 描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表项 <dd> 描述 1.无序列表 标签:<ul>.<li> 属性:disc.circle.square 2.有序列表 标签:<ol>.<li> 属性:A.a.I.i.start 3.嵌套列表 标签:<ul>

HTML5 列表

HTML5 列表 列表的作用 列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列.所有的列表都由列表类型和列表项组成. 列表分为有序列表和无需列表,列表项 <li> 用于显示具体的列表内容. 有序列表 <ol> <ol> 元素编写有序列表,用于列出页面上有特定次序的一些项目.<ol> 元素中只能包含列表项元素 <li>. <ol type="列表类型" start="起始编号"> &l

HTML5 列表、表格、媒体元素

无序列表 <ul> <li>范冰冰演藏族女孩</li> <li>拍集体合影后自拍</li> <li>诗隆甜蜜出游</li> <li>一线城市楼市退烧</li> </ul> 特性 没有顺序,每个<li>标签独占一行(块元素) 默认<li>标签项前面有个实心小圆点  有序列表 <ol> <li>范冰冰演藏族女孩</li> <l

HTML5列表

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body> <!--type=squ

HTML5列表、块、布局

一.列表 <ol>  无序列表  (每项前有.) <ul>  有序列表   (每项前有编号1,,2,3) <li>   列表项 1 <ul type="square"> 2 <li>苹果</li> 3 <li>橘子</li> 4 <li>香蕉</li> 5 </ul> 6 <ol type="i" start=10> 7 &

Html5列表元素

<ol> 有序列表: 属性:type(设置样式),reversed(倒序) <ul>无序列表 <li>表示列表中的项(在<ol>和<ul>中) 上面三者都是在<body>中的. 部分代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

HTML5列表标签和表格标签

一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来可以列举图片文字视频 ```<ul><li></li></ul>```ul里面有属性 type="circle/square/disc"  清除前面符号 list-style:none:

Html5 基础----列表详述

html5列表 标签 列表分为:  有序列表/无序列表/自定义列表,用的最多的为无序列表和自定义列表 1.有序列表(order list) eg:把??大象放进冰箱里需要分几步 <ol> <li>把冰箱门打开</li> <li>把大象放进去</li> <li>把冰箱门关上</li> </ol> 运行结果: 1.把冰箱门打开 2.把大象放进去 3.把冰箱门关上             1.1有序列表的属性 typ

HTML5样式和列表、CSS链接的四种状态

一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel="stylesheet":外部样式表: 3.三种样式表插入方法: (1)外部样式表: 在<head></head>中写入: <link  rel="stylesheet"  type="text/css"  href=&q

二,细说 HTML5 之 HTML5 基础讲解 2

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. HTML5 样式.链接和表格 1.HTML5 样式 标签 描述 <style> 定义样式定义 <link> 定义资源引用 <div> 定义文档中的节或区域(块级) <span> 定义文档中的行内的小块或区域 属性: 属性 描述 rel="stylesheet" 外部样式表 type="text/css" 引入文档的类型 margin 边距 三种样式