HTML

浏览数：44 / 时间：2015年06月09日

一、HTML概述

1.HTML是超文本标记语言，所谓的超文本就是超出了文本的范畴。

2.HTML是通过标签来定义的语言，代码都是由标签所组成。标签里的名称有特殊的含义，用户不能更改。

3.任何语言都有其范围。HTML代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。头部分是给HTML页面增加一些辅助或者属性信息，它里面的内容会最先加载。体部分是真正存放页面数据的地方。

4.标签是不会在浏览器中显示出来的。HTML 的每一个标签都有其自己特殊的含义，都有其自己特定的应用场景。多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容，可以在标签内结束。

5.想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。属性和属性值之间用"="连接，属性值可以用双引号或单引号或不用引号，一般都会用双引号。

格式：<标签名属性值="属性值">数据内容</标签名>

<标签名属性值="属性值"/>

6.浏览器内部最强大的地方在于其融合了解析器，她能去解析一些公共的规范，比如说HTML这种公共的规范，解析完以后能把样式显示出来。解析器从上到下解析HTML代码，一边解析一边执行，不需要编译。

二、HTML常用标签

1.HTML字体标签

字体标签：<font>

标题标签：<h1><h2><h3><h4><h5><h6>

特殊标签：如果要在网页上显示一些特殊字符，比如 < > & 等，因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

< (<) > (&gt) & (&) " (") 空格 ( )

2.HTML列表标签

dl = Defined list

<dl>定义列表的范围

<dt>定义上层项目条目

<dd>定义下层项目条目而且dd具备缩进的效果

<ol>数字标签

<ul>符号标签

<li>具体项目内容标签，此标签只在<ol> <ul>中有效，<li>标签本身就具备缩进效果。

3.HTML图像标签

图像标签：<img>

src属性规定显示图像的 URL，alt属性规定图像的替代文本。

4.HTML表格标签

表格标签：<table>

表格主要用于格式化数据，表格由行组成，行中有单元格，表格中没有直接列的概念。

tr元素定义表格行，th元素定义表头，td元素定义表格单元。

th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。

<table>标签中的border属性规定表格边框的宽度，with属性规定表格的宽度，cellpadding属性规定单元边沿与其内容之间的空白，cellspacing属性规定单元格之间的空白。

<th>标签中的colspan属性用来设置单元格可横跨的列数，rowspan属性用来规定单元格可横跨的行数。

注意：

(1)每个表格可以有一个表头、一个表尾和一个或多个表体(即正文)，分别以THEAD、TFOOT和TBODY元素表示。

(2)THEAD、TFOOT包含关于表格列的信息。

(3)TBODY的作用：可以控制表格分行下载，从而提高下载速度(网页的打开是先将表格的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间)。

(4)使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

(5)TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<TBODY>和</TBODY>。

5.HTML超链接标签

超链接标签：<a>

仅有<a>标签还不能起到超链接的作用(没有指明链接的目的地)，还必须要用href属性用来指定链接的目的地。

注意：

点击超链接浏览器做的事情

(1)启动相对应的协议引擎(所谓引擎就是能解析某一个协议的应用程序)

(2)解析协议后面的具体内容

(3)如果跟的是一个主机地址，先查找本机 hosts 文件列表，看是否可以找到该主机对应IP。如果没有找到，会找本机指定的或者本机默认的DNS服务器，去解析该主机。

(4)获取到该IP后，再连接该指定IP的主机，并获取所需的资源。

易错：

(1)当没有指定具体协议时，浏览器会启动默认的file协议引擎来解析href的值。

例如：<a href="www.baidu.com">Baidu</a>

点击 Baidu 后并不会链接到百度。

(2)当指定的协议浏览器无法解析时，浏览器会在本地注册中查找是否有关联该协议的应用程序。如果有就调用程序进行该协议的解析。

例如：<a href="mailto:[email protected]">联系我们</a>

