HTML5基础与css3应用实验总结 html5+css3程序设计答案

文章目录

• 🍁第5章 盒子模型🍁

• 🪶一 判断题🪶
• 🦋二 选择题🦋
• 🪳三 简答题🪳

• 🟩第6章 列表和超链接🟩

• 🟨一 判断题🟨
• 🟥二 选择题🟥
• 🟦三 简答题🟦

• 🐺第7章 表格和表单🐺

• 🍎一 判断题🍎
• 🍃二 选择题🍃
• 🍂三 简答题🍂

• 😈第8章 DIV+CSS布局😈

• 👁️一 判断题👁️
• 👹二 选择题👹
• 🤖三 简答题🤖

• 🐳第9章 多媒体嵌入🐳

• 🐋 一 判断题🐋✔️✖️
• 🐬二 选择题🐬
• 🐟三 简答题🐟

🍁第5章 盒子模型🍁

🪶一 判断题🪶

1、border-style属性用于设置圆角边框。（ ✖️）
2、h-shadow表示水平阴影的位置，不可以为负值。（✔️ ）
3、RGBA模式用于设置背景与图片的不透明度。（ ✔️）
4、<div>是行内元素。（ ✖️）
5、display属性可以对元素的类型进行转换。（✔️ ）

🦋二 选择题🦋

1、下列选项中，属于盒子模型基本属性的是（ ）。

A、内边距 B、外边距 C、边框 D、宽和高

2、下列选项中，可以控制盒子宽度的属性是（ ）。

A、width B、height C、padding D、margin

3、下列选项中属于边框属性的是（ ）。

A、border-style B、border-height C、border-width D、border-color

4、关于内边距属性padding的描述，下列说法正确的是（ ）。

A、padding属性是复合属性。

B、必须按顺时针顺序采用值复制原则定义4个方向的内边距。

C、其取值可为1到4个值。

D、padding的取值不能为负。

5、下列选项中，可清除元素默认外边距的是（ ）。

A、font-size:0; B、line-height:0; C、padding:0; D、margin:0;

🪳三 简答题🪳

1. 请简要描述什么是外边距塌陷。

• 🟢当上下相邻的2个块元素相遇时，如果上面的标签有下外边距margin-button,下面的标签有上外边距margin-top,则它们之间的垂直间距。不是margin-button和margin-top之和，而是两者中的较大者这种现象。

2. 请简要描述标签的作用。

• 🟢html标签的作用:将普通文本、图片、音乐等静态动态信息通过指定的一些标签显示在页面上。

🟩第6章 列表和超链接🟩

🟨一 判断题🟨

1、无序列表的各个列表项之间，虽然没有顺序级别之分，但是存在主从关系。（ ✔️）
2、在HTML中，<ul></ul>标记可以用于定义有序列表。（ ✖️）
3、如果不设置list-style-position属性，列表项目符号默认位于列表文本以内。（ ✖️）
4、在CSS的列表样式属性中，使用list-style复合属性可以综合设置列表样式。（✔️ ）
5、使用链接伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写。（✔️ ）

🟥二 选择题🟥

1、 关于无序列表的描述，下列说法正确的是（ ）。

A、无序列表的各个列表项之间没有顺序级别之分。

B、无序列表使用<ul>标记表示。

C、无序列表使用<ol>标记表示。

D、无序列表使用<dl>标记表示。

2、 下列代码中，能够将列表项目符号设置为大写英文字母的是（ ）。

A、ul{ list-style-type: lower-alpha;}

B、ol{ list-style-type: lower-alpha;}

C、ul{ list-style-type: upper-alpha;}

D、ol{ list-style-type: upper-alpha;}

3、 关于list-style-image属性，下列说法正确的是（ ）。

A、list-style-image属性可以为各个列表项设置列表项目图像。

B、list-style-image属性用于控制列表项显示符号的类型。

C、list-style-image属性只可以为无序列表的列表项设置项目图像。

