代码改变世界

HTML 4 常用标签有哪些，都有哪些作用

2011-01-05 22:31  闫妍  阅读(2138)  评论(0)  编辑  收藏  举报

一.html框架类标签

1. html -- 定义html文档-- 代表HTML文档的开始.html标签是成对出现的,以<html>开始, </html>结束

  • 属性
    • Common-- 一般属性
    • xml:lang-- 国际化属性
    • xmlns -- 代表xml命名空间
    • dir-- 定义元素(文字)的对齐方式

2.body -- 定义文档体body -- 代表HTML文档的主体 .body标签是成对出现的,以<body>开始,</body>结束

  • 属性
    • Common-- 一般属性

3.head -- 定义文档头信息head -- 代表HTML文档的头信息 .head标签是成对出现的,以<head>开始,</head>结束

  • 属性
    • Common -- 一般属性

4. title -- 定义文档的标题title-- 代表HTML文档的标题 .title标签是成对出现的,以<title>开始,</title>结束

  • 属性
    • Common -- 一般属性

5.<!-- ... --> -- [[html注释]]标签HTML注释的开始使用<!--,结束使用—>.

HTML注释语法 <!--注释的内容—>如：

<!--闫妍的博客链接-->
<a href="http://doubleyan.cnblog.com/">       
   学习</a>  
<!--链接结束-->

二.html图像与链接类标签

1.a -- html链接标签a -- 代表HTML链接.a标签是成对出现的,以<a>开始, </a>结束

  • 属性.
    • Common-- 一般属性
    • accesskey -- 代表一个链接的快捷键访问方式
    • charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8
    • coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
    • href-- 代表一个链接源(就是链接到什么地方)
    • hreflang -- 指出了链接到的页面所使用的语言编码
    • rel-- 代表文档与链接到的内容(href所指的内容)的关系
    • rev-- 代表文档与链接到的内容(href所指的内容)的关系
    • shape -- 使用图像地图的时候可以使用shape指定链接区域
    • tabindex-- 代表使用"tab"键,遍历链接的顺序
    • target-- 用来指出哪个窗口或框架应该被此链接打开
    • title-- 代表链接的附加提示信息
    • type -- 代表链接的MIME类型
  • a,是anchor(锚)的第一个字母

2.img -- html图像标签img-- 代表HTML图像.img标签是单独出现的,<img />

  • 属性:
    • Common-- 一般属性
    • alt -- 代表图像的替代文字
    • src -- 代表一个图像源(就是图像的位置)
    • height -- 代表一个图像的高度
    • width -- 代表一个图像的宽度
  • img,是image(图像)的缩写

三.html文字相关标签

1h -- 定义标题1至标题6 h1, h2, h3, h4, h5, h6-- 文章的标题标签 。h标签是成对出现的,以<h>开始,以</h>结束

  • 属性:
    • Common-- 一般属性

2. p -- html段落标签p-- 段落标签,里面可以加入文字,列表,表格等 。p标签是成对出现的,以<p>开始,以</p>结束

  • 属性:
    • Common-- 一般属性
  • p是paragraph的缩写

3.div -- html层div-- 块标签 。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。

div标签是成对出现的,以<div>开始,以</div>结束

  • 就像span标签一样,和CSS联合起来才能显示出它的威力
  • 属性:
    • Common-- 一般属性

实例

文档中的一个部分会显示为绿色：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

4. strong -- 定义要强调显示的内容strong 。strong标签是成对出现的,以<strong>开始,以</strong>结束

  • 属性:
    • Common-- 一般属性

四.html列表标签

1.ul -- 定义html列表ul-- 代表HTML无序列表 .ul标签是成对出现的,以<ul>开始,</ul>结束 .

  • 每一列使用<li>标签定义,每一列使用一个点作为开头
  • 属性:
    • Common-- 一般属性
  • ul，是unordered lists的缩写，中文"无序列表"的意思

2.li -- 定义html列表内容li-- 代表HTML列表项目 .li标签是成对出现的,以<li>开始,</li>结束

  • 属性:
    • Common -- 一般属性
  • li，是list item的缩写，中文"列表项"的意思

五.html表格类标签

1.table -- 定义html表格table .table标签是成对出现的,以<table>开始,以</table>结束

  • 属性
    • Common-- 一般属性
    • summary-- 代表表格的摘要说明
    • width -- 代表表格的宽度
    • border-- 代表表格边框(此属性应该使用CSS实现)
    • cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
    • cellpadding-- 代表内容填充的宽度(此属性应该使用CSS实现)
  • table，中文"表格"的意思

2.tr -- 定义表格行tr-- 代表HTML表格中的一行 .

tr 元素包含一个或多个 th 或 td 元素。

tr标签是成对出现的,以<tr>开始,</tr>结束

  • 属性
    • Common-- 一般属性
    • align-- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现)
    • valign-- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
  • tr，是"table row"的缩写，中文"表行"

实例

一个简单的 HTML 表格，包含两行两列：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

