HTML与CSS网页设计课程复习题集

HTML与CSS网页设计课程复习题集前言---2.`<a>`标签的主要作用是什么？其`href`属性和`target`属性分别有何用途？`target`属性有哪些常见取值？3.图像标签`<img>`的必备属性有哪些？`alt`属性的作用是什么，为什么它对网站可访问性很重要？4.有序列表(`<ol>`)和无序列表(`<ul>`)的区别是什么？列表项使用哪个标签表示？5.什么是块级元素？什么是行内元素？请各列举至少3个，并简述它们在页面布局上的主要区别。1.表单的主要作用是什么？`<form>`标签的`action`和`method`属性分别有什么意义？2.请列举至少6种不同类型的`<input>`标签，并简述其用途。3.`<select>`,`<option>`,`<textarea>`标签的作用分别是什么？---第二部分：CSS基础与进阶一、CSS概述与引入方式1.请简述CSS的全称及其核心作用。3.什么是CSS选择器？请列举至少5种基本CSS选择器，并说明其匹配规则。二、CSS选择器与优先级1.请详细描述CSS选择器的优先级规则。当多个选择器作用于同一元素时，如何确定最终应用哪个样式？2.什么是后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器？请分别举例说明。3.伪类选择器和伪元素选择器有何区别？请各列举至少3个常用的伪类选择器和伪元素选择器，并说明其作用。三、CSS盒模型1.请详细描述CSS标准盒模型的组成部分。在标准盒模型中，元素的`width`和`height`属性具体指什么部分的尺寸？2.CSS3中的`box-sizing`属性有哪些取值？分别有什么作用？如何通过它改变盒模型的计算方式？3.元素的`margin`、`border`、`padding`属性分别有什么作用？简述它们之间的区别。4.什么是外边距合并（MarginCollapse）？它通常发生在哪些情况下？如何避免或解决外边距合并问题？四、CSS布局技术1.请简述CSS中`display`属性的常见取值（至少5种）及其对元素盒类型的影响。2.什么是浮动（Float）？浮动最初设计的目的是什么？在布局中使用浮动可能会带来什么问题？如何清除浮动？3.CSS定位（Position）有哪些取值？请分别描述其定位规则及应用场景。4.相对定位（`position:relative`）和绝对定位（`position:absolute`）的主要区别是什么？绝对定位元素的包含块是如何确定的？五、Flexbox布局1.什么是Flexbox布局？它主要解决了传统布局中的哪些痛点？2.Flex容器（FlexContainer）和Flex项目（FlexItem）分别指什么？如何将一个元素设置为Flex容器？3.请简述Flex容器上的`justify-content`和`align-items`属性的作用及常见取值。4.Flex项目上的`flex-grow`,`flex-shrink`,`flex-basis`属性分别有什么作用？如何使用`flex`shorthand属性来设置它们？六、Grid布局1.Grid布局与Flexbox布局相比，主要特点和适用场景有何不同？2.如何定义一个Grid容器？Grid容器的`grid-template-columns`和`grid-template-rows`属性有什么作用？3.什么是Grid线（GridLines）、Grid轨道（GridTracks）、Grid单元格（GridCell）和Grid区域（GridArea）？4.如何使用`grid-column`和`grid-row`属性来定位Grid项目？七、CSS其他重要特性1.CSS中的盒阴影（`box-shadow`）和文本阴影（`text-shadow`）属性如何使用？请举例说明。2.什么是CSS过渡（Transition）？它与CSS动画（Animation）有何区别？请简述`transition`属性的常用子属性。3.CSS变量（CustomProperties）的语法是什么？使用CSS变量有哪些好处？4.请简述响应式网页设计的概念。实现响应式设计的核心CSS技术有哪些？媒体查询（MediaQueries）的基本语法是什么？---第三部分：综合应用与实践1.请描述从一个设计稿（PSD/Figma等）到实现一个静态网页的大致流程。2.在网页开发中，如何优化CSS代码的性能和可维护性？3.什么是CSS重置（CSSReset）和CSSNormalize？它们的目的是什么？4.在实际项目中，你会如何组织和管理