[JavaScript知识库] HTML学习笔记3：列表

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> HTML学习笔记3：列表 -> 正文阅读

[JavaScript知识库]HTML学习笔记3：列表

有序列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>有序列表</title>
</head>
<body>
<!-- 1	阿拉伯数字：1、2、3…… -->
<!-- a	小写英文字母：a、b、c…… -->
<!-- A	大写英文字母：A、B、C…… -->
<!-- i	小写罗马数字：i、ii、iii…… -->
<!-- I	大写罗马数字：I、II、III…… -->
<div>前端技术：</div>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>JQuery</li>
    <li>Vue.js</li>
</ul>
</body>
</html>

在这里插入图片描述

无序列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>无序列表</title>
</head>
<body>
<!--type 属性值-->
<!--disc	实心圆●（默认值）-->
<!--circle	空心圆○-->
<!--square	正方形■-->
<div>前端技术：</div>
<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>JQuery</li>
    <li>Vue.js</li>
</ul>
</body>
</html>

在这里插入图片描述

定义列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
<!--dl: definition list (定义列表)-->
<!--dt: definition term (定义名词)-->
<!--dd: definition description (定义描述)-->
<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言，控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，控制网页的行为</dd>
</dl>
</body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
</head>
<body>
<h1>问卷调查</h1>
<h3>1、你是通过什么途径来到此网页的？</h3>
<ol type="A">
    <li>百度搜索</li>
    <li>谷歌搜索</li>
    <li>其他途径</li>
</ol>
<h3>2、你觉得此网页页面设计的怎么样？</h3>
<ol type="A">
    <li>酷炫大方</li>
    <li>比较普通</li>
    <li>非常粗糙</li>
</ol>
<h3>3、你觉得这本书怎么样？（多选）</h3>
<ul>
    <li>通俗易懂，轻松幽默</li>
    <li>内容丰富，技巧贼多</li>
    <li>三个字，好到爆！</li>
</ul>
</body>
</html>