本文已参与「新人创作礼」活动，一起开启掘金创作之路。

html页面书写是前端最基本的技能了，但很多之前遇到却不太了解作用的地方，今天一起来了解一下html中的一些知识点。

DOCTYPE 的作用是什么？

一般位于文档的第一行，主要作用是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

行内元素有哪些？块级元素有哪些？

CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1-h6 p

页面导入样式时，使用 link 和@import 有什么区别？

```
<style type="text/css">
@import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" 
```

link功能较多，可以定义 type，定义 Rel 等属性，而@import只能用于加载 css；
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载；
link 支持使用 js 控制 DOM 去改变样式，而@import 不支持
@import需要 IE5 以上才能使用；

浏览器内核

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine),JS 引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后渲染到用户的屏幕上。

JS 引擎则：解析和执行 javascript 来实现逻辑和控制 DOM 进行交互。

HTML5 新特性、移除了哪些？

新增

绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储，localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术 webworker, websocket;

移除

纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes；

em 与 i 的区别

两者实现效果都是斜体，em 是语义化标签，表强调，而 i 是样式标签，表斜体。两者区别在于有无强调效果。类似于b标签和strong标签的区别，两者都为加粗，但是strong有强调效果。

可以自闭合的元素

表单元素 input
img
br, hr
meta, link

HTML 语义化

用标签做它代表意义的事情。

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读和维护。

html 中 title 属性和 alt 属性的区别？

当图片不输出信息的时候，会显示 alt 信息鼠标放上去会出现 title 信息；
当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息；
除了纯装饰图片外都必须设置有意义的值，搜索引擎会分析。

注：给图片加对应的alt标签是有利于SEO的

head 元素了解(重点)

描述网页基本信息的，一个网页，首先得有个标题。除此之外，还可以需要补充一些基本信息。

文档标题（浏览器标签中显示的文本）：<title>深入了解 head 元素</title>
编码格式：<meta charset="utf-8"> 如果页面出现乱码，那一般就是编码格式不对
视窗设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
搜索引擎优化相关内容： <meta name="description" content="帮助你深层次了解HTML文档结构">
IE浏览器版本渲染设置：<meta http-equiv="X-UA-Compatible" content="ie=edge">

渐进增强和优雅降级的定义

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

rem和em的区别（自适应页面常用）

em 相对单位。不同的属性有不同的参照值。

对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。

rem 是相对于根元素 html 的 font-size 来计算的，区别于em的是它的参照物是固定的。
rem 只需要修改 html 的 font-size 值即可达到全部的修改。
px表示像素是绝对单位，不会因为其他元素的尺寸变化而变化；

响应式开发

响应式布局就是一个网站能够兼容多个终端如PC端、移动端（平板、横屏、竖排）。

响应式要对上述的视窗设置进行配置，因为它本来是要适配移动端和pc端的，但viewport的存在让针对移动端的设置都失去了效果，所以第一步就是让viewport失去效果：

<meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />

媒体查询（很好用）

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。通过媒体查询设置断点，可以为各种屏幕宽度的设备提供对应样式。

使用em或rem做尺寸单位
使用流式，浮动栅格布局

响应式布局最常见的就是在pc端使用多栏布局（栅格），因为栅格布局很方便在不同屏幕设备中进行增删或者移动从而实现各种大小屏幕的适配（如小屏幕就一栏，而大屏幕就有三栏），每栏的宽度用流式布局（有时也叫弹性布局，就是width使用百分比）进行适应，因为不同屏幕的宽度各异。然后使用浮动进行横排。最外层包裹元素一般加个max-width，防止pc大屏太宽，导致页面内容跨度过大，造成阅读困难。然后根据断点判断屏幕大小，对每一栏清除浮动，删减或者移至下方。

vw、vh

css3中引入与视口有关的新的单位vw和vh，vw表示相对于视口的宽度，vh表示相对于视口高度。
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px
大多数浏览器都支持，但是ie11不支持少数低版本手机系统 ios8、android4.4以下不支持。

了解下html一些知识点