HTMLCSS基础知识作业指导书第1章 HTML基础41.1 文档结构41.2 标签与属性41.3 文本格式化41.4 与图像4第2章 CSS基础52.1 CSS引入方式52.1.1 行内样式52.1.2 内部样式表52.1.3 外部样式表52.2 选择器62.2.1 标签选择器62.2.2 类选择器62.2.3 ID选择器62.2.4 属性选择器62.2.5 伪类选择器72.3 基本样式72.3.1 文本样式72.3.2 颜色和背景72.3.3 边框和边距82.4 盒模型8第3章 列表与表格93.1 列表93.1.1 无序列表93.1.2 有序列表93.1.3 定义列表93.2 表格基础93.2.1 表格结构103.2.2 表格标题103.2.3 表头单元格103.3 表格样式113.3.1 边框样式113.3.2 单元格间距113.3.3 单元格内边距113.4 表格布局113.4.1 表格宽度与高度113.4.2 单元格合并123.4.3 表格布局方式12第4章 布局与定位124.1 display属性124.2 position属性134.3 浮动布局134.4 弹性布局13第5章 响应式设计145.1 媒体查询145.1.1 基本语法145.1.2 常用媒体类型145.1.3 常用媒体特性145.2 移动端布局145.2.1 Flexbox布局145.2.2 Grid布局155.3 响应式图片155.3.1 元素155.3.2 srcset属性155.4 响应式字体155.4.1 相对单位165.4.2 使用CSS Custom Properties（自定义属性）16第6章 表单166.1 表单元素166.1.1 文本框（input type=text）166.1.2 密码框（input type=password）166.1.3 单选按钮（input type=radio）166.1.4 复选框（input type=checkbox）166.1.5 下拉列表（select）176.1.6 文本域（textarea）176.1.7 隐藏域（input type=hidden）176.1.8 提交按钮（input type=submit）176.1.9 重置按钮（input type=reset）176.2 表单布局176.2.1 使用表格布局176.2.2 使用CSS Flexbox布局176.2.3 使用CSS Grid布局176.2.4 表单元素对齐176.2.5 适当的间距176.3 表单验证176.3.1 HTML5内置验证176.3.2 JavaScript验证176.3.3 服务器端验证186.3.4 提示信息186.4 表单样式186.4.1 表单边框和背景186.4.2 表单字体和颜色186.4.3 伪类选择器186.4.4 自定义复选框和单选按钮186.4.5 响应式设计18第7章 过渡与动画187.1 过渡效果187.1.1 过渡属性187.1.2 过渡效果示例187.2 CSS动画197.2.1 关键帧197.2.2 CSS动画属性207.2.3 CSS动画示例207.3 动画库使用217.3.1 Animate.css217.4 动画优化21第8章 CSS进阶技巧218.1 伪元素218.1.1 :before218.1.2 :after228.2 混合模式228.2.1 multiply（正片叠底）228.2.2 screen（滤色）228.3 滤镜238.3.1 blur（模糊）238.3.2 contrast（对比度）238.4 变形与透视238.4.1 rotate（旋转）238.4.2 scale（缩放）238.4.3 skew（倾斜）248.4.4 perspective（透视）24第9章 前端工程化249.1 HTML模板249.1.1 模板引擎249.1.2 常用模板引擎249.1.3 模板语法259.2 CSS预处理器259.2.1 常用CSS预处理器259.2.2 CSS预处理器的作用259.3 版本控制259.3.1 Git基本概念259.3.2 Git基本操作259.4 构建工具259.4.1 常用构建工具269.4.2 构建任务26第10章 前端功能优化2610.1 优化原则2610.2 图片优化2610.3 CSS优化2610.4 资源加载优化27第1章 HTML基础1.1 文档结构HTML文档是网页的基本组成单元，其结构主要包括以下部分：（1） 文档类型声明（Doctype）：声明文档类型，指示浏览器以何种模式解析HTML文档。（2） HTML标签：包裹整个HTML文档，用于定义该文档为HTML文档。（3） 头部（Head）：包含元信息、样式表、脚本等，不直接显示在页面上。 标题（Title）：定义文档标题，显示在浏览器标签页上。 元数据（Meta）：提供关于HTML文档的附加信息，如字符编码、关键词、描述等。（4） 主体（Body）：包含网页的所有内容，如文本、图像、列表等。1.2 标签与属性HTML标签用于标识页面中的元素，属性则用于为这些元素提供附加信息。（1） 标签：HTML标签通常由一对尖括号（）和一组字母组成，如、等。（2） 属性：标签可以包含属性，属性用于提供更多关于元素的细节。属性通常包含在标签内部，如：。1.3 文本格式化HTML提供了多种文本格式化标签，用于对文本进行排版和样式设置。（1） 标题标签：从到，用于定义不同级别的标题。（2） 段落标签：，用于定义文本段落。（3） 换行标签：，用于在不启动新段落的情况下进行换行。（4） 强调标签：、，分别用于定义重要文本和强调文本。（5） 格式化标签：、等，用于表示不同格式的文本。1.4 与图像在HTML中，和图像是网页设计中常用的元素。（1） 标签：，用于创建指向其他网页或文件的超。 属性： href：指定目标的URL地址。 target：指定在何处打开（如：_blank、_self等）。（2） 图像标签：，用于在网页中插入图像。 属性： src：指定图像文件的URL地址。 alt：提供图像的替代文本，用于图像无法显示时。第2章 CSS基础2.1 CSS引入方式CSS（层叠样式表）可以通过以下几种方式引入到HTML文档中：2.1.1 行内样式行内样式是直接在HTML元素内部使用style属性定义的样式。这种方式适用于对单一元素进行样式设置。示例：这是一段红色文字。2.1.2 内部样式表内部样式表是在HTML文档的部分使用标签定义的样式。这种方式适用于对整个页面进行样式设置。示例：p color: red;2.1.3 外部样式表外部样式表是将CSS代码保存在一个独立的.css文件中，并通过HTML文档的标签引入。这种方式适用于对多个页面共享样式设置。示例：2.2 选择器CSS选择器用于选择并匹配HTML元素，以便对它们应用样式。以下是一些常用的选择器：2.2.1 标签选择器标签选择器通过HTML标签名称匹配所有相同类型的元素。示例：cssp color: red;2.2.2 类选择器类选择器通过元素的class属性值匹配具有相同类名的元素。示例：css.redtext color: red;2.2.3 ID选择器ID选择器通过元素的id属性值匹配唯一的元素。示例：cssheader backgroundcolor: f1f1f1;2.2.4 属性选择器属性选择器通过元素的属性及其值进行匹配。示例：cssinputtype=text border: 1px solid ccc;2.2.5 伪类选择器伪类选择器用于匹配元素的特定状态。示例：cssa:hover color: red;2.3 基本样式CSS基本样式包括对文本、颜色、背景、边框等属性的设置。2.3.1 文本样式文本样式包括字体、大小、颜色、行高、文本对齐等属性。示例：cssp fontfamily: Arial, sansserif;fontsize: 16px;color: 333;lineheight: 1.5;textalign: left;2.3.2 颜色和背景颜色和背景样式包括前景色、背景色、背景图片等属性。示例：cssbody backgroundcolor: f1f1f1;color: 333;.container backgroundimage: (image.jpg);backgroundrepeat: norepeat;backgroundsize: cover;2.3.3 边框和边距边框和边距样式包括边框宽度、样式、颜色以及内边距和外边距等属性。示例：css.box border: 1px solid ccc;padding: 10px;margin: 20px;2.4 盒模型CSS盒模型描述了如何计算一个元素的总宽度和高度。盒模型包括内容区域、内边距（padding）、边框（border）和外边距（margin）。示例：css.box width: 200px; / 内容区域宽度 /padding: 10px; / 内边距 /border: 1px solid ccc; / 边框 /margin: 20px; / 外边距 /第3章 列表与表格3.1 列表3.1.1 无序列表在HTML中，无序列表使用标签定义，列表项则使用标签。以下是一个无序列表的示例：列表项1列表项2列表项33.1.2 有序列表有序列表使用标签，列表项依然使用标签。下