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

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

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

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

    <h1 id="20172">学号</h1>
    <a name="jyyy">姓名</a>一</a>
   

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

    <a href="#20172">回到学号</a>
    <a href="#jyyy">回到姓名</a>
   

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

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

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

	普通超链接 <a href="http://www.taobao.com/"target="">淘宝</a>
	下载链接 <ahref="day01.zip">下载资源</a>
	电子邮件链接 <a href="mailto:123@qq.com">
	空连接 返回页面顶部 <a href="">...</a>
	锚点跳转 目前常用于前端路由 <a href="#jyyy">...</a>
	实现特定的代码功能 <a href="javascript:void(0);">...</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. 空元素有哪些？
    单标签<br><hr><img><input><link><meta>

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

16. 简述<strong><em>和<b><i>的区别

    	<strong>加粗 和<em>斜体  表达元素 语义化元素：更加强烈！
    	<b><i>视觉元素 非语义化元素
    

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