Web前端开发案例教程（HTML5 CSS3）（微课版）（李志云第2版）-习题及答案.docx
Web前端开发案例教程（HTML5 CSS3）（微课版）（第2版）-习题及答案习题1一、单项选择题HTML的中文意思是A）文件传输协议C）超文本标记语言1. HTTP的中文意思是A）文件传输协议C）超文本标记语言（C ）。B）超文本传输协议D）统一资源定位符（B ）oB）超文本传输协议D）统一资源定位符2. 下面的应用软件中，不可以用于网页制作的是（D ）。A) Sublime TextB) HBuilderXC) Dreamweaver D) 3ds Max二、判断题使用Chrome浏览器浏览网页时，在网页的任意空白处右击，选择“查看网页 源代码”选项可以查看网页的HTML代码。（，）1. HTTP是由SSL+HTTP构建的、可进行身份认证的加密传输协议，比HTTPS安全。（x）HTML5可以跨平台使用，具有良好的移植性。（，）2. Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构、表现和行 为标准。（，）一个项目只能有一个网页文件。（x）习题2一、单项选择题.网页的主体内容写在哪个标记内部？ ( A )A) <body> B) <head> C) <p> D) <html>.以下标记中，用于设置页面标题的是(A )。A) <title> B) <caption> C) <head> D) <html>.用HTML5编写一个简单的网页时，网页最基本的结构是(D )。A) <html> <head>. </head> <frame>. </frame> </html><html> <title>. . </title> <body>. . </body> </html>B) <html> <title>. </title> <frame>. </frame> </html><html> <head>. </head> <body>.</body> </html>1 .可以不用发布就能在本地计算机上浏览的页面的编写语言是(B )oA) ASP B) HTML C) PHP D) JSP2 .以下标记中，没有对应的结束标记的是(B )。A) <body> B) <br> C) <html> D) <title>A) <header> B) <nav> C) <aritcle> D) <section>4. HTML5中的哪个标记用来定义当前页面附属信息部分？ ( C )A) <hcader> B) <nav> C) <asidc> D) <section>5. HTML5中的哪个标记用于对网站或应用程序中页面上的内容进行分块？( D )A) <header> B) <nav> C) <aside> D) <section>二、判断题. 一个HTML页面可以包含多个<nav>标记，作为页面整体或不同部分的导航。 (/ )1 .在HTML5中,article)标记通常使用多个section>标记进行划分。(/).在HTML5中，一个页面中article)标记只能出现一次。(* )2 .在HTML5中，没有标题的内容区块不要使用section标记定义。(/ ).在HTML5中，一个section标记通常由标题和内容组成。(/ )3 .在HTML5中，可以在article标记或者section标记中添加footer标记。(/ ).一个HTML5页面可以包含多个(footer)标记。(/ )习题10一、单项选择题1 . transition-timing-function属性规定过渡效果的速度曲线，其默认值为 (A )oA) ease B) linear C) ease-in D) ease-out2 .在3D变形中，指定元素仅围绕x轴旋转的函数是(A )。A) rotateXOB) rotateY0C) rotateZOD) rotate3d ()3.用于定义动画开始前将会延迟2s,然后才开始执行的代码是(A )。A) animation-duration：2s；B) animation-timing-function：2s；C) animation-delay：2s； D) animation-direction：2s；4.设定动画在奇数次数正常播放，在偶数次数逆向播放的代码为(A )0A) animation-direction：alternate； B) animation-direction：normal；C) animation-direction：true； D) animation-direction：false；5.下列选项中，用于定义动画效果需要播放3次的代码是(D )。A) animation：3； B) animation-timing-function：3；C) animation-delay：3； D) animation-iteration-count：3；6.认真阅读下列代码，并按要求作答。animati on-name: mymove ；/* 定义动画名 称*/animation-duration： 5s；/* 定义动 画 时 间*/animation-timing-function： linear； /*定义动画速度曲线*/ animation-delay： 2s；/*定义动画延迟时间*/animation-i terati on-count： 3；/* 定义动画的播放次数*/an i mat i on-d i rec t i on ： alternate；/* 定义动画播放的方向*/animation属性是一个复合属性，下列选项中，可以同时设置上述属性的代码为(D )。A) animation：B) animation：C) animation： D) animation： 二、判断题mymove 3 2s linear 5s alternate； mymove linear 2s 5s 3 alternate； mymove 2s linear 5s 3 alternate； mymove 5s 1i near 2s 3 al ternate；1.CSS3变形是一系列效果的集合，如平移、旋转、缩放和倾斜等，每个效果都 被称作变形效果。（/）2.在3D变形中，可以让元素围绕x轴、y轴、z轴旋转。（/ ）6 .title)和/title)标记必须包含在下述哪对标记中？ ( C )A) <body>和</body>B) table和/tableC) <110公>和</1104(1>D) 3>和<>.请选择能产生粗体字的HTML标记。(C )A) <bold> B) <bb> C) <strong> D) <bld>.在下列HTML标记中，哪个可以插入换行？ ( A )A) <br> B) <enter> C) <break> D) <b>.在下列的HTML标记中，哪个是最大的标题？ ( D )A) <h6> B) <h5> C) <h2> D) <hl>.用于标识一个段落的HTML标记是(C )0A) <b>和</b> B) <br>和</br> C) <p>和</p> D) <li>和</li>.在下列的HTML代码中，哪个可以插入图像？ ( C )A) <img href="image, gif" alt=nH> B) <image src=wimage, gifN alt=HH>C) <img src=wimage, gif" alt=H,r> D) <img>image. gif</img>7 .建立超链接时，要在新窗口显示网页，需要加入的标记属性是(A )。A) target=,_blankM B) border="l" C) name= "target" D) #.包含图像的网页文件，其扩展名应该是(D )0A) . jpg B) . gif C) . pic D) . html.最常用的网页图像格式有(C )oA) GIF、TIFF B) TIFF、JPG C) GIF、JPG D) TIFF、PNG.在网页中，必须使用哪个标记来设置超链接？ ( A )A) <a>. </a> B) <p>. </p> C) <link>. </link> D) <li>. .</li>.下列路径中属于绝对路径的是(C )。A) address, htm B) staff/telephone.htmC) D) /Xuesheng/chengji/mingci. htm二、判断题.网页文件是用一种标记语言书写的，这种语言被称为HTML (Hyper Text MarkupLanguage,超文本标记语言)，制作一个网站就等于制作一个网页。(乂 ).网站的首页文件通常是"index, html index, htm ” “ Default, htm"Default, html",它必须存放在网站的根目录中。(9 ). HTML5标记是不区分大小写的，但通常用小写。(/ )1 .如果文本需要换行，则可以使用换行标记<br>° ( / ). <hr>标记可以在网页中生成一条水平线，它不需要结束标记。(/ )2 .标题标记<hl><h6>都有换行的功能。(/ ).关于网页中图片的大小，可以在HTML5代码中直接指定其宽、高，但最好在 图像处理软件中事先处理好图像的大小。(/ )3 . JPG格式能提供良好的、损失极少的压缩，这种格式可以用于制作透明和多帧 的动画。(x ).书写图片路径时，尽量使用绝对路径，因为这样更稳定简洁。(x )4 .在网页中需要插入图片的相对路径时,用于指定上一级文件夹。(/ ).在超链接中，如果暂时没有确定链接目标，则通常将a标记的href属性值 定义为(x )5 .在HTML5中，通过点击锚点链接，用户能够快速定位到目标内容。(/ ).在图像常用格式中，GIF格式只能处理256种颜色。(6 .在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺 序依次关闭标记。(/ ). PNG格式是一种支持透明的图像格式。(，)7 .如果不给inig标记设置宽和高，图片就会按照它的原始尺寸显示。(，)习题3一、单项选择题.如何为所有的hl元素添加背景颜色？ ( B )A) hl. all background-color：ttFFFFFF B) hl background-color：#FFFFFFC) all. hl (background-color：#FFFFFF D) hl. background-color：#FFFFFF1 .外部样式表的最大优势在于(A )oA) CSS代码与HTML代码完全分离B) CSS代码写在head与/head之间C)直接对HTML的标签使用style属性D)采用import方式导入样式表.下面不属于CSS样式的引入方式的是(A )。A)索引式B)行内样式 C)内部样式表D)外部样式表.在HTML文档中，引用外部样式表的正确位置是(DA)文档的末尾B)文档的顶部C) body部分 D) head部分.下列哪个选项的CSS语法是正确的？ ( C )A) body：color=black B) body:color=black(body)C) body color： black D) body；color：black6 .下列哪个CSS属性可控制字号？ (A )A) font-size B) text-style C) font-style D) text-size7 .在以下的CSS代码中，可使所有p元素变为粗体的正确语法是(C )oA) p style="font-size：bold"B) p style="text-size：bold")C) p font-weight：bold D) p text-size：bold.以下哪个选项可以改变元素的字体？ ( C )A) font= B) f： C) font-family： D) font.以下哪个选项可以使文本变为粗体？ ( B )A) font：b B) font-weight：bold C) style：bold D) b.下面说法错误的是(D )oA) CSS样式可以将格式和结构分离CSS样式可以控制页面的布局B) CSS样式可以使许多网页同时更新CSS样式不能制作文件更小、下载更快的网页8 .在以下的HTML中，哪个是正确引用外部样式表的方法？ （ B ）<style src=Mmystyle.cssN>A） <link rel="stylesheetH type="text/css" href=,mystyle. css"><stylesheet>m）style. css</stylesheet>B） Colorful Style Sheets.不属于CSS选择器的是（A ）0A）对象选择器B）超文本标记选择器C） ID选择器D）类选择器9 . CSS的中文译名为（D ）oA）样式表B）样式表标签语言C）瀑布样式表D）层叠样式表10 .要在网页中插入样式表main, css,以下用法中，正确的是（B ）。A） <link href="main, css" type=Htext/cssH rel="stylesheet”<link src=Nmain. cssn type="text/css" rel=Mstylesheetw>B） <1 ink href="main, css" type=Mtext/cssM><Include href="main, css" type=°text/cssw rel=wstylesheet">11 .下列选项中，属于并集选择器书写方式的是（C ）oA） hl p B） hl_p） C） hl,p D） hl-p12 .页面上的<div>标记,其 HTML 代码为<div id="box" class="red">文字</div>, 为其设置 CSS 样式如下：#box color：blue； . red color：red； 。那么， 文字的颜色将显示为（B ）oA）红色 B）蓝色 C）黑色 D）白色13 .设置文字的大小为14px,文字加粗，行高为28px,字体是微软雅黑，斜体， 以下书写正确的是（D ）。A） font：14px ”微软雅黑” 28px 600 italicfont："微软雅黑"14px/28px 600 italicB） font： 14px/28px 600 "微软雅黑"italicfont：600 italic 14px/28px "微软雅黑"二、判断题.在编写CSS代码时，为了提高代码的可读性，通常需要加CSS注释语句。（/ ）1 .内部样式表是指将CSS代码集中写在HTML文档的<head>头部标记中,并且用 style标记定义。（/ ）.内部样式表的样式对网站中的所有HTML页面都有效。（x ）2 .外部样式表是使用频率最高，也是最实用的样式表之一，它将HTML代码与CSS 代码分离为两个或多个文件，实现了结构和表现的完全分离。（/ ）.通配符选择器用号表示，能匹配页面中的所有元素。（/ ）3 .在<head>中使用标记可引用外部样式表文件，一个页面只允许使用一 个Qink>标记引入外部样式表文件。（x ）. RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式在红、绿、 蓝三原色的基础上添加了不透明度参数。（/ ）4 . ID选择器使用进行标识，后面紧跟ID名称。（/ ）.通配符选择器设置的样式对所有的HTML标记都生效，不管标记是否需要该样 式，这样反而降低了代码的执行速度。（/）习题4一、单项选择题1.如何显示这样一个边框：上边框为10 px,下边框为5px,左边框为20 px, 右边框为1 px? ( D )A) border-width：10px 5px 20px Ipx B) border-width：lOpx 20px 5px IpxC) border-width：5px 20px lOpx Ipx D) border-width：lOpx Ipx 5px 20px2 .使用什么属性可以设置元素的左外边距？ ( D )A) text-indent B) indent C) margin D) margin-left3 .下列CSS属性中不用于设置背景图像样式的是(B )0A) background-imageB) background-beginC) background-repeatD) background-size4.要实现背景图像不重复，应该设置为(D )oA) background-repeat：repeatB) background-repeat：repeat-xC) background-repeat:repcat-yD) background-repeat:no-repeat5.在CSS中，设置背景图像的标记是(A )0A) backgroundB) background-imageC) background-colorD) bkground.下列选项中，用于更改元素左内边距的是(B )0A) text-indent B) padding-left C) margin-left D) padding-right.下列选项中，哪个不能设置边框为3Px的红色实线？( D )A) border：3px solid #F00； B) border： #F00 solid 3px；C) border： red solid 3px； D) border：#0F0 3px solid；8.关于样式代码 box width： 200px； padding： 15px； margin：20px； 下列 说法正确的是(B )oA) .box的总宽度为200Px B) .box的总宽度为270PxC) .box的总宽度为235Px D)以上说法均错误9. 一个盒子的宽度和高度均为300px,左内边距为30px,同时盒子有3Px的边 框，请问这个盒子的总宽度是多少？ ( C )A) 333px B) 366px C) 336px D) 363px10.设置背景颜色为green,背景图片垂直居中显示，背景图片充满整个区域, 但是背景图片不能变形，图片只出现一次，以下代码正确的是(A )oA) background：urlC. . /img/imgl. jpg") no-repeat center/cover green；background：url(". . /img/imgl. jpg") repeat center/cover green；B) url/img/imgl. jpg") no-repeat center/100% green；url(w. /img/imgl. jpgw) no-repeat center/100% 100% green；二、判断题.在CSS背景综合属性中，既可以定义背景图片，也可以定义背景颜色。（/ ）1 .在CSS中，border属性是一个复/合属性。（）.在CSS3中，box-shadow属性不设置“阴影类型”参数时默认为“内阴影二 （x ）2 . 一个div的高度为200px,内边距为10px,边框为Ipx,那么它的总高度为 222pxo （ / ）.默认情况下，背景图像会自动向水平和竖直两个方向平铺。（/ ）3 . opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的 值，它是一个01的浮点数值。（/ ）. div与/div之间相当于一个容器，可以容纳段落、标题、图像等各种网页 元素。（/ ）习题5一、单项选择题.去掉无序列表的项目符号使用的属性是（A ）。A） 1ist-style：noneB） list-type：noneC） list-rel： noneD） list-href：none1 .用于设置鼠标指针悬停时超链接样式的是（C ）。A） a：link B） a：visited C） a：hover D） a：active.下列样式代码中，可以将块元素转换为行内元素的是（D ）。A） display：none；B） display：block；C） display：inline-block；D） display：inline；4 .HTML5中下面哪个元素可替代d可id="nav"X/div标记来定义导航条？ （ A ）A） nav B） header C） aside D） footer5 . span标记是网页布局中常见的标记，其元素类型为（BA）块级元素 B）行内元素 C）行内块元素D）浮动元素6 .在CSS中，使用什么属性来定义元素的类型？ （ C ）A） margin 属性 B） padding 属性 C） display 属性 D） font 属性二、判断题宽度属性width和高度属性height对块元素无效。（x ）1. a是一个行内元素。（/ ）div是一个行内元素，span是块元素。（* ）习题6一、单项选择题position属性用于定义元素的定位类型，下列选项中不属于position属性 常用属性取值的是（D ）。A） static B） relative C） absolute D） visible2.下列样式代码中，不能够设置元素定位类型的是（A ）oA） position： auto；B） position： fixed；C） position： absolute； D） position： relative；3.下列样式代码中，可对元素进行绝对定位的是（B ）。A） .special position： relative；）.special position： absolute； top：20px； left：16px；B） . special position： fixed； top：20px； left：16px；.special position： static；二、判断题.当两个相邻的块元素水平排列时，如果左边的元素有右外边距margin-right, 右边的元素有左外边距margin-left,则它们之间的水平外边距是两者之和。 （/ ）1 .当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom, 下面的元素有上外边距margin-top,则它们之间的垂直外边距不是两者之和， 而是两者中的较大者。（/ ）.页面上定义的两个盒子都没有设置float属性时，盒子会水平排列。（x ）2 .父元素包含的子元素设置浮动后，若父元素没有设置高度，则受子元素浮动 的影响，父元素将不显示。（/ ）.绝对定位是指对元素依据浏览器窗口进行定位。（* ）3 .在CSS中，可以通过position属性为元素设置浮动。（x ）. z-index属性用于调整定位元素的层叠顺序。（/ ）4 .在静态定位状态下，无法通过坐标属性（top、bottom、left或right）改变 元素的位置。（/ ）习题7一、单项选择题1.以下说法正确的是（D ）。A）table）是表单标记 B） <td>是表格行标记C） <tr>是表格列标记 D）table>是表格标记2.在HTML中，设置围绕表格边框的宽度的HTML代码是（B ）。A） <table size=#> B） <table border=#>C） <table bordesize=#> D） tableborder=#>3 .定义表头单元格的HTML标记是（D ）oA） <table> B） <td> C） <tr> D） <th>4 .合并多行单元格的HTML标记是（B ）oA） <th colspan=#>B） <th rowspan=>C） <td colspan=#>D） <tr rowspan=#>二、判断题1 .表格的列数，取决于一行中数据单元格的数量。（/ ）. colspan属性用来合并单元格的行。（x ）2 .只需要设置border-collapse属性就可以显示表格边框。（又）.表格的结构标记是必须设置的。（/ ）3 .创建的表格在默认情况下是没有边框的。（/ ）习题8一、单项选择题.下面关于表单的叙述错误的是（D ）。A）表单是用户与网站实现交互的重要手段B）表单可以收集用户的信息C）表单是网页上的一个特定区域D）表单是由一对（table标记组成的.要建立一个输入单行文字的文本框，下面代码正确的是（B ）oA） <input>B） <input type="text"）C） <input type="radio"D） <input type="passwordH>3 .要建立一个密码框，input）标记的type属性的属性值应该等于（A ）。A） password B） radio C） text D） image.要建立一对选择性别的单选按钮，下面关于它们的name值不正确的是（A ）。A） name="boy", name="girl"B） name="boy", name="boy"C） name="girl", name="girl"D） name="sex”, name=wsexn5 .下面这段代码中，哪种颜色为加载页面后默认选中的颜色？（ A ） <fonn>红色input type="checkbox" checked="checked”黄色input type='fcheckboxn> 蓝色（input type="checkbox" 白色input type="checkbox"></form>A）红色 B）黄色 C）蓝色 D）白色.关于下列代码片段分析正确的是（A ）o<form name="form" action="register, hlml” method="post"</form>A）表单的名称是formB）表单的数据提交的位置是postC）表单提交的数据将会出现在地址栏中D）提交表单后，用户输入的数据会附加在URL之后6 .创建一个多行文本框所需的标记是（D ）。A） <input> B） <select> C） <option> D） <textarea>.创建下拉列表，下面标记正确的是（C ）0A） <select></select>B） <option></option>C) <select><option></optionX/select> D) <option><select></option>9.在HTML中，关于表单提交方式说法错误的是(A )0A) action属性用来设置表单的提交方式B)表单提交有get和post两种方式C) post方式比get方式安全D)用post方式提交的数据不会显示在地址栏，而用get方式时会显示.在HTML中，将表单中input元素的type属性值设置为哪个选项，可用于创 建重置按钮？ ( A )A) reset B) set C) button D) image.在HTML中，下列哪个选项可以在表单中创建一个初始状态被选中的复选框？ (D )A) <input type="radio” name="agree" value=My,r selected="selected” />同 意<input lype="checkbox” name="agree" value="y" selected="selected” /> 同意B) <input type="radio" name="agree" value=y', checked="checked” />同意 D) <input type=Mcheckbox" name=wagree" value="y" checked="checked” /> 同意.在HTML中，表单中的input元素的type属性值不可以是(B )。A) password B) radiobutton C) text D) submit.下列选项中，用于指定表单是否有自动完成功能的属性是(B )oA) action B) autocomplete C) method D) novalidate 二、判断题.在HTML中，form标记用于定义表单域，即创建一个表单，以实现网站对用户 信息的收集和传递。(/ )1 .在 HTML5 中，checked="checked"可以简写为 checked, readon 1 y=wreadonlyw 可以简写为readonly。 ( / ).select标记的size属性默认为1。( / )2 . <form>标记的method属性默认为posto ( x ).将input标记的type属性设置为text时，该控件既可以用于输入多行文 本，也可以用于输入单行文本。(” )习题9一、单项选择题1. HTML5中的哪个标记可以包含所有通常放在页面头部的内容？ ( A )A) <header> B) <nav> C) <aritcle> D) <section>2. HTML5中的哪个标记用于定义页面的导航链接？ ( B )A) <header> B) <nav> C) <aritcle> D) <section>3. HTML5中的哪个标记经常用于定义一篇日志、一条新闻或用户评论等？( C )
