一.    如何理解HTML结构的语义化？

1. 去掉或样式丢失的时候能让页面呈现清晰的结构。

2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。

3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

4. 便于团队开发和维护。

二.    谈谈以前端角度出发做好SEO需要考虑什么？

1. 了解搜索引擎如何抓取网页和如何索引网页。

2. Meta标签优化。

3. 如何选取关键词并在网页中放置关键词。

4.  了解主要的搜索引擎。

5. 主要的互联网目录

6. 按点击付费的搜索引擎。

7. 搜索引擎登录。

8. 链接交换和链接广泛度（Link Popularity）。

9. 标签的合理使用。

三.    引入CSS有哪些方式，有什么区别？

1. 内联样式（行内样式）：

2. 嵌入样式：

3. 链接引入：在head部分加入link标签，引入外部的CSS文件

4. 导入样式：通过@import在<style>标签中进行声明：

5. link和@import之间的区别：

        1）link是HTML标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；@import是 CSS 提供的语法规则，只有导入css的作用。

        2）加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 要在页面加载完毕后被加载，所以会出现一开始没有CSS样式，闪烁后出现样式的问题。

        3）@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link作为HTML标签，不存在兼容性问题。

        4）link可以通过 JS 操作 DOM来改变样式；@import则不支持（由于 DOM 方法是基于文档的）。

四. src和href的区别

1. href（Hypertext Reference 超文本引用）超链接，建立当前文档或元素与引用资源之间的连接，需要引用资源的时候就可以通过这个连接引用。

2. src（资源）会把资源下载下来，代替当前元素然后嵌入到文档中。

五、伪类和伪元素的区别

1. 伪类 单冒号；伪元素 双冒号。

2. 一个css选择符只能有一个伪元素；但可以有多个伪类。

3. 多个伪类可以拼接；伪元素不可以。

4. 伪元素只能处于选择符的最后方；而伪类可以在选择符的前方和后方，还可以与伪元素拼接在一起排在伪元素的前方。

5. 伪类基于DOM不产生新对象；而伪元素创建一个不存在DOM中的新对象，并且可以对这个新对象进行操作。

6. 伪类选择器：   有状态类=> :link\:visited\:hover\:active\:foucs        结构类=> :first-child\:last-child\:nth-child\:last-of-type       表单类=> :checked\:disabled\:valid\:required         语言类=> :dir\:lang  等

7. 伪元素：   ::after\::before\::first-letter\::first-line\::selection\::placeholder\::backdrop

六、圣杯布局

布局：三栏结构，左栏和右栏都是固定的宽度，中间栏的宽度会变化。

两种方式：

第一种定位+布局方法：

第二种flex布局方法：

七、双飞翼布局

    与圣杯的区别是：给center部分加上一个内置的小盒子inner，给inner设置左右边距防止center两边的内容被左右盒子覆盖。