常用标记

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
- HTML 标签是由*尖括号*包围的关键词，比如 <html>
- HTML 标签通常是*成对出现*的
- 标签对中的第一个标签是*开始标签*，第二个标签是*结束标签*
- 开始和结束标签也被称为*开放标签*和*闭合标签*

1.<!DOCTYPE>：让浏览器知道这是个html文件
2.<html>：定义html文档的根（</html>)
3.<head>：文档的元数据（元数据通常定义文档标题、字符集、样式、脚本和其他元信息,一般不显示）(</head>)
4.<title>：显示在浏览器的标题栏或页面的选项卡(head中必须的元素）(</title>)
5.<body>：文档主体(</body>)
6.<h1>to<h6>：标题（数字越大字越小）(</h1>to</h6>)
7.<p>：段落(</p>）（<b>字体加粗，<i>斜体,<u>下划线,<s>删除线）
8.<br/>:换行
9.<!--...-->:注释（不显示）

10<table>表单

- **tr**：tr 是 table row 的缩写，表示表格的一行。(行标签)
- **td**：td 是 table data 的缩写，表示表格的数据单元格。（其他行用，列标签）
- **th**：th 是 table header的缩写，表示表格的表头单元格。(第一行用，列标题)

11.<a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签

12<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签

13. ul 无序列表标签,ol有序列表标签，都用<li>定义列表项
    
14.<hr>水平分割线
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
54
<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
    <h1>练习</h1>
    <h2>练习</h2>
    <h3>练习</h3> 
    <h4>练习</h4>
    <h5>练习</h5>
    <h6>练习</h6>
    <ol>    
        <li>练习1</li>
        <li>练习2</li>
        <li>练习3</li>
    </ol>
    <ul>
        <li>练习A</li>
        <li>练习B</li>
        <li>练习C</li>
    </ul>
    <p>练习<br>换行</p>
    <p>练习</p>
    <p>
        <b>字体加粗</b>
        <i>字体斜体</i>
        <u>字体下划线</u>
        <s>字体删除线</s>
    </p>
    <table border="1"> <!-- border="1"表示有边框 -->
        <tr>
        <th>列标题</th>
        <th>列标题</th>
        <th>列标题</th>
        </tr>

        <tr>    
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        </tr>

        <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        </tr>
    </table>

    
</body>
</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
- HTML 元素可以设置**属性**
- 属性可以在元素中添加**附加信息**
- 属性一般描述于**开始标签**
- 属性总是以名称/值对的形式出现，**比如：name="value"**。

1.id：为元素指定唯一的标识符。

2.class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。

3.style：用于直接在元素上应用 CSS 样式。

4.title：为元素提供额外的提示信息，通常在鼠标悬停时显示

5.data-*：用于存储自定义数据，通常通过 JavaScript 访问。

6.alt 属性用来为图像定义一串预备的可替换的文本。

7.height（高度） 与 width（宽度）属性用于设置图像的高度与宽度

8.src 指 "source"。源属性的值是图像的 URL 地址

9.href：定义链接目标（href="#"表示导航到页面顶部）

10.target：定义链接的打开方式。

- `_blank`: 在新窗口或新标签页中打开链接。(这个更建议)
- `_self`: 在当前窗口或标签页中打开链接（默认）。
- `_parent`: 在父框架中打开链接。
- `_top`: 在整个窗口中打开链接，取消任何框架。

[!IMPORTANT]

链接语法

1
<a href="URL" target=_blank>	</a>

图像语法

1
<img src="url" alt="错误文本 width="宽度" height="高度""> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE>
<html>  
<head>
    <meta charset="UTF-8">
    <title>属性</title>
</head>
<body>
<a href="baidu.com" target="_blank">百度</a>
<br>
<hr>
<img src="1.png" alt="图片无法显示">
<br>
<img src="https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg?cs=srgb&dl=pexels-souvenirpixels-1486974.jpg&fm=jpg" alt="图片无法显示" width="400px" height="400px">
</html>

区块元素

1
2
3
4
5
6
7
8
9
10
11
12
13
1.大多数 HTML 元素被定义为**块级元素**或**内联元素**。

块级元素在浏览器显示时，通常会以新行来开始

实例: <h1>, <p>, <ul>, <table> 

内联元素在显示时通常不会以新行开始

实例: <b>, <td>, <a>, <img>

2.div元素是块级元素，它可用于组合其他 HTML 元素的容器,定义了文档的区域，没有特点的意义

3.span元素是内联元素，可用作文本的容器，用来组合文档中的行内元素， 也没有特别的意义
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
<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>区块</title>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </div>

    <div class="content">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个示例段落，展示了如何使用区块元素来组织内容。</p>
    </div>
    
    <span>这是一个行内元素示例。</span>
    <span>另一个行内元素。</span>
    <hr>
    <span> 链接点击<a href="#">这里</a></span>

</body>
</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
1. `<form>` 表单容器

- 用于创建表单，收集用户输入的数据。
- **常用属性**：
  - `action`：定义表单数据提交的目标 URL。
  - `method`：定义 HTTP 提交方式，一般为 `get` 或 `post`。



2. `<label>` 标签

- 用于给表单元素添加说明文字，提高可访问性。
- **for 属性**：值必须和目标输入框的 `id` 一致，这样点击标签文字时，输入框会自动聚焦。



3. `<input>` 输入框

- 最常用的表单元素，可以创建各种输入控件。
- **常见属性**：
  - `type`：定义类型（如 `text`、`password`、`radio`单选、`checkbox`复选、`submit` 等）。
  - `id`：唯一标识，用于和 `<label>` 关联。
  - `name`：字段名，提交时会以 `键=值` 的形式发送。
  - `value`：定义元素的默认值（文本框），或选中后提交的实际值（单选/复选框）。


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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
</head>
<body>
    <form>  
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <br>
        <label for="password">密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="other">其他
        <br>
        <input type="checkbox" name="hobby" value="reading">阅读
        <input type="checkbox" name="hobby" value="traveling">旅行
        <input type="checkbox" name="hobby" value="gaming">游戏
        <br>
        <input type="submit" value="提交">
    </form>
</html>

框架

1
2
3
4
5
6
7
8
9
10
11
12
iframe标签规定一个内联框架。

　一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

常用属性

1. **`src`**：要嵌入的页面地址（URL）。
2. **`width` / `height`**：设置 iframe 的宽度和高度。
3. **`frameborder`**：是否显示边框，`0` = 无边框，`1` = 有边框。
4. **`allowfullscreen`**：允许全屏显示（常用于视频）。