HTML概括

HTML（Hyper Text Markup Language）超文本标记语言，是一种用于创建网页的标记语言。本质上是浏览器可识别的规则，按照规则写网页，浏览器根据规则渲染我们的网页，对于不同的浏览器，对同一标签可能有不同的解释。网页文件的扩展名: .html或者.htm

HTML文件介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--声明为HTML5文档-->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        整个页面的属性，比如标题 指导浏览器解析的标签，
		比如编码 引入外部文件的标签，引入css或者javascript让他们产生关系
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
		需要展示的信息
        <!--注释内容-->
    </body>
</html>
标签描述
<!DOCTYPE html>声明为HTML5文档，用来告知 Web 浏览器页面使用了哪种html规范 必须要出现在最上方的第一个位置，不是 HTML 标签，是一个声明 如果不编写声明，浏览器也可以显示，不过有时候会出现问题，所以建议编写声明。
<html></html>根标签，是文档的开始和结束的标记，是HTML页面的根元素，在他们之间的是(head)和主体(body)
<head></head>头标签，定义了HTML文档的开头部分，他们之间的内容不会在浏览器的文档窗口显示，包含文档的元(meta)数据
<title></title>定义网页标题，在浏览器标题栏显示
<body></body>标签之间的文本是可见的网页主体内容

常见的 HTML 标签

<html>根标签

定义HTML文档的根元素。

<head>头部区域标签

定义文档的头部区域，通常用于指定文档的标题，引入CSS样式表、JavaScript脚本等

<body>文档主体标签

定义文档的主体区域，用于包含网页中所呈现的实际内容，如文本、图片、表格等。

<h1>~<h6>标题标签

定义标题，h1是最大的标题，h6是最小的标题。

<p>段落标签

定义段落，通常用于包含一段文本内容。

<a>超链接标签

定义链接，用于跳转到其他网页或锚点位置

<img>图片标签

说明：用于在网页中插入图像。

示例：<img src="example.jpg" alt="示例图片">

属性说明
src指定图片URL
alt为图片定义替代文本
width指定图片宽度（像素）
height指定图片高度（像素）
title指定鼠标悬停在图片上时的提示文本

<audio>音频标签

说明：用于在网页中嵌入音频。

示例：<audio src="example.mp3" controls></audio>

属性说明
src指定音频文件URL
controls显示浏览器原生控件
autoplay自动播放
loop循环播放
preload提前加载音频，可选值：none, metadata, auto
volume音量大小，取值范围0.0~1.0，默认1.0
muted是否静音
currentTime设置或获取当前播放时间

<video>视频标签

说明：用于在网页中插入视频。

示例：<video src="example.mp4" controls width="640" height="360"></video>

属性说明
src指定视频文件URL
controls显示浏览器原生控件
autoplay自动播放
loop循环播放
preload提前加载音频，可选值：none, metadata, auto
muted是否静音
poster指定视频封面图片URL
width指定视频宽度（像素）
height指定视频高度（像素）
currentTime设置或获取当前时间位置

<ul>列表标签

无序列表，使用圆点符号对内容进行标记

<li>列表标签

有序列表，使用数字对内容进行标记

<ol>和<li>标签

分别定义有序列表和列表项，有序列表会自动标号。

<ifarme>内嵌窗口

在一个 html 页面上，打开一个小窗口，去加载一个单独的页面

sandbox属性值简介
allow-same-origin允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation允许 iframe 内容从包含文档导航（加载）内容。
allow-forms允许表单提交。
allow-scripts允许脚本执行。
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内嵌窗口</title>
</head>
<body>
	<p>这是内嵌窗口：</p>
	<iframe src="https://wen53231323.github.io/" width="500" height="500" name="远方の博客"></iframe>
</body>
</html>

<table>表格标签

表格相关标签

标签描述
<table>定义表格
<caption>表格标题
<tr>定义行
<td>定义单元格
<th>定义表头单元格

表格代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table border="1"cellpadding="20"cellspacing="0">
	<!--行-->
	<tr>
		<!--表头-->
		<th>姓名</th>
		<th>年龄</th>
		<th>爱好</th>
	</tr>
	<!--行-->
	<tr>
		<!--单元格-->
		<td>小强</td>
		<td>22</td>
		<td>看书</td>
	</tr>
	<!--行-->
	<tr>
		<!--单元格-->
		<td>小强</td>
		<td>22</td>
		<td>看书</td>
	</tr>
</table>

跨行跨列表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--跨行跨列表格-->
<table border="1"cellpadding="20"cellspacing="0">
	<tr>
		<!--使用rowspan跨两行-->
		<td rowspan="2"></td>
		<!--使用colspan跨两列-->
		<td colspan="2"></td>
	</tr>
	<tr>
		<td>跨行跨列表格</td>
		<!--使用rowspan跨两行-->
		<td rowspan="2"></td>
	</tr>
	<tr>
		<!--使用colspan跨两列-->
		<td colspan="2"></td>
	</tr>
</table>

<from>表单标签

表单相关标签

标签描述
<form>定义表单，用于向服务器传输数据
<input>定义表单项，默认只能输入一行文本
<label>为表单项定义标注，不会呈现任何效果
<select>定义下拉列表
<option>定义下拉列表的列表项
<textarea>定义文本域，可以输入多行文本

代码示例

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
<table>
	<tr>
		<td><label for="stuname">用户名：</label></td>
		<td><input type="text" name="stuname" id="stuname"><br></td>
	</tr>
	<tr>
		<td><label for="stupassword">密码：</label></td>
		<td><input type="password" name="stupassword" id="stupassword"><br></td>
	</tr>
	<tr>
		<td>性别：</td>
		<td>
			<input type="radio" name="gender"value="1"id="man"><label for="male">男</label>
			<input type="radio" name="gender"value="2"id="girl"><label for="female">女</label>
		</td>
	</tr>
	<tr>
		<td>爱好：</td>
		<td>
			<input type="checkbox"name="hobby"value="1">旅游
			<input type="checkbox"name="hobby"value="2">电影
			<input type="checkbox"name="hobby"value="3">游戏
		</td>
	</tr>
	
	<tr>
		<td>头像：</td>
		<td><input type="file"></td>
	</tr>
	
	<tr>
		<td>城市:</td>
		<td>
			<select name="city">
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
			</select>
		</td>
	</tr>
	
	<tr>
		<td>个人描述：</td>
		<td><textarea cols="20" rows="5" name="desc"></textarea></td>
	</tr>
	
	<tr>
		<td>
			<input type="submit" value="注册">
		</td>
	
	</tr>
	<tr>
		<td>
			<input type="reset" value="重置">
		</td>
	</tr>
	<tr>
		<td>
			<input type="button" value="一个按钮">
		</td>
	</tr>
</table>