点击联系我们后会调用 Microsoft Outlook 程序(前提是已经安装了该程序)来进行协议的解析。

例如：<a href="http://www.xunlei.com/movie/魔戒1.mkv">魔戒1.mkv</a>

点击魔戒1.mkv 后会调用下载工具来下载文件，若是这样，那么迅雷网站的资源谁都可以下载(http是公共协议，谁都能用，即使没有安装迅雷客户端的用户也可以)，所以迅雷为了保护自己的资源，只允许安装有迅雷客户端(迅雷看看客户端)的用户可以下载(在线观看)，其它的软件都不可以，特制作了一个应用层协议(thunder)，把链接加密成了新的字符串，只有迅雷客户端可以解析thunder协议并把协议后的字符串通过解密还原为一个地址，当然迅雷也可以下载ed2k协议的资源，因为迅雷已经和其合作了。其实，这就是一种垄断。

6.HTML超链接标签-定位标记

<html>

<head>

</head>

<body>

</body>

</html>

在本例中，若把 <a href="#top">回到顶部</a> 改为 <a href="top">回到顶部</a> 则浏览器会把top视为文件名称，会启动默认的文件引擎来解析，而top仅仅是页面中的一个位置，故在前面加一个#号以示区分，用以标识出这是当前页面的某一个位置。

7.HTML框架

框架标签：<frameset>

框架标签不可以放到 <body>标签中，一般为了代码的可读性，会放到<head>和<body>之间。

想要一个浏览器打开多个页面的时候就可以使用框架来完成，每个子框架(子框架用<frame>标签表示)可以显示单独的资源。

</frameset>

注意：超链接默认的是在当前页面显示。

8. HTML画中画标签

画中画标签：<iframe>

<html>

<head>

<title>iframe</title>

</head>

<body>

这是画中画标签，如果你看到了这段文字，很遗憾，您的浏览器不支持画中画标签

</iframe>

</body>

</html>

本例是一个隐藏的画中画，她去链接一个指定的资源，这个资源是一个脚本文件，这个脚本文件一旦被执行，就可能弹出一堆广告。这段iframe代码就是网页中的恶意代码。而杀毒软件通常会把 src="http://www.virus.com/virus.js" 这段代码改为src=""而其它的代码保留下来。而一旦你的计算机所有的HTML文件都被加上这种恶意代码，你就可以利用 IO技术，利用IO流把文件读取进来，然后把那段恶意代码干掉，然后生成新的文件就行了。

9.HTML表单中的组件

表单标签：<form>

表单标签可以和服务端进行交互，和服务端进行交互有三种方式，其中以表单最为常见，所以在实际开发中表单标签显得非常重要。

<form> 表单标签中最常见的组件：

<input> 输入标签 - 接收用户输入的信息

<input> 输入标签中的type属性可以指定输入标签的类型

type 属性中常见的属性值：

text(文本框) - 输入的文本以原点或者星号的形式显示

radio(单选框) - 如性别

checkbox(复选框) - 如兴趣选择

hidden(隐藏字段) - 在页面上不显示，但在提交的时候随其他内容一起提交

submit(提交按钮) - 用于提交表单中的内容

reset(重置按钮) - 将表单中填写的内容设置为初始值

button(按钮) - 可以为其自定义事件

file(文件上传) - 后期扩展内容，会自动生成一个文本框和一个浏览按钮

image(图像) - 它可以替代 submit 按钮

<html>

<head>

</head>

<body>

<form>

用户名：<input type="text" name="user" value="请输入用户名"/><br/>

密码：<input type="password" name="pwd"/><br/>

性别：<input type="radio" name="sex"/>男

技术：<input type="checkbox"/>JAVA

<input type="checkbox"/>Android

<input type="checkbox"/>CSharp<br/>

附件：<input type="file"/><br/>

</form>

</body>

</html>

