1. html简介
1.1 什么是html呢？
html全称HyperText Markup Language，超文本标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
1.2 第一个html程序
新建一个hello.html文件，里面写入：
<font size="5" color="red">这是我的第一个html程序！</font>保存后通过浏览器打开：
1.3 html规范
其实html文件必须遵循html的规范：
1. 一个html文件包含开始标签和结束标签。例如<html></html>
2. html包含两部分内容
1）<head>设置一些相关信息</head>
2）<body>显示页面上的内容都写在body中</body>
3. html的标签有开始标签，也必须有结束标签。例如如果有开始标签<html>，就必须要有结束标签</html>
4. html的代码不区分大小写。
5. html中有些标签是没有结束标签的。
比如换行、水平线，这时要结束该标签就要在该标签内结束。<br/>、<hr/>
遵守上面的规范，可以写出如下的内容：
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<FONT size="5" color="red">这是我的第一个html程序1！</font><br/><hr/>
这是我的第一个html程序2!
</body>
</html>使用浏览器打开：
1.4 html的操作思想
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据封装起来，通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内的数据的样式，只需要改变容器的属性值就可以实现容器内数据样式的变化。
2. html常用标签
2.1 文字标签和注释标签
* 文字标签：修改文字的样式
—<font></font>
—属性：
* size：文字大小，取值范围1-7，超出7，默认还是7
* color：文字颜色
—两种表示方式
** 英文单词：red，green，blue，black，yellow，...
**使用十六进制表示 #ffffff：RGB
—通过工具实现不同的颜色
* 注释标签
—<!-- html的注释内容 -->
2.2 标题标签、水平线标签和特殊字符
* 标题标签：<h1></h1> <h2></h2> ...... <h6></h6>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
</body>
</html>使用浏览器打开：
从上面可以看出从h1到h6，字体大小是依次变小，并且会自动换行。
* 水平线标签
—<br/>
—属性
* size：水平线粗细，取值范围1-7，超出7，默认还是7
* color：颜色
<hr size="5" color="blue"/>
演示下：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<!-- 演示水平线标签 -->
<hr size="5" color="blue"/>
</body>
</html>
* 特殊字符
—假如想要在页面上显示这样的内容：<html>:是网页的开始！
—需要对特殊字符进行转义，常见的一些特殊字符：
*< <
*> >
* & &
*空格
演示：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<!-- 演示水平线标签 -->
<hr size="5" color="blue"/>
<!-- 演示特殊符号 -->
<html>:是网页的开始 ！
</body>
</html>
2.3 列表标签
* 列表标签
—假如想要在页面上显示这样的效果
中北大学
仪器与电子学院
机电工程学院
经济管理学院
* <dl> </dl>：表示列表的范围
* 在dl里面 <dt> </dt>：上层结构
* 在dl里面 <dd> </dd>：下层结构
—代码
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>中北大学</dt>
<dd>仪器与电子学院</dd>
<dd>机电工程学院</dd>
<dd>经济管理学院</dd>
</dl>
</body>
</html>
—假如想要在页面上显示这样的效果
1. 仪器与电子学院
2. 机电工程学院
3. 经济管理学院
a. 仪器与电子学院
b. 机电工程学院
c. 经济管理学院
i. 仪器与电子学院
ii. 机电工程学院
iii. 经济管理学院
* <ol> </ol>：有序列表的范围
—属性 type：设置排序方式 1（缺省）、a、 i
** 在ol标签里面<li>具体内容</li>
—假如想要在页面上显示这样的效果
* <ul> </ul>：无序列表的范围
—属性 type：空心圆circle、实心圆disc、实心方块square，默认disc
** 在ol标签里面<li>具体内容</li>
演示：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示列表标签 -->
<dl>
<dt>中北大学</dt>
<dd>仪器与电子学院</dd>
<dd>机电工程学院</dd>
<dd>经济管理学院</dd>
</dl>
<!-- 演示有序列表 -->
<ol type="a">
<li>仪器与电子学院</li>
<li>机电工程学院</li>
<li>经济管理学院</li>
</ol>
<!-- 演示无序列表 -->
<ul type="square">
<li>仪器与电子学院</li>
<li>机电工程学院</li>
<li>经济管理学院</li>
</ul>
</body>
</html>
2.4 图像标签
* 图像标签
—<img src="图像的路径"/>
* src：图片的路径
* width：显示图片的宽度
* height：显示图片的高度
* alt：图片上显示一些文字，把鼠标移到图片上，停留片刻后显示，但是在有些浏览器上不显示。
演示：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<img src="sq1.jpg" width="300" height="200" alt="相信自己"/><br/>
<img src="sq2.jpg" width="300" height="200" alt="相信自己"/>
</body>
</html>
这里要注意路径问题，可以使用绝对路径，也可以使用相对路径。这里的相对是指相对于这个html文件的位置而言。
2.5 超链接标签
* 超链接标签
— 链接资源
**<a href="链接到的资源路径">显示在页面上的内容</a>
** href：链接到的资源路径
** target：设置打开方式，默认是在当前页打开
— _blank：在一个新的窗口打开
— _self：在当前页打开
** 当超链接不需要到任何的地址时，设置href为#即可。
— 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href ="#top">回到顶部</a>
** 引入一个标签 <pre> ：原样输出
先来演示下链接资源：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<a href="01hello.html" target="_blank">这是一个超链接1</a><br/>
<!-- 当href属性为#时，表示这个超链接不起作用，只显示内容 -->
<a href="#">这是一个超链接2</a>
</body>
</html>使用浏览器打开：
再来演示下定位资源：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<a name="top">顶部</a>
<pre>
徐北枳缓缓起身，闭上眼睛又睁开眼睛，如此反复，呢喃道：“这方天地……有些古怪。”
陈望轻声道：“道教佛门自古既有方丈之称，相传在那方丈之地，分别成就三清圣地和西天佛国，身在其中，各有无上神通，如同大将坐镇沙场，料敌先机，早早拥有天时地利。”
徐北枳忧心忡忡道：“照你这么说的话，姓徐的家伙明明在自家地盘上，反而被那个宦官夺走优势？”
陈望答非所问，“小街之上并非便于大队战马驰骋的地方，为何会有如此浓密沉重的马蹄声？”
徐北枳站起身，举目望去，“你别误会，姓徐的家伙还不至于这么阴险算计于你，更不会兴师动众地调动幽州骑军。何况到了他们这种玄妙境界的武道宗师，还需要世间骑军助阵？根本没有意义。”
陈望点了点头。
小街之上，就在徐凤年即将与那条水龙撞在一起的时刻，脸色阴沉的年轻宦官叹息一声，伸出手掌，不知为何重新按住井口轱辘。
刹那之间，天地之间再无雨幕，原本昏暗天色好似清明了几分，如同光阴倒退。
徐北枳发现自己依旧坐在门槛上，陈望晃了晃手中酒壶，明明已经喝光的绿蚁酒，竟然还剩下小半壶。
糜奉节满脸茫然，樊小柴低头望去，衣衫完整，并无半点损毁。
</pre>
<a href="#top">回到顶部</a>
</body>
</html>使用浏览器打开：
点击左下角的返回顶部，就返回到了顶部了。
2.6 表格标签
* 表格标签
—可以对数据进行格式化，是数据显示更加清晰
—<table></table>：表示表格的范围
—首先使用table定义一个表格的范围，在table里使用tr定义一行，在tr里使用td定义每个单元格。
—操作技巧：首先确定有多少行，然后确定每一行里有多少单元格。
—属性：border：表格线的粗细
—bordercolor：表格线的颜色
—cellspacing：单元格之间的距离
—width：表格的宽度
—height：表格的高度
**在table里面使用<tr></tr>表示行
—在行里设置显示方式 align：left、center、right
** 在tr里面使用<td></td>表示单元格
—在单元格里设置显示方式 align：left、center、right
** 在tr里面使用<th></th>表示单元格
—表示可以实现居中和加粗
—表格的标题<caption></caption>
演示上面的知识点：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<caption>人员信息</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td align="right">东方不败</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<th>林平之</th>
<th>男</th>
<th>30</th>
</tr>
</table>
</body>
</html>使用浏览器打开：
—合并单元格
**colspan：跨列
**rowspan：跨行
演示合并单元格：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 演示跨列操作 -->
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<tr>
<td align="center" colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>40</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
<td>30</td>
</tr>
</table>
<hr/>
<!-- 演示跨行操作 -->
<table border="1" bordercolor="blue" cellspacing="0" width="300" height="150">
<tr>
<td align="center" colspan="3">人员信息</td>
</tr>
<tr>
<td>东方不败</td>
<td>女</td>
<td rowspan="3">20</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
</tr>
<tr>
<td>林平之</td>
<td>男</td>
</tr>
</table>
</body>
</html>使用浏览器打开：
2.7 表单标签
* 可以提交数据到服务器，这个过程可以用表单标签完成
* <form></form>：定义一个表单范围
—属性
** action：提交到的地址（默认提交到当前页面）
** method：表单的提交方式
—常用的有两种：get（默认）、post
** enctype：一般请求下不需要这个属性，做文件上传时需要设置这个属性
** 输入项：可以输入内容或者选择内容的部分
— 大部分的输入项 使用<input type="输入项的类型"/>
********输入项里面需要有一个name属性
*** 普通输入项：<input type="text"/>
*** 密码输入项：<input type="password"/>
*** 单选输入项：<input type="radio"/>
—name的属性值必须相同
—在里面必须要有属性value
**** 实现默认选中的属性
—checked="checked"
*** 复选输入项：<input type="checkbox"/>
—name的属性值必须相同
—在里面必须要有属性value
**** 实现默认选中的属性
—checked="checked" *** 文件输入项：<input type="file"/>
*** 下拉输入项（不是在input标签里）
<select name ="birth">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
**** 实现默认选中的属性
—selected="selected"*** 文本域
<textarea cols="10" rows="10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在html代码中）
<input type="hidden"/>
*** 提交按钮
<input type="submit"/>
*** 使用图片提交
<input type="image" src="图片的路径"/>
*** 重置按钮：回到输入项的初始状态
<input type="reset"/>
*** 普通按钮：和js配合使用
这里需要注意下get和post的区别：
1）get请求地址栏会携带提交的数据，post不会携带
2）get请求安全级别比较低，post较高
3）get请求携带的数据大小有限制，post没有
演示一个表单标签：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!-- 创建一个表单标签，提交地址为“01hello.html”，提交方式为“get” -->
<form action="01hello.html" method="get">
<!-- 创建一个名为“phone”的普通输入项 -->
手机号：<input type="text" name="phone"/><br/>
<!-- 创建一个名为“pwd”的密码输入项 -->
创建密码：<input type="password" name="pwd"/><br/>
<!-- 创建一个名为“sex”，值为“男”的单选输入项，且在所有的单选输入项中默认选择该输入项 -->
性别：<input type="radio" name="sex" value="男" checked="checked"/>男
<!-- 创建一个名为“sex”，值为“女”的单选输入项 -->
<input type="radio" name="sex" value="女"/>女<br/>
<!-- 创建一个名为“love”，值为“羽毛球”的复选输入项 -->
爱好：<input type="checkbox" name="love" value="羽毛球">羽毛球
<!-- 创建一个名为“love”，值为“排球”的复选输入项 -->
<input type="checkbox" name="love" value="排球">排球
<!-- 创建一个名为“love”，值为“乒乓球”的复选输入项，且在所有的单选输入项中默认选择该输入项 -->
<input type="checkbox" name="love" value="乒乓球" checked="checked">乒乓球<br/>
<!-- 创建一个文件输入项 -->
文件：<input type="file"/><br/>
<!-- 创建一个名为“birth”，值为“0”、“1992”、“1993”、“1994”，且默认选择“1994”的下拉输入项 -->
生日：<select name ="birth">
<option value="0">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994" selected="selected">1994</option>
</select><br/>
<!-- 创建一个名为“introduction”的文本域输入项 -->
自我描述：<textarea cols="50" rows="8" name="introduction"></textarea><br/>
<!-- 创建一个名为“hidden”的隐藏项 -->
隐藏项：<input type="hidden" name="hidden"/><br/>
<!-- 创建一个提交按钮 -->
<input type="submit" value="注册"/>
<!-- 创建一个重置按钮 -->
<input type="reset" value="重置注册"/>
<!-- 创建一个普通按钮 -->
<input type="button" value="普通按钮"/><br/>
<!-- 创建一个使用图片提交的按钮 -->
<input type="image" src="提交按钮.jpg" width="100" height="25"/>
</form>
</body>
</html>
使用浏览器打开：
填入信息：
点击注册按钮：
发现跳转到了01hello.html这个网址，并且后面跟着?，紧接着跟着跟个输入项的信息，并且以&隔开。
下面做一个练习，实现如下的效果：
编写程序：
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<h2>注册中北大学校园网账号</h2>
<form action="01hello.html" method="get">
<table border="0">
<tr>
<td align="right">注册邮箱：</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td align="right"> </td>
<td>你可以使用<a href="#">账号</a>注册或者<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="1990">1990</option>
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
</select>年
<select name="month">
<option value="8">8</option>
<option value="9">9</option>
<option value="10" selected="selected">10</option>
<option value="11">11</option>
</select>月
<select name="day">
<option value="29">29</option>
<option value="30" selected="selected">30</option>
<option value="31">31</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option value="study">正在上学</option>
<option value="work">已经工作</option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<image src="验证码.png">
<a href="#">看不清换一张？</a>
</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" name="code"/></td>
</tr>
<tr>
<td align="right"> </td>
<td><input type="image" src="提交按钮.png"/></td>
</tr>
</table>
</form>
</body>
</html>使用浏览器打开：
2.8 html的头标签
html由两部分组成：head和body，在head中的标签就是头标签
* title：表示在页面上显示的内容
* meta：设置页面的一些相关内容
<meta http-equiv="refresh" content="3;url=01hello.html"/>可以实现浏览器3秒后刷新进入01hello.html页面。
*base：设置超链接的基本设置
<base target="_blank"/>可以统一设置超链接的打开方式
* link：引入外部文件
演示：
<html>
<head>
<title>HTML示例</title>
<!-- <meta http-equiv="refresh" content="3;url=01hello.html"/> -->
<base target="_blank"/>
</head>
<body>
<h1>头标签</h1>
<a href="01hello.html">超链接1</a>
<a href="01hello.html">超链接2</a>
<a href="01hello.html">超链接3</a>
</body>
</html>
2.10 框架标签
*<frameset>
— rows：按照行进行划分
** <frameset rows="80,*">
— cols：按照列进行划分
** <frameset cols="80,*">
*<frame>
— 具体显示的页面
— <frame name="lower_left" src="b.html">
* 使用框架标签时，不能写在body里面，使用了框架标签，需要把body去掉
演示：
10框架标签.html
<html>
<head>
<title>HTML示例</title>
</head>
<!-- 按行划分为两部分 -->
<frameset rows="80,*">
<frame name="top" src="a.html"/>
<!-- 按列划分为两部分 -->
<frameset cols="80,*">
<frame name="left" src="b.html"/>
<frame name="right" src="c.html"/>
</frameset>
</frameset>
</html>a.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>aaaa</h1>
</body>
</html>b.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>bbbb</h1>
<a href="01hello.html" target="right">超链接1</a>
<a href="02标题和水平线和特殊字符.html" target="right">超链接2</a>
<a href="03列表标签..html" target="right">超链接3</a>
</body>
</html>c.html
<html>
<head>
<title>这是一个标题</title>
</head>
<body>
<h1>cccc</h1>
</body>
</html>用浏览器打开：
点击超链接1：
点击超链接2：
点击超链接3：
2.8 html其它常用标签
<b>：加粗
<s>：删除线
<u>：下划线
<i>：斜体
<p>：段落标签，比<br/>标签多一行
<pre>：原样输出
sub：下标
sup：上表
div：自动换行
span：在一行显示
演示：
<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>HTML示例</title>
</head>
<body>
<b>天之道，</b>
<s>损有余而补不足，</s>
<u>是故虚胜实，</u>
<i>不足胜有余</i>
<hr/>
<pre>
public static void main(String[] args){
System.out.println("!");
}
</pre>
<hr/>
A<sub>0</sub>
10<sup>2</sup>
<hr/>
<div>这是div1</div>
<div>这是div2</div>
<div>这是div3</div>
<hr/>
<span>这是span1</span>
<span>这是span2</span>
<span>这是span3</span>
<hr/>
<p>徐北枳缓缓起身，闭上眼睛又睁开眼睛，如此反复，呢喃道：“这方天地……有些古怪。”</p>
陈望轻声道：“道教佛门自古既有方丈之称，相传在那方丈之地，分别成就三清圣地和西天佛国，身在其中，各有无上神通，如同大将坐镇沙场，料敌先机，早早拥有天时地利。”
</body>
</html></span></span></span>在浏览器中打开：
1809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
