《HTML5 CSS3Web前端开发技术》课后题答案 于丽娜_第1页
《HTML5 CSS3Web前端开发技术》课后题答案 于丽娜_第2页
《HTML5 CSS3Web前端开发技术》课后题答案 于丽娜_第3页
《HTML5 CSS3Web前端开发技术》课后题答案 于丽娜_第4页
《HTML5 CSS3Web前端开发技术》课后题答案 于丽娜_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务011.7知识巩固C（2）AB1.8任务拓展（1）常见的浏览器有GoogleChrome、百度浏览器、360安全浏览器、QQ浏览器、MicrosoftEdge、Firefox等。按照功能特性划分为安全浏览器：360安全浏览器社交浏览器：QQ浏览器搜索引擎浏览器：百度浏览器分类依据根据浏览器的功能特性——浏览器的附加功能，如安全防护、社交整合等。按照浏览器内核划分为Chromium内核：GoogleChrome、新版MicrosoftEdge、QQ浏览器（部分版本）、360安全浏览器（部分版本）Gecko内核：MozillaFirefoxTrident/EdgeHTML内核：早期的MicrosoftEdgeWebKit内核：百度浏览器（部分版本）分类依据是根据浏览器使用的渲染引擎，影响网页的渲染速度和兼容性。（2）<body> <h2>你好，Web</h2> </body>（3）简述HTML5标准的特点。HTML5标准是在HTML4基础上的扩展，它增加了大量的语义化标签，让代码含义更明确，便于搜索引擎解析识别，也便于开发人员合理规划页面结构，提高代码的可读性。HTML5标准将大量需要配合JavaScript脚本实现的动态交互效果以及数据处理和多媒体播放功能都包含其中。这便于浏览器厂商将这些功能在浏览器中实现，降低了开发难度。此外，HTML5还将之前一些烦琐的设定内容进行了简化。HTML5的优势不仅体现在网页中，而且大量嵌入式设备的开发框架也完全引入或借鉴了改良的HTML5标准来进行应用界面的设计与实现。任务022.7知识巩固D（2）ABCD（3）D（4）HTML5中的语义化结构标签有哪些？分别对应的语义是什么？<header>标记头部区域的内容（用于整个页面或页面中的一块区域）<footer>标记脚部区域的内容（用于整个页面或页面的一块区域）<section>Web页面中的一块独立区域<article>独立的文章内容<aside>相关内容或应用（常用于侧边栏）<nav>导航类辅助内容<hgroup>对网页或区段section的标题元素（h1～h6）进行组合<figure>规定独立的流内容（图像、图表、代码等）。元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果内容被删除，则不应对文档流产生影响<figcaption>为figure元素定义标题。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置任务033.7知识巩固AHTML5中表格的完整结构<table> <caption>标题</caption> <thead> <tr><th>Header</th><th>Header</th><th>Header</th></tr> </thead> <tbody> <tr><td>Data</td><td>Data</td><td>Data</td></tr> <tr><td>Data</td><td>Data</td><td>Data</td></tr> </tbody> <tfoot> <tr><td>sum</td><td>sum</td><td>sum</td></tr> </tfoot> </table>CDHTML5支持哪几种列表，如何表示。HTML5列表支持分无序列表、有序列表和定义列表。无序列表由<ul>标签和<li>标签组成，使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表的列表项。其语法结构为：<ul><li>第1项</li><li>第2项</li><li>第3项</li></ul>有序列表由<ol>标签和<li>标签组成，使用<ol>标签作为有序列表的声明，使用<li>标签作为每个列表的列表项。其语法结构如下：<ol><li>第1项</li><li>第2项</li><li>第3项</li></ol>任务044.7知识巩固ABCDABCDACDABD在HTML5中，表单的文本输入框（<inputtype="text">）和密码输入框（<inputtype="password">）在定义方法和实现效果上有一些区别：定义方法：文本输入框：使用<inputtype="text">来定义。密码输入框：使用<inputtype="password">来定义。实现效果：文本输入框：允许用户输入任何文本。文本通常以明文形式显示。可以设置maxlength属性来限制输入的最大字符数。可以设置placeholder属性来提供输入提示。密码输入框：专门用于输入密码，以增强安全性。文本以黑色实心圆点的形式显示，以隐藏用户输入的实际字符。同样可以设置maxlength属性。也可以使用placeholder属性，但显示的提示文本不会隐藏。任务055.7知识巩固（1）在CSS中，子选择器和后代选择器是用于选取特定元素的两种不同方式：子选择器用于选取作为某个父元素的直接子元素的特定元素。它使用大于符号（>）来表示这种直接的父子关系。子选择器只会选取那些直接嵌套在指定父元素内部的子元素，而不会选取更深层次的嵌套元素。后代选择器用于选取作为某个祖先元素的所有后代（包括子元素、子元素的子元素等）的特定元素。它使用空格来分隔祖先元素和后代元素的选择器。后代选择器会选取所有在指定祖先元素内部的匹配后代元素，无论它们嵌套在多少层之内。（2）B任务066.7知识巩固DABCDAD任务077.7知识巩固CSS盒模型是CSS的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距与外边距，并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（Layout）。它常被直译为盒子模型、盒模型或框模型。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括外边距（margin）、边框（border）、内边距padding）和实际内容（content）四个部分组成。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。ACD任务088.7知识巩固（1）当子元素浮动时，它们不再占据文档流中的空间，这意味着父元素在计算其高度时不会考虑这些浮动子元素的高度。由于父元素无法“看到”浮动元素的高度，因此它会认为其内部没有内容（或只有非浮动内容的高度），从而导致父元素的高度塌陷到0或仅包含非浮动子元素的高度。造成父元素高度塌陷的原因有以下两个方面。父元素的高度自适应，由子元素的实际内容决定。父元素中撑起高度的子元素，浮动后由于脱离文档流而不占用父元素空间，从而无法撑起父元素高度。方式1：为包含浮动元素的父元素指定确定的高度值，从而解决由父元素高度自适应产生的塌陷问题。方式2：从子元素脱离文本流的问题入手，虽然不能直接让浮动的子元素对父元素产生影响，但可以通过清除浮动的方式让浮动元素对其他子元素产生影响，即在最后的浮动元素之下添加一个高度为0的块状元素，并让该块状元素对浮动元素进行浮动清除处理，这样相当于用一个浮动元素未浮动前下方紧邻的一个下边框进行占位，从而有效地撑起父元素高度。方式3：优化手动添加块状元素为自动追加块状元素，这样就从源码的角度解决了无内容及含义的元素的问题。该方式需要借助CSS的伪元素选择器after来实现。（3）ACD任务099.7知识巩固position属性在CSS中用于指定一个元素在页面上的定位方式。fixed和sticky是position属性的两个值。fixed（固定定位）：元素的位置相对于浏览器窗口是固定的。即使页面滚动，元素也会保持在相同的屏幕位置。元素的位置相对于其最近的已定位（非static）祖先元素，如果没有这样的元素，则相对于初始包含块。固定定位的元素会从文档流中完全移除，不会占据原先的空间。sticky（黏性定位）：元素的位置是相对于其最近的已滚动的祖先元素的。它是一种混合定位方式，结合了相对定位和固定定位的特点。当页面滚动到某个点，元素达到指定的“黏性”位置之前，它会表现得像相对定位。一旦页面滚动超过这个点，元素就会固定在指定的位置，直到页面滚动到另一个点，元素再次变为相对定位。黏性定位的元素在达到“黏性”位置之前仍然占据原先的空间。两个属性值的主要区别为，fixed定位的元素始终相对于浏览器窗口保持固定位置，无论页面如何滚动。sticky定位的元素在滚动到指定阈值之前表现为相对定位，滚动到阈值之后则表现为固定定位，且这个固定位置是相对于其最近的滚动祖先元素的。ABABCD任务1010.7知识巩固（1）CSS3过渡与动画的相同点和不同点：相同点：都是随着时间改变元素的属性值，从而实现元素的动态效果。不同点：触发机制：CSS3过渡（transition）需要触发一个事件（如hover事件、click事件等）才会随时间改变其CSS属性。CSS3动画（animation）则不需要触发任何事件，可以显式地随时间变化来改变元素的CSS属性值，达到一种动画效果。关键帧数量：CSS3过渡只有一组（两个：开始和结束）关键帧，即定义开始状态和结束状态。CSS3动画可以定义多个关键帧，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。（2）动画制作的过程：利用@keyframes规则创建动画，需自定义动画名称和关键帧及对应的动画状态。为要添加动画的元素添加动画属性，可以用animation属性综合设置动画属性，也可以分别设置animation-name属性，以及该属性值为@keyframes时定义的动画。任务1111.7知识巩固CA任务1212.7知识巩固ABD响应式布局，通俗地理解就是用一套网页代码适配不同尺寸的设备，在不同尺寸的页面上，显示必要的内容，隐藏不必要的内容，通过动态地对设备相关属性特点进行识别判断，使样式代码生效与失效，从而使网页可以根据设备属性的变化进行相应的适配变化。响应式布局具体的应用案例就是使一套网页代码可以在不同的尺寸设备上展示不同的页面效果。响应式布局能够自适应不同尺寸和分辨率的设备，确保在各种终端上都能呈现出良好的用户体验。通过统一的代码库和智能的响应机制，可以避免为不同设备创建多个版本的网站，从而节省开发时间和维护成本，同时也有助于减少服务器的负载。在媒体查询中，and、逗号(,)等操作符可以用

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论