html基本知识

一、HTML 基本概念

• 全称：HyperText Markup Language（超文本标记语言）
• 作用：定义网页的结构和内容
• 特点：不是编程语言，而是标记语言，使用标签来描述内容
• 文件扩展名 ：.html 或 .htm

二、HTML 文档基本结构

每个 HTML 文档都遵循相同的基本结构：

• <!DOCTYPE html>：声明文档类型，告诉浏览器这是 HTML5 文档
• <html>：根元素，包含整个 HTML 文档
• <head>：包含文档的元数据（不直接显示在页面上）
• <meta charset="UTF-8">：指定字符编码，确保中文等字符正常显示
• <title>：定义页面标题，显示在浏览器标签栏
• <body>：包含所有可见的页面内容

三、HTML 标签基础

1. 标签的特点

• 大多数标签成对出现：<标签名>内容</标签名>
• 少数自闭合标签：<标签名> 或 <标签名/>（如 <img>、<br>）
• 标签可以嵌套，但不能交叉嵌套

2. 常用文本标签

四、链接与图像

1. 链接 (<a> 标签)

• href：指定链接目标
• target="_blank"：在新窗口打开链接

2. 图像 (<img> 标签)

• src：图像文件路径（必填）
• alt：图像的替代文本（必填，用于图像无法显示时）
• width 和 height：设置图像尺寸

五、列表

1. 无序列表

2. 有序列表

3. 定义列表

六、表格

• <table>：表格容器
• <tr>：表格行
• <th>：表头单元格
• <td>：普通单元格

七、表单

表单用于收集用户输入：

• <form>：表单容器
• action：表单提交的目标 URL
• method：提交方法（get 或 post）
• 常用输入控件：input、select、textarea
• required：表示该字段为必填项

八、语义化标签

HTML5 引入了语义化标签，使代码更具可读性和结构性：

语义化的好处：

• 提高代码可读性
• 有利于搜索引擎优化 (SEO)
• 便于屏幕阅读器等辅助技术解析