1、DOCTYPE作用?标准模式与兼容模式各有什么区别?
1-1、DOCTYPE的作用
doctype声明在网页中是必不可少的,它是一种标准通用标记语言的文档类型声明,主要是为了告诉浏览器(标准通用语言解析器)应该使用什么文档类型来解析文档。
1-2、标准模式与兼容模式
标准模式:行为即由HTML和CSS的规范描述的行为
兼容模式:也叫怪异模式,排版会实现IE的非标准行为
1> 盒模型
在严格模式中 :width是内容宽度 ,元素真正的宽度 = width;
在兼容模式中 :width则是=width+padding+border
2> 元素宽高的设置
在标准模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效。
在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
3> 用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决【body{text-align:center};#content{text-align:left}】)
2、XHTML和HTML的区别
XTHML元素必须被正确的嵌套
XHTML元素必须被正确的关闭
XHTML元素的标签名必须使用小写
XHTML文档必须拥有根元素
XHTML的标准是严格的,他必须遵循以上要求:<br>
这样的写法是不允许的,他必须写成<br/>
这个样式才是正确的。
3、前端页面由哪几部分构成,分别是什么?作用是什么?
3-1、构成
前端页面主要由结构(HTML)、表现(CSS)和行为(JavaScript)三部分组成。
3-2、作用
HTML实现页面结构;CSS操作页面表现;JavaScript实现页面行为。
4、什么是语义化的HTML?为什么要做到语义化?
4-1、语义化
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
例如:实现一个按钮,我们可以使用<button>按钮</button>
标签,也可以使用<div>按钮</div>
标签代替;更好的做法是:我们使用button
标签,而不是div
标签。
4-2、语义化的好处
1>、有利于SEO,便于搜索引擎爬虫更好的理解我们的网页,从而获取更多有效的信息,提升网页的权重【爬虫依赖于标签来确定上下文和各个关键字的权重】
2>、在没有CSS的时候,能够清楚的看出网页结构,增强页面的可读性
3>、便于团队开发和维护,方便开发者阅读,从而提高团队的效率和协调能力
4>、支持多终端设备的浏览器渲染
5、常见的浏览器的内核是什么?
参考网址:https://www.jianshu.com/p/6efcccb5ed43
6、HTML与HTML5
6-1、HTML
1>、文档类型声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></html>
2>、结构语义化
没有体现结构语义化的标签【网站头部的表示:<div id="header"></div>】
6-2、HTML5
1>、文档类型声明
<!DOCTYPE html>
<html></html>
2>、结构语义化
更加语义化,提供了新的header标签【网站头部的表示:<header></header>】
7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?
1>、定义:
广义的HTML5指的是包含HTML5、CSS3和JavaScript在内的一套组合技术。
2>、浏览器的支持:
火狐、IE9+、safari、谷歌、Opera等
3>、新特性:
3-1> 更加语义化,用户体验更加完美
3-2> 本地存储特性:使得启动时间更短,联网时间更快
3-3> 网页多媒体特性的支持:video、audio
4>、优缺点:
4-1>、优点:
<1> 改善用户的友好体验
<2> 多设备、跨平台
<3> 添加了音频和视频
<4> 很好的替代Flash
<5> 涉及到网站的抓取和搜索队的时候,很好的适应SEO
<6> 被大量的用于应用程序和游戏
4-2>、缺点:
浏览器兼容性不好,IE9以下全军覆没
5>、新增的标签
header、footer、section、article、nav、aside、main、data、time、video、audio、canvas、svg
6>、移除的标签
big、center、font、s、tt、u
兼容性问题的解决:
1>、动态的创建标签
document.createElement('header')
2>、用框架的方法,添加条件注释加JS代码实现
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->