1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 声明文档类型，表示这是一个 HTML5 文档 -->
<!-- 这个不是标签,这是文档类型的声明标签 -->
<!DOCTYPE html>
<!-- 定义 HTML 文档的根元素，并设置文档的语言为英语 -->
<html lang="en">
<head>
    <!-- 指定文档的字符编码为 UTF-8，支持大多数语言的字符 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

标题标签

1
2
3
4
5
6
7
8
<body>
    <h1>111111111111</h1>
    <h2>111111111111</h2>
    <h3>111111111111</h3>
    <h4>111111111111</h4>
    <h5>111111111111</h5>
    <h6>111111111111</h6>
</body>

段落标签

1
2
3
4
<body>
    <p>我们一进里面一片漆黑，然后老师给我们每一个人都发了一个眼镜，我们戴上眼镜，后面前有一张大白纸，后面有一个投影仪，放了一个电影，名叫“雪怪大冒险”。</p>
    <p>有几位老师去帮我们买汉堡去了，我们先到那里先吃一些零食，我们吃饱后，我们一起去玩游戏，第一个游戏的名字叫做动物园里有什么。第二个游戏的名字叫做学校里面有什么</p>
</body>

段落格式的特点

  • 段落内容会自动换行，无需手动添加 <br> 标签。
  • 段落段落之间会有空隙

换行标签

1
2
3
<body>
13213123<br/>3123123
</body>

文本格式化标签

1
2
3
4
5
6
7
8
<body>
	1<strong>加粗</strong>3
	1<b>加粗</b>3
	
	1<em>倾斜</em>3
	1<del>删除线</del>3
	1<ins>下划线</ins>3
</body>

div

1
2
3
4
<body>
<div>div单独占一行</div>3213123
<div>div单独占一行</div>
</body>

span

所有的span占一行

1
2
3
4
<body>
<span>div单独占一行</span>3213123
<span>div单独占一行</span>
</body>

图像标签

1
2
3
<body>
这是百度的图片:<img src="./demo.png"/>
</body>

通常只需调整宽度或高度中的一个，另一个会自动计算以保持比例不变。

超链接

target属性有_self为默认值,当前页面_blank 新的页面打开

外连接就要加http,内连接就是路径地址

1
2
3
<body>
<a href="http://baidu.com">这是超裂解</a>
</body>

锚点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
目录:
<a href="#1">1</a>
<a href="#2">2</a>
<hr>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2 id="1">这是锚点1</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2 id="2">这是锚点2</h2>
</body>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<table border="1" align="center">
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>anthony</td>
        <td>南</td>
    </tr>
</table>
</body>

列表标签

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
<body>
<!-- 无序列表 -->
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>3</li>
</ol>

<!-- 自定义 -->
<dl>
    <dt>这是自定义列表</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>4</dd>
    <dd>3</dd>
</dl>
</body>

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="url地址" method="提交方式" name="表单名称">
    <!-- 点击lable 就能把光标古交到输入框里面-->
    <label for="usernameId">用户名</label>
    <input type="text" name="username" value="anthony" id="usernameId"> <br>
    密码  :<input type="password" name="pwd"> <br>
    性别 : 男<input type="radio" name="sex" value="男" checked>  女<input type="radio" value="女" name="sex"><br>
    爱好: 吃饭<input type="checkbox" name="hobby" value="1">
    睡觉<input type="checkbox" name="hobby" value="2">
    玩<input type="checkbox" name="hobby" value="3"><br>

    <label for="selectId">选项:</label>
    <select id="selectId">
        <option value="1" >一</option>
        <option value="2" selected>二</option>
        <option value="3">三</option>
    </select><br>

    文本域元素:<textarea>23123</textarea>
</form>

