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

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

359

继上周我们讲解了所有常用的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>

代码案例图解：

代码详解：