超文本标记语言
head 标签
head标签用于定义文档的头部，它是所有头部元素的容器。
中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
1
| <title>、<meta>、<link>、<style>、 <script>、 <base>。
|
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
| <html>
<head>
<title>百度一下，你就知道</title>
<meta charset="utf-8">
<meta name = "author" content="chs;1374347231@qq.com" />
<meta name ="description" content="陈慧珊简介" />
<link rel = "shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
<body>
hello 这里是第一个html！！！
</body>
</html><html>
<head>
<title>百度一下，你就知道</title>
<meta charset="utf-8">
<meta name = "author" content="chs;1374347231@qq.com" />
<meta name ="description" content="陈慧珊简介" />
<link rel = "shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
<body>
hello 这里是第一个html！！！
</body>
</html>
|
运行效果：
body 标签
body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>媒体：为人父母，要不要“持证上岗”</h1>
<h2>媒体：为人父母，要不要“持证上岗 ”</h2>
<h3>媒体：为人父母，要不要“持证上岗”</h3>
<hr width="300px" align="center" />
<hr width="30%" align="center" />
<p> 26日，“建议父母持合格<父母证>上岗©”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
<p> 26日，“建议父母持合格<父母证>上岗©”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
<p>26日，“建议父母持合格<父母证>上岗©”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<i><u><b>加粗倾斜下划线</b></u></i>
<del>谭颖</del>
<pre>
public static void main(string[] args){
stopThinkingAboutHer();
}
</pre>
<font color="aqua" size= "7" face="黑体"><p> </p></font>
</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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/ss6.jpg" width="300px" title="这是一个美女小姐姐" alt="图片加载失败"/>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1833909874,761626004&fm=26&gp=0.jpg" />
<embed src="music/我要你.mp3"></embed>
<br />
<embed src="video/周杰伦 - 说好的幸福呢.mp4" width="500px" height="500px"></embed>
<embed src="//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId=9194699400-tvId=9194699400-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>
|
超链接标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="文本标签.html">这是一个超链接01</a>
<a href="">这是一个超链接02</a>
<a href="abc">这是一个超链接03</a>
<a href="https://www.baidu.com" target="_self">这是一个超链接04</a>
<a href="https://www.baidu.com" target="_blank">这是一个超链接05</a>
<a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
</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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>起床以后需要做的事</h1>
<ul type="square">
<li>睁眼</li>
<li>穿衣服</li>
<li>上厕所</li>
<li>吃早饭</li>
<li>洗漱</li>
<li>出门</li>
</ul>
<h1>学习java的顺序</h1>
<ol type="A" start="3">
<li>JAVASE</li>
<li>ORACLE</li>
<li>MYSQL</li>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
<tr bgcolor="bisque">
<th>学号</th>
<th>姓名</th>
<th>年纪</th>
<th>成绩</th>
</tr>
<tr>
<td align="center">1001</td>
<td>丽丽</td>
<td>19</td>
<td rowspan="3">90.5</td>
</tr>
<tr>
<td colspan="2" align="center">2006</td>
<td>30</td>
</tr>
<tr>
<td>3007</td>
<td>小明</td>
<td>18</td>
</tr>
</table>
</body>
</html>
|
结果：
框架
内嵌框架
内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示.
添加内嵌框架的语法:
1
2
| <iframe src=" URL "></iframe>
|
实例一：展示商品
首页
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<iframe src="音乐导航.html" height="700px" width="30%"></iframe>
<iframe src="展示页面.html" name ="iframe_my" height="700px" width="67%" src="img/肆无忌惮.png"></iframe>
</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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐导航</title>
</head>
<body>
<ul>
<li>
<a href="img/肆无忌惮.png" target="iframe_my">肆无忌惮 ---薛之谦</a>
</li>
<li>
<a href="img/梦伴.png" target="iframe_my">梦伴 ---李悦君</a>
</li>
<li>
<a href="img/stay.png" target="iframe_my">stay ---The kid LAROL/Justin Bieber</a>
</li>
<li>
<a href="img/Blue&Grey.png" target="iframe_my">Blue&Grey ---BTS</a>
</li>
</ul>
</body>
</html>
|
展示页
1
2
3
4
5
6
7
8
9
10
11
| <!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
15
16
17
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<font color="cornflowerblue" size= "3" face="黑体" >
<p align="center">
用户名<input type="text" /><br />
密 码<input type="password" /><br />
<a href="邮箱首页.html">登录</a>
</p>
</font>
</body>
</html>
|
效果：
邮箱页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="邮箱上侧.html" width="100%" height="100px" align="middle"></iframe>
<iframe src="邮箱左侧.html" width="20%" height="500px" align="left"></iframe>
<iframe src="邮箱右侧.html" name="if1" width="78%" height="500px" align="right"></iframe>
</body>
</html>
|
上侧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font color="blueviolet" face="黑体">
<h1>
欢迎来到TeaSea33的邮箱！！！
</h1>
</font>
</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
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font color="cornflowerblue" size= "5" face="黑体">
<ul>
<li>
<a href="img/写信.png" target="if1">
写信
</a>
</li>
<li>
<a href="img/收信箱.png" target="if1">
收信箱
</a>
</li>
<li>
<a href="img/垃圾箱.png" target="if1">
垃圾箱
</a>
</li>
</ul>
</font>
</body>
</html>
|
右侧
1
2
3
4
5
6
7
8
9
10
| <!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
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*,30%">
<frame />
<frameset cols="30%,40%,*">
<frame />
<frame src="index.html"/>
<frame />
</frameset>
<frameset cols="50%,*">
<frame />
<frame />
</frameset>
</frameset>
</html>
|
将上面的页面改为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="邮箱上侧.html" width="100%" height="100px" align="middle"/>
<frameset cols="30%,*">
<frame src="邮箱左侧.html" width="20%" height="500px" align="left"/>
<frame src="邮箱右侧.html" name="if1" width="78%" height="500px" align="right"/>
</frameset>
</frameset>
</html>
|
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做**提交(submit)**操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
1
2
3
4
| <form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和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
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="aaa" method="post">
用户名 ：<input type="text" name="username"/><br />
密码：<input type="password" name="pwd" /><br />
<input type="submit" />
</form>
用户名2：<input type="text" />
</body>
</html>
|
效果：
实例：模仿百度搜索
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下你就知道</title>
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" />
<input type="submit" value="百度一下" />
</form>
</body>
</html>
|
表单元素
1. 文本框
1
2
3
4
5
6
7
8
9
10
11
|
<input type="text" name="uname" placeholder="请输入身份证信息"/><br />
<input type="text" name="uname" value="123" readonly="true"><br />
<input type="text" name="uname" value="123" readonly/><br />
|
效果：
2. 密码框
1
2
|
<input type="password" name="pwd" /><br />
|
效果：
3. 按钮
普通按钮
1
2
|
<input type="button" value="普通" />
|
效果：
单选按钮
1
2
3
4
5
6
7
|
性别：
<input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="2"/>女<br />
|
效果：
多选按钮
1
2
3
4
5
6
7
8
9
10
|
<input type="checkbox" name="favlan" value="1"/>java
<input type="checkbox" name="favlan" value="2"/>python
<input type="checkbox" name="favlan" value=""/>php
<input type="checkbox" name="favlan"value=""/>c#
|
效果：
图片按钮
1
2
|
<input type="image" src="img/1.jpg" width="100px" />
|
重置按钮
提交按钮
1
2
|
<input type="submit" />
|
4.下拉列表
select
1
2
3
4
5
6
7
8
9
10
11
12
|
你喜欢的城市
<select name="city" multiple="multiple">
<option value="0">---请选择---</option>
<option value="1">成都市</option>
<option value="2" selected="selected">北京市</option>
<option value="3">重庆市</option>
<option value="4">广州市</option>
</select>
|
效果：
5.多行文本框
1
2
3
4
5
6
|
自我介绍：
<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
<br />
|
效果：
6.文件
1
2
|
<input type="file" name="文件" /><br />
|
效果：
7.隐藏域
1
2
|
<input type="hidden " name="uname" value="12324" />
|
效果：
8.label标签
1
2
3
4
5
|
<label for="uname">用户名：</label><input type="text" name="uername" id="uname"/>
|
HTML5新增
增加校验
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| html5的类型可以增加校验
<input type="email" name="email" />
<input type="url" />
<input type="color" />
<input type="number" min="1" max="10" step="3" value="4"/>
1<input type="range" min="1" max="10" name="range" step="3"/>10
<input type="date" />
<input type="month" />
<input type="week" />
|
新增属性
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<input type="text" multiple="multiple"/>
<input type="text" placeholder="11111" />
<input type="text" autofocus:"autofocus" />
<input type="text" required="required" />
<input type="submit" />
|
