写在开篇
运维开发必备前端技能！虽然很枯燥，知识点很多，但要坚持住哦！笔者和大家一起坚持。本篇和大家一起巩固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个小时进行练习。记住！投资自己的大脑永远是最正确的选择，笔者会跟大家一起坚持哈！诚邀广大盆友能多多关注我们、点赞、转发、收藏。
