关于行、块元素的讲解以及HTML5元素的分类

HTML5学堂（码匠） · 创始人 (已认证)

477

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止，你是不是觉得静态页面布局简单了很多，而不是单单使用类名选择器（虽然很好用）来操作了。通过其它选择器的配合使用，页面布局显得不再那么让人“捉急”。但是有不少人在这个时候遇到了问题，多种多样的标签给我们的布局操作带来了一定的难度，因其种类繁多，大家在使用的时候出现了“选择困难症”。为此，今天的这篇文章主要为大家讲解网页中常用的标签以及它又是如何进行分类的。

本文内容概要：

1 行元素的使用

2 块元素的使用

2 行、块元素的特性区别

4 行、块元素的区别总结

5 HTML5元素的总结

在页面开发中，我们会把标签做一个分类，大致划分为：行元素、块元素、第三类元素。接下来我们就一起来看看这三大类元素的使用情况吧~~~

一、行元素的使用

基本的行元素使用情况到底是怎么样的呢？来敲个实例看看吧!~~~

案例介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <style type="text/css">
        span {
            width: 200px;
            height: 200px;
            margin: 20px 100px;
        }
    </style>
</head>
<body>
    <span>这是span标签</span>
    <strong>这是strong标签</strong>
    <em>这是em标签</em>
    <a href="http:www.baidu.com" title='a标签的title'>这是a标签</a>
    <img src="" alt="标签img" title='标签title'>
</body>
</html>

代码案例图解：

代码详解：

span标签内容样式与直接显示没什么区别；
strong标签里的内容显示出加粗；
em标签里的内容显示出倾斜；
a标签的内容有一条下划线并且显示蓝色字体，当你鼠标移到a标签之上的时候，会显示title内容；
img标签显示一张图片，但是这时候我们没有在src属性里面书写图片路径（或者路径错误的时候），都会显示alt的内容，当鼠标移动到img标签之上的时候，会显示title内容。

行元素详解

span标签：

span标签是没有语义性的标签，类似div，如果不对 span 应用样式，那么 span 元素中的文本与div文本没有任何视觉上的差异。

strong标签：

strong标签是定义强调文本，浏览器通常是用加粗的字体来显示其中的内容。

em标签：

em标签也是定义强调文本，浏览器通常是用倾斜的字体来显示其中的内容。

img标签：

img标签向网页嵌入一幅图像。从技术上讲，img标签并不会在网页中插入图像，而是从网页上链接图像，img 标签创建的是被引用图像的占位空间。img标签常用属性有src、title、alt。

img标签的 src 属性是必需的，它的值是图像文件的 URL，也就是引用该图像的文件的绝对路径或相对路径，具体开发中我们都是用相对路径，这样有利于我们项目移动的时候不会发生图片路径错误。title和alt属性有利于搜索引擎优化，在后面SEO课程会提到。

a标签：

a标签定义超链接，用于从一个页面链接到另一个页面，a标签常用属性有title、href。

href属性的值可以是一个网页的路径（相对路径与绝对路径）或者是一个网址，如果未设置 href 属性，则只是超链接的占位符。title属性也是有利于搜索引擎优化，在后面SEO课程会提到。

行元素总结

span、strong等标签是属于行元素，行元素显示在同一行；
行元素不可以设置宽高，对其设置上下的margin、padding是无效；
未设置宽高的时候，内容撑开宽高。

行元素的嵌套规则来说，行元素只能包含行元素，不能包含块元素。

注意：如果引入了重置文件，标签的默认样式被清除了，所以标签出来的样式没有什么差别。

二、块元素的使用

了解了行元素使用情况后，对于所谓的块元素的使用到底又是怎么样的呢？也一起来看下面的实例吧~~~

案例介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <style type="text/css">
        h1 {
            width: 200px;
            height: 40px;
            margin: 50px;
            padding: 50px;
            background: #fcf;
        }
        h2, h3 {
            background: #ccf;
        }
    </style>
</head>
<body>
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
    <h5>这是h5标签</h5>
    <h6>这是h6标签</h6>
    <p>这是p标签</p>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <dl>
        <dt>定义列表中的项目</dt>
        <dd>描述列表中的项目</dd>
    </dl> 
