1.初识HTML
2.网页基本信息
title 网页的标题
meta 描述性标签，用来描述网站的一些信息
meta 用来做SEO ( 搜索引擎优化 )
body 标签代表网页主体
3.网页基本标签
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<h1>一级标签</h1>
<h2> 二级标签</h2>
<p>两只老虎</p>
跑得快<br/>
<hr/>
粗体: <strong>i love you</strong>
斜体: <em>i love you</em>
<br/>
空格
<br/>
>
<br/>
<
<br/>
©版权
</body>
</html>
|
4.图像标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="" alt="" title="" width="" height="">
</body>
</html>
|
5.超链接标签及应用
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a id="top">顶部</a>
<a href="https://www.baidu.com"target="_blank">点击我跳转到百度</a>
<a href="#top">回到顶部</a>
<a href="mailto：123@163.com">点击联系我</a>
</body>
</html>
|
6.行内元素和块元素
块元素
- 无论内容多少，该内容独占一行
- （ p，h1-h6 … ）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （ a . strong . em …）
7.列表标签
列表
什么是列表？
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
代码实例
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>运维</dd>
<dd>C/C++</dd>
<dd>前端</dd>
</dl>
</body>
</html>
|
8.表格标签
为什么使用表格
基本结构
代码实例
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
|
9.媒体元素
视频和音频
视频元素
音频元素
代码实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>
</body>
</html>
|
10.页面结构分析
- header 标题头部区域的内容（ 用于页面或页面中的一块区域 ）
- footer 标记脚部区域的内容（ 用于整个页面或页面中的一块区域 ）
- section Web页面中的一块独立区域
- article 独立的文章内容
- aside 相关内容或应用 （ 常用于侧边栏 ）
- nav 导航类辅助内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
|
11.iframe内联框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>
|
12.初识表单post和get提交
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<form action=""method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
|
13.文本框和单选框
表单元素格式
| 属性 |
说明 |
| type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
| name |
指定表单元素的名称 |
| value |
元素的初始值。type为radio时必须指定一个值 |
| size |
指定表单元素的初始宽度。当type为text 或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength |
type为text或password时，输入的最大字符数 |
| checked |
type为radio或checkbox时，指定按钮是否是被选中 |
代码实例：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<form action="表格.html"method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
|
14.按钮和多选框
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
55
56
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<form action="表格.html"method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<p>按钮：
<input type="button" name="btn1" value="懂得都懂">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
|
15.列表框文本域和文本域
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<form action="表格.html"method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<p>按钮：
<input type="button" name="btn1" value="懂得都懂">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>国家：
<select name="列表名称">
<option value="China">中国</option>
<option value="US">美国</option>
<option value="Japan">日本</option>
<option value="Russia">俄罗斯</option>
</select>
</p>
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
|
16.搜索框滑块和简单验证
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<form action="表格.html"method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<p>按钮：
<input type="button" name="btn1" value="懂得都懂">
<input type="image" src="../resources/image/1.jpg">
</p>
<p>国家：
<select name="列表名称">
<option value="China">中国</option>
<option value="US">美国</option>
<option value="Japan">日本</option>
<option value="Russia">俄罗斯</option>
</select>
</p>
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>邮箱：
<input type="email" name="email">
</p>
<p>URL：
<input type="url" name="url">
</p>
<p>数字：
<input type="number" name="num" max="666" min="520" step="6">
</p>
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>搜索：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
|
17.表单的应用
隐藏域 –hidden
1
| <p>密码：<input type="password" name="pwd" hidden></p>
|
只读 –readonly
1
| <p>名字：<input type="text" name="username" value="admin" readonly></p>
|
禁用 –disabled
1
| <input type="submit" disabled>
|
小拓展：
1
2
3
4
5
| <p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
|
18.表单初级验证
为什么要进行表单验证？
安全性 减轻压力
常用方式
1
| <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>
|
1
| <input type="email" name="email" required>
|
需要用到什么就去查
1
2
3
4
5
|
<p>自定义邮箱：
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
">
</p>
|
