web列表学习笔记02

EIHH

已于 2022-09-28 11:38:43 修改

阅读量143

点赞数

文章标签：前端 html javascript

于 2022-09-28 11:36:04 首次发布

本文链接：https://blog.csdn.net/weixin_47281509/article/details/127086472

版权

本文是关于HTML中列表元素和容器元素的学习笔记，详细介绍了有序列表、无序列表、定义列表的用法，以及div、header、footer等语义化容器元素的使用场景和元素的包含关系规则。

摘要由CSDN通过智能技术生成

列表元素

有序列表

ol：父元素
li: 子元素
reversed:倒叙布尔属性

无序列表

把ol改为ul
无序列表常用于菜单或新闻列表

定义列表

通常用于一些术语的定义
dl
dt:定义术语标题
dd：

容器元素

容器元素：该元素代表一块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

header:通常用于表示页头，也可以用于表示文章的头部

footer:通常用于表示页脚，也可以用于表示文章的尾部

article:通常用于表示整篇文章

section:通常用于表示文章的章节

aside：通常用于表示侧边栏

元素包含关系

以前：块级元素可以包含行级元素，行级元素不能包含块级元素，a元素除外。块级元素独占一行，行级元素不换行。
现在：元素的包含关系由元素的内容类别决定。

总结：

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>i,ol>li,dl>dt>dd)

标题元素和段落元素不能相互嵌套，并且不能包含容器元素

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     把大象装进冰箱分几步
     <ol type="A" reversed>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
     </ol>
    
    ***美女择偶条件
     <ul>
        <li>有责任心</li>
        <li>会家务</li>
        <li>年薪30万</li>
        <li>有责任心</li>
        <li>会家务</li>
        <li>年薪30万</li>
        <li>有责任心</li>
        <li>会家务</li>
        <li>年薪30万</li>
        <li>有责任心</li>
        <li>会家务</li>
        <li>年薪30万</li>
        <li>有责任心</li>
        <li>会家务</li>
        <li>年薪30万</li>
     </ul>
    
     html中的术语解释:
     <dl>
        <dt>HTML</dt>
        <dd>超文本语言</dd>
        <dt>元素</dt>
        <dd></dd>
     </dl>
</body>
</html>