前端校招面经分享：这些 html 你知道吗？

Html

html是各位前端开发者的“第一课”，属于前端开发的基石。

有关html的内容很多，但随着技术的不断进步，在实际工作中需要直接对html标签进行操作的情况很少，因此在面试中的考量通常是以基础的为主。

按笔者的经验，在一场面试中对html的考察不会超过1道题，但还是需要了解部分html内容以备不时之需。

HTML 语义化

什么是 html 语义化？这个问题算是 html 在面试中出现频率较高的一个问题。

按我的理解来说，就是给原来的 div 起名字，这是 HTML5 新推出的几种标签。以前都是现在直接就叫,这样做得好处就是：

可以更方便开发者理解里面的内容的意义——增加代码可读性。
有助于搜索引擎的脚本对内容收集——SEO 搜索引擎优化。

注意：不仅仅是 H5 新推出的 header、footer 算作语义化，h1、button、li 等等这些有含义的标签都属于 HTML 语义化。

块级元素和行内元素

这个简单来说就是和的区别：

块级元素：div h1～h6 ul li p 等，他们会独占一行。有宽和高，也会有边框。
内联元素：span a img 等，他们会一个挨着一个，直到占满一排才换行，没有宽和高，会根据内容撑开。

可以通过修改CSS，属性dispaly:block 或 dispaly:inline 属性来使块级元素和内联元素相互转换，也可以通过 display:inline-block 来使他们成为行内块元素.

行内块元素既可以设定宽高，又不会独占一行而把其他小伙伴挤下去。

置换元素

如我们之前所说，我们熟知的 标签是行内元素，但是为什么我们可以对标签设置高度和宽度呢？

答案是： html 的元素中存在着一种特殊的元素——置换元素。

w3c 官方解释：“An element that is outside the scope of the CSS formatter, such as an image,embedded document, or applet”

简单一句话：置换元素可以通过标签上的hright和width属性来指定元素的宽高。

几个重要的标签

img标签：

对于 img 标签来说，有两个常考的属性——alt 和 title

alt：会在图片不显示时出现提示文字。
title：会在鼠标经过图片时显示该图片的标题。

小tip： 在img的css属性中，可以使用object-fit属性来指定图片在容器中显示的模式。

script标签：

简单来说，``的主要用途就是在页面中插入js代码。

当浏览器加载文件遇到时，会停止页面的解析（DOMtree的创建）去执行中的代码，直到js的执行完毕才继续DOM树的创建。

原因是浏览器不清楚js代码会不会影响修改html结构，为了保证页面顺利加载，优先去进行js代码的执行。

当然这就可能导致执行js代码的过程中，页面出现白屏或者卡顿。那么解决的办法就是将``放在html的最底部最后加载。

值得一提的是，``有两个面试常问的属性defer和async，考察的点通常是这两个属性有何区别。

相同点就是拥有这两个属性的``标签不会中断DOM树的创建。

不同点，可以按照二者的字面意思来理解：

defer：是延迟的意思，因此defer的作用就是使``中的js会立即下载，但是放到最后来执行。同时其中的js代码会按照它们出现的先后顺序执行。
async：是异步的意思，async会告诉浏览器立即下载文件。与defer不同的是，标记为async的脚本下载完会立刻执行，并且不保证按照它们的先后顺序执行，而是谁先下载完谁就先执行。

input标签：

以往的input标签需要依赖form标签来提交表单数据。但现在可以通过受控组件的方式提取其中的输入内容，然后发送ajax请求完成表单的提交。

input标签有几种不同的type：

button 没有默认行为的按钮，上面显示 value 属性的值，默认为空。

checkbox 定义复选框,可设为选中或未选中。

color 定义拾色器。

date 输入日期的控件（年、月、日，不包括时间）。

email 定义用于 e-mail 地址的字段。

file 定义文件选择字段和 "浏览..." 按钮，供文件上传。

image 定义图像作为提交按钮。

number 定义用于输入数字的字段。

password 定义密码字段（字段中的字符会被遮蔽）。

radio 定义单选按钮。

reset 定义重置按钮（重置所有的表单值为默认值）。

range 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。

search 定义用于输入搜索字符串的文本字段。

submit 定义提交按钮。

tel 定义用于输入电话号码的字段。

text 定义一个单行的文本字段（默认宽度为 20 个字符）。

time 定义用于输入时间的控件（不带时区）。

url 定义用于输入 URL 的字段。

同时搭配不同的属性来实现不同的功能，比较常用的是file类型的表单实现文件的上传。