共计 2903 个字符，预计需要花费 8 分钟才能阅读完成。
写在开篇
运维开发必备前端技能！尽管很干燥，知识点很多，但要保持住哦！笔者和大家一起保持。本篇和大家一起坚固 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 个小时进行练习。记住！投资本人的大脑永远是最正确的抉择，笔者会跟大家一起保持哈！诚邀宽广盆友能多多关注咱们、点赞、转发、珍藏。
本文转载于（喜爱的盆友关注咱们）：https://mp.weixin.qq.com/s/-K…
