文档类型

html 1.0

​ HTML1.0：HTML1.0是最早的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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>xhtml 1.0 文档类型</title>
</head>

<!--  1、标签建议全部小写  --> 
<BODY>

	<!--  2、属性用引号引起来  --> 
	<div class="aa" id="div1"></div>
	
	<!--  3、标签应该闭合 成对标签应该成对出现，单个标签在结尾加 “ /”  --> 
	<br>
	<br />
	<!-- 4、img标签加上alt属性   -->
	<img src="images/00111.jpg" alt="风景图">


</body>
</HTML>

html5

​ HTML5：HTML5是一种更加强大和灵活的标记语言，引入了许多新的元素和API，能够更好地支持多媒体元素、图形、动画等功能。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5文档类型</title>
</head>
<body>
	
</body>
</html>
  • html1 与 html5
    • 语法：
      • HTML1.0：HTML1.0比较简单，语法较为严格。
      • HTML5：HTML5引入了许多新的语法和元素，使得创建和设计网页更加灵活和便捷
    • 多媒体支持：
      • HTML1.0：HTML1.0对多媒体元素的支持较为有限。
      • HTML5：HTML5具有更强大的多媒体支持，包括视频、音频、canvas等元素，使得网页能够展示更丰富的内容。
    • 跨平台兼容性：
      • HTML1.0：HTML1.0在不同浏览器和设备上的兼容性相对较差。
      • HTML5：HTML5基本上能够在各种现代浏览器和设备上良好地运行，具有更好的跨平台兼容性。

标题 - 段落 - 换行

  • 标题

    html的标题一共有6个分别为：h1,h2,h3,h4,h5,h6;

    不同的标题可以对应不同的文字大小，用于定义网页的标题或章节标题，具有不同的层级结构。这些标签不仅用于呈现文本的外观，还有利于搜索引擎优化（SEO），有助于页面内容的结构化和可读性。

    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>html标题</title>
    </head>
    <body>
    	<h1>一级标题</h1>
    	<h2>二级标题</h2>
    	<h3>三级标题</h3>
    	<h4>四级标题</h4>
    	<h5>五级标题</h5>
    	<h6>六级标题</h6>
    </body>
    </html>

  • 段落

    段落标签（

    ）用于定义段落，可以将文本分成适当的段落，从而提高页面的可读性。段落标签不仅定义了文本的布局和格式，还有助于将内容按照逻辑结构进行组织，使页面更易于理解和浏览。通常在段落标签中包含的文本段落之间会有一定的间距，使页面看起来更加清晰和整洁。

    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>html标题、段落</title>
    </head>
    <body>
    	<p>&nbsp;&nbsp; 一个html文件就是一个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网页，html文件用编辑器打开显示的是文本，可以用文本的方<br />
        式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网<br />
        页可以从一个网页链接跳转到另外一个网页。一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
        式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
        页可以从一个网页链接跳转到另外一个网页。
        </p>
    </body>
    </html>

  • <br> 标签插入单行换行符。

图像及路径

  • 图像标签为 属性有 src, alt

    • src 嵌入的图片的路径
    • alt 属性包含一条对图像的文本描述, 对无障碍而言, 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>html图像及路径</title>
    </head>
    <body>
    	<img src="images/002-022.jpg" alt="水果">
    </body>
    </html>

链接

​ 锚元素： , 通过 href 属性创建通向其他网页，文件，电子邮件地址；或统一页面内的位置

  • href 跳转链接

  • title 链接注释

  • target 指定在何处显示链接

    • _self：当前页面加载。（默认）
    • _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
    • _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
    • _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>链接</title>
    </head>
    <body>
    	<a href="http://www.baidu.com" title="跳转到百度" target="_blank">百度</a>
    	<!-- 不做任何操作   -->
    	<a href="javascript:;">缺省值</a>

    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>页面内跳转</title>
    </head>
    <body>
    	

    	<h1 id="biaoti01">标题一</h1>
    	<a href="#biaoti01">标题一</a>
    	<a href="#biaoti02">标题二</a>
    	<a href="#biaoti03">标题三</a>
    	<a href="#biaoti04">标题四</a>
    </body>
    </html>

列表

1
2
3
4
5
<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>
1
2
3
4
5
6
7
<ul>
	<li><a href="">标题</a></li>
	<li><a href="">标题</a></li>
	<li><a href="">标题</a></li>
	<li><a href="">标题</a></li>
	<li><a href="">标题</a></li>
</ul>

dl, dt, dd含义

  • dl：定义列表（Definition List）
  • dt：定义术语（Definition Term）
  • dd：定义描述（Definition Description）
1
2
3
4
5
6
7
8
9
10
<dl>		
	<dt>html</dt>
	<dd>负责页面的结构</dd>

	<dt>css</dt>
	<dd>样式</dd>

	<dt>JavaScript</dt>
	<dd>行为</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h3>产品列表</h3>
