HTML 分组元素
来源:互联网 发布:复旦大数据学院夏令营 编辑:程序博客网 时间:2024/05/16 00:33
学习要点
- 分组元素总汇
- 分组元素解析
分组:就是用来组织相关内容的HTML5元素,清晰有效的进行归类
一、分组元素总汇
二、分组元素解析
1、< p > 建立段落
这是一个段落
这也是一个段落
<p> 这是一个段落</p><p> 这也是一个段落</p>
解释:< p > 元素实际作用就是将内部包含的文本形成一个段落;而段落和段落之间保持一定量的空隙。
2、< div > 通用分组
这是一个通用分组
这是又一个通用分组
<div>这是一个通用分组</div><div>这是又一个通用分组</div>
解释:< div > 元素在早期的版本中非常常用,通过< div > 这种一般性分组元素进行布局。而在HTML5中,由于语义的缘故,被其他各种文档元素所代替。和< p > 段落的区别就是,两段文本的上下空隙是没有的,空隙间隔和
换行一样。
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 > 元素目前支持三种属性。
(1)ol元素属性
- 张三
- 李四
- 王五
- 马六
<ol start=5 type=a reversed> <li>张三</li> <li>李四</li> <li>王五</li> <li>马六</li></ol>
(2)、li元素属性
- 张三
- 李四
- 王五
- 马六
<ol> <li>张三</li> <li value=6>李四</li> <li>王五</li> <li>马六</li></ol>
8、< dl > < dt > < dd > 生成说明列表
- 这是一份文件
- 这里是这份文件的详细内容1
- 这里是这份文件的详细内容2
<dl> <dt>这是一份文件</dt> <dd>这里是这份文件的详细内容1</dd> <dd>这里是这份文件的详细内容2</dd></dl>
解释:这三个元素是一个整体,但< dt > < dd > 并非都必须出现。
9、< figure > < figcaption >使用插图
(1)、figure
<figure> <figcaption>这是一张图片</figcaption> <img src="image.jpg"></figure>
(2)、figsure
<figsure> <figcaption>这是一张图片</figcaption> <img src="image.jpg"></figsure>
解释:这两个元素一般用于图片的布局。
阅读全文
1 0
- HTML表单元素分组
- html中的分组元素
- HTML 分组元素
- 千呼万唤 HTML 5 (3) - 内容分组元素
- 元素分组
- 分组元素
- 分组元素
- 用jq将html元素根据属性中的数据分组
- HTML学习笔记(四)——分组元素
- HTML5_分组元素
- HTML5 - 分组元素
- html5 分组元素
- 8 分组元素
- [04]分组元素
- HTML中的分组标签
- 【Html】分组选择符
- HTML 表单分组<fieldset>
- HTML 元素
- 17090701_CentOS7(64)下MySQL卸载、安装与配置
- C#中的两把双刃剑:抽象类和接口
- ASP.NET Core依赖注入解读&使用Autofac替代实现
- HDU 3861 The King’s Problem 强连通缩点+最小路径覆盖
- 关于html中js引入位置相关
- HTML 分组元素
- 正则表达式全部符号解释
- html2canvas截图如何解决图片跨域的问题?
- 北京毕加索公司应邀参加2017第二届建筑VR和BIM核心技术行业峰会
- 启用本地https域名,在Mac OS X的apache里
- Spring配置文件获取系统的环境变量
- 编译原理题解
- 3万个虚机,7PB存储
- 从软件定义存储到人工智能