# 我使用过的 HTML + CSS 实践总结笔记（含说明）
一、我用过的 HTML 标签
常见结构与内容标签，构成网页的基本骨架和显示内容。
| 类别 | 标签列表 | 说明 |
|---|---|---|
| 文档结构 | <!DOCTYPE html>, <html>, <head>, <body> | 网页基础框架结构 |
| 元信息 | <meta>, <title>, <style> | 设置网页编码、标题、内部样式等信息 |
| 文字结构 | <p>, <br>, <hr> | 分段、换行、添加水平线 |
| 样式辅助 | <div>, <span>, <a> | 布局容器、内联文本、超链接标签 |
| 标题标签 | <h1> ~ <h5> | 页面结构层级标题 |
| 表格标签 | <table>, <tr>, <td>, <th> | 表格结构与单元格设置 |
| 表单标签 | <form>, <input>, <textarea>, <select>, <option> | 用于创建表单与用户输入项 |
| 图片插入 | <img> | 用于网页中插入图片 |
二、我用过的 CSS 属性
控制网页外观与布局的核心属性。
| 分类 | 属性与用法简介 |
|---|---|
| 文字样式 | color, font-size, font-weight, font-style, font-family |
| 文本排版 | text-align：文字水平对齐text-indent：首行缩进line-height：行间距text-decoration：文本修饰线 |
| 尺寸间距 | width, height, padding, margin, border |
| 背景设置 | background-color, background-image, background-repeat |
| 布局方式 | display: block / flex |
| 选择器用法 | .class, #id, a:hover, a:active |
| 表格边线 | border-bottom：常用于制作表格分隔线效果 |
🔧 HTML + CSS 常用知识补充（进阶建议）
一、HTML 标签拓展
| 用途类别 | 标签示例 | 说明 |
|---|---|---|
| 强调与修饰 | <strong>, <em>, <del>, <u> | 加粗、斜体、删除线、下划线 |
| 列表结构 | <ul>, <ol>, <li> | 创建有序/无序列表 |
| 表格分组 | <thead>, <tbody> | 分离表格头部与主体内容 |
| 表单标签补充 | <label> | 表单控件说明性文字 |
二、CSS 常用拓展属性
增强页面精细控制的常用样式属性。
| 类型 | 属性和说明 |
|---|---|
| 字距控制 | word-spacing, letter-spacing：设置字词间距 |
| 盒模型调整 | box-sizing: border-box：边距包含在宽高计算内 |
| 外观修饰 | border-radius: 10px：设置圆角 |
| 背景控制 | background-position: center：背景居中background-size: cover / contain：调整背景填充方式 |
| 对齐方式 | vertical-align: middle：行内/表格内容垂直居中 |
三、CSS 选择器进阶技巧
提高样式应用灵活性。
div p：后代选择器，选中 div 内所有 pdiv > p：子代选择器，仅选中直接子元素.a, .b：并列选择器，多个类名统一样式input:hover,input:focus：交互伪类选择器，控制鼠标悬浮或选中状态样式
四、表格样式建议
- 使用
border-collapse: collapse;：合并单元格边框，视觉整洁 - 给
<td>设置边框（如border-bottom）实现分隔线，不建议直接作用于<tr>
五、代码规范建议
- 样式统一写入
<style>标签或外部.css文件 - 推荐通过
.class控制样式，避免冗余重复 - 多使用语义化标签（如
<section>,<article>等）提升结构清晰度和 SEO 表现