无题
HTML标签
html全称Hypertext Markup Language(超文本标记语言)
HTML通过一系列==标签(元素)==来定义文本、图像，链接等。HTML标签是尖括号包裹的关键字
1 | <p>这是一个段落<p> |
<br> 换行标签<hr> 水平分割线标签
区别：单标签用于没有内容的元素，双标签用于有内容的元素
HTML文件结构如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
<head>
<!-- 这里放置标题的元信息 -->
<title>文档标题</title>
<meta charset="UTF-8" />
<!-- 连接外部样式表或者脚本文件等 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- 这里放置页面的内容 -->
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的HTML页面示例。</p>
<!-- 你可以在这里添加更多的内容，例如图片、链接、表格等 -->
</body>
</html>
HTML基础标签用法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html lang="en">
<head>
<!-- 这里放置标题的元信息 -->
<title>文档标题</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 连接外部样式表或者脚本文件等 -->
</head>
<body>
<!-- 这里放置页面的内容 -->
<h1>这是一级标题标签</h1>
<p>这是一个段落标签。</p>
<p>
更改文本样式: <b>字体加粗</b>、<i>字体斜体</i>、<u>下划线</u>
</p>
<ul>
<li>这是一个无序列表项</li>
<li>这是另一个无序列表项</li>
<li>这是第三个无序列表项</li>
</ul>
<ol>
<li>这是一个有序列表项</li>
<li>这是另一个有序列表项</li>
<li>这是第三个有序列表项</li>
</ol>
<table border="1">
<!-- // tr -> table row 表格行
// th -> table header 表头单元格
// td -> table data 表格数据单元格 -->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
</body>
</html>
HTML属性
基础概念
基本语法 <开始标签 属性名 = "属性值" >
每个HTML元素可以具体不同的属性，属性名称不区分大小写，属性值对大小写敏感1
2
3
4
5
6
7<p id="description" class="section"> 这是一个段落标签 </p>
<a href="https://www.example.com">这是一个链接标签</a>
<img src="image.jpg" alt="描述文本" width="300" height="200" />
<img SRC="image.jpg" alt="描述文本" width="300" height="200" />
<img src="IMAGE.JPG" alt="描述文本" width="300" height="200" />
<!-- 前两者相同，第三个不一样 -->
class属性是用于向元素添加一个或多个类名，以便通过 CSS 样式表定义样式。此外，类名还可以用来实现 JavaScript 的交互效果。id属性是用于将元素标识为唯一的标识符。它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素。style属性是用于将CSS样式规则直接应用于元素。它可以用于控制元素的颜色、字体、大小和布局等。以上三种是所有标签都有的属性，也有一些标签具有独特的属性，比如 a 标签的 href 属性，img 标签的 src 属性等等。1
2
3<p class="note">这是一个带有 note 类属性的 p 标签</p>
<div id="header">这是一个带有 header id 的 div 标签</div>
<div style="color: red; font-size: 20px;">这是一段红色的文字</div>
行元素与块元素
当涉及到 HTML 元素时，可以将它们分为两个主要类别：行内元素 和 块级元素。这些不同类型的元素在 HTML 文档中的呈现和布局方面有很大的不同。下面是关于这两种类型的元素的详细说明：
块级元素（block）：块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。- 块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
- 可以包含其他块级元素和行内元素。
- 常见的块级元素包括
<div>,<p>,<h1>到<h6>,<ul>,<ol>,<li>,<table>,<form>等。
行内元素（inline）：行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。- 行内元素通常在同一行内呈现，不会独占一行。
- 它们只占据其内容所需的宽度，而不是整行的宽度。
- 行内元素不能包含块级元素，但可以包含其他行内元素。
- 常见的行内元素包括
<span>,<a>,<strong>,<em>,<img>,<br>,<input>等。
1 | <div>这是一个块级元素，它会独占一行。</div> |
表单 form 标签
HTML 表单（form）是一种重要的元素， 用于收集和提交用户输入的数据。表单允许用户输入文本、选择选项、上传文件等，然后将这些数据提交到服务器进行处理。一个基本的 HTML 表单由以下几个主要部分组成：
1. form 元素
表单元素是表单的容器，它定义了数据提交到哪里以及使用哪种 HTTP 方法（通常是 GET 或 POST ）来提交数据。它可以包含输入字段、按钮等元素。
1 | html<form action="/submit" method="post"> |
表单元素可以包含一些属性，以指定表单的行为和样式。常见的表单属性包括：
| 属性 | 描述 |
|---|---|
| action | 指定表单数据提交到服务器的 URL。 |
| method | 指定用于提交数据的 HTTP 方法，通常为 get 或 post。 |
| name | 为表单命名，以便在 JavaScript 中引用。 |
| target | 指定表单提交后的目标窗口或框架。 |
表单提交方式的区别
get：默认值，主动地获取方式，参数放在 URL 上，数据的容量有限，安全性差，有缓存；
post：数据存放在请求体中，数据量理论上没有限制，相对安全，没有缓存。
2. 输入字段 - input
<input> 标签是 HTML 中用于创建表单元素的最常见标签之一。它允许用户输入文本、选择选项、上传文件等等。<input> 元素有多个属性，用于指定不同类型的输入和控制输入的方式。以下是一些常见的 <input> 标签的属性和它们的详细说明：
type 属性：指定输入字段的类型，它可以有以下不同的值：
text：创建文本输入框，用于用户输入文本。password：创建密码输入框，输入内容会被隐藏。radio：创建单选按钮，用户只能选择一个选项。checkbox：创建复选框，用户可以选择多个选项。number：创建数字输入框，允许用户输入数字。email：创建用于输入电子邮件地址的输入框。file：创建文件上传字段，用户可以上传文件。submit：创建提交按钮，用于提交表单数据。reset：创建重置按钮，用于重置表单数据。button：创建自定义按钮，通常与 JavaScript 一起使用。
示例如下：
1 | html<input type="text" name="username" placeholder="用户名"> |
最后，我们使用表单来写一个用户注册的页面，代码如下：
1 | html<h2>用户注册</h2> |