全部博文(26)
2011年(26)
分类: 系统运维
2011-10-11 20:17:21
一、 标签的简单使用
1. 基本构成
2.到,,段落
,
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落一
段落二,下面将换行
段落三,下面有一条水平线
段落四
显示效果如图:
下面是一个命名锚(named anchors)
下面是一个URL(网址)链接
下面是一个按钮
按钮名称">
效果如图:
4. 表单标签
标签 |
描述 |
|
定义供用户输入的表单 |
|
定义输入域 |
|
定义文本域 (一个多行的输入控件) |
|
定义一个控制的标签 |
|
定义域 |
|
定义域的标题 |
|
定义一个选择列表 |
|
定义选项组 |
|
定义下拉列表中的选项 |
|
定义一个按钮 |
例1:
First name:
Last name:
效果如图:(宽度是默认的,貌似是24字符)
注意:input标签还包括密码域、文件域等等。
例2:多行的文本框
1. 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
2. 可以通过cols和rows属性来规定textarea的尺寸,不过更好的办法是使用CSS的height和width属性。
3. 注释:在文本输入区内的文本行间,用"%OD%OA"(回车/换行)进行分隔。
4. 提示:可以通过标签的 wrap 属性设置文本输入区内的换行模式。
显示效果如图:
注意:
(1)里面其他标签都是无效的,比如
。
(2)有一个问题,如果把放在表单之中,提交其内容,换行效果就会丢失。因为form表单中提交的内容会被编码:空格转换成(+),非字母转换成%后面跟ASCⅡ码,回车换行符转义为(%OD%OA)。
例3:
请点击文本标记之一,就可以触发相关控件:
我喜欢小猫 B
我喜欢小狗 A
效果如图:
注意:label中的for属性值要和按钮对应,上例我就是特别将A按钮放在下面一行的。
例4:域集,域的标题
健康信息:
身高:
体重:
显示效果如图:
例5:多选下拉菜单选项
效果如图:
例6:标签定义选项组选项
显示效果如图:
例7:复选框
请选择你喜欢的水果
香蕉
葡萄
荔枝
杨梅
显示效果如图:
5. 列表标签
标签 |
描述 |
|
定义有序列表。 |
|
定义无序列表。 |
|
定义列表项。 |
|
定义定义列表。 |
|
定义定义项目。 |
|
定义定义的描述。 |
例子:
有序列表:
打开冰箱门
把大象放进去
无序列表:
雪碧
可乐
定义列表:
计算机
用来计算的仪器 ...(首字符会自动缩进)
显示器
以视觉方式显示信息的装置 ...
显示效果如图:
6. 表格标签
表格 |
描述 |
|
定义表格 |
|
定义表格标题。 |
|
定义表格的表头。 |
|
定义表格的行。 |
|
定义表格单元。 |
|
定义表格的页眉。 |
|
定义表格的主体。 |
|
定义表格的页脚。 |
|
定义用于表格列的属性。 |
|
定义表格列的组。 |
首先说明:浏览器对thead, tbody, tfoot和colgroup, col的支持不好,所以很少用,希望未来的XHTML版本会提供更好的支持。
例1:
Month
Savings
January
$100
February
$80
Sum
$180
在IE中的效果(height:150px设定无效):
在Firfox中的效果(边框也变了颜色):
例2:
ISBN
Title
Auther
Price
3476896
My first HTML
Zollty
$53
2489604
My first CSS
SD
$47
注意:浏览器对
7. 使用CSS和JavaScript
在HTML里面,有3种方式加入CSS:
(1)内嵌(Inline Style)
(2)内部样式(Internal Style Sheet)
(3)外部样式表(Extenal Style Sheet)
举例如下:
说大话基金汉鼎
减肥的惊魂稍定个
科技大厦分接开关
在HTML中使用JavaScript,举例如下:
document.write("Hello World!")