块元素、行内元素、行内块状元素以及空元素【小咚 “面筋” 记】

---

前言

好久没更新博客感觉失去对学习和分享技术的渴望了，今年大四上学期了，大学期间也杂七杂八学了不少，但感觉学的太杂反而没有精通任何一门技术，目前选择了前端的技术方向，但是却觉得学的太浅了，究其原因还是自己太懒了吧，今天面试了一家公司，刚开始就问了列举一下块元素和行内元素，人一下子傻了T_T，感觉被自己菜哭了。废话不多说，以后每天更新一篇博文，这几天就更新自己面试的问题吧。

---

一、行内元素、块状元素、行内块状元素、空元素是什么？

HTML中可以将元素分类为三种：行内元素、块状元素、行内块状元素，三者可以使用display属性进行相互转换。
在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如，<input type="text"> </input>或是<img>的闭标签是无效的 HTML。

• display:inline;转换为行内元素
• display:block;转换为块状元素
• display:inline-block;转换为行内块状元素

二、它们的作用

1.行内元素

• 行内元素特征：
  1. 设置宽高无效 ，即行内元素设置width, height无效。
  2. margin设置左右方向有效，上下无效果，padding都有效；
  3. 不会自动进行换行，即在一行可以显示；

代码如下（示例）：

<a>       标签可定义锚 
<abbr>    表示一个缩写形式
<acronym> 定义只取首字母缩写
<b>       字体加粗
<bdo>     可覆盖默认的文本方向
<big>     大号字体加粗
<br>      换行
<cite>    引用进行定义
<code>    定义计算机代码文本
<dfn>     定义一个定义项目
<em>      定义为强调的内容
<i>       斜体文本效果
<img>     向网页中嵌入一幅图像
<input>   输入框
<kbd>     定义键盘文本
<label>   表格标签
<q>       定义短的引用
<samp>    定义样本文本
<select>  创建单选或多选菜单
<small>   呈现小号字体效果
<span>    组合文档中的行内元素
<strong>  语气更强的强调的内容
<sub>     定义下标文本
<sup>     定义上标文本
<textarea>多行的文本输入控件
<tt>      打字机或者等宽的文本效果
<var>     定义变量

2.块状元素

• 块状元素特征：
  1. 能够设置宽高（width，height）；
  2. margin和padding的上下左右均对其有效；
  3. 可以自动换行；
  4. 多个块状元素标签写在一起，默认排列方式为从上至下。

代码如下（示例）：

<address>  定义地址
<caption>  定义表格标题
<dd>       定义列表中定义条目
<div>      定义文档中的分区或节
<dl>       定义列表
<dt>       定义列表中的项目
<fieldset> 定义一个框架集
<form>     创建 HTML 表单
<h1>       定义最大的标题
<h2>       定义副标题
<h3>       定义标题
<h4>       定义标题
<h5>       定义标题
<h6>       定义最小的标题
<hr>       创建一条水平线
<legend>   legend 元素为 fieldset 元素定义标题
<fieldset> 元素定义标题
<li>       标签定义列表项目

3.行内块状元素

• 行内块状元素特征：
  1. 能够设置宽高（width，height）；
  2. 默认排列是从左到右；
  3. 不会自动进行换行，即在一行可以显示；
  4. margin和padding的上下左右均对其有效；

代码如下（示例）：

<div style="display:inline-block;border: 1px solid purple; margin: 50px;padding: 50px;width: 10px;height: 10px;">我是行内块元素1</div>
<div style="display:inline-block;border: 1px solid purple; margin: 50px;padding: 50px;width: 10px;height: 10px;">我是行内块元素2</div>

4.空元素

百度百科定义：空元素

• 空元素特征：
  1. 从开始标签到结束标签，标签内没有内容，例如：<br><br/>；
  2. 即（empty content），那些含有空内容的HTML元素，就是空元素。；
  3. 现在空元素都是可以自结束的标签，例<input />、<br/>

