Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录
- 一、区域标签
- （一）div标签的定义
- （二）div标签的属性
- 二、列表标签
- （一）列表标签的定义
- （二）列表标签的类型
- 1、有序列表
- （1）有序列表的定义
- （2）有序列表的属性
- 2、无序列表
- （1）无序列表的定义
- （2）无序列表的属性
- 3、自定义列表
- （三）列表标签的嵌套
- 结语
一、区域标签
（一）div标签的定义
div标签是成对使用的，可将元素即将一些内容组合在一起形成一个区域，例如下列导航栏、分栏、广告都是一个个区域。可以这样说，div标签常用于组合块级元素，方便在后续通过 CSS 语言来对其格式化，且区域可以叠加。
<div></div>
在解析html文件时，浏览器会默认在 div 标签的前后进行一个换行处理。
（二）div标签的属性
这里主要介绍两个属性，即id属性和style属性，其中id属性代表该div标签区域的名称，它表示为id=""，而style属性代表区域的样式，如区域的大小、颜色等等，表示为style=""。
例如，下列html代码中，设定id属性，两个区域名称为container1和container2；设定style属性中背景颜色为灰色（#808080）和蓝色（#0000FF）、区域高宽度：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>my page</title></head><body><div id="container1" style="background-color:#808080;width:350px;height:180px"><h1>导航栏</h1><p>Web前端开发</p><p>计算机网络</p><p>数据库原理与应用</p><div id="container2" style="background-color:#0000FF;width:350px;height:180px"><h1>最新文章</h1><p>数据库原理与应用第一章</p><p>数据库原理与应用第二章</p></div></body>
</html>运行结果如下：
二、列表标签
（一）列表标签的定义
列表标签分为有序列表、无序列表和自定义列表标签。列表中不仅仅能是文本，也可以是图片、链接等等或者嵌套新的列表。
（二）列表标签的类型
1、有序列表
（1）有序列表的定义
有序列表由<ol></ol>标签包围，其中各列用<li></li>表示，经浏览器解析后其每列带有数字标记列数。
例如，在vscode中下列html代码，如下：
<!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><li>星期一</li><li>星期二</li><li>星期三</li></ol>
</body></html>
运行结果如下，我们可以看到“星期一”、“星期二”、“星期三”前面都带有数字标记：
（2）有序列表的属性
若不想使用阿拉伯数字进行标记，可以通过添加<ol></ol>标签的type属性，对有序列表中各列前面的标记进行更改。默认情况下type属性可以不用添加，因为默认的属性是type=“1”，它表示的是阿拉伯数字。
比如设置大写或者小写罗马数字，表示为<ol type="I"></ol>或<ol type="i"></ol>；设置大写或者小写英文，表示为<ol type="A"></ol>或<ol type="a"></ol>。
例如，在vscode中下列html代码，如下：
<!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="1"><li>星期一</li><li>星期二</li><li>星期三</li></ol><ol type="I"><li>星期一</li><li>星期二</li><li>星期三</li></ol><ol type="i"><li>星期一</li><li>星期二</li><li>星期三</li></ol><ol type="A"><li>星期一</li><li>星期二</li><li>星期三</li></ol><ol type="a"><li>星期一</li><li>星期二</li><li>星期三</li></ol>
</body></html>
运行结果如下：
2、无序列表
（1）无序列表的定义
无序列表与有序列表差不多，只不过其所有列是由<ul></ul>标签包围的，各列仍然是<li></li>标签表示的，但经浏览器解析后其每列前带有小圆点标记。
例如，在vscode中下列html代码，如下：
<!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><ul><li>星期一</li><li>星期二</li><li>星期三</li></ul>
</body></html>
运行结果如下：
（2）无序列表的属性
无序列表也有属性，不过在HTML5中不支持，可以通过使用 CSS 语言来定义不同类型的无序列表标记，这里不进行展开。
3、自定义列表
自定义列表中所有列是由<dl></dl>标签包围的，其中每列用 <dt></dt>标签表示，且每列的描述用 <dd></dd> 标签表示，可以使用该标签直接对项目和注释进行组合，其实自定义列表也是Web语义化中的一种标签。
例如，在vscode中下列html代码，如下：
<!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><dl><dt>星期一：</dt><dd>每周的第一天</dd><dt>星期二：</dt><dd>每周的第二天</dd><dt>星期三：</dt><dd>每周的第三天</dd></dl>
</body></html>
运行结果如下：
（三）列表标签的嵌套
列表标签可以进行嵌套。
例如，在vscode中下列html代码，如下：
<!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><li><ul><li>星期一</li></ul></li><li><ul><li>星期二</li></ul></li><li><ul><li>星期三</li></ul></li></ol></body></html>
运行结果如下：
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签相关推荐
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
目录 一.语义标签的定义 二.头部标签.底部标签 三.导航栏标签 四.内容栏标签.区段标签 五.其它内容标签 六.< figure > 和 < figcaption >标 结语 ...
- Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目录 一.画布标签 二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签 结语 一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
- Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目录 前言 一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性 二.绝对路径和相对路径 三.图像映射 例题 结语 前言 本节介绍图像标签即i ...
- Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录 前言 一.标题标签 二.段落标签和段内换行 三.预留格式标签 四.行内组合标签 五.水平线标签 六.注释标签 七.空格字符 例题(创建一个网页) 结语 前言 本节主要讲解HTML的一些基本标签. ...
- Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
目录 前言 一.文本加粗.斜体标签 二.文本字体缩小.放大标签 三.文本下标.上标标签 四.文本下划线.删除线标签 五.双引号字符 结语 前言 这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
- Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...
- Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
目录 一.框架标签 (一)显示目标页面 (二)规定大小的框架 (三)规定边框的框架 二.脚本标签 结语 一.框架标签 (一)显示目标页面 <iframe></iframe>标签 ...
最新文章
- 不需要显示地图 就获得用户当前经纬度 超简单的方法
- python 基础_列表的其他操作 4
- hiv实验室抗体筛查流程图_HIV自测都有哪些方法？结果准确么？
- 电脑系统哪个最好用_什么除湿机好用_家用除湿机哪个牌子最好用-装修攻略
- 【PP生产订单】入门介绍（三）
- java 颜色比较_我该如何比较Java中的颜色？
- python批处理栅格转点_python获取栅格点和面值的实现
- linux文件夹重命名busy,Linux下执行程序出现 Text file busy 提示时的解决方法
- oracle中block
- 刚嘲讽过iPhone 12，三星就打算“抄”了：取消赠送充电头和耳机？
- python3.0与2.x之间的区别
- React实现类似淘宝tab居中切换效果
- JavaSE基础———正则表达式、Date类SimpleDateFormat类和Calender类
- matlab分析分子动力学,分子动力学程序框架
- 数据库的设计及经典案例
- 《Hadoop权威指南》知识点整理3
- 软考信息安全工程师知识总结
- win10电脑插入U盘不显示U盘盘符怎么办？
- 在Excel中批量生成条形码
- SCC1事物代码 配置传输