Preparing Interview of Front-end Engineer-1

HTML

1. Web标准&W3C的理解和认识：
   标签闭合
   英文小写
   不要嵌套混乱 （参照嵌套规则https://www.jb51.net/html5/454857.html）
   用标签语义化来提高搜素的概率
   使用外链式的CSS和JS 脚本 使结构、样式、行为分离 内容能被更广泛的设备所访问
   代码精简 易维护 可复用
   开发组件化
   改版 升级方便

2. HTML和XHTML有什么区别？
   HTML是一种基于Web网页的设计语言
   XHTML使一种基于XML、语法严格、标准的设计语言

3. 区分严格模式和混杂模式，如何触发这两种模式？
   严格/标准模式：
   浏览器根据Web标准去解析页面的方法，
   一种要求严格的DTD，（文档类型定义）定义 XML 文档的合法构建模块
   不允许使用任何表现层的语法
   触发：在HTML标签前声明正确的DTD，正常建立网页
   混杂模式：
   一种向后兼容的解析方法（可以实现IE5.5以下版本浏览器的渲染模式）
   触发：可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明

4. 什么是静态网页、动态网页？
   静态网页：没有数据交互的网页，没有数据库参与。没有服务器端数据的加载 eg.只有HTML+CSS+JavaScript做成的网页
   动态网页：有后台数据参与的网页，从数据库中提取数据，需要有后台逻辑的支持 eg.JSP页面（JAVA），ASP页面（后台语言ASP.NET）

5. DOCTYPE有什么作用？区分严格模式和混杂模式有何意义？
   声明位于文档中的最前面，位于html标签之前，即告知浏览器的解析器， 用什么文档类型规范来解析这个文档。DOCTYPE不存在或格式不正确都会导致文档以混杂模式呈现。
   意义：严格模式的排版和JavaScript运行模式以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作（主要针对IE浏览器）

6. 如何调试网页代码？如何查看网页源代码？
   Windows系统下F12或者Ctrl+Shift+I

7. 语义化的主要目的？
   用正确的标签做正确的事情。 html语义化可以让页面的内容结构化，便于浏览器解析，便于搜索引擎解析，并提高代码的可维护度和可重用性。
   少用无意义的标签div多用语义化标签header section footer

8. 瞄点作用？如何创建？
   是文档中某行的一个记号，类似于书签，用于链接到文档中某个位置。当定义锚点后，可以创建直接跳至该锚点的链接，这样就无需滚动页面寻找信息。在使用a元素创建锚点时，可以使用name属性为其命名

    
   学号
    姓名一
   

   然后就可以创建链接，单击，直接跳转到锚点，

    回到学号
    回到姓名
   

9.列举常用的结构标签，并描述其作用
标识页面的不同结构，相对于使用div元素而言，结构标签可以实现语义化的标签。
常用的结构标签：

	
	定义文档的页眉
	
		定义页面的导航链接
	
	定义文档的节，表示文档中一个具体的组成部分
	
	定义独立于文档其他部分的内容
	
	定义某区域的脚注信息
	
		定义页面的一些额外组成部分eg.广告栏 侧边栏 相关引用信息

10.超级链接有哪些常见的表现形式？
a元素用于创建超级链接，常见的表现形式：

	普通超链接 淘宝
	下载链接 下载资源
	电子邮件链接 
	空连接 返回页面顶部 ...
	锚点跳转 目前常用于前端路由 ...
	实现特定的代码功能 ...

11. 测试过哪些浏览器？内核分别是什么？
    IE(Trident) Frifox(Decko) Chrome与Safari(Webkit) Opera(Presto)
    2013年谷歌为Chrome推出了Blink浏览器排版引擎，包括Opera在内的浏览器开发使用该引擎。

12. div是什么？在div出现之前用什么做网站布局？
    div是网站布局的盒子标签
    div出现前使用table布局，因为table布局嵌套很多，网站加载慢(table无法局部渲染)，布局层次不清晰

13. img标签上的title和alt属性的区别是什么？
    title的功能是为元素提供标题信息，当光标悬浮在标签上后显示的信息
    alt的功能是图片的替换文案，当图片不能正常显示时(如加载失败)用文字代替

14. 空元素有哪些？
    单标签


    ---

15. 简述src与href的区别
    src 引入来源地址 用在img，script，iframe等元素上
    href 引用超文本引用(hypertext reference)用在link和a等元素上

16. 简述和的区别

    	加粗 和斜体  表达元素 语义化元素：更加强烈！
    	视觉元素 非语义化元素
    

17. 你知道多少种DOCTYPE?HTML与XHTML有什么共同点？
    DOCTYPE标签可声明3种文档类型
    严格版本Strict
    过渡版本Transitional
    基于框架Frameset 的HTML文档
    浏览器通常由两种呈现模式Standards和Quirks
    Standards标准（严格呈现模式）呈现遵循最新标准的网页
    Quirks包容（松散呈现模式/兼容模式）呈现为传统浏览器而设计的网页

HTML和XHTML共同点：
所有标记必须有一个相应的结束标记
所有标签的元素和属性的名字都必须小写
所有XML标记都必须合理嵌套
所有属性必须用“”括起来
所有<和&特殊符号都用编码表示
给所有属性赋一个值
不要在注释内容中使用–
图片必须有说明文字

18. 在新窗口打开链接的方法？
    target=_blank
19. HTML,CSS,JavaScript的关系？
    html 网页内容的载体 框架 文字，图片，视频等
    css 网页内容的表现 包装 字体，颜色，边框
    js 网页上的特效和交互
20. 在一个特定的框架中如何使用HTML中的超链接定位？

<a href="newpage.html" target="newframe">New Page</a>

21. 请你说说iframe有哪些优点？https://blog.csdn.net/katara1109/article/details/49073663
    可以解决加载缓慢的第三方内容，eg图标 广告
    可以实现安全沙箱（Security Sandbox）https://blog.csdn.net/rth362147773/article/details/55670035
    可以并行加载脚本
22. iframe缺点
    会阻塞主页面的Onload事件
    内容即使为空，加载也需要时间
    元素没有语义
23. 你对语义化的理解
    丢失样式的时候能够让页面呈现出清晰的结构
    SEO是指和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效信息，爬虫依赖标签来确定上下文和各个关键字的权重
    其他设备解析（eg屏幕阅读器，盲人阅读器，移动设备）以有意义的方式来渲染网页
    在团队开发和维护中，语义化更具可读性，是未来网页发展的重要方向，遵循W3C标准的团队开发的网页，都会遵循这个标准，以减少差异

总结：概念性试题居多，语义化标签是重点，特殊标签及其特殊用途，牢记熟悉的却容易忽视的eg.DTD