【视频+图文详解】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_

相关推荐
sukalot2 小时前
windows 驱动实例分析系列: HidHide驱动分析-HidHideClient 篇(中)
windows·驱动开发
mldong6 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排7 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60617 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角9 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!9 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰9 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi10 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen11 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马12 小时前
AI源码分析:拆解模型底层实现逻辑
前端