HTML基础之常用标签

Meta 标签介绍

Meta的属性有两种：name和http-equiv

name属性用于描述网页，对应于content

<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meat标签的http-equiv属性语法格式是：\＜meta http-equiv="参数" content="参数变量值"＞；其中http-equiv属性主要有以下几种参数：

Expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞

Pragma(cache模式)

说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

用法：

＜meta http-equiv="Pragma" content="no-cache"＞

注意：这样设定，访问者将无法脱机浏览。

Refresh(刷新) 说明：自动刷新并指向新页面。

＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

Set-Cookie(cookie设定)

说明：如果网页过期，那么存盘的cookie将被删除。

＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞

Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

＜meta http-equiv="Window-target" content="_top"＞

注意：用来防止别人在框架里调用自己的页面。

6. content-Type(显示字符集的设定)

＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

Pics-label(网页等级评定)

<meta http-equiv="Pics-label" contect="">

说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。

8.Page_Enter、Page_Exit

设定进入页面时的特殊效果

<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=    12)">

设定网页的到期时间

<meta http-equiv="expires" content="0">

关键字,给搜索引擎用的

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

页面描述

<meta http-equiv="description" content="This is my page">

link标签

引用外部css
引用title图片（icon) 例如：

 <link  rel="icon"  href="1.icon">

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312 简单中文
GBK包含全部中文字符繁体
BIG5 繁体中文
UTF-8则包含全世界所有国家需要用到的字符

表格（table）

1.<table>

<table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用<td>...</td>标签定义。

2.<tr>

表格行用<tr>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束

3.<td>

表格的每一行又有若干表格单元格，用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。
border属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

创建表格的基本语法：

<table>

  <tr>

     <td>单元格内容</td>

  </tr>

</table>

属性

属性名	含义	常用属性值
Border	设置边框默认为0 没有边框	单位为px 像素值
Cellspacing	设置单元格与单元格之间的距离	单位为px 像素值默认2px
Cellpadding	设置文字与单元格之间的距离	单位为px 像素值默认2px
Width	设置表格的宽度	单位px
Height	设置表格高度	单位px
Align	设置表格在网页中的对齐方式	Left 左

Right 右

Center 居中

bgcolor | 设置背景颜色| white ,red,green

caption 元素定义表格标题

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<th>标记及其属性

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。

表单(form)

语法：

<form name="form_name" action="url" method="get|post">…</form>

Name ：定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
Fieldset：把表单分组
Legend：分组名称

input控件

<input  type=“控件类型”>

在上面的语法中，<input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标记还可以定义很多其他的属性

textarea控件

如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">

       文本内容

</textarea>

Cols:相当于宽度
Rows:相当于高度

select控件

在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

       ...

    </select>

值得一提的是，在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果

标签语义化

标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：

网页结构合理
有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护

标签语义化（注意事项）

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利
不要使用纯样式标签，如：b、font、u等，改用css设置
需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）