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标签是成对出现的,以<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(统一资源标识符)表示.
)