【免费】5.21前端基础（1）资源-CSDN文库

需积分: 0 124 浏览量更新于2024-05-21 收藏 45KB DOC 举报

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