input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
	<form>
		用户名:<input type="text" name="myName" value="anthony"><br />
		密码:<input type="password" name="myPassword" value="123456"><br />
		测试重置:<input type="text" name="myTest"><br />
		性别:
		<input type="radio" name="myGender" value="male" checked> 男
		<input type="radio" name="myGender" value="female"> 女
		<br />
		爱好:
		<input type="checkbox" name="myHobby" value="basketball" checked> 篮球
		<input type="checkbox" name="myHobby" value="football"> 足球
		<input type="checkbox" name="myHobby" value="pingpong"> 乒乓球

		<br />
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</form>
</body>

select

1
2
3
4
5
6
7
8
9
10
11
<body>
	<form>
		地区:
		<select name="myArea">
			<option value="beijing">北京</option>
			<option value="shanghai">上海</option>
			<option value="guangzhou" selected>广州</option>
			<option value="shenzhen">深圳</option>
		</select>
	</form>
</body>

综合练习

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>综合案例-注册</title>
</head>

<body>
	<h4>青春不常在,赶紧谈恋爱</h4>
	<table border="1" cellspacing="0" cellpadding="0" width="500px">
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="myGender" id="man"><label for="man">男<img src="./assert/male.svg" alt="male"
						width="12px"></label>
				<input type="radio" name="myGender" id="woman"><label for="woman">女<img src="./assert/female.svg"
						alt="female" width="12px"></label>
			</td>
		</tr>

		<tr>
			<td>生日:</td>
			<td>
				<select name="myBirthday">
					<option value="1990" selected>请选择年</option>
					<option value="1991">1991</option>
					<option value="1992">1992</option>
					<option value="1993">1993</option>
					<option value="1994">1994</option>
					<option value="1995">1995</option>
				</select>

				<select name="myBirthday">
					<option value="1" selected>请选择月</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>

				<select name="myBirthday">
					<option value="1" selected>请选择日</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
			</td>
		</tr>

		<tr>
			<td>所在地区:</td>
			<td>
				<input type="text" name="myLocation" placeholder="请输入所在地区">
			</td>
		</tr>

		<tr>
			<td>婚姻状态:</td>
			<td>
				<input type="radio" name="myMarriage" id="married"><label for="married">已婚</label>
				<input type="radio" name="myMarriage" id="unmarried"><label for="unmarried">未婚</label>
				<input type="radio" name="myMarriage" id="divorced"><label for="divorced">离异</label>
			</td>
		</tr>

		<tr>
			<td>学历:</td>
			<td>
				<input type="text" name="myEducation" placeholder="请输入学历">
			</td>
		</tr>

		<tr>
			<td>爱好:</td>
			<td>
				<input type="checkbox" name="myHobby"><label for="basketball">篮球</label>
				<input type="checkbox" name="myHobby"><label for="football">足球</label>
				<input type="checkbox" name="myHobby"><label for="pingpong">乒乓球</label>
			</td>
		</tr>

		<tr>
			<td>自我介绍:</td>
			<td>
				<textarea name="myIntro" cols="30" rows="10" placeholder="请输入自我介绍"></textarea>
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<input type="submit" name="myCode" value="免费注册">
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<input type="checkbox" checked><label for="myAgreement">我同意《用户协议》</label>
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<a href="https://www.baidu.com">我是会员,立即登录</a>
			</td>
		</tr>


		<tr>
			<td></td>
			<td>
				<h5>我承诺</h5>
				<ul>
					<li>1. 我是成年人</li>
					<li>2. 我是成年人</li>
					<li>3. 我是成年人</li>
					<li>4. 我是成年人</li>
				</ul>
			</td>
		</tr>

	</table>
</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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎来到我的网页</title>
</head>
<body>
<h1>试着切换标签页吧！</h1>

<script>
  // 记录原始标题
  var originalTitle = document.title;

  // 定义当页面可见性发生变化时的事件处理函数
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      // 如果页面不可见，修改标题
      document.title = "我等着你回来";
    } else {
      // 如果页面可见，恢复原始标题
      document.title = originalTitle;
    }
  });
</script>
</body>
</html>