Html
HTML
Hyper Text Markup Language（超文本标记语言）
超文本：文字，图片，视频，音频，动画等
W3C
World Wide Web Consortium(万维网联盟)
成立于1994，国际中立性技术标准机构
标准：
结构化标准语言（HTML, XML）
表现标准语言（CSS）
行为标准（DOM, ECMASpript）
常见IDE
记事本
Dreamweaver
IDEA
1 网页基本信息
HTML注释：
<!-- DOCTYPE:告诉浏览器使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head表示网页头部-->
<head>
<!--meta描述性标签，用来描述网站的一些信息-->
<meta charset="UTF-8">
<meta name = "keywords" content="mpy">
<meta name = "description" content="学习狂魔">
<!--网页标题-->
<title>Title</title>
</head>
<!-- 网页主体 -->
<body>
Hello HTML
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.1 网页基本标签
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!-- ... -->
<!--段落标签：把内容分成一段,能去掉空格-->
<p>好辣鸡 好辣鸡</p>
<p>好辣鸡 好辣鸡</p>
<!-- 换行标签 -->
好辣鸡 好辣鸡<br/>
好辣鸡 好辣鸡<br/>
<!-- 水平线标签 -->
<hr/>
<!--粗体、斜体-->
<strong>好辣鸡</strong>
<em>好辣鸡</em>
<!--特殊符号-->
<!--空格-->
空 格
<!--大于号-->
>
<!--小于号-->
<
</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
1.2 图像标签
常见的图片格式：JPG, GIF, PNG, BMP，…
...
<body>
<!--img学习
src:图像地址
相对地址（"../","./"）（推荐），绝对地址
...
各类字段
-->
<img src = "./1.jpg" alt = "图片未显示时展示的文字" title = "鼠标悬停时显示的文字" width="300" height="300"/>
</body>
1
2
3
4
5
6
7
8
9
10
1.3 超链接标签
<body>
<!--a 标签
href:转到哪个页面
target:表示窗口在哪打开；默认当前窗口—_self
_blank:在新标签打开
_self:在自己的网页打开
-->
<a href="我的网页.html">点击我跳</a>
<a href="https:\\www.baidu.com" target="_blank">点击我跳</a>
<!-- 点击图像跳转 -->
<a href="我的网页.html">
<img src="1.jpg">
</a>
<!--快速跳转到具体位置-->
<a name = "锚点"></a>
<a href="#锚点"></a>
<!--邮件链接-->
<a href="mailto:XXXXXXXX@qq.com">点击联系我</a>
<!-- qq 标签
百度搜索QQ推广。复制它提供的链接
-->
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.4 块元素和行内元素
块：标题，段落
行内：粗体斜体
1.5 列表标签
<body>
<!--有序列表(有序号)-->
<ol>
<li>java</li>
<li>pyton</li>
<li>C++</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<!--自定义-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>C++</dd>
</dl>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1.6 表格标签
<body>
<!--表格标签 table
行 tr
列 td
-->
<table border = "1px">
<tr>
<!--colspan 跨列-->
<!--rowspan 跨行-->
<td colspan="2">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.7 媒体元素
<body>
<!--音频和视频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="./1.mp4" controls autoplay></video>
<audio src="./1.mp4" controls autoplay></audio>
</body>
1
2
3
4
5
6
7
8
9
1.8 表单：单选框和多选框和按钮
<body>
<form method="get" action="我的网页.html">
<p>名字：<input type="text" name = "username"> </p>
<p>密码：<input type="text" name = "password"> </p>
<!--单选框
input type = "radio"
name表示组
value表示值
-->
<p>性别：
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
</p>
<!--多选框-->
<p>爱好：
<input type="checkbox" name = "hobby" value="sleep">睡觉
<input type="checkbox" name = "hobby" value="code">写代码
<input type="checkbox" name = "hobby" value="run">跑步
</p>
<!--按钮-->
<p>
<input type="button" name = "btn1" value="点我">
<input type="image" src="1.jpg">
</p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填">
</p>
</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
1.9 表单：下拉框和文本域和文件域
<p>国家：
<select name="列表名称">
<option value="China">中国</option>
<option value="us">美国</option>
</select>
</p>
1
2
3
4
5
6
<p>反馈：
<textarea name="fankui" cols="10" rows="5">文本内容</textarea>
</p>
<p>文件域：
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
1
2
3
4
5
6
7
1.10 表单：搜索框滑块和简单验证
<!--邮箱验证-->
<p>邮箱
<input type="email" name="email">
</p>
<!--URL-->
<p>URL
<input type="url" name="url">
</p>
<!--数字-->
<p>数字
<input type="number" name="number" max="100" min="0" step="1">
</p>
<!--滑块-->
<p>滑块
<input type="range" name="voice" min="0" max="100">
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2 页面结构分析
3 iframe内联框架
在网页中插入另一个网页
4 表单POST和Get提交
5 表单的应用
隐藏域 hidden
只读 readonly
禁用 disabled
6 表单的初级验证
为了减轻服务器压力和数据安全
placeholder 提示信息（输入框中）
required 非空判断（输入框中）
pattern=“ XXXX” 正则表达式判断
浙公网安备 33010602011771号