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

本资源主要介绍了HTML5与CSS的基本应用，结合实例详细讲解了以下几个关键知识点： 1. 样式设置： - 使用`<style>`标签定义内联样式，如`:hover`伪类用于实现元素悬停效果，如`color:red;`表示文本颜色变为红色，`tabletrtd:hover{background-color:blue;}`则使得表格单元格在鼠标悬停时背景色变为蓝色。 - `link`标签用于外部CSS引用，包括相对路径`<linkhref="css/css1.css"rel="stylesheet">`和绝对路径`<linkhref="E:/webTest-43/css/css1.css"rel="stylesheet">`，这有助于管理页面样式。 2. 表格结构与布局： - `colspan`和`rowspan`属性用于合并单元格，前者使一个单元格跨越多列，后者使一个单元格跨越多行。 - `cellspacing`属性控制单元格间的间距，如`cellspacing="0"`表示消除默认间距。 - 使用CSS布局技巧，如`table{border-collapse:collapse;}`来创建固定表格布局，以及`border-spacing`属性调整列间隔和行间隔。 3. 文本对齐与垂直对齐： - 通过`text-align`属性控制文本水平对齐，如`table{text-align:center;}`使表格内容居中。 - `vertical-align`属性用于设置单元格内容的垂直对齐方式，如`top`表示顶部对齐。 4. 圆角处理： - 使用CSS的`background-color`属性改变背景颜色，并配合`:hover`选择器为特定元素添加悬停效果，如表头`tabletrth:hover{background-color:red;}`在鼠标悬停时变色。 5. 表格嵌套与交互： - 可以在表格单元格中嵌套另一个表格，通过CSS选择器`.uname:hover`实现子表格元素的悬停效果。 6. 元素聚焦与输入控件： - `:focus`伪类用于设置元素获得焦点时的样式，如`.pwd:focus`使得密码输入框聚焦时有特定效果。 - 对于输入控件，包括文本输入框、重置按钮和单选/复选框，分别介绍了其基本结构和默认选中属性，如`<input type="radio" value="nan" name="r1">`表示单选框，初始选中值为"nan"。 这些内容覆盖了HTML5和CSS的基础语法、样式设置、布局控制和交互设计，是开发网页前端页面时的重要参考。熟练掌握这些技术，能够帮助开发者构建出更加美观且功能丰富的Web应用。