3.td -- 定义表格列td-- 代表HTML表格中的一个单元格 .

HTML 表格有两类单元格：

  • 表头单元 - 包含头部信息（由 th 元素创建）
  • 标准单元 - 包含数据（由 td 元素创建）

td 元素中的文本一般显示为正常字体且左对齐。

td标签是成对出现的,以<td>开始,</td>结束

  • 属性
    • Common-- 一般属性
    • abbr- 代表表头的简写
    • axis -- 对单元格在概念上分类
    • colspan-- 一行跨越多列
    • headers-- 连接表格的数据与表头
    • rowspan -- 一列跨越多行
    • scope-- 定义行或列的表头
    • align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
    • valign-- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
  • td，是"table data cell"的缩写，中文"表中的数据单元"

实例

一个简单的 HTML 表格，包含两行两列：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

实例

普通的 HTML 表格，包含两行两列：

<table border="1">
  <tr>
    <th>Company</th>
    <th>Address</th>
  </tr>

  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
</table>

六.html表单类标签

1.form -- html表单标签form-- 代表HTML表单 .

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

form标签是成对出现的,以<form>开始,以</form>结束

  • 属性.
    • Common-- 一般属性
    • action-- 浏览者输入的数据被传送到的地方,比如一个PHP页面(dreamdu.php)
    • method -- 数据传送的方法
    • enctype-- 表示将数据发送到服务器时浏览器使用的编码类型

2. input -- 定义一个表单的输入域input-- 代表HTML表单的单行输入域 .input标签是单独出现的,<input />

  • 属性.
    • Common -- 一般属性
    • type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
    • value -- 输入域的值
    • size -- 输入域的长度
    • maxlength -- 输入域最多可以输入文字的长度
    • checked -- 如果是选择型的输入域,代表已经被选择
    • readonly -- 输入域可以选择,但是无法修改
    • disabled-- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    • accesskey -- 表单的快捷键访问方式
    • tabindex-- 输入域的"tab"键遍历顺序
    • src -- 当使用图片来表示按钮时,代表图片的位置(URI)
    • alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)

3.select -- 定义可选择的html表单select-- 选择列表标签 .select标签是成对出现的,以<select>开始,以</select>结束

  • 此标签中的每对option标签代表一个选择项
  • 属性:
    • Common -- 一般属性
    • size -- 选择域的高度
    • multiple -- 可以有多个选择
    • disabled-- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    • tabindex -- 使用"tab"键的遍历顺序

4.textarea -- 定义一个多行的文字输入域textarea-- 代表HTML表单多行输入域 .textarea标签是成对出现的,以<textarea>开始,以</textarea>结束

  • 属性:
    • Common-- 一般属性
    • cols -- 多行输入域的列数
    • rows -- 多行输入域的行数
    • accesskey-- 表单的快捷键访问方式
    • disabled-- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    • readonly-- 输入域可以选择,但是无法修改
    • tabindex-- 输入域,使用"tab"键的遍历顺序

(XHTML1.1的属性集合：

一.原属性 Core

1.xml:space ("default"* | "preserve")

2.class(NMTOKENS)：class属性 -- 用于链接一个样式与HTML元素 。

<div class="dreamdu1">连接div标签与dreamdu1样式<div>
<div class="dreamdu12px dreamdublack dreamdubold">使用空格分开多个样式连接div标签<div>
3.id(ID)id属性 -- 唯一标识一个元素的属性 。
4.title(CDATA）title属性 -- 为链接、图像、表单等HTML元素提供描述性的信息
  • title属性取值:
    • 文字
  • title，中文"标题"的意思

<a href=http://doubleyan.cnblog.com/ title="闫妍的博客">闫妍的博客</a>

二.I18N属性 Internationalization

1.xml:lang (CDATA)xml:lang 属性 -- xml语言声明属性

  • 此属性可以使用在任何XHTML或XML标签上
  • 此属性符合GNU I18N规范
  • 取值:可以参考rfc3066标准

三.事件属性 UI events

1.onclick (Script)

2.ondblclick (Script)

3.onmousedown (Script)

4.onmouseup (Script)

5.onmouseover (Script)

6.onmousemove (Script)

7.onmouseout (Script)

8.onkeypress (Script)

9.onkeydown (Script)

10.onkeyup (Script)

四.样式属性 Style

1.style (CDATA)style属性 -- 定义HTML标签所使用的样式

 

一般属性Common = Core + Events + I18N + Style

私有属性：

1.链接或表单元素等的accesskey属性.accesskey 属性 -- 代表链接的快捷键访问方式

  • 定义了accesskey的链接可以使用快捷键(ALT+字母)访问.
  • 主菜单与导航菜单使用accesskey,通常是不错的选择.
  • 取值:
    • 字母
<a href=http://doubleyan.cnblog.com/ accesskey="a">(按住Alt键)点击键盘上的a按钮，再按回车(IE)就可以直接链接到闫妍的博客.</a>
2.链接的href属性href属性指定了链接的位置,这个位置可以用URI(统一资源标识符)表示.

)