对于单选按钮出现多个的时候，一次只能选中一个，所以单选按钮必须确定自己所在的组，单选按钮中用 name 属性来区分自己所在的组，所以上例中错误的写法：

性别：<input type="radio"/>男

性别：<input type="radio" name="man"/>男

当点击提交按钮时，由于这个提交按钮本身就具备了默认的事件处理方式，该按钮的特点是当你点击时它就会把放入表单当中组件所输进来的信息打包成数据包发给服务端。

隐藏项非常有用，它不需要让用户看到但是隐藏项里面的值却可以提交到服务端去，这样方便服务端进行客户端数据获取的项。

10.HTML表单中的组件的name和value属性

当你点击提交按钮把放入表单当中组件所输进来的信息打包成数据包发给服务端，那么服务端如何能获取到用户所输入的信息呢？由于表单组件通常情况下都是要和服务端进行交互的，所以信息往服务端提交的时候，由于这些组件的标签都一样故必须要进行区分来代表它们不同的值，因此它们都需要一个name属性，当提交时，浏览器会自动的把表单中的键和值取出来提交到服务端去，键就是name属性的值，值就是value属性的值，在文本框当中，value可以指定也可以不指定，这样，服务端才能获取到数据。

表单中的组件获取到用户的录入信息如何让服务端获取到呢？

因为服务端必须根据组件的名称来获取该组件的值，所以表单的组件都需要定义两个属性：name和value两个属性，其中 name属性负责给组件起名称用于区分组件，value属性是该组件的具体的值。对于文本框和密码框还有文本区域，name 属性必须指定，但是value属性可以不用指定。因为往文本框录入的文字就是value属性的值。当然指定value属性的值也没有问题，这个值会作为文本框或者文本区域默认值被显示。

11.HTML表单提交

<form> 标签中常见的属性定义：

action 属性指定表单组件数据发送的位置，如果没有定义action属性，那么默认提交到当前页面。

method 属性定义表单提交的方式，只有get和post两种提交方式，如果没有指定method属性，默认就是get提交方式。

get 和 post 的区别：

(1)get 提交会将提交的信息显示在地址栏上；post 提交不会将提交的信息显示在地址栏。

(2)get 提交对于敏感信息不安全，因为显示在地址栏；post 提交对于敏感信息安全，因为不显示在地址栏。

(3)get 提交因为显示在地址栏，而地址栏的信息数据量是有限的，所以不可以提交大数据；post 提交可以提交大体积的数据。

(4)get 提交会将信息封装到请求行，也就是 http 请求消息头之前；post 提交会将信息封装在请求体，也就是 http 请求消息之后，请求体和请求头之间是通过空行来进行分隔的。

注意：

对于服务端是 tomcat 服务器，当提交中文时，若是 get 提交，服务端接收到中文数据，会用默认的编码表 ISO88598-1 解码，会出现乱码，所以必须要对该乱码进行一次编码再解码的动作。当向服务端请求时，会将数据封装到一个请求对象 request 中，可以通过该对象的 String name = request.getParamter("user"); 方法获取客户端提交的用户名，但是解码用的 ISO88598-1 会导致 name 出现乱码，可通过 new String(name.getBytes("ISO88598-1"),"GBK"); 该方法解决。若是 post 提交，服务端接收到中文，可以使用编一次再解一次的方式也就是和 get 提交一样的方式完成乱码的解决。同时，它有另一个方式，就是直接使用 request 对象，调用 setCharacterEncoding("GBK"); 方法，只要设置了请求对象中的数据的编码表，那么 String name = request.getParamter("user"); 得到的 name 的值就是直接解码以后的正确数据。那么，为什么 get 提交用 setCharacterEncoding("GBK"); 方法就不行呢？因为该方法只对请求体中的数据进行解码，不对请求头中的数据进行解码。综上所述，以后在进行表单提交时，建议使用 post 提交。

CS/BS架构

CS结构(Client/Server)