</body>
</html>

代码案例图解：

代码详解：

从浏览器中查看效果，看到了h系列标签是可以设置宽高，未设置宽高的时候由内容撑开高度，宽度为父元素的100%；
p标签没有书写样式下跟div标签、span标签的样式上没有太大的差别；
ol标签前面显示的是数字1，2，3等；
ul标签前面显示的是小黑点；
还有一点的是这些标签都是独占一行（宽度为父级的100%）。

块元素详解

h系列标签：

从语义性理解，它是标题标签；比如可以在模块标题、详情页中段落标题使用等，字体上逐渐变小。

h系列标签的范围为h1~h6，为了SEO优化常用h1~h3，h4~h6不推荐使用，h4较为少用。

p标签：

p标签定义的是段落，p 元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，同时也可以在样式表中书写。主要在模块中内容、详情页中的段落等使用。

ol标签：

ol标签定义的是有序列表，ol只能直接嵌套着li标签。

ul标签：

ul标签定义的是无序列表，ul只能直接嵌套着li标签；

用法：ul和ol常常用于文章标题列表排版或者使用图片列表排版布局；

dl标签：

dl：自定义列表，只能直接嵌套着dt和dd；

用法：dl常用于图文并茂的结构（有图片和图片描述的结构）。

块元素总结

以上这些标签都是属于块元素的，块元素是独占一行;
块元素可以设置宽高，对其设置margin和padding都有效；
未设置宽高的时候，宽度是父元素宽度的100%，高度由内容撑开。

块元素的嵌套规则来说：p标签是属于块元素，但是不能包含块元素只能包含行元素；ol和ul中只能直接嵌套li标签；dl只能直接嵌套着dt和dd，dt是属于块元素，但是不能包含块元素只能包含行元素。

注意：当你引入了reset.css文件，ul和ol不会出现小黑点或者是数字，因为里面已经设置list-style:none；p标签前后也不会自动添加这些空间，因为里面设置了margin、padding都为0。

三、行、块元素的特性区别

了解不同的行、块元素各自的特点，也大致知道了行、块元素之间的区别。但是要更明白的了解一些特性就要一起来看看下面的这几个案例了。

1、尺寸-块元素和行元素之间的一个重要的不同点

设置宽度width 无效；

设置高度height 无效，可以通过line-height来设置；

设置margin 只有左右margin有效，上下无效；

设置padding 只有左右padding有效，上下则无效。

注意：这里说的无效均是指行元素，对其它元素的排列没有影响。也就是说，对于设置了margin，padding的行元素文档流里的上下元素来说，他们的间距不会因为上下margin或者上下padding而产生间距。但是就本身而言，对于左右margin与padding是有效的。

2、text-align属性是行、块元素表现的又一不同

这个特性描述了如何使一个块元素的行内内容对齐；

注意一点，w3c标准里说这个属性是用来对齐行内内容的，所以不应该对块级内容起作用；解释一下，行内内容是说由行内元素组成的内容；但是问题来了，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。

IE6/7及IE8文档模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

四、行、块元素的区别总结

通过上文我们知道了行元素与块元素的使用，也了解了行、块之间存在区别的特性。但是要具体的做个总结，仍然还不是很明白，接下来小编就给大家整理出了行、块元素的区别总结，一起来看看咯~~~

块元素特点

1) 独占一行，在默认情况下，宽度自动填满父元素宽度；

2) 宽度和高度可以控制；

3) margin和padding横向纵向设置都有效；

4) 可以通过display: inline; 转换为行内元素；

5) 除个别特殊元素外，其他都可包含块状元素和行内元素。

行元素特点

1) 并排显示，不能独占一行；

2) 宽高不可设置，只由内容撑开；

3) margin和padding横向设置有效，纵向设置不产生边距效果；

4) 可以通过display: block; 转换为块状元素；

5) 除ins和del外，其他都不能包含块状元素。

五、HTML5的元素总结

上文中我们讲解了很多标签的特点与使用方法，究其根本，也仍然还是在对行、块元素做了很大篇幅的介绍。而对于HTML5来说，不仅仅只是由行、块两大类元素组成的。在这之外，还有一大类重要的标签，那具体还包括哪些呢？接下来就给大家来列举下吧！