代码如下（示例）：

<area>：在图片上定义一个热点区域
<base>：指定用于一个文档中包含的所有相对URL的基本URL。一分中只能有一个<base>元素
<br>：在文本中产生一个换行（回车键）。这对于写诗或写一个地址来说显得很有用。它可以将行明显地分开。
<col>：定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。
<colgroup> when the span is present：表格列组（Column Group）标签用来定义表中的一组列表。
<command>：用来表示一个用户可以调用的命令。
<embed>：用来表示一个外部应用或交互式内容的集合点，换句话说，就是一个插件。
<hr>：表示段落级元素之间的主题转换（比如故事场景改变、一个章节主题改变等）。在 HTML 早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。
<img>：代表文档中的一个图像。
<input>：用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
<keygen>：为了方便生成秘钥材料和提交作为 HTML form 的一部分的公钥。这种机制被用于设计基于 Web 的证书管理系统。按照预想，<keygen> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的整数。
<link>：指定了外部资源与当前文档的关系。这个元素的使用方法包括为导航定义关系框架。这个元素经常用来链接CSS文件。
<meta>：表示那些不能由其它 HTML 元相关元素（<base>, <link>, <script>, <style> 或 <title>）之一表示的任何元数据信息。
<param>：（HTML Parameter）定义了 <object> 的参数。
<source>：强调了诸如<picture>, <audio> 或 <video> 这些元素的媒体来源。通常可以在不同的浏览器当中以多种格式展现相同的媒体内容。
<track>：被当做媒体元素<audio> 和 <video> 子元素来使用。它允许指定计时字幕（或者基于时间的数据），例如自动处理字母。
<wbr>：Word Break Opportunity，相对与<br>标签可以称为‘软换行’，意思是浏览器窗口或者父级元素的宽度足够宽（没必要换行）时，不进行换行；而当宽度不够时，主动在此处进行换行，如果单词太长，或者担心浏览器会在错误的位置换行，可以用这个标签。它对于字符型语言用处较大，但是对于像中文这种语言用处不大。另外所有浏览器都支持该标签，Internet Explorer 除了 IE9以外都不支持。

---

总结

昨天晚上宿舍断电，还好保存草稿了，拖到今天早上来写，感觉心态恢复了些许，毕竟昨天面试一团糟，虽然之前也有面试，但是还没感觉到自己这么菜过，平时跟着老师和同学写一些项目，却把最基础的东西没有搞扎实，还没学会走就想跑，想找到工作也确实难，昨天面试问的真的感觉挺基础的，但是感觉将近有一半没答上来吧，要么就是答上来一部分，一知半解，基础相当不扎实，或者说面试准备不充分吧，比如问了js事件的过程，这个还真没了解过，面完后下来查了查其实也挺简单的T_T…就感觉像是去考试，完全没有复习的这种感觉，之后还会更新面试的知识点，一点点积累吧，反正也急不得。虽然笔者比较喜欢写代码，但是人终究还是太懒了，想办法尽量勤奋一点，对于还没有找工作的学弟学妹，个人建议还是早早准备一下吧，不然像我一样，虽然有项目经验在手，但还是没啥用，基础扎实才是硬道理。先选定一个未来发展方向，然后去找实习的工作，最好大三假期先找一些实习，像boss直聘（我本人在用，并不是广告。）之类的平台都可以试试，里面hr会发招聘要求，那就是你发展方向要学的东西，最好选定一个方向，有公司能给实习机会就尽量去，公司学的东西绝对比学校快和多（当然前提是要找到和自己发展方向相符的实习）。
目前也就这些了，今年疫情原因加上互联网行业人才饱和，导致就业压力大，但是打铁还需自身硬，硬实力比什么都重要，所以好好提升自己，加油吧！上学人！

——2020.11.13 找不到工作的大白菜的随记

---

今日份励志名言：

“学如逆水行舟,不进则退.”
——（语出 《增广贤文》）