HTML标签

标签的定义
Html语言，它的全名应该是：超文本标记语言 (Hyper Text Markup Language)。

如同它的名字所描述的，Html并不是一种编程语言，而是一种标记语言 (markup language)。一般来说，标记语言通常可以分成三类：标识性的、过程性的及描述性的。

Html是目前相对来说使用率极高的一种描述性标记语言，描述性标记语言，它的标签本身作用就是向解释器描述标签内所包含的内容的类型。而正是因为这个原因，现今所有的搜索引擎，它们在对页面做查找时，一般都是按标签检索，这也是为什么之前的搜索引擎无法检索到table标签中的其它内容的原因。

语义化Html标签，其最主要的目的，是让你的页面对于搜索引擎来说更加友好，同时也能让你的网页在出现一些问题时可以方便地阅读并找到问题所在，更容易书写Css代码。一个结构布局清晰，标签使用合理的网页也能让你的后期维护更加方便。

元信息标签属性有两种：name和http-equiv，用法如下：

<!--设置页面关键字--><meta name="keywords" content="（关键字，方便检索，）html，mate"/>

<!--设置页面描述信息--><meta name="description" content="（对网页的描述，方便检索）头部信息测试"/>

<!--设置编辑软件的描述--><meta name="generator" content="编辑软件的名称，hbuilder"/>

<!--作者姓名描述--><meta name="author" content="（作者名字）冀瑞康"/>

<!--设置搜索方式的限制-->

<!--name=robots时，content的四个值all（能搜索当前网页，及其链接网页）、index(能搜索当前网页)、nofollow(不能搜索当前网页链接的网页)、noindex（不能搜索当前网页）、none（不能搜索当前网页及其链接的网页）-->

<meta name="robots"content="all" />

<!--设子网页文字及语言--><!--方式一--><metahttp-equiv="content-type" content="text/html;charset=cp1250" />

<!--方式二--><metahttp-equiv="content-language" content="utf-8" />

<!--设置网页的定时跳转--><!--<meta http-equiv="refresh"content="跳转时间，url=链接地址" />--><metahttp-equiv="refresh" content = "30000000,url=http://www.baidu.com"/>

<!--设置有效期限，过了有效期必须从服务器重新调用--><meta http-equiv="expires" content="Fri,29March 2016 9:41:06 GMT" />

<!--禁止从缓存中调用：以保证数据是最新的--><meta http-equiv="Cache-Control"content="no-cache" /><meta http-equiv="Pragma"content="no-cache" />

<!--删除过期的cookie--><!--到指定的时间删除，content中写的是时间--><meta http-equiv="set-cookie"content="Fri,29 March 2016 9:41:06 GMT" />

<!--强制打开新窗口--><!--很多浏览器没有这个属性，慎用--><metahttp-equiv="windows-target" content="_top" />

<!--设置网页的过渡效果--><!--content=" revealtrans(duration=持续时间,transition=效果编号)"慎用，有的浏览器不支持--><meta http-equiv="Page-Enter" content="revealtrans(duration=4,transition=21)" />

标题文字h1-h6，一个页面有且只有一个h1，写多了搜索引擎会找不到页面真正的标题。特定的语义有不同的标签：

<!--粗体斜体下划线--><strong>粗体</strong>，<em>斜体</em>，<u>下划线</u><!--上标、下标-->a₁=X³

<!--删除文字--><strike>删除文字</strike><s>删除文字</s>普通样式：

<br />i have a dream !!!!<br />

等宽样式：

<br /><code>i have a dream!!!!</code><br />

<samp>i have a dream!</samp>
普通的文字放在p中就好<!--段落格式--><p>欲穷千里目，更上一层楼</p>
<!--换行标记--><br />
<!--pre:保留原始排版方式-->

<!--居中对齐标志--><center>居中对齐</center>

<!--向右缩进标志--><blockquote>锦瑟无端五十弦</blockquote><blockquote><blockquote>一弦一柱思华年</blockquote></blockquote>
网页中的文字设置：

<!--face：设置文字字体-->