<table border="1" width="500" height="300">
		<tr>
			<th valign="middle">序号</th>
			<th>产品名称</th>
			<th>产品价格</th>
			<th>产品数量</th>
		</tr>
		<tr>
			<td align="center">1</td>
			<td align="center">苹果</td>
			<td>¥5.00</td>
			<td>1000</td>
		</tr>
		<tr>
			<td align="center">2</td>
			<td align="center">橘子</td>
			<td>¥4.00</td>
			<td>2000</td>
		</tr>
	</table>

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
<h3>个人简历表</h3>

	<table border="1" width="600" height="300" >
		<tr>
			<th colspan="5" align="left">基本情况</th>
		</tr>
		<tr>
			<td width="18%">姓名</td>
			<td width="18%"></td>
			<td width="18%">性别</td>
			<td width="18%"></td>
		</tr>
		<tr>
			<td>名族</td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td>政治面貌</td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td>籍贯</td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
		<tr>
			<td>电子邮箱</td>
			<td></td>
			<td></td>
			<td></td>
			
		</tr>
	</table>

  • 简历案例
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简历</title>
</head>
<body>
	<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr>
			<td width="260" valign="top" bgcolor="#f2f2f2">
				
				<table width="260" border="0" cellpadding="0" cellspacing="0">
					<tr height="100">
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td width="230" align="right"><img src="images/pic1x.jpg" alt="人物图片"></td>
						<td width="30"></td>
					</tr>
					<tr>
						<td align="right">张某某</td>
						<td></td>
					</tr>
					<tr>
						<td align="right">1821089xxxx</td>
						<td></td>
					</tr>
					<tr>
						<td align="right">zhangxxx@126.com</td>
						<td></td>
					</tr>
				</table>



			</td>
			<td width="30"></td>
			<td width="480" valign="top">

				<table border="0" cellpadding="0" cellspacing="0" width="480">
					<tr height="75">
						<td></td>
					</tr>
					<tr>
						<td align="right"><img src="images/resume.png"></td>
					</tr>
				</table>

				<hr />

				<table border="0" cellpadding="0" cellspacing="0" width="480" height="180">
					<tr height="30">
						<td></td>
					</tr>
					<tr>
						<td colspan="2"><b>个人基本情况</b></td>
					</tr>
					<tr>
						<td width="50%">姓 名：张达山	</td>
						<td width="50%">籍 贯：北京昌平</td>
					</tr>
					<tr>
						<td>性 别：男</td>
						<td>身 高：175cm</td>
					</tr>
					<tr>
						<td>民 族：汉</td>
						<td>体 重：70kg</td>
					</tr>
					<tr>
						<td>出生日期：1992.03.28</td>
						<td>电 话：1821089xxxx</td>
					</tr>
					<tr>
						<td>专 业：工业设计</td>
						<td>现居住地：昌平天通苑</td>
					</tr>
				</table>





			</td>
			<td width="30"></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
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<h3>用户注册</h3>

	<form action="http://wwww.itcast.cn" method="get">
		<div>
			<label for="username">用户名：</label>
			<input type="text" name="username" id="username">
		</div>

		<br>

		<div>
			<label for="pwd">密码：</label>
			<input type="password" name="pwd" id="pwd">
		</div>

		<br>

		<div>
			<label>性别：</label>
			<input type="radio" name="gender" id="male" value="0"> <label for="male">男</label>
			<input type="radio" name="gender" id="female" value="1"> <label for="female">女</label>
		</div>
		<br>

		<div>
			<label>爱好：</label>
			<input type="checkbox" name="like" value="game"> 打游戏
			<input type="checkbox" name="like" value="shopping"> 逛街
			<input type="checkbox" name="like" value="sleep"> 睡觉
		</div>
		<br>
		
		<div>
			<label>个人照片</label>
			<input type="file" name="">
		</div>
		<br>
		<div>
			<label>籍贯：</label>
			<select name="site">
				<option value="0">北京</option>
				<option value="1">上海</option>
				<option value="2">广州</option>
				<option value="3">深圳</option>

			</select>
		</div>
		<br>
		<div>
			<label>个人描述：</label>
			<textarea name="info"></textarea>
		</div>
		<br>
		<input type="hidden" name="hid" value="10000">

		<input type="submit" name="" value="提交">
		<input type="reset" name="" value="重置">


		<!-- <input type="image" name="" src="images/new.png"> -->

		<input type="button" name="" value="按钮">


	</form>
</body>
</html>

内嵌框架- iframe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内嵌框架</title>
</head>
<body>
	<a href="http://www.baidu.com" target="myframe">百度</a>
	<a href="http://www.qq.com" target="myframe">腾讯</a>
	<br>
	<iframe src="http://www.baidu.com" width="900" height="400" frameborder="0" scrolling="no" name="myframe"></iframe>
	<iframe src="001列表.html" width="900" height="400" frameborder="0" scrolling="no"></iframe>
</body>
</html>