简答题1. HTML和XHTML有哪些区别?
HTML与XHTML的区别主要有10个方面。
(1)XHTML需要良好的文档结构,也就是元素要合理嵌套。
(2)在XHTML文档中,元素名称会区分大小写,并且元素名称和属性要小写。
(3)在XHTML文档中,所有元素都需要结束标签。
(4)在XHTML文档中,可混合各种XML应用。
(5)在XHTML文档中,注释标签(<!---->)中的内容将会被忽略。
(6)XHTML文档内的CDATA中的内容可以被执行。
(7)在XHTML 1.0中,不推荐a、applet、form、frame、iframe、img和map元素拥有name属性,但加了也不会报错。
(8)在HTML中用脚本读取到的HTML标签名和属性名会以大写形式返回,而XHTML 1.0则是小写。
(9)在XHTML文档中,元素的属性值需用引号包裹,并且禁止属性简化。
(10)在XHTML文档中,有些特殊字符必须被替换为实体引用。
[考点] HTML与XHTML
2. HTML实体的应用场景有哪些?
如果要在HTML文档中显示特殊字符(例如“<”“>”等),那么就可以使用HTML实体。HTML实体还能预防XSS(跨站脚本攻击)攻击。XSS通常会将脚本代码注入HTML文档中,再解析执行,但使用了HTML实体后,就可以让相关代码只打印,而不执行。
[考点] HTML与XHTML
3. HTML和HTML5的区别有哪些?
HTML和HTML5主要有以下5个区别:
(1)旧版本的HTML比较依赖浏览器的插件,例如播放视频需要安装Flash插件。
(2)因为HTML5不再基于SGML,所以文档声明类型(DOCTYPE)只有一种。
(3)HTML5消除了过时或冗余的元素,例如font、center等。
(4)HTML5新增了许多语义化的元素(如article、header等)和新功能(如video、canvas等),并提供了更好的跨平台支持。
(5)HTML5规定了新的全局属性和元素属性,全局属性有draggable、contenteditable等,元素属性有accept、placeholder等。
[考点] HTML5
4. 你怎么看待Web App、Hybrid App和Native App?
随着HTML5功能的不断完善,促进了Web App与Hybrid App的发展,同时也影响了Native App的市场占有率。下表对这三种技术进行了概要说明。
App技术
|
App技术
|
说明
|
Web App
|
利用Web浏览器和Web技术通过网络执行任务的应用
|
Native App
|
以特定编程语言编写的智能手机应用程序,例如用于iOS系统的Objective C和用于Android系统的Java
|
Hybrid App
|
将Web App包装在本机容器中(常用的有WebView),从而可以通过使用本机SDK来增强Web代码 的处理能力
|
下图用两个圆描绘出了三者之间的关系,Hybrid位于Native和Web的重叠处。
三者的关系
[考点] HTML5
5. 简述一下你对HTML5语义化的理解。
所谓语义是指对词语或句子含义的正确解释。HTML5中的语义化就是让元素、属性或属性值有含义,更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离,元素只负责文档内容的结构与含义,而CSS样式控制内容的呈现,像b元素,没有语义却能将字体变粗,这类元素违背了语义化的目的,将会被废弃。
[考点] HTML5
6. 语义化有哪些优势?
语义化有着巨大的优势,这里简要概括为3条,如下所列:
(1)良好的语义使得HTML文档结构清晰、布局合理、主体突出、可读性更强,便于开发者更快速地理解代码的意图。
(2)促进无障碍访问,降低信息污染,帮助残障人士的辅助设备(如屏幕阅读器等)识别元素含义,做出正确反馈。
(3)改善搜索引擎优化(SEO)。经过语义化的HTML能提供丰富的上下文信息和内容的含义,让爬虫更容易分析内容、区分类型以及对内容进行索引。
[考点] HTML5
7. 什么是微格式?
微格式(Microformat)是一种数据结构化技术,通过添加属性(class或rel)和元数据(link元素)的方式来实现Web的语义化,让内容适合人类阅读,以及容易被机器处理。rel属性用来描述两个文档之间或文档与资源之间的关系,link和a元素都有这个属性,a元素的rel属性表示一种链接关系。新版的微格式定义了5种类前缀(即class属性的值),具体说明如下表所列。
类前缀
|
类前缀
|
描述
|
h-*
|
根元素,指定元素是微格式
|
p-*
|
表示一个纯文本元素
|
u-8
|
表示—个链接元素
|
dt-*
|
将元素作为日期或时间
|
e-*
|
解析元素的内容
|
[考点] HTML5
8. 请描述下面代码的作用。
<ul role="listbox">
<li role="option">蓝色</li>
<li role="option" aria-selected="true">红色</li>
</ul>
上面的代码通过ARIA属性,让设备知道ul元素表示选择框,li元素表示选择框的选项,并且第二个选项处于选中状态。ARIA属性是由WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications)引入的,这些属性为存在视觉障碍的用户服务,可添加在任何HTML元素中,它有两类定义方式:role和aria-*(以aria-开头的属性)。role属性定义了对象的通用类型(包括radio、checkbox、button等);aria-*属性提供有关对象的特定信息,例如单选框或复选框的checked状态、按钮的disabled状态等。更多信息可以直接参考W3C中的WAI-ARIA章节。
[考点] HTML5
9. 什么是Shadow DOM(影子中的DOM)?
Shadow DOM是浏览器的一种功能,能够自动添加子元素,例如audio元素在网页中能使用进度条、音量控制等功能,这些相关元素都由浏览器自动生成。在HTML文档中可以很简单地使用该元素,代码如下所示。
<audio controls src="test.wav"></audio>
[考点] HTML元素 元素基础
10. 元素属性src和href有什么区别?
两者的功能不同。href(hypertext reference)能够建立一条通道,将当前文档和定义的资源连接起来。src (source)是将定义的资源嵌入到当前文档中。
[考点] HTML元素 元素基础
11. img元素中的title和alt属性有什么区别?
title是全局属性,提供额外的提示信息,当鼠标滑动到该元素时,显示定义的提示。link和style元素中的title比较特殊,表示样式表的名称;alt是局部属性,仅可用在img、input等元素中,提供在图片未载入或加载失败时的替代文本。注意,只有当input元素的type属性值为image时,才能使用有alt属性。
[考点] HTML元素 元素基础
12. CSS有几种引入方式?它们有哪些区别?
有3种,分别是内联样式(inline style)、内嵌样式(embedded style)和外部样式(external style)。它们的区别可参考下表中的对比,第一行描述了要比较的特征。
CSS引入方式的对比
|
方式
|
特殊性
|
HTTP请求
|
重用范围
|
文档大小
|
伪类与伪元素
|
内联样式
|
最高
|
无
|
不可重用
|
增加
|
不可定义
|
内嵌样式
|
与外部相同
|
无
|
当前文档
|
增加
|
可定义
|
外部样式
|
与内嵌相同
|
有
|
整个项目
|
保持
|
可定义
|
[考点] HTML元素 元数据
13. 外部样式可用link元素引用,其结构如以下代码所示。其中rel属性的作用是什么?
<link rel="stylesheet" type="text/css" href="css/style.css" />
link元素除了拥有全局属性外,还包含5个特殊的属性:type、media、title、href和rel,其中rel属性用于定义当前文档与目标资源的关系。它有多个关键字可供选择,例如alternate、tag、stylesheet等。经常使用的是stylesheet,表示文档的外部样式表。
[考点] HTML元素 元数据
14. JavaScript有几种引入方式?它们有哪些区别?
有3种,分别是内联脚本(inline script)、外部脚本(external script)和元素属性(element attribute)。它们的区别可参考下表中的对比,第一行描述了要比较的特征。
JavaScript引入方式的对比
|
方式
|
内容和行为
|
HTTP请求
|
重用范围
|
文档大小
|
特点
|
内联脚本
|
耦合
|
无
|
当前文档
|
增加
|
将内联脚本放在外部样式表之后,会延迟其他资源 的下载
|
外部脚本
|
分离
|
有
|
整个项目
|
保持
|
容易维护,高复用,可用defer或async属性解决页 面阻塞问题
|
元素属性
|
耦合
|
无
|
不可重用
|
增加
|
两种定义方式,分别是事件属性和在链接属性中使 用特殊伪协议的URL。不但能制作可执行JavaScript 的浏览器书签,还能用a元素模拟按钮的效果
|
[考点] HTML元素 元数据
15. 下面代码中的图像是否会被延迟下载?为什么?
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script>
setTimeout(function() {
console.log(123);
},3000);
</script>
<img src="img/lake.png" />
会。将内联脚本(把JavaScript代码放置在<script>和</script>标签之间)放在外部样式表之后,会延迟资源下载,只有当样式表下载完成并且内联脚本执行完毕时,后续资源(例如代码中的图像)才能开始下载。这是因为内联脚本可能含有依赖于样式表中CSS规则的代码。
[考点] HTML元素 元数据
16. 用meta元素的两种声明方式,把当前HTML文档中的内容用UTF-8进行编码。
HTML5推荐使用meta元素中的charset属性来声明,charset是HTML5新增的属性,可用来表示HTML文档中的内容所用的字符编码,定义的属性值不区分大小写。下面的代码用该属性对内容进行UTF-8编码。
<meta charset="UTF-8"/>
过去,会使用一种比较长的编码声明方式,代码如下所示,它与上面的方式是等价的。
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
[考点] HTML元素 元数据
17. meta元素可以定义文档的哪些元数据?
meta元素可定义的元数据可简要概括为4类,如下所列:
(1)声明HTML文档内容所用的字符编码。
(2)完善文档描述信息,让搜索引擎更容易解析索引,提升SEO (search engine optimization)。
(3)适配移动设备,使页面在各种尺寸的屏幕中显示正确。
(4)指定首选样式表、执行重载或重定向。
[考点] HTML元素 元数据
18. 什么是锚点?
锚点(anchor)是一种特殊链接,能定位到HTML文档中的某个特定位置,这个文档既可以在当前域名下,也可以在其他域名下,代码如下所示。
<a href="#">返回顶部</a>
<a href="#anchor">内部定位</a>
<a href="http://www.pwstrick.com/1.html#anchor">外部定位</a>
通过HTML元素的id或name属性来设置锚点。目前只有a元素可以用name属性设置锚点,但HTML5将a元素的name属性被废弃了,所以推荐的用法是都用id属性来设置锚点。
[考点] HTML元素 超链接和图像
19. 什么是分区响应图?
分区响应图(即热点区域)能让图像上的部分位置有超链接。将map元素和area元素组合使用,可创建分区响应图,代码如下所示。
<img src="img/lake.png" usemap="#Map"/>
<map name="Map">
<area shape="circle" coords="50,50,30" href="/">
<area shape="rect" coords="100,100,150,170" href="/">
</map>
map元素中的name属性必须定义,且赋予一个名称,以便img元素使用usemap属性引用它,如果同时还指定了id属性,那么两个属性必须具有相同的值。
[考点] HTML元素 超链接和图像
20. 请列举几个HTML5新增的图像相关的语义化元素。
HTML5新增了两个与图像相关的语义化元素:figure和figcaption。这两个元素都属于内容分组,两者组合,可用于插入图像,以及对图像的描述,如下所示。
<figure>
<img src="img/avatar.jpg" />
<figcaption>头像照片, 2017/06/18</figcaption>
</figure>
[考点] HTML元素 超链接和图像