HTML超文本标记语言
- HTML语言是由标签组成的
HTML中的数据会封装在标签对中，因为HTML会通过标签中属性值的改变来对封装数据的操作。
HTML标准格式：
<HTML>
<head></head>
<body></body>
</HTML>- head:网页的一些属性信息，比如标题。
body:网页上显示的数据。
标签特点：对于数据进行封装，就要有开始标签和结束标签。
但也有一些标签只体现单一功能，不需要结束标签，规范中要求标签必须要有结束，所以这样的标签在内部结束。
如：
<br /><hr /><img /><input />
标签格式：<标签名 属性名="属性值" >数据</标签名>
<标签名 属性名="属性值" />
常见标签：
1. 字体：<font size="7" color="#0066ff">数据</font>
特殊部分：如果要在页面显示一些特殊符号，需要进行转译。
HTML常用特殊字符 ：
| HTML原代码 | 显示结果 | 描述 |
|---|---|---|
< |
< | 小于号或显示标记 |
> |
> | 大于号或显示标记 |
& |
& | 可用于显示其它特殊字符 |
" |
“ | 引号 |
® |
® | 已注册 |
© |
© | 版权 |
™ |
™ | 商标 |
  |
半个空白位 | |
  |
一个空白位 | |
|
不断行的空白 |
标题：<h1><h2><h3>...<h6>
2. 列表标签：
<dl>
<dt>上层标签</dt>
<dd>下层标签</dd>
</dl>- 上层标签
- 下层标签
项目符号标签：
<ul>:无序列表标签<ol>:有序列表标签
这两个标签都由<li>标签封装
示例：
<ol>
<li>游戏名称：</li>
<ul>
<li>魔兽</li>
<li>星际</li>
</ul>
<li>游戏内容：</li>
<ol type="a">
<li>攻略</li>
<li>秘籍</li>
</ol>
</ol>- 游戏名称：
- 魔兽
- 星际
- 攻略
- 秘籍
3.图像标签
<img src="路径" alt="图像文字说明" />
4.表格标签：<table>
- 表格由行组成，行由单元格组成。
- 表格中默认一个tbody标签。
<!--cellpadding 属性规定单元边沿与其内容之间的空白。
cellspacing 属性规定单元格之间的空间。
-->
<table border="1" bordercolor="red" width="60%" cellpadding="10" cellspacing="0">
<!--
-->
<caption>我的表格</caption>
<tr>
<!--th是居中加粗，colspan属性规定单元格可横跨的列数。-->
<thc colspan="2">注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="passwd"/></td>
</tr>
</table>
5.超链接：<a href="url">
<a href="www.baidu.com" target="_blank">百度</a>
百度
当被点击后，会启动引擎所对应的解析程序，去查找指定主机。
a.先找本地hosts文件，查找对应域名的IP。
b.若本地不存在对应IP，那么去公网DNS服务器上查找对应IP。
<a href="mailto:[email protected]?subject=haha&[email protected]">联系我们</a>
这是一个邮件发送的超链接，当被点击时，就会出现相关的邮件发送程序，本机默认的是outlook。
超链接的另一个作用：
定位标记
<a name="top">一个位置</a>
<a href="#top">获取那个位置</a>6.表单标签：
该标签是可以和服务器进行交互的。
<form>
表单中的元素：
<input>:该标签因为属性的不同，使用的组件也不同。
type属性：
1.text:文本框，输入的文本可见。
2.password:密码框，输入的文本不可见。
3.radio:单选框，注意：要是他能被选中，必须要给它定义一个name属性，同时，如果有多个单选框且需要只有一个能被当前选中，那么他们的属性值name必须相同。
4.checkedbox:复选框，可以对多个数据进行同时选中。
5.file:文件选择组件，通常用于附件或者文件上传。
6.hidden:隐藏组件，该组件定义的name和value的属性值不会在页面上显示，但是可以提交到服务端。
7.button:按钮组建，自定义一个按钮组件是没有效果的，可以通过注册事件并加入自定义效果。
8.image:图像组件，为了避免提交按钮的单调性，可以通过这个属性定义一个图像形式的提交按钮。
9.reset:重置按钮，将组件中被操作的效果还原到初始状态。
10.submit:提交按钮，将组件中添加的数据提交到指定的目的地。
下拉菜单：<select>
每一个下拉菜单都由option标签封装
<select name="国家">
<option value="none">请选择国家</option>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="english">英国</option>
</select>文本区域：<textarea>
<textarea rows="3" cols="20">
这里就是文本区域
</textarea>表单组件通常需要定义name和value属性，因为要将数据发送给服务端。
服务端只有知道了该name的值才可以对提交的数据进行分别获取。
form标签中常见的属性：
- action：指定数据提交的目的地。
- method：提交方式，两种常用值get和post，get为默认。
get和post区别：
get：get会将提交的数据显示在地址栏
post：不会将数据显示在地址栏
get：提交的数据体积受地址栏限制
post：可以提交大体积的数据
get：对于敏感信息而言，提交在地址栏不安全
post：相对于get安全
get：会将提交信息封装再请求行，也就是http消息头之前
post：会将提交信息封装在数据体中，也就是http消息头之后的空行后
对于服务端而言：
表单提交尽量使用post，因为涉及编码问题。
对于post提交的中文。在服务端可以直接使用setCharacterEncoding(“GBK”)就可以解决
对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的码表如GBK解码。
使用表单组件不一定要定义form标签，只有需要将数据进行想服务端的提交时才需要使用form标签。
补充一些标签：
体标签：
1. <pre> 标签:一个常见应用就是用来表示计算机的源代码。
<pre>
class Hello
{
public static void main(String args[])
{
System.out.println("Hello world!");
}
}
</pre>class Hello
{
public static void main(String args[])
{
System.out.println("Hello world!");
}
}
2.<p>标签：段落标签
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
3.<b>标签：粗体文本标签
<p>这是普通文本 - <b>这是粗体文本</b>。</p>这是普通文本 - 这是粗体文本。
4.标签：斜体文本效果
<p>这是普通文本 - <i>这是斜体文本</i>。</p>这是普通文本 - 这是斜体文本。
5.<u>标签：可定义下划线文本
<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>
如果文本不是超链接，就不要对其使用下划线。
6.<sub>标签：可定义下标文本
这段文本包含 <sub>下标</sub>这段文本包含 下标
7.<sup>标签：可定义上标文本
这段文本包含 <sup>上标</sup>这段文本包含 上标
8.<marquee>标签：实现内容的滚动
<marquee direction="down" behavior="slide">内容</marquee>头标签
1. <base> 标签：为页面上的所有链接规定默认地址或默认目标
<html>
<head>
<base href="f:\Upload\" />
<base target="_blank" />
</head>
<body>
<img src="java.jpg" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"f:\Upload\java.jpg"</p>
<a href="http://www.baidu.com" target="">百度</a>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>`
`
</html>
2.<meta>标签：
name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
例：
<!--表示打开此页面3s后跳转到百度页面-->
<meta http-equiv="refresh" content="3; url=http://www.baidu.com" />当取content-type值：当当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
3.<link>标签：定义文档与外部资源的关系。
<link>标签： 最常见的用途是链接样式表。
<!--两种不同的样式表，针对两种不同的媒介类型（计算机屏幕和打印）：-->
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
media属性：
规定被链接文档将显示在什么设备上。
用于为不同的媒介类型规定不同的样式。
| 值 | 描述 |
|---|---|
| screen | 计算机屏幕（默认）。 |
| 打印预览模式/打印页面。 | |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限带宽）。 |