(1)开发者需要编写两个端点，一个是客户端程序，一个是服务端程序。

(2)需要在客户机安装客户端。

(3)弊端：客户端维护较为麻烦，机器只要一重装就需要重新安装该该软件，且升级也比较麻烦。到了后期有了一个解决方案->对于升级可以通过网络升级的形式完成。

(4)好处：客户端的出现可以减轻服务端的运算压力，可以让一部分运算转移到客户端来，而且可以在客户端进行用户的个性化配置信息的存储。

BS结构(Browser/Server)

(1)程序员只需要编写服务端，而客户端只需要有浏览器即可，只要装有操作系统的机器都自带浏览器。这是 web 技术的流行导致这种结构的流行。

(2)不用开发客户端，相对省事很多，而且操作也比较简单，只要能上网就可以像浏览网页一样进行功能的使用。

(3)BS运算全在服务端，对于大数据的运算就会很慢。虽然现在也有网页网游，但是是使用 Flash 完成的，它的数据量相对较小，而且 Flash 也是在客户端由浏览器启动 Flash 解析引擎在进行解析执行。

畅想：等云计算普及以后，可以实现分布式计算，所有的运算都交给云端(互联网上的各个服务器)完成，但是必须要解决掉至少两个问题(数据的安全性和带宽)。

HTML中的URL编码

class URLEncode {

public static void main(String[] args) throws Exception {

String str = "你好";

byte[] buf = str.getBytes("UTF-8");

for(byte b : buf) {

System.out.println(Integer.toHexString(b&255));

}

当提交的表单中是非 ASCII 码比如中文的时候，浏览器会用默认的编码方式(UTF-8编码表)对中文字符进行编码后再提交出去，提交过程当中，为了保证数据的原样性避免传输给对方后解析出错，每一个中文字符会被 UTF-8 编码成三个字节，然后把每三个字节进行十六进制的转换，紧跟着为了区分每一个字节又进行了字节的分隔(用%分隔)，URL 的特点在于其会在每一个十六进制数之前补上四个零使之成为单个字节(一个字节=八位的二进制数=两位的十六进制数)，补完以后就成为了一串连续的 ASCII 码(所有的码表都支持 ASCII 码都可以将其解析)。所谓的 URL 编码就是将文字获取其对应的编码后将其编码的十六进制转换成 ASCII 码。

12.HTML<base>标签

<base> 标签为页面上的所有链接规定默认地址或默认目标。

<base> 标签的 href 属性指定网页中所有的超链接的目录，可以是本地目录也可以是网络目录。

<base> 标签的 target 属性指定打开超链接的方式。如属性值 _blank 表示所有的超链接都用新窗口打开显示。

13.HTML其它标签

<pre> 标签可定义预格式化的文本，被包围在 <pre> 标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体，一个常见应用就是用来表示计算机的源代码。

<marquee> 标签是唯一一个能让页面的数据动起来的标签。

<p> 段落标签->段落与段落之间有一个空行。

<div> 标签可以把文档分割为独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联；如果用 id 或 class 来标记 <div> 标签，那么该标签的作用会变得更加有效；<div> 标签是一个块级元素，这意味着它的内容自动地开始一个新行。

<span> 标签被用来组合文档中的行内元素。

<div> 标签和 <span> 标签的异同点：

1)相同点：<div> 标签和 <span> 标签都是用来封装区域用的；要知道 HTML 的每一个标签都有其自己特殊的含义，都有其自己特定的应用场景；如果现在只想要用标签封装一片数据而不想这些标签具备特定的含义，只想把数据封装完按照某一种方式去操作而不需要这些标签具备特定的含义，这个时候就可用到 <div> 标签和 <span> 标签。

2)不同点：<div> 标签封装的区域是一行数据，其结束后面会自动地开始一个新行；<span> 标签封装的区域是一行中的某一部分数据，其结束后面不会自动地开始一个新行。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML