写在开篇

运维开发必备前端技能！虽然很枯燥，知识点很多，但要坚持住哦！笔者和大家一起坚持。本篇和大家一起巩固html中的块元素和内联元素以及DIV容器。

块元素

块元素的特点是啥？块级元素在浏览器显示时，通常会以新行来开始（和结束），块级元素只能出现在body元素内。

html中的div元素就是块元素，我们看看下面的例子：

!DOCTYPE html>
    
html lang="zh">
    
    head>
    
        meta charset="UTF-8">
    
        title>
    陪你复习巩固，攻破前端技能/title>
    
    /head>
    
    body>
    
        div style="border: 1px solid black">
    彩虹运维技术栈社区，公众号ID：TtrOpsStack/div>
    
        p>
    欢迎广发盆友来稿，知识点不限！以下语言知识点可来稿：/p>
    
    /body>
    
/html>
    

效果如下图：

在html中，都有哪些块级元素呢？笔者来给大家汇总一下，以下是HTML中所有的块级元素：

address>
     联系方式信息
article>
     文章内容
aside>
     伴随内容
blockquote>
     块引用
canvas>
     
dd>
     定义列表中定义条目描述
div>
     文档分区
dl>
     定义列表
dt>
     用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题
fieldset>
     可将表单内的相关元素分组
figcaption>
     定义figure元素的标题（caption）
figure>
     规定独立的流内容（图像、图表、照片、代码等等）
footer>
     定义文档或节的页脚
form>
     标签用于为用户输入创建 HTML 表单
h1>
    -h6>
     标题级别 1-6
header>
     定义文档的页眉（介绍信息）
hr>
     水平分割线
li>
     定义列表项目，li>
    标签可用在有序列表 (ol>
    ) 和无序列表 (ul>
    ) 中
main>
     标签规定文档的主要内容
nav>
     定义导航链接的部分
noscript>
     用来定义在脚本未被执行时的替代内容（文本）
ol>
     有序列表
p>
     行
pre>
     预格式化文本
section>
     一个页面区段
table>
     表格
tfoot>
     定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容
ul>
     无序列表
video>
     定义视频，比如电影片段或其他视频流

内联元素

那内联元素有啥特点呢？内联元素在显示时通常不会以新行开始。

举个小栗子，比如span元素就是内联元素，我们看看下面的例子：

!DOCTYPE html>
    
html lang="zh">
    
    head>
    
        meta charset="UTF-8">
    
        title>
    陪你复习巩固，攻破前端技能/title>
    
    /head>
    
    body>
    
        p>
    彩虹运维技术栈社区span style="border: 1px solid black">
    公众号：TtrOpsStack/span>
     敬请大家的关注！/p>
    
        p>
    我们会持续分享原创运维领域技术文章/p>
    
    /body>
    
/html>
    

效果如下图：

那么在html中都有哪些？以下是笔者整理的，且比较典型的HTML中的内联元素：

a>
     定义锚（超链接）
abbr>
     定义缩写
acronym>
     定义只取首字母的缩写，注意了，这个在HTML5中不支持哦！可以请使用abbr>
    代替
b>
     定义粗体字
bdo>
     定义文字方向
big>
     定义大号文本，注意哦！这个在HTML5中不支持呢，可以使用CSS代替哦
br>
     定义简单的折行
button>
     定义按钮
cite>
     定义引用(citation)
code>
     定义计算机代码文本
dfn>
     定义定义项目
em>
     定义强调文本
i>
     定义斜体字
img>
     定义图像
input>
     定义输入控件
kbd>
     定义键盘文本
label>
     定义 input 元素的标注
map>
     定义图像映射
object>
     定义内嵌对象
output>
     定义输出的一些类型
q>
     定义短的引用
samp>
     定义计算机代码样本
script>
     定义客户端脚本
select>
     定义选择列表（下拉列表）
small>
     定义小号文本
span>
     定义媒介源
strong>
     定义强调文本
sub>
     定义下标文本
sup>
     定义上标文本
textarea>
     定义多行的文本输入控件
time>
     定义日期/时间
tt>
     定义打字机文本，注意了，在HTML5中不支持哦，可以使用CSS代替
var>
     定义文本的变量部分

典型的HTML块元素DIV容器

div容器到底是什么鬼？

div元素是块级元素，是一个可以用来组合其它html元素的容器，也没啥特别的含义了。因为它是块级元素，所以在浏览器中会在其前后显示折行呢！它还可以和CSS一同使用，所以，div元素还可用于对大的内容块设置样式属性。

div容器还有啥用途？

布局！对！你没听错，就是布局，div元素的另一个常见的用途它就是文档布局，它取代了使用表格定义布局的low方法。使用table元素进行文档布局太low了，记住了，table元素的主要作用是显示表格化的数据，而不是用来做文档布局。

下面咱们来个小栗子，看下面代码：

!DOCTYPE html>
    
html lang="zh">
    
    head>
    
        meta charset="UTF-8">
    
        title>
    陪你复习巩固，攻破前端技能/title>
    
    /head>
    
    body>
    
        div style="background-color:black;
    color:white;
    padding:20px;
    ">
    
            h1>
    彩虹运维技术栈社区span style="border: 1px solid black">
    公众号：TtrOpsStack/span>
     敬请大家的关注！/h1>
    
            p>
    我们会持续分享原创运维领域技术文章/p>
    
        /div>
    
    /body>
    
/html>
    

效果如下图：

典型的HTML内联元素span

span是什么鬼？

HTML中的span元素是典型的内联元素， 主要用途就是用来作文本的容器，也没其它特定的含义了。它还可以和CSS一同使用，所以span元素可以为部分文本设置样式属性呢。

下面咱们来个小栗子，看下面代码：

!DOCTYPE html>
    
html lang="zh">
    
    head>
    
        meta charset="UTF-8">
    
        title>
    陪你复习巩固，攻破前端技能/title>
    
    /head>
    
    body>
    
        h1>
    彩虹运维技术栈社区/h1>
    
        p>
    
            span style="color:blue;
    font-weight:bold">
    公众号：TtrOpsStack/span>
    
            span style="color:darkolivegreen;
    font-weight:bold">
    敬请大家的关注！/span>
    
        /p>
    
    /body>
    
/html>
    

效果如下图：

写在最后

好了！本篇的知识点就这么愉快的结束了，还希望感兴趣的盆友们每天可以抽出1-2个小时进行练习。记住！投资自己的大脑永远是最正确的选择，笔者会跟大家一起坚持哈！诚邀广大盆友能多多关注我们、点赞、转发、收藏。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！