<!--size：字号大小是1到7，或者-1到-7，都是参考正常标准设置的-->

<!--color：设置文字颜色-->

<font face="楷体" size="7" color="#CCCCCC">欲穷千里目</font>

3.4 列表标签
列表分成有序列表、无序列表、自定义列表。列表的属性有start、type等。可以嵌套。

<!--无序列表-->

<ul ><li>入门模式</li><li>初级模式</li><li>中级模式</li></ul>

<!--有序列表,type是显示的类型-->

<ol type="a"><li>入门模式</li><li>初级模式</li><li>中级模式</li></ol>

<ol type="I"><li>入门模式</li><li>初级模式</li><li>中级模式</li></ol>

<!--有序列表的起始数值start-->

<ol type="I" start="6"><li>入门模式</li><li>初级模式</li><li>中级模式</li></ol>

<!--定义列表标记-->

<dl><dt>名词1</dt><dd>解释</dd><dt>名词2</dt><dd>解释</dd></dl>

<!--菜单标记-->

<menu><li>无序列表</li><li>有序列表</li> </menu>

<!--目录列表-->

<dir><li>目录列表1</li><li>目录列表2</li></dir>

<!--嵌套列表-->

<dl><dt>赠孟浩然</dt><dd>作者：李白</dd><dd>诗体：五言律诗</dd><dd>吾爱孟夫子，风流天下闻</dd><dt>蜀相</dt><dd>作者：杜甫</dd><dd>诗体：七言律诗</dd><dd>

出师未捷身先死，长使英雄泪满襟</dd></dl>

<font face="微软雅黑"size="4" color="darkblue">轻松一刻：心理测试</font>

<ul>

<li><font face="微软雅黑"size="2" ></font>问题1：你喜欢红色还是绿色：</li>

</ul>

<ol type="a">

<li>红色</li>

<li>黑色</li>

</ol>

</body>

</html>

3.5 超链接标签
超链接标签<a><a/>是最常用到的五个html标签之一，超链接最好使用相对路径。超链接中可以嵌套文字，实现文本超链接，可以嵌套图片，实现图片超链接，可以嵌套任何div。超链接的必写属性href=“某个路径”，最好使用相对路径，不要使用绝对路径。target属性规定跳向的窗口，_parent：再上一级窗口中打开，_blank：新建一个窗口打开，_self：在同一个窗口中打开，_top：在浏览器的整个窗口中打开，会忽略所有框架。href中出现#时表示访问页面中的某一部分，如下：

<!--链接到同一页面的书签-->

<a href="#sectionA">一、 了解需求</a>  

<a href="#sectionB">二、切图</a>  

链接到不同页面的书签<br />

<a href="href2.html#sectionA">一、 了解需求</a>  

<a href="href2.html#sectionB">二、切图</a>  <br />
<a name="sectionA">一、 了解需求</a><br/>
*******
<hr size="4" />

<a name="sectionB">二、切图</a><br />
*****
除此之外，还可以用超链接实现发邮件、文件下载等。
<!--外部链接-->

<!--http/ftp/telent/mailto-->

<br />

<!--下载文件-->

<a href="../Floder/tz.txt">下载文件</a><br />

<!--脚本链接，仅对ie有效-->

<ahref="javascript:window.close()">关闭窗口</a><br />

<!--空链接-->

<a href="#">空链接</a>
3.6 图像
首先来看基本属性：

<!--src：地址，width：长，height;边框：border;水平间距：hspace;垂直间距：vapace-，alt:图像的提示文字-->

<img src="../img/HBuilder.png"width="200" height="300" border="3"hspace="30" vspace="100"/>

着重看一下图像的对齐方式：

bottom：把图像的底部和同行文本的底部对齐

middle：把图像的中部和同行的中部对齐

top：把图像的顶部和文本或图像的最高部分对齐

texttop：把图像的顶部和同行中最高的文本顶部对齐

absmiddle:把图像的中部和同行中最大项的中部对齐

absbottom:把图像的底部和同行中最大项的中部对齐

baseline:把图像的底部和文本的基准对齐

