1、作业一 单项选项题1. 以下哪个标记用来建立一个有序列表:( C )A. B. C. D. 2. 在 HTML5 中,哪个元素用于组合标题元素? ( D ) A. B. C. D. 3. HTML5 中不再支持下面哪个元素? ( D ) PPT 查看其他不再支持元素A. B. C. D. 4. 新的 HTML5 全局属性,“contenteditable“ 用于: ( B ) A.规 定 元 素 的 上 下 文 菜 单 。 该 菜 单 会 在 用 户 点 击 右 键 点 击 元 素 时 出 现 。 B.规 定 元 素 内 容 是 否 是 可 编 辑 的 。 C.从 服 务 器 升 级 内 容
2、。 D.返 回 内 容 在 字 符 串 中 首 次 出 现 的 位 置 。5. HTML5新增一种非常重要的功能是可以在客户端本地存数据的 Web Storage功能。其中( A )持久化本地存储,类似于 Cookie,但没有有效期,除非主动删除数据: A. localStorageB. SessionStorage (数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,非持久化)C.WebSQL D.创建可拖动的元素 6. 在 HTML5 中,哪个属性用于规定输入字段是必填的? ( A ) A.required B.formvalidate C.validate D.plac
3、eholder 7. 哪种输入类型定义滑块控件? ( D ) A.search B.controls C.slider D.range 8. cxt.arc(100,100,100,0,Math.PI*2,true) Canvas绘制圆形的 arc方法中,参数说明正确的是:( D ) A. 圆半径,圆心 X坐标,圆心 Y坐标,开始角度,结束角度,是否顺时针 trun 逆时针B. 圆心 Y坐标,圆心 X坐标,圆半径,开始角度,结束角度,是否顺时针C. 圆心 X坐标,圆心 Y坐标,圆半径,开始角度,结束角度,是否顺时针D. 圆心 X坐标,圆心 Y坐标,圆半径,开始角度,结束角度,是否逆时针9. 读
4、取 localStorage数据的方法是:( B ) A. localStorage.getItem(“键值“); B. localStorage.getItem(“键名“); C. localStorage.loadItem(“键值“); D.localStorage.loadItem(“键名“);10. 在一个标记中决定图片文件位置的是哪个属性:( C )A: alt B: title C: src D: href11. Canvas 用于填充颜色的属性是:( A ) A. fillStyle 填充色B. fillRectC. lineWidth 线条宽度D. strokeRect12.
5、不是 HTML5特有的存储类型是:( B ) A、localStorageB、CookieC、Application Cache 应用缓存D、sessionStorage二、填空题1. 在标签中将 type属性设置为 radio 即可定义单选按钮。 查看关于INPUT标记的属性2. 为了使元素可拖动,把 draggable 属性设置为 true。3. 在拖放过程,开始拖动元素会触发 dragstar 事件,松开鼠标时会触发 drop 事件。元素拖动4. 在 CSS3中,可以使用 border-raidus 属性实现圆角效果。盒子阴影 透明度等新增的5. 如下图为一个 border为 1px 的
6、 div块,总宽度为 300px(包括 border),阴影区为padding-left:50px左侧内边距;,那么此 div的 width应设置为 248 px。6. 在 CSS3中可以使用 transitaion 属性和其他 CSS属性(颜色、宽高、变形、位置等)配合实现动画效果。三、简答题1. 写出标准的 html5页面结构。无标题文档网页内容2. 分别写出 HTML5新增的语义标签及作用答:元素名 作用section表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与 h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构。article 表示页面中的一
7、块与上下文不相关的独立内容,例如博客中的一篇文章。aside 表示 article元素内容之外的,与 article元素内容相关的辅助信息。header 表示页面中一个内容区块或整个页面的标题。hgroup 用于整个页面或页面中一个内容区块的标题进行组合。footer表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名,创建日期及创作者联系信息。nav 表示页面中导航链接的部分figure表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元,使用 figcaption元素为 figure元素组添加标题。标记定义音频内容标记定义图片标记定义一个命令按钮标记定义一个下拉列
8、表标记定义一个元素的详细内容标记定义一个对话框(会话框)标记定义外部的可交互的内容或插件标记定义表单里一个生成的键值标记定义有标记的文本标记定义 measurement within apredefined range标记定义一些输出类型标记定义任务的过程标记是用在 Ruby annotations 告诉那些不支持 Ruby 元素的浏览器如何去显示标记定义对 rubyannotations的解释标记定义 ruby annotations.标记定义一个区域标记定义媒体资源标记定义一个日期/时间标记定义一个视频 3. 简述标记中 method和 action属性的作用。答:method 属性作用是
9、将表单数据从客户端传送到服务器的方法,分别为 post和 get方法,post 方法比较安全和常用;action 属性作用是指定处理表单的服务端程序,可以是程序或脚本的一个完整 URL。4. HTML5中新增了类型的新表单元素?作用分别是什么?答: 类型:作用text:设置单行文本框元素email:表示当前 input标签接受一个邮箱的输入tel:接受电话输入url:只接受输入网址nunber:表示当前标签只接受数字类型输入rang:设置滑块控件元素clolr:颜色选择date:日期选择器类型password: 设置密码元素file :设置文件元素hidden: 设置隐藏元素,不会被浏览者看到
10、,用于在不同页面中传递域中所设定的值radio:设置单选框元素checkbox: 设置复选框元素button :设置普通按钮元素submit :设置提交按钮元素reset: 设置重置按钮元素Image: 设置图像域(图像按钮)元素5. 写出 HTML5表单中新增的属性及其作用。答:【属性:作用】 min和 max:HTML5新增加的属性,表示当前输入框输入的最小和最大值 step: HTML5新增加的属性,是步长的意思,也就是在点击增大或者减小的时候的增加或减少的步长 placeholder,提示信息 autocomplete:form 或 input域是否拥有自动完成功能(值为 on和 of
11、f)。适用于以下类型的 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。 autofocus:页面加载时,域自动地获得焦点。适用所有 标签的类型。 max、min、step:适用以下类型的 标签:date pickers、number 以及 range。 placeholder:提示信息属性。 multiple:输入域中可选择多个值,用于文件上传控件,设置此属性后,允许上传多个文件。适用于以下类型的 标签:email 和 file。 required: 当前文本框在提交前必须有数据输入。
12、适用于以下类型的 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 pattern:规定用于验证输入字段的模式。pattern 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password。6. Canvas中画圆形、画矩形边框、画位图分别用什么方法答:arc、 stokeRect、 drawImage。7. 什么是拖放?答:拖放可以分为两个动作,即拖拽(drag)和放开(drop)。拖拽(
13、drag):移动鼠标到指定对象,按下左键,然后拖动。放开(drop):放开鼠标左键,放下对象。8. 行内样式表、内部样式表和外部样式表分别在 HTML页面的什么位置引用?如何引用?答:在 HTML文档中应用 CSS 有三种样式表,分别是:行内样式表、内部样式表和外部样式表 。其中最常用的是内部样式表和外部样式表。1) 内部样式表:在网页中可以使用 style元素定义一个内部样式表,指定该网页内元素的 CSS样式,内部样式一般添加到头部。在 style元素中通常可以使用 type属性定义内容的类型(一般取值“text/css“)。格式如下:2) 外部样式表:1 含义:在 HTML文档中可以使用元
14、素引用外部样式表。元素的属性有:href(指定被链接文档【样式表文件】的位置)、hreflang(指定在被链接文档中的文本的语言)、rel(指定当前文档与被链接文档之间的关系。stylesheet,指向要导入的样式表的 URL;)、media(指定被链接文档将被显示在什么设备上。all,默认值,适用于所有设备;)、type(指定被链接文档的 MIME 类型)外部样式表种类:一种是 layout.css文件专门是布局用的样式,另一种是添加外部内容的样式一般命名为 style.css2 添加外部样式表有多种方法:本实验介绍用到的其中一种方法,第一步:选择菜单栏中的文件功能 - 选择新建 CSS -
15、 命名 layout.css;第二步:选择菜单栏中的格式功能 - css样式 - 添加附加 css样式表-在弹出的链接外部样式表窗口中添加外部样式文件 URL路径:layout.css - 点击确定。在本次实验的注册页面就是采用外部样式表进行 CSS样式设计,格式如下:添加外部内容的样式一般命名为 style.css,操作方法同上,格式如下:3) 行内样式表:在 HTML元素中使用 style属性可以指定该元素的 CSS样式,这种应用称为行内样式表。直接在 body标签中添加,如:网页的背景为蓝色9. CSS中的 padding、margin 和 float各表示什么属性 中英文背答:分别表示
16、:内填充、 外边距、 浮动。 10. 简单描述一下什么是 css盒子模型答:CSS 给 HTML元素都赋予了内容(content)、内填充(padding)、边框(border)和外边距(margin) 属性,这些属性形成 CSS盒模型。整个盒模型在页面中所占的宽度是由左边界 + 左边框 + 左填充 + 内容 + 右填充 + 右边框 + 右边界组成。11. 简述 CSS3有哪些新特性?-HSL颜色表现方法。1) 八大属性:圆角效果(border-radius)多彩边框阴影(box-shadow)背景图片尺寸 (background-size)多列(column-count ) 嵌入字体(fon
17、t-face) 透明度(opacity) HSL和 HSLA颜色表现方法2) 四大类(关系选择器、伪类选择器、属性选择器、伪元素选择器)1 关系选择器选择符名称版本简介E F包含选择符CSS1选择所有被 E元素包含的 F元素。E,F分组选择器CSS1就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开EF子选择符CSS2选择所有作为 E元素的子元素 F。E+F相邻选择符CSS2选择紧贴在 E元素之后 F元素。EF兄弟选择符CSS3选择 E元素所有兄弟元素 F。2 伪类选择器a. 结构性伪类选择器b. UI元素状态伪类选择器3 属性选择器4 伪元素选择器3) CSS添加了三个动画效果属性(t
18、ransform 、taansition、 animation) 1 transform 字面上就是变形,改变的意思。在 CSS3中 transform主要包括以下几种:旋转 rotate、扭曲 skew、缩放 scale和移动 translate以及矩阵变形 matrix。2 Animation 只应用在页面上已存在的 DOM元素上,我们使用 CSS3的 Animation制作动画我们可以省去复杂的 js,jquery代码。12. CSS3.0选择器都有哪些类型,并且分别说明其作用及举例语法格式在 HTML标签中使用的方法。1) 元素选择器选择符 类型 版本 简介* 通配符选择器 CSS2
19、所有元素对象。E 标签(HTML) 选择器 CSS1 以 HTML 标签作为选择符。E#myid id 选择器 CSS1 以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。E.myclass class 选择器 CSS1 以 class 属性包含 myclass 的 E 对象作为选择符。2) 关系选择器选择符 类型 版本 简介E,F 分组选择器 CSS1 就可以把这几个相同设定的选择器合并在一起,中间用逗号隔开E F 包含(后代)选择器 CSS1 选择所有被 E 元素包含的 F 元素EF 子选择器 CSS2 选择所有作为 E 元素的子元素 FE+F 相邻选择器 CSS2 选择紧贴在 E 元素之后 F 元素EF 兄弟选择符 CSS3 选择 E 元素所有兄弟元素 F3) 伪类选择器伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。选择符 类型 简介a:link 链接伪类选择器 设置超链接 a 在未被访问前的样式a:visited 链接伪类选择器 设置超链接 a 在其链接地址已被访问过时的样式