【思考题】
单元1
1.请简述什么是响应式Web设计，并列举响应式Web设计需要应用
哪些技术。
答：响应式Web设计是关于网站的制作或网页制作的工作。不同的设备有不同的尺
寸和不同的功能，响应式设计是让所有的人能在这些设备上让网站运行正常。
响应式Web设计是和HTML5+CSS3互相配合与支持的，实现响应式设计包括以下技术点：
●HTML5+CSS3的基本网页设计。
●HTML5标签viewport：提供可以配置视口的属性。
●CSS3媒体查询（media queries）：识别媒体类型，特征（屏幕宽度，像素比等）。
●流式布局（fluid layout）：可以根据浏览器的宽度和屏幕的大小自动调整效果。
●响应式网格（Responsesive fluid grid）：依赖于媒体查询，根据不同的屏幕大小
调整布局。
●流式图片（fluid images）：随流式布局进行相应缩放。
2.请简述HTML5的相比原来的版本有哪些更新，并列举HTML5常用
的语义化标签（6个以上）。
答：（1）有8大更新，具体如下：
●语义网（Semantics）：提供了一组丰富的语义化标签。
●离线&存储（Offline & Storage）：HTML5 App Cache，Local Storage，Indexed DB
和File API使Web应用程序更加迅速，并提供了离线使用的能力。
●设备访问（Device Access）：增强了设备感知能力使得Web应用在电脑、pad、
手机上均能使用。
●通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网
络游戏的顺畅性。
●多媒体（Multimedia）：音频视频能力的增强是HTML5的最大突破！
●图形和特效（3D, Graphics & Effects）：Canvas、SVG和WebGL等功能使得图
形渲染更高效，页面效果更加炫酷。
●性能和集成（Performance & Integration）：Web Worker让浏览器可以多线程处
理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能。
●呈现（CSS3）：CSS3可以很高效的实现页面特效，并不会影响页面的语义和
性能。
（2）HTML5常用的语义化标签有<header>、<section>、<article>、<aside>、<hgroup>、<figure>、<figcaption>、<nav>、<footer>。
单元2
1.请简要概括什么是CSS的层叠性、继承性和重要性？
答：（1）CSS层叠性是指当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。
（2）CSS的继承性是指具有继承性的CSS样式可以被应用于某个特定HTML标签及其后代。
（3）CSS重要性是指在同一组属性设置中标有“!important”的样式优先级最大，将会覆盖其他属性设置。
2.请简述什么是CSS的优先级，并做出总结。
答：CSS优先级即是指CSS样式在浏览器中被解析的权重不同。
CSS优先级进行总结，具体如下：
（1）权值越大越优先；
（2）当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
（3）创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的默认样
式；
（4）继承的CSS 样式权值小于后来指定的CSS 样式；
（5）在同一组属性设置中标有“!important”规则的优先级最大；
单元3
1.请列举CSS3中有关动画制作的属性，并说说这些属性给我们带来
了哪些好处，？
答：在CSS3之前，网页动画效果需要使用插件或者很多需要使用图片和脚本来实现，CSS3之后都可以用短短的几行代码来解决。CSS3中动画相关的属性有transition（过渡）、transform（变形）、animation（动画）。
2.请简述什么是CSS3 Sprites？如何使用Sprites?
答：Sprites是指CSS3的精灵技术，它的本质是多张图片拼成一张图片。为了提高网页性能的原因而使用它们。一般来说，一个网站的请求需要越少，速度越快。当访问该页面时，只需要载入一次图片，
然后利用CSS的“background-image”、“background- repeat”、“background-position”组合进行背景定位，将一张大图片中的某个部分显示到网页的固定位置。
单元4
1.请简要介绍表单的三个核心元素。
答：表单的三个核心元素分别为表单标签（form）、表单域（input）、表单按钮（button），具体说明如下：
●表单标签：这里面包含了处理表单数据所用的CGI程序的URL以及数据提交到服
务器的方法。
●表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选
择框和文件上传框等。
●表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的
CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工
作。
2.请简述什么HTML5的表单验证功能，并列举HTML5自带的两种验
证方式。
答：表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，让Web应用更快的抛出错误，大大的优化了用户体验。HTML5自带表单验证功能有两种，具体如下：
1.通过required属性校验输入框填写内容不能为空，如果为空将弹出提示框，并阻止表
单提交。
2.通过pattern 属性规定用于验证input 域的模式（pattern），它接受一个正则表达式。
表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表单提交。那些type为email或url的输入控件内置相关正则表达式，如果value的值不符合其正则表达式，那表单将通不过验证，无法提交。
单元5
1.请简述什么是canvas以及使用canvas绘制图形的步骤。
答：canvas是指HTML5画布，使用canvas可以轻松的在网页中绘制图形、文字、图片等。网页设计html代码大全继承关系
使用canvas绘制图形的基本步骤总结如下：
（1）创建画布：<canvas></canvas>
（2）准备画笔（获取上下文对象）：Context('2d');
（3）开始路径规划：context.beginPath();
（4）移动起始点：veTo(x, y);
（5）绘制线(矩形、圆形、图片...) ：context.lineTo(x, y);
（6）闭合路径：context.closePath(); （7）绘制描边：context.stroke();
2.请简述使用canvas绘制过程中beginPath()和closePath()的
作用，两个方法是否需要搭配使用。
答：beginPath()的作用是在绘制新路径时，使得新路径的绘制不会影响原有的路径，顾名思义，closePath的意思是闭合路径，即将从路径绘制开始的点到绘制结束点，这两个连接起来，形成闭合路径，两个方法是可以单独使用的。
单元6
1.请简述HTML5中如何嵌入音频和视频，并列举HTML5支持的音频
和视频格式。
答：HTML5中使用<audio>标签嵌入音频，支持音频格式有 MP3、Wav 和 Ogg ，使用<video>标签嵌入视频，支持的视频格式有 MP4、WebM 和 Ogg 。
单元7
1.请简述什么是视口，PC端是否存在视口？
答：在移动端浏览器当中，存在着两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。视口是针对移动端的概念，PC端不存在视口的概念。
2.请简述响应式Web设计中为什么要使用百分比布局？
答：由于媒体查询只能针对某几个特定阶段的视口，在捕捉到下一个视口前，页面的布局是不会变化的，这样会影响页面的显示，同时也无法兼容日益增多的各种设备。所以，想要做出真正灵活的页面，还需要用百分比布局代替固定布局。
单元8
1.请简述Bootstrap包中提供了哪些内容以及它们的作用。
答：Bootstrap包中的提供的内容包括基本结构、CSS、布局组件、JavaScript插件等，具体如下：
●基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
●CSS：Bootstrap 自带全局的CSS 设置、定义基本的HTML 元素样式、可扩展的
class，以及一个先进的栅格系统。这将在Bootstrap CSS 部分详细讲解。
●布局组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导
航、警告框、弹出框等等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。