写在开篇
运维开发必备前端技能！虽然很枯燥，知识点很多，但要坚持住哦！笔者和大家一起坚持。本篇和大家一起巩固html中的块元素和内联元素以及DIV容器。
块元素
块元素的特点是啥？块级元素在浏览器显示时，通常会以新行来开始（和结束），块级元素只能出现在body元素内。
html中的div元素就是块元素，我们看看下面的例子：
陪你复习巩固，攻破前端技能
彩虹运维技术栈社区，公众号ID：TtrOpsStack
欢迎广发盆友来稿，知识点不限！以下语言知识点可来稿：
效果如下图：
在html中，都有哪些块级元素呢？笔者来给大家汇总一下，以下是HTML中所有的块级元素：
联系方式信息
文章内容
伴随内容
块引用
定义列表中定义条目描述
文档分区
定义列表
用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题
可将表单内的相关元素分组
定义figure元素的标题（caption）
规定独立的流内容（图像、图表、照片、代码等等）
定义文档或节的页脚
标签用于为用户输入创建 HTML 表单
- 标题级别 1-6
定义文档的页眉（介绍信息）
水平分割线
定义列表项目，标签可用在有序列表 () 和无序列表 () 中
标签规定文档的主要内容
定义导航链接的部分
用来定义在脚本未被执行时的替代内容（文本）
有序列表
行
预格式化文本
一个页面区段
表格
定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容
无序列表
定义视频，比如电影片段或其他视频流
内联元素
那内联元素有啥特点呢？内联元素在显示时通常不会以新行开始。
举个小栗子，比如span元素就是内联元素，我们看看下面的例子：
陪你复习巩固，攻破前端技能
彩虹运维技术栈社区公众号：TtrOpsStack 敬请大家的关注！
我们会持续分享原创运维领域技术文章
效果如下图：
那么在html中都有哪些？以下是笔者整理的，且比较典型的HTML中的内联元素：
定义锚（超链接）
定义缩写
定义只取首字母的缩写，注意了，这个在HTML5中不支持哦！可以请使用代替
定义粗体字
定义文字方向
定义大号文本，注意哦！这个在HTML5中不支持呢，可以使用CSS代替哦
定义简单的折行
定义按钮
定义引用(citation)
定义计算机代码文本
定义定义项目
定义强调文本
定义斜体字
定义图像
定义输入控件
定义键盘文本
定义 input 元素的标注
定义图像映射
定义内嵌对象
定义输出的一些类型
定义短的引用
定义计算机代码样本
定义客户端脚本
<select> 定义选择列表（下拉列表）
<small> 定义小号文本
<span> 定义媒介源
<strong> 定义强调文本
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 定义多行的文本输入控件
<time> 定义日期/时间
<tt> 定义打字机文本，注意了，在HTML5中不支持哦，可以使用CSS代替
<var> 定义文本的变量部分
</code></pre><h1 id="典型的html块元素div容器">典型的HTML块元素DIV容器</h1><p>div容器到底是什么鬼？</p><blockquote><p>div元素是块级元素，是一个可以用来组合其它html元素的容器，也没啥特别的含义了。因为它是块级元素，所以在浏览器中会在其前后显示折行呢！ 它还可以和CSS一同使用，所以，div元素还可用于对大的内容块设置样式属性。</p></blockquote><p>div容器还有啥用途？</p><blockquote><p>布局！对！你没听错，就是布局，div元素的另一个常见的用途它就是文档布局，它取代了使用表格定义布局的low方法。使用table元素进行文档布局太low了，记住了，table元素的主要作用是显示表格化的数据，而不是用来做文档布局。</p></blockquote><p>下面咱们来个小栗子，看下面代码：</p><pre><code class="language-html"><!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>
</code></pre><p>效果如下图：</p><p><img src="https://img2022.cnblogs.com/blog/2895332/202207/2895332-20220719202804559-1184312390.png"></p><h1 id="典型的html内联元素span">典型的HTML内联元素span</h1><p>span是什么鬼？</p><blockquote><p>HTML中的span元素是典型的内联元素， 主要用途就是用来作文本的容器，也没其它特定的含义了。它还可以和CSS一同使用，所以span元素可以为部分文本设置样式属性呢。</p></blockquote><p>下面咱们来个小栗子，看下面代码：</p><pre><code class="language-html"><!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>
</code></pre><p>效果如下图：</p><p><img src="https://img2022.cnblogs.com/blog/2895332/202207/2895332-20220719202852465-887915029.png"></p><h1 id="写在最后">写在最后</h1><blockquote><p>好了！本篇的知识点就这么愉快的结束了，还希望感兴趣的盆友们每天可以抽出1-2个小时进行练习。记住！投资自己的大脑永远是最正确的选择，笔者会跟大家一起坚持哈！诚邀广大盆友能多多关注我们、点赞、转发、收藏。</p></blockquote>
Original: https://www.cnblogs.com/ttropsstack/p/16495697.html
Author: 不背锅运维
Title: 一文剖析HTML块和内联元素以及DIV容器，运维开发必备前端技能，基本功强化训练。
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/582306/
转载文章受原作者版权保护。转载请注明原作者出处！