元素

# 文本

# Heading

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

1
2
3
4
5
6

# Paragraph

<p>段落</p>

# List

无序列表 unordered list

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

1
2
3
4
5

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

1
2
3
4
5

多级列表

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Anchor

锚，超链接

<a href="网页地址">超链接文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本元素</title>
</head>
<body>
    <a href="http://www.baidu.com">互联网网页</a>
    <hr>
    <a href="#p1">页面内锚点</a>
    <hr>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id="p1">很下面的内容 <a href="#">回到顶部</a></p>
    
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 多媒体

# Image

<img src="文件路径">

src 格式有 3 种

文件地址；
data URL，格式如下；
java读取图片转为URL：
1. Files.readAllBytes(Path.of("***.png"));
2. Base64.getEncoder().encodeToString(a返回的数组 );
```
data:媒体类型;base64,数据
//src="data:image/png;base64,.......""
```
1
2
object URL，需要配合 javascript 使用；

# Video

<video src="文件路径" width="300" controls></video>

# Audio

<audio src="文件路径"></audio>

# 表单

收集用户填入的数据，并将这些数据提交给服务器；

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

1
2
3
4
5

<form action="https://www.baidu.com/s">
 <input type="text" name="wd">  //name与后端bean的参数对应
 <input type="submit" value="搜索">
</form>

1
2
3
4

method 请求方式有：
- get （默认）提交时，数据跟在 URL 地址之后；
- post 提交时，数据在请求体内；
enctype 在 post 请求时，指定请求体的数据格式：
- application/x-www-form-urlencoded（默认）；
- multipart/form-data；
其中表单项提供多种收集数据的方式：
- 有 name 属性的表单项数据，才会被发送给服务器；

常见表单项：

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

java中使用了LocalDate需要加注解@DateTimeFormat(pattern="yyyy-MM-dd")；

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

1
2

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

1
2
3

文件上传

表单中指定请求方式和数据格式：

method="post" enctype="multipart/form-datan"

后端方法参数类型(MultipartFile avatar)；

<input type="file" name="avatar">

← HTML页面请求→