Html

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

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

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

HTML 语义化

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

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

1. 可以更方便开发者理解里面的内容的意义——增加代码可读性。

2. 有助于搜索引擎的脚本对内容收集——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类型的表单实现文件的上传。

meta标签：(校招基本不会问到，因此不用特殊记忆，但是如果你了解会显得你很厉害！)

这是一个比较有趣现象，我们往往可以熟练使用html的各种标签来构建我们的网页，但当我们观察head中的标签时，会发现很多不懂的内容。

解释twitter官网HTML的前10行：

让我们来逐一解析：

第一行：DOCTYPE标签告诉浏览器这是一个 HTML 页面

第二行：dir 是文档渲染方向，规定语言的阅读习惯是 left to right 的，lang 就语言。

第三行：charset文档编码，使用utf-8格式进行编码。

第四行：源代码中的这个元标签是为了在小屏幕上（比如智能手机）可以适当调整网页的大小。width=device-width告诉浏览器使用设备的整个宽度作为视口。

第五行：是一种开放的定义，比如说分享的时候会有标题，描述，图片，链接啥的，都可以用这个来定义。参考：Facebook 编写的元数据协议 Open Graph Data

第六行：你可以将网站固定在 iPhone 主屏幕上，让它感觉像一个原生应用程序。iOS Safari 浏览器中可以把网页或者 PWA 应用放到桌面 title 用来声明这个 web app 的标题。

第七行：同上，用来控制 web app 导航条的展示方式。

第八行：它告诉浏览器周边UI使用什么主题色。

第九行：起源试验让我们可以在网站上使用实验性的新特性，跟踪用户代理反馈，并报告给 Web 标准社区，而无需用户选择加入一个特性标识。例如，Edge 有一个针对双屏和可折叠设备基元的起源试验，这非常酷，因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。

第十行：想象一下，如果没有一个移动端响应式站点，那么当你在一个小屏幕上打开时，浏览器可能会调大字体，以方便阅读。CSS 的text-size-adjust属性可以用none值禁用，也可以指定一个百分比，允许浏览器调大字体。

许多`` 元素包含了 name 和 content 属性：

name 指定了 meta元素的类型；说明该元素包含了什么类型的信息。

content 指定了实际的元数据内容。

除上图内容外，还有一些其他name的情况：

• author：表示网页的作者。

• description：页面描述。

• keywords：关键字。

• robots：搜索引擎抓取的规则。

• renderer：双核浏览器的默认渲染方式

meta标签还有一个http-equiv属性：

当然笔者对这部分内容也没有完全了解，meta虽然在开发过程中接触到的不多，仅做了解就好。

最后

如果你需要找工作，可以评论或私信我，助你上岸。

Good Luck！