5.21前端基础（1）

### 5.21前端基础（1）：HTML基础####一、简单的HTML页面架构HTML（HyperText Markup Language）是一种标记语言，用于创建网页结构。一个基本的HTML页面通常包含以下元素： ```html 页面标题 ``` 1. **``**：文档类型声明，告诉浏览器这是一个HTML5文档。 2. **``**：根元素，所有其他HTML标签都在此标签内部。 3. **``**：包含关于文档的元数据，如字符集、标题等。 4. **``**：设置文档的字符编码为UTF-8。 5. **``**：设置浏览器标签页标题。 6. **``**：包含实际的页面内容。 ####二、HTML常见标签##### 2.1 Meta标签- **``**：提供关于页面的元信息。例如： ```html ```这里设置的是页面的关键字，有助于SEO优化。 - **``**：定义文档与外部资源的关系。例如引入CSS文件： ```html ``` - **``**：用于嵌入JavaScript代码或引用外部JS文件： ```html ``` - **注释**：``，不会在浏览器中显示。 - **段落**：`...`，用于定义段落。 ##### 2.2标题标签- **``**至**``**：定义不同级别的标题。例如： ```html 一级标题 二级标题 ``` - **换行**：``，插入换行符。 - **水平线**：``，插入一条水平分隔线。 ##### 2.3文本属性- **加粗**：`...`或`...`，用于强调文本，增强重要性。 - **斜体**：`...`，用于表示文本应以斜体显示。 - **下划线**：`...`，为文本添加下划线。 - **上标**：`...`，将文本提升至上标位置。 - **下标**：`...`，将文本降至下标位置。 - **删除线**：`...`，表示文本已被删除。 - **字体属性**：``，设置文本的颜色和大小，例如： ```html 红色大字体 ``` - **预格式化文本**：`...`，保留空格和换行。 ##### 2.4 Form表单- **``**：定义用户输入信息的区域。 - **`action`**：指定处理表单数据的服务器脚本。 - **`method`**：指定表单数据发送的方式，通常为`GET`或`POST`。 - **`enctype`**：规定在发送表单数据之前如何对其进行编码。例如： ```html ``` - **``**：定义不同的输入控件。 - **`type`**：定义输入控件的类型，如`text`、`password`、`file`等。 - **`name`**：定义输入控件的名称。 - **`value`**：定义输入控件的初始值。 - **`readonly`**：设置只读属性。 -示例： ```html ``` - **提交按钮**：`` - **重置按钮**：`` ##### 2.5链接标签- **``**：用于创建超链接。 - **`href`**：链接的URL。 - **`target`**：定义在何处打开链接目标。 - `_self`：默认值，在相同框架或窗口中打开。 - `_blank`：在新窗口或标签页中打开。 - `_parent`：在父框架集中打开。 - `_top`：在整个窗口中打开。 -示例： ```html Example Link ``` - **锚点**：使用``标签结合`name`属性来创建锚点。 -示例： ```html 跳转至第二节 第二节 ``` ##### 2.6图像标签- **``**：插入图像。 - **`src`**：图像的URL。 - **`alt`**：图像的替代文本。 -示例： ```html ``` ##### 2.7表格标签- **``**：定义表格。 - **``**：表格标题。 - **``**：定义表格的一行。 - **``**：定义表格的表头单元格。 - **``**：定义表格的普通单元格。 -示例： ```html 示例表格 姓名 年龄 张三 25 ``` - **`border`**：定义表格边框的宽度。 - **`width`**和**`height`**：分别定义表格的宽度和高度。 - **`colspan`**和**`rowspan`**：分别定义单元格跨列和跨行的数量。 - **`cellpadding`**：单元格内边距。 - **`cellspacing`**：单元格间距。 ##### 2.8列表标签- **无序列表**：``，用于创建项目没有特定顺序的列表。 -示例： ```html 项目1 项目2 项目3 ``` - **有序列表**：``，用于创建项目具有特定顺序的列表。 -示例： ```html 项目A1 项目A2 项目A3 ``` - **列表项**：``，定义列表中的每一项。 ####三、框架的使用- **``**：定义了一个HTML文档如何分割成多个框架。框架是页面的一部分，可以独立加载不同的文档。 -示例： ```html ```这里定义了一个上下两个框架的布局，第一个框架占据100像素高度，第二个框架占据剩余空间。以上是对HTML基础知识的一个较为全面的介绍，包含了HTML文档的基本结构、常用标签及其用法。这些内容对于初学者来说是非常重要的基础知识，掌握了这些内容之后，就可以更深入地学习前端开发的相关技术了。