来源：Eternal_tyq 发布时间：2018-11-22 15:27:43 阅读量：1152
HTML简介
HTML的全称是：Hypertext Marked Language,即超文本标记语言，是目前在网络上应用最广泛的语言，也是构成网页文档的主要语言，主要用来控制网页的结构。它是由其标签组成的描述性文本。使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。
HTML的结构
HTML文档的基本结构由三个标签组成:
1
<html><!--开始-->
<head>
<!--头部信息，如<title>定义标题-->
</head>
<body>
<!--主体信息，包含网页显示的内容-->
</body>
</html><！--结束-->
1
2
3
4
5
6
7
8
HTML标签
文档结构标签
<html>...</html>:标识文档的开始和结束
<head>...</head>:标识文档头部区域
<body>...</body>:标识文档主体
eg.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
这是我的第一个网页
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
测试结果：
2.文本格式标签
<hi>...</hi>:标识标题文本标签，i可以为1-6，分别表示1-6级标题，字体大小依次缩小
<p>...</p>：标识段落文本
<br>:换行符
<pre>...</pre>标识预定义文本，即在此标签中的输入的空格、回车均有效
1
2
3
4
3.文字效果标签
<b>...</b> 定义粗体文字
<em>...</em> 定义着重文字
<i>...</i> 定义斜体文字
<small>...</small> 定义小号字
<strong>...</strong> 定义加重语气
<sub>...</sub> 定义下标字
<sup>...</sup> 定义上标字
<ins>...</ins> 定义插入字
<del>...</del> 定义删除字
<span>...</span> 定义普通字
<><>
1
2
3
4
5
6
7
8
9
10
11
eg.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<b>网页</b>
<em>网页</em>
<i>网页</i>
<small>网页</small>
<strong>网页</strong>
<sub>网页</sub>
<sup>网页</sup>
<ins>网页</ins>
<del>网页</del>
<span>网页</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
测试结果：
4.超链接标签
<a>...</a>超链接识别标签
eg.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
测试结果：
5.表单标签
<form action="提交目标地址" method="get/post"></form>
表单元素：
<input type="text"/>单行文本框
<textarea></textarea>多行文本域
<input type="password"/>密码框
<input type="radio" name="">单选按钮
注：name值相同表示单选按钮组
<input type="checkbox"/>复选框
<input type="file"/>文件域
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮
<input type="button">普通按钮
<button></button>按钮
下拉菜单：
<select>
<option value="" selected></option>
</select>
下拉列表
<select multiple>
<option value="" selected></option>
</select>
eg.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<form>
<p>姓名:<input type="text"/></p>
<p>密码:<input type="password"/></p>
<p>性别:<input type="radio" name="性别"/>男<input type="radio" name="性别"/>女</p>
<p>地址:<select>
<option value="陕西省"selectd>陕西省</option>
<option value="湖南省">湖南省</option>
<option value="河北省">河北省</option>
<option value="沈阳省">沈阳省</option>
</select>
</p>
<p><input type="submit"/><input type="reset"/></p>
<p><a href="http://www.baidu.com">忘记密码</a></p>
</form>
</p>
</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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
测试结果：
---------------------
13450931319
微信登录
QQ登录
微博登录
售前咨询
