【视频+图文详解】HTML基础4-html标签的基本使用

图文教程

html标签的基本使用

无序列表

**作用:**定义一个没有顺序的列表结构

由两个标签组成<ul> 以及**<li>(** 两个标签都属于容器级标签,其中ul只能嵌套li标签,但li标签能嵌套任何标签,甚至ul标签**)**

**ul:**ulordered list(无序列表)

**li:**list item(列表项)

基本使用格式:

html 复制代码
<h2>古典四大名著</h2>

<ul>

    <li>三国演义</li>

    <li>西游记</li>

    <li>红楼梦</li>

    <li>水浒传</li>

</ul>

有序列表

**作用:**定义一个有序列表的列表结构

需要两个标签:<ol>和<li>标签

**ol:**ordered list(有序列表)

ol内部只能嵌套li标签,而li标签内部可以嵌套任何标签包括ol标签(跟ul基本一致)

定义列表

**作用:**定义一个自定义标题和内容的列表结构

**组成:**dl,dt,dd

**dl:**definition list 表示创建一个自定义列表结构

**dt:**definition term 表示创建一个自定义主题

**dd:**defination description 表示对前面主题的描述说明

示例

html 复制代码
<h2>国内女明星</h2>

<dl>

    <dt>杨幂</dt>

    <dd>作品:《三生三世》、《宫》、《仙剑奇侠传》等</dd>


    <dt>赵丽颖</dt>

    <dd>作品:《花千骨》、《楚乔传》、《陆贞传奇》等</dd>


    <dt>刘诗诗</dt>

    <dd>作品:《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>

</dl>

注意:dd标签内也可以嵌套许多标签

视频教程

哔哩哔哩(B站)搜索框中输入"uid=3546393096489381"即可

用户:star010_

相关推荐
love530love25 分钟前
ComfyUI MediaPipe 猴子补丁终极完善版:补全上下文管理与姿态检测兼容
人工智能·windows·python·comfyui·protobuf·mediapipe
Bruce_Liuxiaowei26 分钟前
AI攻防时间差:当漏洞发现速度碾压修复速度— 聚焦技术核心
网络·人工智能·网络安全·ai·系统安全
Gavin_91531 分钟前
“操作无法完成,因为其中的文件夹或文件已在另一程序中打开”解决方案
windows·重命名·文件夹
十有八七1 小时前
AI 开发,本质是一场文档的生命周期管理
前端·人工智能
郭龙飞9801 小时前
OpenClaw 飞书机器人搭建指南 远程 AI 操控电脑配置
人工智能·windows·机器人·飞书
Hyyy1 小时前
普通前端自救记录——第0周
前端
前端若水2 小时前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆2 小时前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript
天行健王春城老师2 小时前
制造业现场管理避坑,精益+6S实操方案(适配2026迭代)
经验分享
行星飞行2 小时前
从 cursor 、 Claude code 迁移到 codex,30 分钟快速上手 codex 常用技巧
前端