前言
好久没更新博客感觉失去对学习和分享技术的渴望了,今年大四上学期了,大学期间也杂七杂八学了不少,但感觉学的太杂反而没有精通任何一门技术,目前选择了前端的技术方向,但是却觉得学的太浅了,究其原因还是自己太懒了吧,今天面试了一家公司,刚开始就问了列举一下块元素和行内元素,人一下子傻了T_T,感觉被自己菜哭了。废话不多说,以后每天更新一篇博文,这几天就更新自己面试的问题吧。
一、行内元素、块状元素、行内块状元素、空元素是什么?
HTML中可以将元素分类为三种:行内元素、块状元素、行内块状元素,三者可以使用display属性进行相互转换。
在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。例如,<input type="text"> </input>或是<img>
的闭标签是无效的 HTML。
- display:inline;转换为行内元素
- display:block;转换为块状元素
- display:inline-block;转换为行内块状元素
二、它们的作用
1.行内元素
- 行内元素特征:
- 设置宽高无效 ,即行内元素设置width, height无效。
- margin设置左右方向有效,上下无效果,padding都有效;
- 不会自动进行换行,即在一行可以显示;
代码如下(示例):
<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.块状元素
- 块状元素特征:
- 能够设置宽高(width,height);
- margin和padding的上下左右均对其有效;
- 可以自动换行;
- 多个块状元素标签写在一起,默认排列方式为从上至下。
代码如下(示例):
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> legend 元素为 fieldset 元素定义标题
<fieldset> 元素定义标题
<li> 标签定义列表项目
3.行内块状元素
- 行内块状元素特征:
- 能够设置宽高(width,height);
- 默认排列是从左到右;
- 不会自动进行换行,即在一行可以显示;
- 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.空元素
百度百科定义:空元素
- 空元素特征:
- 从开始标签到结束标签,标签内没有内容,例如:
<br><br/>
; - 即(empty content),那些含有空内容的HTML元素,就是空元素。;
- 现在空元素都是可以自结束的标签,例
<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 找不到工作的大白菜的随记
今日份励志名言:
“学如逆水行舟,不进则退.”
——(语出 《增广贤文》)