今天我们一起来学习一下有关网页相关的内容Html语言。
HTML
(一). 认识HTML语言
- Html是超文本标记语言的简写，是最基础的网页语言
- Html是通过标签来定义的语言，代码都是由标签所组成的
- 代码不区分大小写
- Html代码由<html>开始 </html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
- 头部分是给html页面增加一些辅助或属性信息，其内容会最先被加载
- 体部分是真正存放页面数据的地方。
1.1 Html语言规范
- 多数标签都是有开始标签、结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内闭合，如换行标签<br />、水平线分割<hr />.
- 想要对被标签修饰的内容就行更加丰富的操作，就用到了标签中的属性，通过对属性值的改变增加了更多的效果选择。
- 属性与属性值之间用“=”连接，属性值可以用单引号或双引号或不用引号，一般都会用双引号。或者公司规定方式。
- 格式 <标签名 属性名=“属性值”>数据内容 </标签名> 或 <标签名 属性名=“属性值” />
1.2 Html操作思想
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器，对容器中的数据进行操作，就是在不断改变容器中的属性值。
(二). 常用标签
2.1 列表标签
- 列表标签：<dl>
- 上层项目：<dt>
- 下层标签：<dd> 封装的内容会被缩进，有自动缩进效果
有序和无序的项目列表：
- 有序：<ol>
- 无序：<ul>
- 无论有序还是无序，条目的封装都用<li>，它们都有缩进效果
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>我的标题</title>
</head>
<body>
<h1>我的网页</h1>
<!--HTML注释： 演示列表标签
列表标签：dl 上层项目：dt
下层项目：dd 封装的内容会被缩进，有自动缩进效果
-->
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
<hr/> <!--有序和无序的项目列表
有序：<ol>
无序：<ul>
无论有序还是无序，条目的封装都用<li>，但是他们都有缩进效果
-->
<ul type="square">
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<ol type="a">
<li>有序项目列表</li>
<li>有序项目列表</li>
<li>有序项目列表</li>
<li>有序项目列表</li>
</ol> </body>
</html>
2.2 图像标签：<img>
<img src="1.jpg" height=“200” width=“300” align="middle" border="3" alt="图片说明文字"/>注意：align属性定义图片的排列方式，border属性用来设置图像的边框，src用来连接一个文件，height属性设置图片高度，width属性设置图片宽度
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--演示图片-->
<img src="img\1.jpg" height="350" width="500" align="left" border="3" alt="哇塞，美女那"/>
</body>
</html>
2.3 图像地图：<map>
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图上各个省的区域。注意map标签要和img标签联合使用。Herf是超链接。
<img src="Sun.jpg" alt="图片说明文字" usemap=“#Map”/>
<map>
<area shape="rect" coords="50,59,116,105" herf="1.html">
<area shape="circle" coords="118,20,100,50" herf="2.html">
</map
2.4 表格标签：<table>用来格式化数据
组成：标题标签：<caption>,给表格标题提供数据
表头标签：<th>,一般对表格的第一行或者第一列进行格式化，就是粗体显示，不常用。
行标签：<tr>
单元格标签：<td>,加在行标签中，可以理解为，先有行，在行中加入单元格。
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--表格标签-->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="10" width=300>
<caption>表格标签</caption>
<tr><!--第一行-->
<th>姓名：</th><!--单元格--><!--th可使内容在单元格中加粗居中-->
<th>年龄：</th>
</tr>
<tr><!--第二行-->
<td>张三</td>
<td>23</td>
</tr>
</table>
</body>
</html>
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--表格标签-->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="10" width=300>
<caption>表格标签</caption>
<tr><!--第一行-->
<th>姓名：</th><!--单元格--><!--th可使内容在单元格中加粗居中-->
<th>年龄：</th>
</tr>
<tr><!--第二行-->
<td>张三</td>
<td>23</td>
</tr>
</table> <hr/> <table border="1" bordercolor="#0000ff" height="100" width="300">
<tr>
<th colspan=2>个人信息</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr> </table> <hr/> <table border="1" bordercolor="#0000ff" height="100" width="300">
<tr>
<td rowspan=2>个人信息</td>
<td>张三</td>
</tr>
<tr>
<td>25</td>
</tr>
</table>
</body>
</html>
在该代码中要重点理解一下 colspan=2（cols是列的意思，该句代码意为该单元格占2列）、rowspan（rows是行的意思，该句代码意为该单元格占2行）。
注意：网络中网页的内容也是用表格封装的，如果等到</table>结束时才能开始点击网页内容，那对于用于体验来说无疑是差的。所以table中含有默认的能够让数据分行下载的TBODY.
TBODY的作用：可以控制表格分行下载，从而提高下载速度（网页的打开是先表格内容全部下载完毕后，才显示出来。分行下载可以先下载部分内容，减少用户等待时间）。使用TBODY的目的是可以使这些包含在内的代码不用全部解析完表格后一起显示，也就是说如果有多个行，那么解析引擎在得到一个TBODY行，就可以先显示一行。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>.
表格标签<table>的下一级标签就是<tbody>,不用定义也会存在。
2.5 超链接标签:<a>
两种用法：
(1). 超链接<a href="">
例如：<a href="http://www.sina.com.cn" target="_blank">新浪</a>
<!--注意：href属性值可以是url，也可以是本地文件,target属性是指在哪个窗口或者帧中打开。-->
(2). 定位标记<a name="">
定位标记一般在本页面中使用，当网页内容过长时，使用定位标记比拖动滚动条方便的多。
注意：定位标记要和超链接标记结合使用才能有效。
例如：<a name="标记">标记位置</a>
<p>........<!--很多空行以制造网页内容过长效果-->
<a href="#标记">返回标记位置</a>
注意：使用定位标记时一定要在href的值前加#标记名
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--超链接
作用：链接资源
当有了href属性，才有了点击效果
href属性的值的不同，解析的方式也不同
如果在该值中未指定任何协议，解析时就会按照默认的协议来解析该值：默认协议file协议
未指定资源，会默认打开当前文件所在的目录
-->
<a href="http://www.sina.com.cn" target="_blank">新浪网站</a><!--target指定打开方式-->
<hr/>
<a href="img/1.jpg" target="_top">美女图片</a>
<hr/>
<a href="mailto://17865212920@163.com">联系我们</a>
<hr/>
<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a>
<a href="thunder://asfksldfjksjdfgkg">复仇者联盟</a>
<hr/> <!--点击超链接没有效果-->
<a href="javascript:void(0)" onclick="alert('弹出窗口')">这是一个超链接</a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--超链接第二个作用：定位标记
专业术语：锚
-->
<a name="top">顶部位置</a>
<hr/>
<img src="1.jpg" height="900" width="300" />
<hr/>
<a name="center">中间位置</a>
<hr/>
<img src="1.jpg" height="900" width="300" />
<hr/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a<br />>
<!--注意：定位标记的href中必须要加#来确定位置，如果不加#就会被默认为一个文件来解析--> </body>
</html>
2.6 框架标签<frameset>
注意：框架标签不可放在body内，一般为了代码的可读性，会到<head>和<body>之间。
例: <frameset rows="10%,*">
<frame src="1.html" name="top" />
<frameset cols="30%,*">
<frame src="2.html" name="left" />
<frame src="3.html" name="right" />
</frameset>
</frameset>
因为框架标签中的html文件比较多，所以要建立一个文件夹，可命名为frame，其中文件有
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head> <!--定义框架标签：<frameset></frameset>-->
<frameset rows="30%,*">
<frame src="top.html" name="top"/> <frameset cols="30%,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset> <body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<h1>这是我的网站LOGO</h1>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head> <body>
<h3>左边栏链接</h3>
<a href="../img.html" target="right">链接一</a>
<a href="../table.html" target="right">链接二</a>
<a href="../link.html" target="right">链接三</a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<h3>内容显示区域</h3>
</body>
</html>
注意：框架标签现在已经很少用了，布局都用div+css+table。框架很少用。
2.7 画中画标签<iframe>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<!--画中画标签-->
<iframe src="table.html" width=500 height=300>这是画中画标签，您如果看到文字，很遗憾您的浏览器不支持该标签</iframe>
<iframe src="http://www.sina.com.cn" width=0 height=0>访问新浪网页</iframe><!--当画中画标签的窗体宽高都设置为0时，如果
此时链接一个恶意网站，这是当运行页面时，会自动进入恶意网站，而前台并不会显示该网站界面-->
</body>
</html>
注意：画中画标签中如果看到写在源代码中<iframe></iframe>的文字，表明该浏览器不支持画中画标签。还有要注意画中画标签窗体宽高都为0时。
2.8 表单标签<form>(很重要，要牢记)
表单标签是最常用的标签，用于与服务器之间的交互
- <input>输入标签： 接收用户输入信息，其中type属性指定输入标签的类型
- 文本框text——输入的文本信息直接显示在框里（明文）
- 密码框password——输入的文本信息以原点或者星号的形式显现（非明文）
- 单选框radio——如：性别选择 （如要设置默认 则加入checked=“checked” 要具有选中效果就要有name属性）
- 复选框checkbox——如：兴趣选择 （如要设置默认选择，加入checked=“checked”）
- 隐藏字段hidden——在页面上不显示，但在提交时跟随其他内容一起提交
- 提交按钮submit——用于提交表单上的内容
- 选择文件file——可从本地选取文件
- 图片image——该图片具备默认的提交效果，可作为图片按钮
- 一个按钮button——没有默认的事件处理，需要自定义事件（很简单直接添加属性即可）
- 重置按钮reset——相当于清除信息
- <select>选择标签：如：国家列表的选择，可设置默认效果：selected=“selected”
- <textarea>文本区域标签：进行写入大篇幅文本内容
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--要想使服务端能够识别表单数据，则必须要加入name、value属性-->
<form>
输入名称：<input type="text" name="user" value=""><br/> 输入密码：<input type="password" name="pwd" value=""><br/> <!--要将单选按钮放入组中，即给按钮定义name属性。要实现单选效果，则多个组的组名必须统一.如果设置默认选中效果则加入checked="checked"-->
选择性别： <input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/> <!--如果设置默认选中效果则加入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="image" src="1.jpg"><br/> <!--数据不需要客户端知道，但是传到服务端让服务端知道-->
隐藏组件：<input type="hidden" name="mykey" value="myvalue"/><br/> <!--按钮没有默认点击事件，需要自定义动作事件-->
一个按钮：<input type="button" name="Button" value="一个按钮" onclick="alert('弹出按钮')"/><br/> <!--选择 selected="selected"是设置默认选中效果-->
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select><br/> <!--文本区域-->
<textarea name="text" value=""></textarea> <input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/><br/>
</form> </body>
</html>
表单格式化：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<form action="http://192.168.1.100:9090" method="post">
<table border="1" bordercolor="#0000ff" cellpadding="5" cellspacing="10" width=600 height=350>
<tr>
<th colspan=2>注册表单</th>
</tr>
<tr>
<td>用户名称：</td>
<td><input type="text" name="user" /></td>
</tr>
<tr>
<td>输入密码：</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repwd" /></td>
</tr>
<tr>
<td>选择性别：</td>
<td><input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女</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 name="none">--选择国家--<option>
<option name="usa">美国</option>
<option name="en">英国</option>
<option name="cn" selected="selected">中国</option>
</select></td>
</tr>
<tr>
<th colspan=2>
<input type="reset" value="清除数据"/>
<input type="submit" value="提交数据"/>
</th>
</tr> </table>
</from>
</body>
</html>
2.9 头标签
头标签都放在<head></head>头部分之间。包括：title、base、meta、link
2.9.1 <title>标签：指定浏览器标题栏显示的内容
2.9.2 <base>标签：href属性，指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target属性：指定打开超链接的方式，如“_blank”表示所有的超链接都用新窗口打开显示。
2.9.3 <meta>标签：name属性:网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv属性：模拟HTTP协议的响应消息头。
例：<meta http-equiv="refresh" content=“3;url=http://www.sina.com.cn"/> 表示打开此页面3秒后自动跳转到新浪页面。
2.9.4 <link>标签：rel属性：描述目标文档与当前文档的关系。type属性：文档类型。media属性：指定目标文档在哪种设备上起作用。
例：<link rel="stylesheet" type="text/css" media="screen,print" href="a.css"/>
2.10 <marquee>标签：让内容动起来
direction属性：left、right、up、down
behavior属性：slide、scroll、alternate
2.11 <pre>标签：可以将文本内容按代码区的样子保存在页面上
2.12 其它标签
- <b>标签：字体加粗
- <i>标签：斜体
- <u>标签：加下划线
- <sub>标签：加下标
- <sup>标签：加上标
实践见真知：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--pre标签可以保持代码原有的格式-->
<pre>
public class Single {
private static final Single s = new Single();
private Single(){};
public static Single getInstance(){
return s;
}
}
</pre>
<hr/>
<!--什么属性都不加入默认是跑马灯效果，从右向左移动.direction控制移动方向，behavior控制用何种方式移动-->
<marquee>我会飞那，哈哈！</marquee>
<marquee direction="down" behavior="slide">大家好！</marquee><!--来回弹动--> <!--b标签：加粗 i标签：斜体 u标签：加下划线-->
<b>这是</b><i>演示</i>其它常见的<u>标签</u>
<hr/>
<!--sub表示下标，sup表示上标，记忆方法：看b和p中的o在上还是在下，在上就是上标，在下就是下标-->
X<sub>2</sub>X<sup>2</sup>
</body>
</html>
2.13 区域标签
<div>区域标签，div没有直接含义，只为封装数据，至于操作，由自己定义其它语言进行操作。
<div>封装整行区域，<span>封装行内区域，<p>段落标签不仅换行而且前后都有空行
(三).
3.1 Get提交和Post提交的区别？（很重要）
- get提交，提交的信息都显示在地址栏中
post提交，提交的信息不显示在地址栏中 - get提交，对于敏感的数据信息不安全
post提交，对于敏感数据安全 - get提交，对于大数据不行，因为地址栏存储体积有限
post提交，可以提交大体积数据 - get提交，将信息封装到请求消息的请求行中
post提交，将信息封装到了请求体中 - 在服务端的一个区别：如果出现将中文提交到Tomcat服务器，服务器默认会用iso8859-1进行解码以致于产生乱码。这时通过用iso8859-1对乱码重新进行编码，就会得到源码数据。再用指定的中文码表解码即可。这种方式对get和post方式都有效。
但是，对于用post方式提交的中文，还有另一种解觉办法，就是直接使用服务器端的一个对象—request对象的setCharacterEncoding方法直接设置中文码表就可以将中文数据解析出来。这个方法只对请求体中的数据进行解码。
综上所述：表单提交，建议使用post.
3.2 和服务端交互的三种方式（很重要）：
- 地址栏输入url地址。（get请求方式）
- 超链接 （get请求方式）
- 表单 （get和post方式）
3.3 问题来了：
（1）如果在客户端进行了增强型校验（只有一个组件内容是错误的，是无法继续提交的。只有全对才可以提交）
问：服务端接收数据后还需要校验么？
答：是需要的，为了安全性。因为客户端和服务端交互的方式并不是只有表单一种。这时如果用其它方式进行交互，容易产生暴力注册！
（2）如果服务端做了增强型校验，客户端还需要校验么？
答：需要，减轻自身服务端的压力，同时提高用户的上网体验，
3.4 HTML（超文本标记语言）和XML（可扩展标记语言）的区别：
- HTML的标签名都是固定，XML的标签名是可以自定义的
- HTML提供标签对数据进行封装，是对数据显示的描述；XML对数据信息的描述，描述的是数据之间的关系
- XML代码规定更为严格，如：标签不结束被视为错误。
- XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。各个服务器，框架都是用XML做为配置文件。
3.5 标签分为两大类：
1.块级标签(元素)：标签结束后都有换行。如：div、p、dl、table、ol、ul
2.行内标签(元素)：标签结束后没有换行。如：font、span、selected、img、input、a