HTML5 测试题

4个月前 ⋅ 0

1 标签语义化是指什么？使用标签语义化有什么好处。

  • HTMl标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。
  • 标签语义化的好处：

1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页（对css支持较弱的设备）
6. 便于团队维护和开发

2 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

  • DOCTYPE的作用：<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

  • 标准模式和混杂模式：

    • 标准模式（Standards mode）：浏览器按照 W3C 标准解析代码
    • 混杂模式（Quirks mode）：浏览器用自己的方式解析代码

  • 区分标准模式和混杂模式：

    • 如果文档包含严格的 DOCTYPE ，那么它一般以标准模式呈现
    • 有 URI 的过渡 DTD ——标准模式；没有 URI 的过渡 DTD ——混杂模式
    • DTD不存在或者格式不正确——混杂模式
    • HTML5 没有严格和混杂之分。HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

  • 意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

    3 元素的alt和title有什么异同？

  • alt作为图片的替代文字出现，title作为图片的解释文字出现。

  • alt属性应用较少，如img、area、input中；title应用较多，如a、form、input、还有div、p这些块级元素都可以用。

  • alt仅作为标签属性，title也可以是标签，它是网页的标题标签。

    4【多选】关于

    A. autoplay属性，则视频在就绪后马上播放。
    B. loop属性，则当媒介文件完成播放后再次开始播放。
    C. preload属性，则视频在就绪后马上播放。
    D. autoplay属性，则当媒介文件完成播放后再次开始播放。

5【多选】下列说法正确的是 ( AD  )

A. 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
B. 在标签上不用设置任何属性，任何元素均可拖拽
C. 当开始拖拽时，会发生 drop 事件。
D. ondragover 事件规定在何处放置被拖动的数据。

6 什么是 Canvas？

  • Canvas是h5新增的一个标签

  • HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

  • 画布是一个矩形区域，您可以控制其每一像素。

  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    7 什么是SVG？与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势是哪些？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

  • SVG 用于定义用于网络的基于矢量的图形

  • SVG 使用 XML 格式定义图形

  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

  • SVG 是万维网联盟的标准

优势：

  • SVG 图像可通过文本编辑器来创建和修改

  • SVG 图像可被搜索、索引、脚本化或压缩

  • SVG 是可伸缩的

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

    8 canvas与svg都可以创建图形，那么他们的区别是什么？

  • canvas：

    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  • svg：

    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
    • 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
    • 不适合游戏应用

9 在 HTML5 中，onblur 和 onfocus 是 (  C   )

A. HTML 元素
B. 样式属性
C. 事件属性
D. 窗体底端

10 由 SVG 定义的图形是什么格式的？（ C ）

A. CSS
B. HTML
C. XML

11canvas中，使用rotate方法进行旋转，进行旋转的是画布坐标系。

12【多选】下列关于canvas描述正确的是 (   BC    )

A. HTML5  标签用于绘制图像，不需要借助任何脚本即可绘制。
B.  元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
C. getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
D. 通过jquery选择器选中canvas元素可以直接调用执行期上下文

解析：HTML5 <canvas> 标签用于绘制图像，需要js脚本来驱动，通过jquery选择器选中的元素返回为jq对象，不能直接调用canvas中的执行期上下文，需要选中对象中索引值为零的dom元素，再去调用执行期上下文。

13【多选】下列做法可以提高网页性能的有哪些？（ ABCD ）

A. http 请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，
B. 提取公共的样式，公共的组件，
C. 雪碧图，
D. 缓存资源，

14【多选】关于h5中的video标签，下列说法正确的是 (  ABD   )。

A. 可以使用poster属性指定占位图像
B. 可以使用width height属性设置视频尺寸
C. 可以使用muted属性制定占位图像
D. 如果使用了muted属性，视频从一开始就处于静音状态

解析：可以使用poster属性指定占位图像，可以使用width height属性设置视频尺寸，如果使用了muted属性，视频从一开始就处于静音状态

15 新的html5全局属性，“contenteditable”用于（B ）

A. 规定元素的上下文菜单，该菜单会在用户点击右键点击元素的时候出现
B. 规定元素内容是否可以编辑
C. 从服务器升级内容
D. 返回内容在字符串中首次出现的位置

解析：contenteditable 属性规定元素内容是否可编辑。如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

16 ctx.arc(100,100,100,0, Math.PI,true) canvas绘制圆形的arc方法中，参数说明正确的是( D )

A. 圆半径，圆心X坐标，圆心Y坐标,开始角度，结束角度，是否顺逆时针 true逆时针
B. 圆半径，圆心X坐标，圆心Y坐标,开始角度，结束角度，是否顺逆时针 true顺时针
C. 圆心X坐标，圆心Y坐标,圆半径，开始角度，结束角度，是否顺逆时针 true顺时针
D. 圆心X坐标，圆心Y坐标,圆半径，开始角度，结束角度，是否顺逆时针 true逆时针

参数 描述
x 圆的中心x坐标
y 圆的中心y坐标
r 圆的半径
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是0度）
eAngle 结束角，以弧度计
counterclockwise 可选。规定应该逆时针还是顺时针绘图。false=顺时针，true=逆时针

17 为了使元素可拖动，把_draggable_属性设置为true,在拖放过程中，开始拖动元素会触发_dragstart_事件，松开时会触发_dragend_事件。

18 写出html5标准的页面结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  网页内容
</body>
</html>

19【多选】下列关于h5中语义化标签的说法正确的是 (   ABCD   )

A. 语义化即用更加贴合语义或内容的标签包裹相应的内容。
B. html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
C. 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
D. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

20 下列 cookie、sessionStorage 和 localStorage 的说法错误的是？（D）

A. cookie、sessionStorage 和 localStorage都是保存在浏览器端，且是同源的。
B. cookie 是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带。
C. cookie 保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
D. cookie、 sessionstorage和localstorage在所有同源窗口都是共享

解析：sessionstorage不在不同的浏览器共享，即使同一页面

21 在css3中可以通过linear-gradient创建线性渐变，在canvas中可以通过_createLinearGradient()__创建线性渐变对象，并通过_addColorStop()__方法添加颜色。

22 当窗口大小改变时会触发onresize____事件，窗口失去焦点时会触发onblur____事件。

23【多选】下列说法正确的是 (  BC   )。

A. 设置svg的高斯模糊可以直接使用feGaussianBlur标签
B. feGaussianBlur标签的使用必须包裹在filter标签内
C. filter 标签用来定义 SVG 滤镜
D. filter标签使用可以通过class属性来定义向图形应用哪个滤镜