HTML文档标签

<!DOCTYPE> 定义文档类型.
<html> 定义HTML文档.
<head> 定义文档的头部.（头部内包含）
<meta> 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词.
<base> 定义页面上的所有链接规定默认地址或默认目标.
<title> 定义文档的标题.
<link> 定义文档与外部资源的关系.
<style> 定义 HTML 文档样式信息.
<body> 定义文档的主体.（脚本在非必须情况时在主体内容最后）
<script> 定义客户端脚本，比如 JavaScript.
<noscript> 定义在脚本未被执行时的替代内容.（文本）

布局标签&语义化

<div> 定义块级元素.
<span> 定义行业元素.
<header> 定义区段或页面的页眉.（头部）
<footer> 定义区段或页面的页脚.（尾部）
<section> 定义文档中的区段.
<article> 定义文章.
<aside> 定义页面内容之外的内容.
<details> 定义元素的细节.
<summary> 定义 <details> 元素可见的标题.
<dialog> 定义对话框或窗口.
<nav> 定义导航.
<hgroup> 定义标题组.

表格标签

<table> 定义表格.
<thead> 定义表头.
<tbody> 定义主体.
<tfoot> 定义页脚.
<caption> 定义标题.
<th> 定义表头.
<tr> 定义一行.
<td> 定义单元格.

表单标签

<form> 定义表单.(表单包含在form标签中)
<input> 定义输入域.
<textarea> 定义文本域.(多行)
<label> 定义一个控制的标签.(input 元素的标注)
<fieldset> 定义域.
<legend> 定义域的标题.
<select> 定义一个选择列表.
<optgroup> 定义选择组.
<option> 定义下拉列表的选项.
<button> 定义按钮.(定义围绕表单中元素的边框.)
<fieldset> 定义围绕表单中元素的边框.
<legend> 定义 fieldset 元素的标题.
<fieldset> 定义选项列表.与input 元素配合使用该元素，来定义 input 可能的值.
<keygen> 定义表单的密钥对生成器字段.
<output> 定义不同类型的输出，比如脚本的输出.

列表标签

<ul> 定义无序列表.
<ol> 定义有序列表.
<li> 定义列表项.
<dl> 定义自定义列表.
<dt> 定义自定义列表项.
<dd> 定义自定义的描述.

图像&链接标签

<img> 定义图像.注意加上alt属性.
<a> 定义超链接.
<map> 定义图像映射.
<area> 定义图像地图内部的区域.
<figure> 定义媒介内容的分组.
<figcaption> 定义 <figure> 元素的标题.

音频/视频

<audio> 定义声音内容.
<source> 定义媒介源.
<track> 定义用在媒体播放器中的文本轨道.
<video> 定义视频.

其他元素

<canvas> 定义图形容器，必须使用脚本来绘制图形.
<meter> 定义预定义范围内的度量.
<progress> 定义任何类型的任务的进度.

五、课程作业安排

根据今天所学的知识点，总结HTML5中的元素分类，优化标签的选择。

原文发布于微信公众号 - HTML5学堂（h5course-com）

原文发表时间：2016-05-23

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

发表于 2018-03-132018-03-13 11:43:16

HTML5学堂

293 篇文章60 人订阅

我来说两句

0 条评论

登录后参与评论

来自专栏IMWeb前端团队

导航菜单优化制作

以前制作导航菜单，总要加许多id在HTML中，js代码也要将id挨个加上去，今日终于习得破解之法，不在用以前那种笨拙的方法了。 ? 以下是HTML代码： <bo...

3067

来自专栏web前端-

HTML基础知识

4643

来自专栏落花落雨不落叶

来自专栏Java后端技术

细谈CSS布局方式

　　[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而...

1182

来自专栏沈唁志

jQuery中的9个选择器

1502

来自专栏小筱月

jQuery 事件绑定和 JavaScript 原生事件绑定

jQuery 中提供了四种事件监听绑定方式，分别是 bind、live、delegate、on，

2342

来自专栏deepcc

jQuery阻止冒泡和HTML默认操作

3995

来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

2.1跳转div盒子的布局（宽、高、边框线、水平居中、文字居中...）

1252

腾讯云·社区