1，src和href的区别
src用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
(1) src src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js 脚本，img图片和frame 等元素。
<script src ="js.js”></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
(2) href href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素(锚点）或当前文档(链接）之间的链接，如果在文档中添加
<link href="common.css" rel="stylesheet"/ >那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
(3) 区别：
当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
- 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)
补充： 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。 4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。 5、link方式的样式权重高于@import的权重。（如果对权重不是十分了解，可以看我之前的文章） @import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。相比之下link兼容性较好，且dom元素的样式可以被js动态修改，又因为link的权重高于@import，所以 @import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。
2，html语义化标签
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: div 和 span - 无需考虑内容. 语义元素实例: form, table, img - 清楚的定义了它的内容.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
优点：代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。 有利于搜索引擎优化（SEO）。
常用的语义化标签：title：页面主体内容。 hn：h1~h6，分级标题，h1 与 title 协调有利于搜索引擎优化。 ul：无序列表。 li：有序列表。 header：页眉通常包括网站标志、主导航、全站链接以及搜索框。 nav：标记导航，仅对文档中重要的链接群使用。 main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。 article：定义外部的内容，其中的内容独立于文档的其余部分。 section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。 footer：页脚，只有当父级是body时，才是整个页面的页脚。 small：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。 strong：和 em 标签一样，用于强调文本，但它强调的程度更强一些。 em：将其中的文本表示为强调的内容，表现为斜体。 mark：使用黄色突出显示部分文本。 figure：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。 figcaption：定义 figure 元素的标题，应该被置于 figure元素的第一个或最后一个子元素的位置。 cite：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。 blockquoto：定义块引用，块引用拥有它们自己的空间。 q：短的引述（跨浏览器问题，尽量避免使用）。 time：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。 abbr：简称或缩写。 dfn：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。 address：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。 del：移除的内容。 ins：添加的内容。 code：标记代码。 meter：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签） progress：定义运行中的进度（进程）。
补充：常用的seo方法 SEO就是指按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名.方法：
网站性能
语义化标签
关键词选取
丰富网站的内容，增加原创内容
增加外链
url路径标准化
域名，品牌标志
3，DOCTYPE(文档类型)的作用
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样(html或xhtml)的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS代码甚至JavaScript 脚本的解析。它必须声明在HTML文档的第一行。
浏览器渲染页面的两种模式(可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat) :
CSS1Compat:标准模式(Strick mode)，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat:怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
4，script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
defer和async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下:
执行顺序:多个带async属性的标签，不能保证加载的顺序;多个带defer属性的标签，按照加载顺序执行;
脚本是否并行执行：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。
5，常用的meta标签有哪些？
meta标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等等。除了http标准固定了一些 name 作为大家的使用的共识，开发者还可以自定义 name
常用的meta标签：
用来描述html文档的编码类型：
<meta charset = "UTF-8">用来描述html页面的关键词：
<meta name = "keywords" content = "关键词" />用来描述html页面的描述：
<meta name = "description" content = "描述" />refresh，页面重定向和刷新：
<meta http-equiv = "refresh" content = "0;url=" />viewport适配移动端，可以控制视口的大小和比例：
<meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1" />其中，content参数有以下几种:
1. width viewport:宽度(数值/device-width)
2. height viewport:高度(数值/device-height)
3. initial-scale:初始缩放比例
4. maximum-scale:最大缩放比例
5. minimum-scale:最小缩放比例
6. user-scalable:是否允许用户缩放(yes/no)
搜索引擎索引方式：
<meta name = "robots" content = "index,follow" />其中，content参数有以下几种:
1. all:文件将被检索，且页面上的链接可以被查询;
2. none:文件将不被检索，且页面上的链接不可以被查询;
3. index:文件将被检索;
4. follow:页面上的链接可以被查询;
5. noindex:文件将不被检索;
6. nofollow:页面上的链接不可以被查询。
6，html5有哪些更新
(1）新增语义化标签: nav、header、footer、aside、section、article
(2）音频、视频标签: audio、video
(3）数据存储: localStorage、sessionStorage
(4) canvas(画布)、Geolocation(地理定位) 、 websocket(通信协议)
(5) input标签新增属性: placeholder、autocomplete、autofocus、required
(6) history APl: go、forward、back、pushstate移除的元素有:
纯表现的元素: basefont,big, center,font, s,strike，tt,u;
对可用性产生负面影响的元素: frame,frameset,noframes;
7，img的srcset属性的作用？
8，行内元素有哪些？块级元素有哪些？空元素有哪些？分别有哪些区别？
行内元素：a，b，span，img，imput，select，strong，i，button，code，label…
块级元素：div，ul，ol，li，dl，dt，dd，h1-h6，p，header…
空元素：即没有内容的html元素。空元素可以在开始标签中关闭，也就是空元素没有闭合标签：
- 常见的有：br，hr，img，imput，link，meta…
- 鲜见的有area，base，col，colgroup，command…
区别：
- 一个行内元素只占据它对应标签的边框所包含的空间。块级元素占据其父元素（容器）的整个空间
- 1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
- 2、块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置width, height无效。
- 3、块级元素可以设置margin 和 padding。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
- 4、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素
- 5、设置居中，行内元素想要设置水平居中，只需要text-align属性即可。 这里设置的text-align是设置在外层的div当中，评论区有提到，因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中