搜索
创作
提问
登录注册
展开

专栏首页HTML5学堂关于行、块元素的讲解以及HTML5元素的分类

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

阅读 7120

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

代码案例图解：

代码详解：

  1. span标签内容样式与直接显示没什么区别；
  2. strong标签里的内容显示出加粗；
  3. em标签里的内容显示出倾斜；
  4. a标签的内容有一条下划线并且显示蓝色字体，当你鼠标移到a标签之上的时候，会显示title内容；
  5. 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课程会提到。

行元素总结

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

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

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

二、块元素的使用

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

案例介绍

<!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>

代码案例图解：

代码详解：

  1. 从浏览器中查看效果，看到了h系列标签是可以设置宽高，未设置宽高的时候由内容撑开高度，宽度为父元素的100%；
  2. p标签没有书写样式下跟div标签、span标签的样式上没有太大的差别；
  3. ol标签前面显示的是数字1，2，3等；
  4. ul标签前面显示的是小黑点；
  5. 还有一点的是这些标签都是独占一行（宽度为父级的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常用于图文并茂的结构（有图片和图片描述的结构）。

块元素总结

  1. 以上这些标签都是属于块元素的，块元素是独占一行;
  2. 块元素可以设置宽高，对其设置margin和padding都有效；
  3. 未设置宽高的时候，宽度是父元素宽度的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文档标签

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

布局标签&语义化

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

表格标签

  1. <table> 定义表格.
  2. <thead> 定义表头.
  3. <tbody> 定义主体.
  4. <tfoot> 定义页脚.
  5. <caption> 定义标题.
  6. <th> 定义表头.
  7. <tr> 定义一行.
  8. <td> 定义单元格.

表单标签

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

列表标签

  1. <ul> 定义无序列表.
  2. <ol> 定义有序列表.
  3. <li> 定义列表项.
  4. <dl> 定义自定义列表.
  5. <dt> 定义自定义列表项.
  6. <dd> 定义自定义的描述.

图像&链接标签

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

音频/视频

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

其他元素

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

五、课程作业安排

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

本文分享自微信公众号 - HTML5学堂（h5course-com），作者：HTML5学堂

原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。

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

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

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DIV+CSS布局和TABLE布局的优缺点

    HTML5学堂：TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，...

    HTML5学堂

  • 2016.05 第1周 群问题分享

    HTML+CSS a标签href属性的作用 2016.05.02~2016.05.06 核心概念 a标签href属性 参考答案 a标签定义超链接，用于从一个页面...

    HTML5学堂

  • 2015.12.30 HTML5真题练习

    HTML5学堂：每天一道题，强壮程序员！今日主要涉及函数与参数的12.29日题目的解答，以及一道简单的作用域的题目。 HTML5真题【2015.12.29】答案...

    HTML5学堂

  • HTML5新增及移除的元素

    HTML经过10多年的发展，其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用，HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、...

    用户1667431

  • 移动Web开发（二）

    　　这些天一直在忙iOS，Android和.Net方面的知识都有些忘记了，汗。不过还是先重温一下HTML吧，手动滑稽。

    从今若

  • 经验分享|AI领域：如何做优秀研究并写高水平论文？

    每个人从本科到硕士，再到博士、博士后，甚至工作以后，都会遇到做研究、写论文这个差事。论文通常是对现有工作的一个总结和展示，特别对于博士和做研究的人来说，论文则显...

    石晓文

  • gRPC in ASP.NET Core 3.0 -- Protocol Buffer（1）

    现如今微服务很流行，而微服务很有可能是使用不同语言进行构建的。而微服务之间通常需要相互通信，所以微服务之间必须在以下几个方面达成共识：

    solenovex

  • HGE系列之八管中窥豹(粒子系统)

    这次的HGE系列让我们一起来学习一下HGE引擎的粒子系统部分，对于粒子系统不甚了解的朋友可以从这里开始了解。

    用户2615200

  • 链家网杭州房产销售分析

    杭州，一个集历史厚重积淀与现代发展潜质于一身的城市：回望历史，是当年越王勾践屯兵抗吴的重要军事城堡，也是隋炀帝杨广兴修京杭大运河的目的地，更是宋高宗赵构在靖康之...

    luanhz

  • 无线通信技术（WiFi、WiMAX、MB

    目前，有多种通信技术可供物联网作为核心承载网络选择使用，可以是公共通信网，如2G、3G/B3G移动通信网、互联网（Internet）、无线局域网（Wireles...

    py3study
更多文章

作者介绍

HTML5学堂

HTML5学堂（码匠）创始人

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

专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券