HTML块级元素
前面的话
在HTML5出现之前,人们一般把元素分为块级、内联和内联块元素。本文将详细介绍HTML块级元素
h
标题(Heading)元素有六个不同的级别,<h1>
是最高级的,而<h6>
则是最低的。一个标题元素能简要描述该节的主题
从<h1>
到<h6>
,重要性逐渐减小,字体大小也逐渐减小。在使用标题元素时,要注意以下几点
1、不要为了减小标题的字体而使用低级别的标题,而是使用CSS的font-size样式
2、避免跳过某级标题:始终要从<h1>
开始,接下来使用<h2>
等等
3、使用<section>
元素时,为了方便起见,避免重复在一个页面上使用<h1>
,<h1>
应该用来表示页面的标题,其他的标题当从<h2>
开始。使用<section>
时,应当每个 section都使用一个<h2>
【默认样式】
//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;
HTML5新增了<hgroup>
标签,它表示标题组,用于组合标题,只在区块需要有多个级别的标题时使用
<hgroup>
<h1>水果</h1>
<h2>苹果</h2>
</hgroup>
p
<p>
元素(paragraph)表示文本的一个段落,该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进
【默认样式】
margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
div
<div>
元素(divide)(或HTML文档分区元素)是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang),它应该在没有任何其它语义元素可用时才使用(比如<article>
或<nav>
)
hr
<hr>
元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上
<hr>
用于段落级元素之间的分割,区块之间不需要使用<hr>
进行分割
<p>段落1</p>
<hr>
<p>段落2</p>
【默认样式】
margin: 8px 0;
border-style: inset;
border-width: 1px;
pre
<pre>
元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来,通常表示已排版的内容,如代码块和字符画等
<pre>
body {
color:red;
}
</pre>
【默认样式】
margin: 1em 0;
white-space: pre;
blockquote
<blockquote>
元素(或者HTML块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处URL地址设置到cite特性上,若要以文本的形式告知读者引文的出处时,可以通过<cite>
元素
[注意]引用的署名必须在引用外部定义
<blockquote cite="https://baike.baidu.com/view/921793.htm">
<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>
<p>鲁迅</p>
【默认样式】
margin: 1em 40px;
address
<address>
元素可以让作者为它最近的<article>
或者<body>
祖先元素提供联系信息。在后一种情况下,它应用于整个文档
当表示一个和联系信息无关的任意的地址时,使用<p>
元素而不是<address>
元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<time>
元素中)。通常,<address>
元素可以放在当前section的<footer>
元素中,如果存在的话
【默认样式】
font-style: italic;
其他
除了上面介绍的<div>
、<h>
、<p>
、<hr>
、<blockquote>
、<address>
标签外,还有一些前面已经介绍过的标签属于块级标签
包括骨架类标签(<html>
、<body>
),列表类标签(<ul>
、<ol>
、<dl>
、<dd>
、<dt>
),表单类标签(form
、<fieldset>
、<output>
、<legend>
、<optgroup>
、<option>
),HTML5新增的结构标签(<article>
、<aside>
、<header>
、<footer>
、<nav>
、<section>
),HTML5新增的多媒体标签(<figure>
、<figcaption>
),HTML5新增的功能性标签(<summary>
、<details>
)
最后
可能有人会觉得<br>
标签应该是一个块级元素,因为它有换行,与块级元素的特征很相似。但它实际上是一个内联元素,它的用途是在文本中产生一个换行
HTML块级元素的更多相关文章
- 《Web开发中块级元素与行内元素的区分》
一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
- HTML中块级元素与行内元素
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- HTML行为元素和块级元素及语义化
块级元素 div - dl - form 交互表单h1 - h6 标题 hr 水平分割线p 段落ul 非排序列表table 表格 行内元素 a 链接br 换行em 强调i 斜体img 图片input ...
- HTML中行内元素与块级元素的区别:
HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...
- HTML 行内元素和块级元素的理解及其相互转换
块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css块级元素,内联元素,内联块状元素
块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...
- html的块级、内联、内联块级元素基础
概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...
随机推荐
- JavaScript 对数据处理的5个API
JavaScript对数据处理包括向上取整.向下取整.四舍五入.固定精度和固定长度5种方式,分别对应ceil,floor,round,toFixed,toPrecision等5个API,本文将对这5个 ...
- 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus
最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...
- 来,给Entity Framework热热身
先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...
- C# Excel导入、导出【源码下载】
本篇主要介绍C#的Excel导入.导出. 目录 1. 介绍:描述第三方类库NPOI以及Excel结构 2. Excel导入:介绍C#如何调用NPOI进行Excel导入,包含:流程图.NOPI以及C#代 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- iOS开发之Masonry框架源码深度解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- 在Windows上编译和调试CoreCLR
生成CoreCLR - Windows篇 本文的唯一目的就是让你运行Hello World 运行环境 Window 7+ Visual studio 2015 确保C++ 工具已经被安装,默认是不安装 ...
- Linux之搭建自己的根文件系统
Hi!大家好,我是CrazyCatJack.又和大家见面了.今天给大家带来的是构建Linux下的根文件系统.希望大家看过之后都能构建出符合自己需求的根文件系统^_^ 1.内容概述 1.构造过程 今天给 ...
- Android如何制作漂亮的自适布局的键盘
最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...
- .NET Core 2016 回顾
都在回顾自己的2016,今天我们来看看.NET Core的2016. 每一年的脚步的确是快,转眼间马上就2017.新的一年,带着理想和抱负继续出发. 1 月 ASP.NET 5 改名 ASP.NET ...