> ## Content Index > Fetch the complete content index at: https://blog.vercanti.com/llms.txt > Use this file to discover other available public pages before exploring further. # HTML 与 CSS 入门 - URL: https://blog.vercanti.com/html-yu-css-ru-men/ - Published: 2026-08-28T14:35:14.000Z - Updated: 2026-08-28T14:58:23.000Z - Description: 相关文档：JavaScript入门(/javascript-ru-men/) Vue3入门(/vue-3-ru-men-zhi-nan/) 1. HTML 是什么(#html-%E6%98%AF%E4%BB%80%E4%B9%88) 2. 网页的基本结构(#%E7%BD%91%E9%A1%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84) 3. 常用 HTML 标签(#%E5%B8%B8%E7%94%A8-html-%E6%A0%87%E7%AD%BE) 4. HTML 属性(#html-%E5%B1%9E% - Author: yellowdog - Tags: 前端开发 > 官方文档： | > 最后更新：2026-03-05 相关文档：[JavaScript入门](https://blog.vercanti.com/javascript-ru-men/) [Vue3入门](https://blog.vercanti.com/vue-3-ru-men-zhi-nan/) --- ## 目录 1. [HTML 是什么](#html-%E6%98%AF%E4%BB%80%E4%B9%88) 2. [网页的基本结构](#%E7%BD%91%E9%A1%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84) 3. [常用 HTML 标签](#%E5%B8%B8%E7%94%A8-html-%E6%A0%87%E7%AD%BE) 4. [HTML 属性](#html-%E5%B1%9E%E6%80%A7) 5. [路径：相对路径与绝对路径](#%E8%B7%AF%E5%BE%84%EF%BC%9A%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E4%B8%8E%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84) 6. [表单完整示例](#%E8%A1%A8%E5%8D%95%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B) 7. [CSS 是什么](#css-%E6%98%AF%E4%BB%80%E4%B9%88) 8. [CSS 三种引入方式](#css-%E4%B8%89%E7%A7%8D%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F) 9. [CSS 选择器](#css-%E9%80%89%E6%8B%A9%E5%99%A8) 10. [盒模型](#%E7%9B%92%E6%A8%A1%E5%9E%8B) 11. [常用 CSS 属性](#%E5%B8%B8%E7%94%A8-css-%E5%B1%9E%E6%80%A7) 12. [display 属性](#display-%E5%B1%9E%E6%80%A7) 13. [Flexbox 弹性布局](#flexbox-%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80) 14. [Grid 网格布局](#grid-%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80) 15. [Position 定位](#position-%E5%AE%9A%E4%BD%8D) 16. [响应式设计](#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1) 17. [过渡与动画](#%E8%BF%87%E6%B8%A1%E4%B8%8E%E5%8A%A8%E7%94%BB) 18. [CSS 变量](#css-%E5%8F%98%E9%87%8F) 19. [综合实战：响应式个人主页](#%E7%BB%BC%E5%90%88%E5%AE%9E%E6%88%98%EF%BC%9A%E5%93%8D%E5%BA%94%E5%BC%8F%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5) 20. [注意事项与常见错误](#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%E4%B8%8E%E5%B8%B8%E8%A7%81%E9%94%99%E8%AF%AF) --- ## HTML 是什么 HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。它不是编程语言，而是一种**标记语言**，通过标签（Tag）来描述网页的内容结构。你可以把网页理解为一栋房子： - HTML 是房子的骨架和墙体（结构） - CSS 是房子的装修和外观（样式） - JavaScript 是房子里的电器和功能（交互）本文只讲 HTML 和 CSS。 --- ## 网页的基本结构每个 HTML 文件都遵循固定的基本结构。用文本编辑器（如 VS Code）新建一个 `index.html` 文件，写入以下内容： ```html 我的第一个网页

你好，世界！

这是我的第一个网页。

``` 各部分说明： | 标签 / 声明 | 作用 | | -------------------------- | ------------------------ | | | 声明文档类型为 HTML5，必须写在第一行 | | | 根标签，包裹整个页面；lang 属性声明页面语言 | | | 头部区域，存放不显示在页面上的元信息 | | | 声明字符编码为 UTF-8，防止中文乱码 | | | 适配移动端屏幕，响应式设计必备 | | | 浏览器标签页上显示的标题 | | <body> | 页面可见内容都写在这里 | 双击 `index.html` 文件，浏览器会直接打开并渲染出网页。 --- ## 常用 HTML 标签 ### 标题标签 h1 - h6 HTML 提供六级标题，h1 最大，h6 最小。每个页面通常只有一个 h1。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>标题示例

一级标题（最重要）

二级标题

三级标题

四级标题

五级标题

六级标题（最小）

``` ### 段落标签 p `

` 标签表示一段文字。浏览器会在段落前后自动添加间距。 ```html

这是第一段文字。HTML 中的换行在源代码里不起作用，

浏览器会把多个空格和换行都压缩成一个空格。

第一行文字
第二行文字（br 是自闭合标签）

``` ### 链接标签 a `` 标签创建超链接，点击后跳转到指定地址。 ```html 打开百度关于我们跳转到第二节联系我拨打电话 ``` ### 图片标签 img `` 是自闭合标签，用于显示图片。 ```html 一张风景照

``` ### 列表标签 **无序列表**（ul + li）：列表项前显示圆点。 ```html

苹果
香蕉
橙子

``` **有序列表**（ol + li）：列表项前显示数字。 ```html

第一步：打开冰箱
第二步：把大象放进去
第三步：关上冰箱

``` **列表嵌套**： ```html

水果
- 苹果
- 香蕉
蔬菜
- 白菜
- 萝卜

``` ### 表格标签 ```html

学生成绩表
姓名	语文	数学	英语
张三	90	85	92
李四	78	95	88
平均分	84	90	90

``` 单元格合并： ```html

合并了两列		正常单元格
合并了两行	第二行第二列	第二行第三列
合并了两行	第三行第二列	第三行第三列

``` ### 表单标签表单用于收集用户输入的数据。详细示例见[表单完整示例](#%E8%A1%A8%E5%8D%95%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B)。 ```html ``` ### 语义化标签语义化标签让代码的含义更清晰，对搜索引擎和屏幕阅读器（辅助视障用户）友好。 ```html 语义化布局示例

网站名称

关于我们

这里是关于我们的介绍。

``` ### div 和 span `

` 和 `` 是没有语义的通用容器，用于组合元素、方便 CSS 样式控制。 - `

`：块级元素，独占一行，用于大块区域划分 - ``：行内元素，不换行，用于标记一行文字中的某个部分 ```html

卡片标题

卡片内容，这段文字中有一个重要词语需要标红。

``` --- ## HTML 属性属性写在开标签内，格式为 `属性名="属性值"`。 | 属性 | 适用标签 | 说明 | | ----------- | ------------------- | -------------------------------------------------- | | id | 所有标签 | 唯一标识符，同一页面中不能重复 | | class | 所有标签 | 类名，同一个类可以用于多个元素，CSS 通过类名来设置样式 | | style | 所有标签 | 内联样式，直接在标签上写 CSS（不推荐大量使用） | | href | | 链接目标地址 | | src | ,