第六十二节,html分组元素
html分组元素
学习要点:
1.分组元素总汇
2.分组元素解析
本章主要探讨HTML5中分组元素的用法。所谓分组,就是用来组织相关内容的HTML5元素,清晰有效的进行归类。
一.分组元素总汇
为了页面的排版需要,HTML5提供了几种语义的分组元素。
元素名称 说明
p 表示段落
div 一个没有任何语义的通用元素,和span是对应元素
blockquote 表示引自他出的大段内容
pre 表示其格式应被保留的内容
hr 表示段落级别的主题转换,即水平线
ul,ol 表示无序列表,有序列表
li 用于ul,ol元素中的列表项
表示包含一系列术语和定义说明的列表。dt在dl内部表示
dl,dt,dd
术语,一般充当标题;dd在dl内部表示定义,一般是内容。
figure 表示图片
figcaption 表示figure元素的标题
二.分组元素解析
1.<p>建立段落
<p>这是一个段落</p> <p>这也是一个段落</p>
效果:
这是一个段落
这也是一个段落
解释:<p>元素实际作用就是将内部包含的文本形成一个段落;而段落和段落之间保持一定量的空隙。
2.<div>通用分组
<div>这是一个通用分组</div> <div>这是又一个通用分组</div>
效果:
3.<blockquote>引用大段他出内容
<blockquote>这是一个大段引自他出内容</blockquote> <blockquote>这是另一个大段引自他出内容</blockquote>
效果:
这是一个大段引自他出内容
这是另一个大段引自他出内容
解释:<blockquote>元素实际作用除了和<p>元素一样,有段落空隙的功能,还包含了首尾缩进的功能。语义上表示,大段的引用他出的内容。
4.<pre>展现格式化内容
<pre>######################### </pre>
效果:
#########################
解释:<pre>元素实际作用就是编辑器怎么排版的,原封不动的展现出来。当然,这种只适合简单的排版,复杂的排版就无法满足要求了。
5.<hr>添加分隔
<hr>
效果:
解释:<hr>元素实际作用就是添加一条分割线,意图呈现上下文主题的分割。
6.<ul><li>添加无序列表
<ul><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ul>
效果:
- 张三
- 李四
- 王五
- 马六
解释:<ul>元素表示无序列表,而<li>元素则是内部的列表项。
7.<ol><li>添加有序列表
<ol><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
解释:<ol>元素表示有序列表,而<li>元素则是内部的列表项。<ol>元素目前支持三
种属性。
ol元素属性
属性名称 说明
start 从第几个序列开始统计:<ol start="2">
<ol start="3"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
reversed 是否倒序排列:<ol reversed>,一半主流浏览器不支持
<ol start="3" reversed><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
type 表示列表的编号类型,值分别为:1、a、A、i、I
1数字类型
<ol type="1"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
a小写字母类型
<ol type="a"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
A大写字母类型
<ol type="A"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
i类型
<ol type="i"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
I类型
<ol type="I"><li>张三</li><li>李四</li><li>王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
li元素属性
属性名称 说明
value 强行设置某个项目的编号。
<ol><li>张三</li><li>李四</li><li value="9">王五</li><li>马六</li> </ol>
效果:
- 张三
- 李四
- 王五
- 马六
注意:以上都是有序列表属性
8.<dl><dt><dd>生成说明列表
<dl><dt>这是一份文件</dt><dd>这里是这份文件的详细内容1</dd><dd>这里是这份文件的详细内容2</dd> </dl>
效果:
- 这是一份文件
- 这里是这份文件的详细内容1
- 这里是这份文件的详细内容2
解释:这三个元素是一个整体,但<dt>或<dd>并非都必须出现。
9.<figure><figcaption>使用插图
<figure><figcaption>这是一张图</figcaption><img src="22.png"> </figure>
效果:
这是一张图
解释:这两个元素一般用于图片的布局。
转载于:https://www.cnblogs.com/adc8868/p/5954374.html
第六十二节,html分组元素相关推荐
- 第三百六十二节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)基本的索引和文档CRUD操作、增、删、改、查...
第三百六十二节,Python分布式爬虫打造搜索引擎Scrapy精讲-elasticsearch(搜索引擎)基本的索引和文档CRUD操作.增.删.改.查 elasticsearch(搜索引擎)基本的索引 ...
- HTML+CSS3(六)——行内元素和块级元素
目录: HTML+CSS3(一)--认识浏览器 HTML+CSS3(二)--HTML 初识 HTML+CSS3(三)--HTML基本标签 HTML+CSS3(四)--表单pattern正则属性 HTM ...
- edu--Web程序设计基础2021秋--【结构元素】【交互元素】【页面结点元素】【文本层次语义元素】【分组元素】
Educoder – Web程序设计基础2021秋 --实训作业全总结 web程序设计基础R实验报告 2021年 -太原理工大学 文章目录 一. 结构元素 第1关:文档结构元素相关概念 第2关:hea ...
- D3 笔记四:分组元素、坐标轴、SVG基本图形
本文目前来说,是学完极客学院的<D3.js 入门教程>之后的整理出来的精简知识版,仅仅是为了知识整理.后期我会随着学习的深入,在这个基础上,进行维护与更改. 六种基本图形 在 SVG 画布 ...
- Spark入门(十六)之分组求TOP N最小值
一.分组求TOP N最小值 计算文本里面的每个key分组求TOP N最小值,输出结果. 二.maven设置 <?xml version="1.0" encoding=&quo ...
- 六、数据(分组)计算
1 常用统计函数: df['xxx'].mean() # 均值 df.mean().mean() # 全体平均数 df[xxx'].median() # 中位数 df[xxx'].var() # 方差 ...
- web前端学习(六)—— HTML中元素的id属性、div和span布局
一.id属性 1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识,所以在同一个HTML文档中id值不能重复 2.注意:表单提交数据的时候,只和name有关系,和id无关 ...
- Pandas常用操作命令(六)——数据分组groupby
文章目录
- form表单中根据值判断是否disabled_Java 0基础入门 (Html表单、表单元素)
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景 百度搜索 5173注册 如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
最新文章
- java 同步包_Java并发程序设计(四)JDK并发包之同步控制
- MATLAB基本操作(二):数组中操作
- Algorithm之MC:Monte Carlo method蒙特·卡罗方法的简介、实现、应用
- DP 之 poj 2229
- 从客户端(Content=EM STRONG U 这是测试这...)中检测到有潜在危险的Request.Form 值。...
- 面向消息的中间件 (Message-Oriented Middleware, MOM)
- Python——配置环境的导出与导入
- 双硬盘双系统win10+manjaro-kde搭建
- [038]量化交易]显示所有股票名称及股票代码
- on与where的区别
- win10如何添加或禁用开机自启动项
- SAP的物料编码分析
- 机器学习入门-kNN算法实现手写数字识别
- 微信小程序调用json数据接口并解析
- 蓝桥杯真题《左移右移》
- 淘宝seo杂谈(二)
- python数据分析与应用选择题题库_商务数据分析与应用期末试卷
- bilibili和抖音之内容类型
- web 开发入门分享
- Foxmail 邮件内链接无法打开问题
热门文章
- php安装dat,PHP Parsing a .dat file
- 计算机图形学试题a卷,计算机图形学复习题及答案
- np读取csv文件_被 Pandas read_csv 坑了
- android dropbox anr分析,Android如何分析排查ANR
- java员工编号程序_用JAVA编写一个employee类 为员工自动产生员工号
- flutter 国际化_Flutter 开发实战资源推荐
- python自动化构建工具_Python自动化构建工具scons使用入门笔记
- java reader_Java Reader reset()方法与示例
- php globals_PHP $ GLOBALS(超级全局变量),带有示例
- notepad++节点_在C ++中删除链接列表的中间节点