HTML 5
W3C标准
World Wide Web Consortium 万维网联盟
HTML XML (结构化标准语言)
CSS 表现标准语言
DOM ECMAScript 行为标准
网页基本信息
DOCTYPE 声明 告诉浏览器、我们要是用什么规范
html 编辑网页的代码都写在这里
head 引入相关文件等作用
body 编辑网页的内容信息写在这里面
meta标签 设置编码、以及搜索关键词等条件
title标签 设置标题头名称
标签
<h1> 一级标题标签
<h2> 二级标题标签
<h3> 三级标题标签
<h4> 四级标题标签
<h5> 五级标题标签
<h6> 六级标题标签
<p> 段落标签
<hr /> 水平线标签
<br /> 换行标签
<strong> 粗体标签
<em> 斜体标签
<a href="要跳转的路径" target="值"> 超链接 href:链接路径 target:在哪个窗口打开 _blank属性在每个新标签中打开 _search属性都在一个新标签中打开 _self属性在当前标签中打开
<img src="路径" alt="没加载出来文字替代" title="鼠标停在这上面你就看见字了" width="50%" height="50%"> 引入图片 src:路径 alt:图片没加载出来文字替代 title:鼠标悬停显示的内容 width:宽度 height: 高度
src路径分为相对路径和绝对路径 绝对路径就是写死的路径 相对路径看具体情况 ../代表上一级目录
空格
> 大于号
< 小于号
© 版权符号
<ol><li> 有序列表
<ul><li> 无序列表
<dl><li> 自定义列表
<table border = 像素大小> 列表 border代表列表的线的粗细
<tr> 代表表格行数
<td> 代表表格列数
<td rowspan> 跨行
<td colspan> 跨列
<video src="视频路径" controls width="值" height="值"> 引入视频 controls 在浏览器中可显示 width视频界面的宽 heignt视频界面的高
<audio src="音频路径" controls autoplay> 引入音频 autoplay 自动播放音乐 controls 可显示
<header 标题头部区域的内容
<section> web页面中的一块独立区域
<article> 独立的文章内容
<aside> 相关内容或应用(侧边栏)
<nav> 导航类辅助内容
<footer> 标记脚步区域内容
<iframe src="https://www.bilibili.com/" name="b站" frameborder="0" width="1000px" height="800px"> 内联框架、src内联路径 name、名字 frameborder、是否有边框 width、宽度 height、高度
表单属性
action 请求路径
method 请求方法
get 不安全、请求的信息会显示在地址栏中
post 较安全、请求的路径不会显示在地址栏中、用于传送大文件、文件上传用post
input type 属性
text 文本
password 密码
radio 单选框
checkbox 多选框
email 简单的邮箱校验
url 简单的url校验
type = "bumber" max="最大值" min="最小值" step="每次增减值" 数字增减量
maxlength text或password设置允许输入的最大值
search 搜索框
button 按钮
image 图片按钮
file 文件上传
reset 重置文本框
submit 提交按钮
type = "range" max="最大值" min = "最小值" step="5" value="默认值" 音量增减量
hidden 隐藏表单
readonly 只读
disabled 禁用
<select name="值"> 下拉框
<option> 下拉框的值
<textarea cols="列数" rows="行数"> 文本域
<label for = "值"> 增强鼠标点击性
案例
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题栏的标题名</title>
</head>
<body>
<a name="top">顶部</a>
<br />
<a href="#down">去到底部</a>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>第一段落</p>
水平线标签<hr />
<p>第二段落</p>
换行标签<br />
<strong>粗体标签</strong>
<hr />
<em>斜体标签</em>
<hr />
空格：I Love You
<hr />
大于号：>
<hr />
小于号：<
<hr />
版权符号：©版权所有
<hr />
<img src="images/我.jpg" alt="没加载出来文字替代" title="鼠标停在这上面你就看见字了" width="50%" height="50%" />
<hr />
<a href="images/我.jpg" target="_search">文本或图像都可以</a>
<hr />
<a href="https://www.baidu.com" target="_blank">百度</a>
<hr />
<ol>
<li>java</li>
<li>前端</li>
<li>数据库</li>
<li>C/C++</li>
<li>Python</li>
</ol>
<hr />
<ul>
<li>xiaobo</li>
<li>pangzi</li>
<li>ming</li>
<li>zeng</li>
<li>tr</li>
<li>wxh</li>
</ul>
<hr />
<dl>
<dt>历程</dt>
<dd>0~6 初始世界</dd>
<dd>6~12 小学</dd>
<dd>12~15 中学</dd>
<dd>15~18 高中</dd>
<dd>18~21 专科</dd>
<dd>21~23 本科</dd>
<dd>23~死亡 未知</dd>
</dl>
<hr />
<table border="1px">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>xiaobo</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>ming</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>pangzi</td>
<td>22</td>
</tr>
</table>
<hr />
<table border="1px">
<tr>
<td colspan="3">没有结局的故事</td>
</tr>
<tr>
<td rowspan="2">自己的故事</td>
<td>xiaobo</td>
</tr>
<tr>
<td>wangyibo</td>
</tr>
</table>
<hr />
<video src="videos/“思念一个人的时候对方会感觉到吗？”.376843593.mp4" controls width="50%" height="50%"></video>
<hr />
<audio src="audios/天佑、毛不易%20-%20如果有一天我变得很有钱%20(Live).mp3" controls></audio>
<hr />
<header>标题头部区域的内容</header>
<hr />
<section>web页面中的一块独立区域</section>
<hr />
<article>独立的文章内容</article>
<hr />
<aside>相关内容或应用(常用语侧边栏)</aside>
<hr />
<nav>导航类辅助内容</nav>
<hr />
<footer>标记脚部区域的内容</footer>
<hr />
<iframe src="https://www.bilibili.com/" name="b站" frameborder="0" width="1000px" height="800px"></iframe>
<hr />
<form action="请求路径" method="post">
用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="6" readonly="readonly" /><br />
密码：<input type="password" name="password" placeholder="请输入密码" maxlength="16" /><br />
性别：
<input type="radio" name="sex" value="boy" disabled="disabled" id="mark" /><label for="mark">男</label>
<input type="radio" name="sex" value="girl" id="nv" /><label for="nv">女</label><br />
姓名
<input type="checkbox" name="love" value="xiaobo" />xiaobo
<input type="checkbox" name="love" value="wangyibo" checked />wangyibo
<input type="checkbox" name="love" value="wangyangna" />wangyangnan<br />
<input type="email" name="email" placeholder="简单邮箱校验" /><br />
<input type="url" name="url" placeholder="简单url校验" /><br />
<input type="number" name="num" max="100" min="0" step="1" value="0" /><br />
音量<input type="range" name="range" max="100" min="0" step="5" value="50" /><br />
<input type="search" name="search" />
<input type="button" value="搜索" /><br />
<input type="button" name="but1" value="按钮1" />
<input type="image" src="images/开始.png" /><br />
<input type="file" name="file" />
<input type="button" value="上传" /><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
<br />
去过的城市
<select name="city">
<option value="changtu">昌图</option>
<option value="tieling">铁岭</option>
<option value="shenyang">沈阳</option>
<option value="dalian">大连</option>
<option value="shanghai">上海</option>
</select>
<hr />
反馈：<textarea name="textarea" cols="10" rows="20" placeholder="请您输入您的反馈内容"></textarea>
<hr />
<a href="#top">回到顶部</a>
<br />
<a name="down">底部</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1013859397&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1013859397:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>
|
结果图
正确的开始、微小的长进、然后持续、嘿、我是小博、带你一起看我目之所及的世界……