HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两大核心技术。HTML用于定义网页的结构和内容，而CSS则负责样式和布局的呈现，两者结合使用可以创建出美观且功能丰富的网页。
一、HTML基础知识
1. HTML元素：HTML文档由一系列的元素组成，每个元素都有其特定的标签，例如`<p>`表示段落，`<h1>`到`<h6>`代表不同级别的标题。
2. HTML属性：元素可以拥有属性，用来提供额外的信息。比如`<a>`链接元素的`href`属性用于指定目标URL。
3. HTML5新增元素：HTML5引入了许多新元素，如`<header>`, `<footer>`, `<nav>`, `<article>`, `<section>`等，提高了语义化程度，便于搜索引擎理解和页面结构构建。
4. 内联元素与块级元素：内联元素如`<span>`和`<a>`不占据整行，而块级元素如`<div>`和`<p>`会独占一行。
5. 注释：使用`<!-- -->`来插入注释，对代码进行解释，方便后期维护。
二、CSS基础知识
1. 选择器：CSS通过选择器来定位HTML元素，如类选择器（`.class`），ID选择器（`#id`），标签选择器（`element`）等。
2. 属性与值：选择器后跟花括号，其中包含属性和对应的值，如`color: red;`设置文本颜色为红色。
3. 嵌入、内部和外部样式表：CSS可以通过内联（在HTML元素中），内部（在`<head>`标签内的`<style>`标签中），或外部（独立的.css文件）三种方式引入。
4. 盒模型：CSS盒模型包括元素内容、内边距（padding）、边框（border）和外边距（margin），决定了元素的尺寸和布局。
5. 浮动与定位：`float`属性常用于实现元素的左右浮动，`position`属性（如`relative`, `absolute`, `fixed`）用于元素的定位。
三、CSS进阶技巧
1. 盒阴影与文字阴影：`box-shadow`和`text-shadow`可为元素添加阴影效果。
2. CSS3新特性：渐变（gradient）、过渡（transition）、动画（animation）、多列布局（column-count）、 Flexbox（弹性盒布局）和Grid布局（网格布局）等大大增强了网页设计的灵活性。
3. 媒体查询（Media Queries）：用于响应式设计，根据设备特性应用不同的样式。
4. 继承与层叠：CSS的继承性使得子元素可以继承父元素的一些样式，层叠规则则确定了哪些样式优先应用。
5. CSS预处理器：Sass、Less和Stylus等预处理器允许编写更高级、模块化的CSS代码，提高效率和可维护性。
四、HTML与CSS实战应用
1. 表单处理：HTML表单元素如`<input>`, `<textarea>`, `<select>`等用于用户交互，CSS可以美化表单样式。
2. 图片处理：`<img>`标签用于插入图片，CSS可调整图片大小、位置等。
3. 链接样式：`a`元素的伪类如`:hover`, `:active`, `:visited`可以改变鼠标悬停、点击和访问过链接的样式。
4. 页面布局：通过CSS实现流式布局、栅格布局或响应式布局，适应不同屏幕尺寸的设备。
5. 表格设计：HTML表格元素如`<table>`, `<tr>`, `<td>`等，CSS可以定制表格样式，使其更美观易读。
HTML和CSS是构建网页的基础，掌握它们的语法、原理以及应用技巧，是成为优秀前端开发者的关键。通过不断实践和学习，可以创造出极具吸引力和用户体验的网页。
html-css-main.zip （3个子文件） 
html-css-main 
.gitattributes 66B
