HTML简介、语义化标签
1.1.1、Doctype作用？标准模式与兼容模式各有什么区别?
1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2）标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
1.1.2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式
来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
1.1.3、如果我不放入<! DOCTYPE html> ，HTML5还会工作么？
不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作
1.1.4、doctype（文档类型）的作用是什么？你知道多少种文档类型？
此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
1、HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。
2、XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
1.1.5、浏览器标准模式和怪异模式之间的区别是什么？
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。
1.1.6、什么是HTML5？
H5=HTML5，指的是HTML超文本标记语言（HTML）的第五次重大修改，HTML的第五代。它的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等。HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的。
HTML5具有的特点：
（1）、语义化的标签：好处是网站加载更快；该标签举例：header、nav、article等。
（2）、增加了音频、视频标签：好处是取代falsh；该标签举例：audio、video。
（3）、canvas标签：好处在浏览器上绘制图形或动画，取代flash。
（4）、支持手机和平板的响应式布局。HTML5的缺点：低版本浏览器支持性不好，比如IE9以下的浏览器不支持HTML5。
1.1.7、使用XHTML的局限有哪些？
XHTML与HTML的区别为：
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。
局限：
所有的XHTML元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。
1.1.8、如果把HTML5看作做一个开放平台，那它的构建模块有哪些？
,,,等
1.1.9、HTML 和 XHTML 有什么区别？
XHTML全名是“可扩展超文本置标语言”（eXtensible HyperText Markup Language），要说它和HTML（HyperText Markup Language）的区别就要从开始说起。
当初基于HTML衍生出XML，因为XML拥有更加严谨的语法以及更好的语义环境，所以当年W3C的老大们纷纷认为HTML没用了，用XML更好。但是当时的环境直接让WEB跃进到XML实在有些不现实，毕竟当时还有许多书写不严谨的网页，而且应用于网页环境显然HTML更加有优势。于是讨论的结果是XML是未来的趋势，但是需要一个过程慢慢摸索实现的途径，所以就有了XHTML，这是一个作为HTML到XML过渡过程的一个产物。
XHTML是在HTML的基础上向XML过渡的东西，和HTML最大的区别就在于它更严谨而且语义化更强。比如XHTML规定所有标记都必须小写，因为XML需要区分大小写，而HTML不这么要求；XHTML要求标签必须闭合，不允许开放标签存在比如“<p>第一段<p>第二段”这样的写法在XHTML里是错误的，但是HTML允许它的存在）。目前XHTML的最新版本是XHTML1.1，不过常用的仍是XHTML1.0，XHTML1.1规则太过严格，很多网站受不鸟（刚才提到的两个错误，在XHTML1.0里还是可以容忍，但是到了XHTML1.1就直接送你一个错误页面）。下一代的XHTML标准是XHTML2.0，在03年开始制定，新出来的规范抛弃了大量HTML的属性和标记，而且允许使用XML的命名空间，而且开始允许扩展。总之说的很牛逼，不过HTML5兴起之后XHTML2.0的工作就被停止了，2006年W3C关闭了XHTML2.0的工作组，转向HTML5规范的制定，未来HTML5普及以后估计XHTML就要成为历史了。
1.1.10、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画canvas;
用于媒介回放的video和 audio 元素;
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失;
sessionStorage的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;
1.1.11、如果页面使用 application/xhtml+xml'会有什么问题吗
一些老的浏览器不支持,实际上,任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档.
1.1.12、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
1.1.13、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，
只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
1.1.14、介绍一下你对浏览器内核的理解？
主要分成两部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎： 则解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
1.1.15、常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
1.1.16、如果网页内容需要支持多语言，你会怎么做
1）采用统一编码UTF-8方式编码
对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示
2）语言书写习惯&导航结构
3）数据库驱动型网站 实现对不同语言数据信息的收集和检索。
1，在数据库级别支撑多语言：为每种语言建立独立的数据库，不同语言的用户把持不同的数据库。
2，在表级别支撑多语言：为每种语言建立独立的表，不同语言的用户把持不同的表，但是它们在同一个数据库中。
3，在字段级别支撑多语言：在同一个表中为每种语言建立独立的字段，不同语言的用户把持不同的字段，它们在同一个表中。
4）搜索引擎&市场推广
多语言网站实现计划：
1、静态：就是为每种语言分辨准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。一旦用户选择了需要的语言后，主动跳转到相应的页面，首页以下其他链接也是按照同样方法处理。从保护的角度来看，通过子目录比通过文件后缀名来区分不同语言版本显得要简略明了。
2、动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的处所同一采用语言变量来表现，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字。
1.1.17、简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
1.1.18、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...）
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。
1.1.19、请谈一下你对网页标准和标准制定机构重要性的理解。
w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。
1.1.20、使用data-属性的好处是什么
data-*属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-*属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀"data-"之后必须有至少一个字符
属性值可以是任意字符串
1.1.21、H5为什么这么火？H5是哪一年产生的？H5会火多久？
（1）、因为H5的后台很硬，是谷歌（google）和苹果（Apple）两大巨头公司，谷歌和苹果大力倡导H5的发展，也是H5的忠实的支持者和实践者（IOS+Android系统占据手机市场92.36%），H5的产生主要目的也是干掉flash，因为flash是adobe公司的，adobe不是W3C组织的成员之一，苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。
（2）、H5是2014年9月份W3C（万维网联盟，主要有苹果和谷歌公司）组织发布的。
（3）、刷脸时代（这里专指网站用户体验更加美观的时代）+移动端时代（手机+平板），会促使H5会在未来的有更加美好的发展前景，只要有网站，H5就会很火，UI也就很火，H5的发展会让UI更加提高用户的满意度，H5的火爆时代，会促进UI更好发展。
(4)、微信的发展，O2O的促使H5更火。在这里不得不谈微信，如果没有微信，或许今天我们不会这样来讨论H5，微信无意中养成了用户扫码的习惯，并通过公众号的内容生产及分发，以及微信本身已有的庞大的用户群体及社交属性，使基于网页的内容可以快速传播，真正带来了APP即浏览器的时代，取消了输入内容网址的麻烦。以微信为代表的超级社交APP，解决了网页内容浏览及分发的通路。
H5或许会没落，但会迎来H6、H7...，只会变得越来越好，所以没必要担心H5会不会死，当下重在实践与积累，至少现在，Html5的影响力，会超出你我的想象，也就意味着H5的好闺蜜UI会一直火下去。
1.1.22、div是什么？在div出现之前做网站用什么布局？
div是网站布局的盒子标签，div出现是table布局，因为table布局嵌套很多，网站加载慢，布局层级不清晰。
1.1.23、html是什么？css是什么？js是什么？
（1）、html是超文本标记语言，他是做网站时候用的一些文本标记标签，比如div、span等。
（2）、 css是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background（背景）、color（字体颜色）、height（高度）、width（宽度）等。
（3）、js=javascript是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件（click）、前后台数据请求（ajax）等。
1.1.24、什么是静态网页？什么叫做动态网页？
（1）、静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。
（2）、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是asp.net）。
QQ技术交流群:815302226
网友评论