前端面试题（H5+c3）

HTML相关

1.什么是HTML语义化？HTML语义化的好处是什么？

html语义化:根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。\

比如：尽可能减少无语义的标签DIV，多使用语义标签header

html语义化优点：

a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

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

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

e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2.HTML5中新增了哪些内容？

广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。

1：Html中新增了语义化标签，

< header >头部标签      < nav >导航标签         < article >内容标签

< section >定义文档某个区域 < aside >侧边栏标签   < footer >尾部标签

2.1.新增的多媒体标签  

< audio > 音频  常见属性autoplay  controls  loop  src      

 < video > 视频 常见属性autoplay  controls width height  loop src

3.新增表单标签type=email/url/month/tel   input的placeholder。

4.新增了canvas画布。

5.Css3中新增了：圆角，阴影，滤镜，vw vh单位，flex布局，媒体查询，过渡和动画，伪类。

webAPI,新增了本地上传localStorage和sessionStorage，1.document.querySelector()和document.querySelectorAll()

webSocket，requestAnimationFrame，Worker(类似分线程)，地理位置。

3.对WEB标准的理解？

Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：

• 结构化标准语言主要包括XHTML和HTML以及XML，
• 表现层标准语言主要包括CSS，
• 行为标准主要包括对象模型，DOM、ECMAScript等

3.1 结构层标准

结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

2.2 表现层标准

表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。

1. 尽可能使用外部引入的方式，达到分离的目的
2. CSS选择器，优先级
3. 代码简洁

2.3 行为层标准

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

3.对W3C的认识？

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点：

3.1 对于结构的要求

• 1）标签字母要小写
• 2）标签要闭合
• 3）标签不允许随意嵌套

3.2 对于css和js的要求

• 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
• 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
• 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

4.怎么隐藏页面中的某个元素？

1.宽高均设置为0；

2.当有两个层时，设置层级，令需隐藏的元素在下面；  z-index

3.Display:none;      隐藏且不占用位置。

4.Visibility:hidden;   隐藏但保留位置。会影响布局

5.Opacity:0;   隐藏但保留位置。会影响页面布局 

6.transform: scale(0,0); 使用2d转换的缩放特效，将缩放的款高变成0即可

5.谈一下页面布局架构？

• CSS布局：table布局，float布局，flex布局（瀑布流布局），inline-block布局
• 三大框架，页面架构

6. img的alt与title有何异同，strong 与 em 的异同？？

   Alt:是图片的替换文案，即当图片不能正常显示时（如加载失败），用文字代替

title:为元素提供标题信息，即当光标悬浮在标签上后面显示的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

7.src和href的区别？

Src：表示引用资源，用于替代这个元素，（img，script），src是页面内容不可缺少的一部分，表示引入。

Href：是引用和页面关联，是在当前元素和引用资源之间建立联系，用于link和a等元素上。

8.link和@import的区别？

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。Ie5以上才能识别

4.link权重高于improt。在link标签引入的 CSS 文件中，使用@import时需注意，如果已经存在相同样式，@import