web网站开发，html标签元素类型，学习路线+知识点梳理

前端的兴起

前端真正兴起和开始频繁出现在大家的视线里，大概是在十年前。彼时的 Web 开发基本是由后端主导，前端能做的只是校验一下数据、操作一下 DOM。（其中数据检验是 JS 产生的根本原因：当时网络太慢，在服务端检验数据并反馈给用户，让用户知晓输入错误，这个流程太长、反应太慢，因此通过脚本在用户端完成第一步校验，既方便了用户，又减轻了带宽的压力。）即使 06 年 jQuery 发布并风靡全球，以及 XMLHttpRequest 被纳入 W3C 标准，也没有改变这种状况。制约它进度的原因很简单，因为很多事情前端 做不了 或者 做不好。随着时间的推移，近几年，Angular、Backbone、React、Vue 等框架陆续发布，让前端越来越正规化、体系化。此时虽然仍有很多事，前端 做不了 或者 做不好，但前端这个岗位却已变得热辣空前。那么，是什么推动着前端发展到如此大的规模和火热的程度？

元素特点：

块状元素：

• 在页面中以矩形区域显示。
• 自上而下排列，独占一行
• 可以直接添加宽高
• 一般情况下，作为其他元素或内容的容器

行内元素：

• 在页面中最小单位也是矩形。
• 在一行内逐个排列。
• 不可以直接添加宽高，大小是由内容撑开的。
• 内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）
• 内联元素在一行内排列的时候，之间有间距

行内快元素：

• 可以设置宽高。
• 默认情况下，在一行内逐个显示，之间有间距。
• 当前元素的display值为inline-block时，能支持vertical-align属性。

常用元素：

块状元素：

标签	作用
div	最常用的块级元素
dl	和dt-dd 搭配使用的块级元素
form	交互表单
h1 -h6	标题
hr	水平分隔线
ol	有序列表
p	段落
ul	无序列表
li	列表标签
fieldset	表单字段集
colgroup-co	表单列分组元素
table-tr-td	表格及行-单元格

行内元素：

标签	作用
a	超链接（锚点）
b	粗体
br	换行
i	斜体
em	强调
img	图片
input	输入框
label	表单标签
span	常用内联容器，定义文本内区块
strong	粗体强调
sub	下标
sup	上标
textarea	多行文本输入框
u	下划线
select	项目选择

行内块元素：

标签	作用
input	表单标签
img	图片标签

元素类型转换：

display属性：
作用：检索或者设置元素生成的盒模型类型。

常用属性值：

• display:block;
  作用：将元素转成块状元素，拥有块状元素特点。
  补充：大部分块状元素，默认的display的值都是block;

• display:inline;
  作用：将元素转成内联元素，拥有内联元素的特点。
  补充：大部分内联元素，默认的display的值inline;

• display:none;
  作用：将当前隐藏，并不占据空间。

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取

16311028)]

[外链图片转存中…(img-wwb2sfce-1623316311031)]

[外链图片转存中…(img-1ZO23oaA-1623316311032)]