HTML
1.html是超文本标记语言的简写，是最基础的网页语言。
2.html是通过标签来定义的语言，代码都是由标签所组成。
3.html代码不用区分大小写。
4.html代码由<html>开始，</html>结束。里面由头部分<head></head>和体部分<body></body>组成。
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
这是我的<br /><hr />
<font color='red' size='5'>网页内容</font>。
</body>
</html> 这些尖括号里的就是标签，比如标题标签，字体标签,换行标签，水平分割线标签。
5.头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会首先加载。
6.体部分是真正存放页面数据的地方。
多数标签都是有开始标签和结束标签的，但有个别标签因为只有单一功能，或者没有修饰的内容，
可以直接在标签内结束。 比如：换行标签<br /> 水平分割线标签<hr />
想要对标签修饰的内容进行更丰富的操作，就要用到了标签中的属性。属性与属性值用“=”连接。属性值用双引号或单引号引导。
格式：<标签名 属性名=‘属性值’>数据内容</标签名>
<标签名 属性名=‘属性值’ />
操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行不同的操作。
标签就相当于一个容器，对容器中的数据进行操作，就是在不断的改变容器的属性值。
html语言中要用到大于号和小于号时，就要加上转义字符了。比如： 大于号 <； 小于号>；
列表标签：<dl>
上层项目：<dt></dt>
下层项目：<dd></dd> 封装的内容是会被缩进的，有自动缩进效果。
<!--有序和无序的项目列表（这就是html中的注释，也是用标签来体现的）-->
有序：<ol> 无序：<ul> 无论有序和无序，条目的封装用的都是<li>，而且他们都有缩进效果。
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
这是我的<br /><hr />
<font color='red' size='5'>网页内容</font>。
<ul>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<ol type="a">
<li>有序项目列表</li>
<li>有序项目列表</li>
<li>有序项目列表</li>
</ol>
</body>
</html>
图像标签：<img />
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
这是我的<br /><hr />
<font color='red' size='5'>网页内容</font>。
<img src="图片位置" height=500 width=200 border=10 alt="wa" />
<!--上面依次为图片高和宽，边框宽度，图片说明文字。-->
</body>
</html>
表格标签<table>
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
这是我的<br /><hr />
<font color='red' size='5'>网页内容</font>。
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<caption>表格标题</caption>
<tr>
<td>姓名：</td>
<td>张三</td>
</tr>
<tr>
<td>年龄：</td>
<td>39</td>
</tr>
</table>
不规则的表格<hr />
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<tr>
<th colspan=2>个人信息</th> <!--th标签就居中并加粗了，colspan=2是合并两个单元格-->
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>
<br />
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<tr>
<th rowspan=2>个人信息</th>
<th>张三</th>
</tr>
<tr>
<th>30</th>
</tr>
</table>
</body>
</html>
注意：表格的下一级标签是tbody，不定义也存在，默认就是这个。
超链接标签<a>
两种用法：
一：超链接。用于链接资源。
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<a href="http：//www.baidu.com" target="_blank">百度</a>
<!--当有了href属性，才有了点击的效果。他的值不同，解析的方式也不同，解析时，默认按照file协议-->
<!--这里的http是指定的协议，后面的target="_blank"表示在一个新窗口打开此网页。-->
<hr/>
<a href="imgs/1.jpg">图片</a>
<hr/>
<a href="javascript:void(0)" onclick="alert('haha')">这是个超链接</a>
<!--启用javascript协议，void(0)表示去掉超链接默认的点击效果，onclick是自定义了一个点击效果-->
</body>
</html>
二：定位标记。专业术语叫锚
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<a name=top>顶部位置</a>
<hr/>
<img src="111.jpg" height=900 width=400 border=10/>
<hr/>
<a name=center>中间位置</a>
<hr/>
<img src="111.jpg" height=900 width=400 border=10/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>
</body>
</html>
框架标签<frameset>：
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<!--定义框架：使用标签frameset
-->
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="30%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
<body>
</body>
</html>
画中画标签<iframe>
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<iframe src="table.html">这是画中画标签,如果你看到这行字，说明你的浏览器不支持该标签</iframe>
</body>
</html>
***************重点掌握
表单标签<form>：
表单标签是最常用的标签，用于与服务端的交互。
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<form>
<!--要向服务端提交数据的话就得明确name和value属性，类似于键值对，否则无法解析。-->
输入名称<input type="text" name="user" value=""/><br/>
输入密码<input type="password" name="psw" value=""/><br/>
选择性别：<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/>
<!--都在sex这个组别中才能是单选, checked="checked"就让女变成了默认选项。-->
选择技术：<input type="checkbox" name="tech" value="java"/>JAVA
<input type="checkbox" name="tech" value="html"/>HTML
<input type="checkbox" name="tech" value="css"/>CSS
<br/>
<!--这个是多选。-->
选择文件：<input type="file" name="file"/><br/>
一个图片：<input type="p_w_picpath" src="111.jpg"/><br/>
隐藏组件：<input type="hidden" name="mike" value="123"/><br/>
<!--当数据不需要客户端知道，但是需要提交到服务端时，就放在这里面。-->
一个按钮：<input type="button" value="这是个按钮" onclick="alert('xixi!')"/>
<br/>
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn" selected="selected">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
</select>
<br/>
<textarea name="text"></textarea>
<br/>
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</form>
</body>
</html>
综合练习：
<html>
<head>
<title>这是一个网页的标题。</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!--action指定了服务端，post是一种提交的方式，还有一种叫get-->
<!--
get提交和post提交的区别：
1：get提交的信息都显示在地址栏中，而post提交不显示在地址栏中。
2：get提交对于敏感的数据信息不安全，post比较安全。
3：get提交对于大数据不行，因为地址栏存储体积有限，而post可以提交大体积数据。
4：get提交将信息封装到了请求消息的请求行中，而post封装到了请求体中。
在服务端还有一个小区别：
如果将中文提交到tomcat服务器，服务器默认会用iso8859-1解码，会出现乱码，
这时，通过iso8859-1先编码，再通过指定的中文码表进行解码即可，这种方式对两种提交方式都有效。
但是对于post提交的中文，也可以直接使用服务端的一个对象request的setCharacterEncoding方法直接设置指定的码表解码。
这个方法只对请求体中的数据进行解码。所以只能post提交方法可以用。
综上所述，表单提交时，建议使用post提交方法。
-->
<table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=800>
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" name="user" value=""/></td>
</tr>
<tr>
<td>输入密码：</td>
<td><input type="password" name="psw" value=""/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="psw" value=""/></td>
</tr>
<tr>
<td>选择性别：</td>
<td>
<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女
</td>
</tr>
<tr>
<td>选择技术：</td>
<td>
<input type="checkbox" name="tech" value="java"/>JAVA
<input type="checkbox" name="tech" value="html"/>HTML
<input type="checkbox" name="tech" value="css"/>CSS
</td>
</tr>
<tr>
<td>选择国家：</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</th>
</tr>
</table>
</form>
</body>
</html>
和服务端交互的三种方式：
1.地址栏输入url地址。 get
2.超链接。 get
3.表单。 get和post
如果在客户端进行了增强型的校验（只要有一个组件内容是错误的，就无法提交），比如两次密码输入必须一致。
问，服务端收到数据后，还需要校验吗？
肯定需要。为了安全性。不然客户端直接在地址栏随便输都能完成注册了，性别都可以随便写了。
如果服务端做了增强型校验，客户端还需要校验吗？
需要。因为要提高用户的上网体验和效率，也是为了减轻服务端的压力。
标签分为两大类：
1.块级标签：标签结束后都有换行。比如div p dl table ol ul
2.行内标签：标签结束后没有换行。比如font span img input select a