HTML 超文本标记语言
完整代码：JiaZhengJingXianSheng/HTML-Study-Notes (github.com)
网页基本信息
注释
DOCTYPE
告诉浏览器使用什么规范
例如：
基本格式
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</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
22
23
24
25
26
27
28
29
30
31
32
|
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<hr>
两只老虎，两只老虎，<br>
跑得快，跑得快，<br>
一只没有眼睛，<br>
一只没有尾巴，<br>
真奇怪！真奇怪！<br>
<h1>字体样式标签</h1>
粗体 ： <strong>I Love U </strong>
斜体 ： <em>I Love U </em>
<br>
.
空 格
|
图像标签
1
2
| <img src="path" alt="text" title="text" width="x" height="y">
|
链接标签
1
2
3
4
5
6
7
8
9
10
11
| <a href="path" target="目标窗口位置">链接文本或图像</a>
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
|
锚链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<a name="top">顶部</a>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/3.jpg" alt="头像" title="悬停文字" height="300" width="300">
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/3.jpg" alt="头像" title="悬停文字" height="300" width="300">
</a>
</p>
<a href="#top">回到顶部</a>
|
功能性链接
1
2
3
4
5
|
<a href="mailto:the_unique_guy@outlook.com">点击联系我</a>
|
列表
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
|
<ol>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
</ol>
<hr>
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
</ul>
<hr>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C++</dd>
</dl>
|
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
|
媒体
1
2
3
4
5
6
7
8
9
10
|
<video src="../resources/video/神奇女侠.mp4" controls autoplay></video>
<audio src="../resources/audio/孙燕姿-我怀念的.mp3" controls autoplay></audio>
|
页面结构分析
header: 标题头部区域的内容（用于页面或页面中的一块区域）
footer: 标记脚部区域的内容（用于页面或页面中的一块区域）
section: Web页面中的一块独立区域
article: 独立的文章内容
aside: 相关内容或应用
nav: 导航类辅助内容
1
2
3
4
5
| <header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
|
iframe内联框架
1
2
3
4
5
6
7
8
9
10
11
12
|
<iframe src="https://www.bilibili.com" width="1000" height="800"></iframe>
<iframe src="" frameborder="0" name="hello" width="500" height="400"></iframe>
<a href="http://www.quarkhacker.top" target="hello">点击跳转</a>
|
表单语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<form action="1.我的第一个网页.html" method="post">
<p>名字：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
|
文本框和单选框
表单元素格式
type: 指定元素的类型，text, password, checkbox, radio, submit, reset, file, hidden, image 和 button, 默认为text
name: 指定表单元素的名称
value: 元素的初始值，type 为 radio 时必须指定一个值
size: 指定表单元素的初始宽度 （一般用 CSS 修改）
maxlength: type 为 text 或 password 时，输入的最大字符数
checked: type 为 radio 或 checkbox 时，指定按钮是否是被选中
文本输入框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
|
列表框和文本域
1
2
3
4
5
6
7
8
9
|
<p>下拉框
<select name="列表名称" id="">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Switzerland" selected>瑞士</option>
<option value="India">印度</option>
</select>
</p>
|
1
2
3
4
5
6
7
8
|
<p>反馈
<textarea name="textarea" cols="10" rows="3">
文本内容
</textarea>
</p>
|
1
2
3
4
5
6
7
|
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
|
搜索框滑块和简单验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<p>邮箱:
<input type="email" name="email">
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>数字:
<input type="number" name="number" max="100" min="0" step="10">
</p>
<p>音量:
<input type="range" name="volume" min="10" max="100" step="2">
</p>
<p>搜索:
<input type="search" name="search">
</p>
|
1
2
3
4
5
|
<p>
<label for="mark">你点我试试</label>
<input type="text" id = mark>
</p>
|
表单初级验证