D、list-style-image属性只可以为有序列表的列表项设置项目图像。

4、 关于链接伪类的描述，下列说法错误的是（ ）。

A、a:link{}表示超链访问时的状态。

B、a:visited{}表示访问后超链接的状态。

C、a:hover{}表示鼠标经过、悬停时超链接的状态。

D、a:active{}表示鼠标点击不动时超链接的状态。

5、 关于创建锚点链接的代码，下列书写正确的是（ ）。

A、<a href="#one">链接文本</a> ………

<h3 id="one">锚点链接 </h3>

B、<a href="#id">链接文本</a>

………

<h3 id="one">锚点链接 </h3>

C、<a href="#">链接文本</a>

………

<h3 id="one">锚点链接 </h3>

D、<a href="#one">链接文本</a>

………

<h3 id="#one">锚点链接 </h3>

🟦三 简答题🟦

1. 请简要描述定义列表的语法格式，并解释说明。

• 🟫？？？

2. 请简要描述创建超链接的语法格式，并解释说明。

• 🟫创建。能不能破点连接可分为2步：一是使用<a>标签应用href属性(href属性=“#id”,id名不可重复)创建连接文本。二是使用相应的id名标注跳转目标的位置。

🐺第7章 表格和表单🐺

🍎一 判断题🍎

1、在HTML语言中，标签用于设置表格的表头。（✔️ ）
2、在表格中，<table>标签应用了边框样式属性border，单元格不必再设置边框。（ ✖️）
3、在创建表单时，表单对象的名称由name属性设定。（ ✔️）
4、在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。（ ✔️）
5、在<textarea>表单控件中，rows用来定义多行文本输入框每行中的字符数。（✖️ ）cols

🍃二 选择题🍃

1、 下列选项中，属于创建表格的基本标签的是（ ）。

A、<table></table>B、<tr></tr> C、<td></td>D、<title></title>

2、 下列选项中，属于<tr>标签属性的是（ ）。

A、height B、cellspacing C、cellpadding D、background

3、 下列选项中，属于<td>标签属性的是（ ）。

A、width B、height C、rowspan D、colspan

4、 关于单元格边距的描述，下列说法正确的是（ ）。

A、cellpadding控制单元格内容与边框之间的距离。

B、使用padding属性可以拉开单元格内容与边框之间的距离。

C、设置相邻单元格边框之间的距离使用margin属性。

D、设置相邻单元格边框之间的距离只能使用cellspacing属性。

5、 下列选项中，属于表单控件的是（ ）。

A、单行文本输入框 B、密码输入框 C、复选框 D、提交按钮

🍂三 简答题🍂

1. 请简要描述在HTML语言中，<table>标签的常用属性有哪些。

• 🐾border、width、height、align、background、cellspacing、cellpadding

2. 请简要描述HTML5中autocomplete属性的作用。

• 🐾用于指定表单是否有自动完成功能。所谓：自动完成是指将表单控件输入的内容记录下来。当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动输入。

😈第8章 DIV+CSS布局😈

👁️一 判断题👁️

1、在div+css布局技术中，css负责样式效果的呈现。（ ✖️）DIV负责内容区域的分配，CSS负责央视效果的呈现
2、在CSS中，可以通过position属性为元素设置浮动。（ ✖️）float；position属性是设置定位
3、当对元素应用“overflow:visible;”样式时，元素的溢出内容会被修剪。（✖️ ）默认的情况不会修剪【hidden】
4、z-index属性取值不能是负整数。（✖️ ）可正、0、可负
5、单列布局是网页布局的基础。（ ✔️）

👹二 选择题👹

1、 关于clear属性的描述，下列说法正确的是（ ）。

A、left是clear的属性值

B、clear属性可用于清除浮动

C、clear属性能够清除子元素浮动对父元素的影响✖️方法空标签法，overflow属性、after伪对象方法

D、clear属性只能清除标签左右两侧浮动的影响

2、 下列样式代码中，可以实现相对定位的是（ ）。

A、position: static; B、position: fixed; C、position: absolute; D、position: relative;

3、 下列样式代码中，可精确定义元素位置的是（ ）。

A、.special{ position: absolute;}

B、.special{ position: absolute; top:20px; left:16px;}

C、.special{ position: relative; top:20px; left:16px;}

D、.special{ position: relative;}

4、 关于三列布局的描述，下列说法正确的是（ ）。

A、实现三列布局一般是将内容模块分为左、中、右三个小盒子，然后对三个小盒子分别设置浮动。

B、实现三列布局一般是将内容模块分为左、中、右三个小盒子，然后对三个小盒子分别设置边框。

C、实现三列布局一般是将内容模块分为左、中、右三个小盒子，然后对三个小盒子分别设置定位。

D、实现三列布局一般是将内容模块分为左、中、右三个小盒子，然后对三个小盒子分别设置背景。

5、 在网页中，常用的命名方式有（ ）

A、单峰式命名 B、驼峰式命名 C、双峰式命名 D、帕斯卡命名

🤖三 简答题🤖

1. 请简要描述清除特殊浮动的方法。

• 🤖使用空标记清除浮动：在浮动标记之后添加空标记，并对该标记应用“clear:both”样式，可清除标记浮动所产生的影响，这个空标记可以是<div>、<p>、<hr />等任何标记。
• 🤖使用overflow属性清除浮动：对标记应用“overflow:hidden;”样式，也可以清除浮动对该标记的影响。另外，这种方式还弥补了空标记清除浮动的不足。
• 🤖使用after伪对象清除浮动：使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

2. 请简要描述什么是两列布局，并举例说明。

• 🤖网页内容被分为左右两部分。内容模块被分为左右两部分。关键是在内容模块所在的大盒子中嵌套2个小盒子，然后对2个小盒子分别设置浮动。

🐳第9章 多媒体嵌入🐳

🐋 一 判断题🐋✔️✖️

1、在不同的浏览器中，同样的视频文件，其播放控件的显示样式相同。（ ✖️）
2、loop属性让视频具有循环播放功能。（ ✔️）
3、当ogg文件只封装音频编码时，它就会变成为一个音频文件。（ ✔️）
4、运用width属性可以为video标签设置高度。（✖️ ）
5、通过宽高属性来缩放视频，则该视频的原始大小也会随之改变。（ ✖️）

🐬二 选择题🐬

1、 下面的选项中，属于HTML5支持的视频格式是（ ）。

A、ogg B、mpeg4 C、webm D、wav

2、 关于音频嵌入技术，下列选项说法正确的是（ ）。

A、不同的浏览器中，同样的音频文件，其播放控件的显示样式相同。

B、audio标签用于为页面添加音频。

C、不同的浏览器中，同样的音频文件，其播放控件的显示样式不同。

D、video标签用于为页面添加音频。

3、 下面的选项中，属于浏览器支持的音频格式是（ ）。

A、ogg B、mpeg4 C、webm D、wav

4、 下面选项中，用于为页面添加视频的标签是（ ）。

A、video B、audio C、image D、text

5、 关于video标签的描述，下面说法正确的是（ ）。

A、video是一个视频标签。

B、video是一个音频标签。

C、video标签中可以添加autoplay属性。

D、在<video></video>之间可以插入文字。

🐟三 简答题🐟

1. 请简要描述如何在网页中嵌入视频。

• 🪰首先，我们在开发工具中新建一个 .html 文件。然后，在代码块中加入<video>标签，在头部设置视频播放的宽高。最后在代码块的 video 标签中写入 src 之后在填写视频文件路径，在添加 controls 属性。

2. 请简要描述如何在网页中嵌入音频。

• 🪰首先，我们在开发工具中新建一个 .html 文件。然后，在代码块中加入<audio>标签。最后在代码块的 audio 标签中写入 src 之后在填写音频文件路径，在添加 controls 属性。