left：使图像和左边界对齐

right:使图像和右边界对齐

如何让图像居中，请参考页面的布局。

在图像上建立热点区域：

<!--建立热点区域-->

<!--shape:形状，coords:坐标-->

<!--shape：rect矩形区域，坐标left、top、right、bottom-->

<!--shape：circle圆形区域，坐标：center-x、center-y、tadius（半径）-->

<!--shape:poly多边形，坐标：顺时针或者逆时针的x、y的值-->

<img src="../img/tjmap.jpg"usemap="tjsmap"/>

<map name="tjsmap">

<area shape="circle"coords="100，100，30" href="../ListFloder/list.html" />

</map>

3.7 表单
<form></form>标签用来创建一个表单，form的属性中处理程序action和传送方法method是必不可少的。

action：属性值是程序或脚本的一个url，定义处理表单的数据脚本或程序；

name：给表单命名，不同的表单此值要有所区别；

method：定义处理程序从表单中获得信息的方式，决定表单收集的数据以什么方式发送到服务器。传送方式有post和get两种，get将表单数据与url一起发送，发送速度快，但是长度有限制；post没有长度的限制，客户端会通知服务器来读取数据，缺点是速度比较慢；

enctype：编码方式，属性值有三种，text/plain：以纯文本的形式传送，application/x-www-form-urlencoded：默认的编码形式，multipart/form-data：MIME编码，上传文件的表单必须选择该项；

target：目标显示方式，属性值同于超链接的。

input是最常用的控制标签，常见的文本域、按钮等都能通过input来实现。Input的type值如下：

text：文字字段，password：密码域，radio：单选按钮，checkbox：复选框，button：不同按钮，submit：提交按钮，reset：重置按钮，image：图形域，也称为图像按钮，hidden：隐藏域，不在页面上显示，只将内容传递到服务器，file：文件域。

text和password都有如下三个属性：

size：文本框在页面中显示的长度，以字符为单位；

maxlength：文本框中最多可输入的字符数；

value：文本框中的默认值

radio和checkbox，需要注意name名相同的表示一系列的，radio只可单选，checkbox可多选。checked表示被选上。

button与submit的不同之处在于，button需要添加属性值onclick=“处理程序”，submit不需要设置onclick属性，在单击时可实现表单内容的提交。

列表/菜单标记：

<!--name：菜单和列表的名称，size：大小，multiple：多选,value：选项值，selected：默认选项-->
<select
id="myselect"
size="5"
multiple="multiple">
<option
value="">北京</option>
<option>天津</option>
<option
selected="selected">河北</option>
<option>山东</option>
</select>

文本域标记：

<!--name="文本域名称" value="文本域默认值"rows="行数" cols="列数"-->
<textarea name="文本域名称" value="文本域默认值"rows="3" cols="10"></textarea>
3.8 表格
基本格式（必写标签）：

<table>

<thead>

<tr><th>..</th><th>..</th></tr>

<tr>…</tr>

…

</thead>

<tbody>

<tr><td>..</td><td>..</td></tr>

<tr>…</tr>

…

</tbody>

</table>

一个表由＜table＞开始， ＜/table＞结束，表的内容由 ＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色都可以控制。表格的水平摆放位置是用align="#" 属性说明的，#为left(左对齐), right(右对齐), center(居中)。水平对齐方式，用align="#"属性说明，#为left(左对齐),
right(右对齐), center(居中)；垂直对齐方式，用valign="#"属性说明，#为top(上对齐), bottom(下对齐), middle(居中)。表格的背景色、背景图片，单元格的背景色、背景图片可变。cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。 表格属性colspan、rowspan

横跨两列的单元格 colspan = 2

姓名	电话
Bill Gates	555 77 854	555 77 855

横跨两行的单元格 rowspan = 2

姓名	Bill Gates
电话	555 77 854
555 77 855

3.9 层标记div
div：为页面分块

span：div的子集，和div一样，无意义

iframe：在浏览器中嵌套子窗口，鉴于Ajax实现了异步加载，此标签慎用，一般跨域时才用。