HTML5+CSS基础教程：布局、样式与表格技巧

HTML5和CSS是网页开发的核心技术，本文档主要探讨了如何利用它们创建和设计交互式、功能丰富的网页布局。以下是文档中介绍的关键知识点： 1. CSS样式应用： - 使用内联样式 `color:red;` 直接为文本设置颜色，这是最基本的CSS语法。 - 通过 `<link>` 标签引入外部CSS文件，如 `importurl("css/css1.css");`（这里可能是语法错误，正确的应该是`<link rel="stylesheet" href="css/css1.css">`）来统一管理样式，提升代码可维护性。 2. 路径处理： - 相对路径 `<linkhref="css/css1.css"rel="stylesheet">` 用于在同一目录结构下引用CSS文件。 - 绝对路径 `<linkhref="E:/webTest-43/css/css1.css"rel="stylesheet">` 用于指定文件的完整位置，适用于跨域或服务器环境。 3. 表格设计： - `colspan` 和 `rowspan` 属性用于合并单元格，分别控制列和行的合并范围。 - `cellspacing` 属性用于调整单元格之间的间距，`tablecellspacing="0"` 去除默认间距。 - 固定表格布局通过 `border-collapse:collapse;` 来消除边框间隙。 - `border-spacing` 设置列间隔 (`10px`) 和行间隔 (`5px`)，实现更精细的样式控制。 - 文字对齐：`text-align` 属性用于设置文本水平对齐，如 `text-align:center;` 使表格内容居中。 4. CSS选择器与鼠标悬停效果： - 使用`:hover`伪类，如 `tabletrtd:hover` 为表格单元格设置悬停效果，如背景颜色变化。 - 对表头单元格（`th`）进行单独处理，如 `tabletrth:hover`，改变表头悬停时的颜色。 5. 嵌套表格： 表格中嵌套另一个表格，通过嵌套 `<table>` 标签实现，例如 `.t1` 和 `.t2` 类的样式分别应用于外层和内层表格。 6. 元素聚焦状态： - 使用`:focus` 伪类为输入控件（如文本框 `.pwd:focus`）添加激活效果，例如高亮显示输入框。 - 提供密码输入控件、重置按钮和单选/复选框的交互设计，如默认选中状态的设置。 这些知识点展示了HTML5和CSS在网页设计中的基础运用，包括样式控制、布局调整、用户交互以及表格的复杂操作。掌握这些内容有助于开发者创建出响应式且具有吸引力的网站界面。