狠狠撸

3.10 表单
3.10.1 表单标记
表单的基本语法及格式为：

3.10.2 文字和密的入码输
使用 <input> 标记的 type 属性，可以在表单中加入表项，并控制表
项的风格。 type 属性值为 text ，则输入的文本以标准的字符显示；
type 属性值为 password ，则输入的文本显示为“●”。
【例 3-30 】
3.10.3 重置和提交
格式为：
<input type="reset" value=" 按钮名 " />
<input type="submit" value=" 按钮名 " />
默认情况下，重置和提交的按钮分别显示为“重置”和“提交查询内
容”。
3.10.4 框和复选单选钮
用 <input> 标记的 type 属性可设置选择钮的类型
属性 value 可设置该选择钮的控制初值，用以告诉表单制作者选择
结果。
用 checked="checked" 表示是否为默认选项。
name 是该控件的惟一标识，同一组复选框或单选钮的名称是一样的
。

3.10.5 选择栏
<select> 标记的格式为：
<select size="x" name=" 选择栏名 " multiple="multiple">
<option value=" 选项值 "> 选项说明 </option>
<option selected="selected" value=" 选项值 "> 选项说明
</option>
…
</select>
【例 3-32 】
3.10.6 多行文本框
格式为：
<textarea name=" 多行文本框名 " rows=" 行数 " cols=" 列
数 ">
多行文本
</textarea>
其中的行数和列数是指不用滚动条就可看到的部分。

第 4 章网表言——页现语 CSS
CSS 是 Cascading Style Sheets （层叠样式单）的简称，更
多的人把它称作样式单。
4.1 CSS 介绍
引入 CSS 的目的就是把结构与样式分离，网页的结构用 XHTML 的
标记定义，网页的外观样式用 CSS 定义。当多个网页采用相同的外
观样式时，只要建立一个定义样式的 CSS 文件，让 XHTML 调用这
个 CSS 文件所定义的样式即可。

4.2 把样式加到网页中的方法
当浏览器读取样式单时，要依照文本格式来读，可以使用 4 种方法把
样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部
的样式单文件和导入多个外部样式单文件。

4.2.1 行内式样
< 标记 style=" 属性 : 属性值 ; 属性 : 属性值 ...">
【例 4-1 】
4.2.2 内嵌一个式样单
<head>
...
<style type="text/css">

</style>
...
</head>

除了在 <style>...</style> 内分别定义各种选择符的样式外
，如果多个选择符具有相同的样式，可以采用组合选择符，
以减少重复定义的麻烦。其格式为：
<head>
...

</style>
...
</head>
【例 4-2 】
【例 4-3 】

4.2.3 接到一个外部式文件链样单
格式为：
<head>
...
<link rel="stylesheet" href=" 样式单文件名 .css"
type="text/css" />
...
</head>
样式单文件的格式为：
选择符 1{ 属性 : 属性值 ; 属性 : 属性值 ; ... } /* 注释内容
*/
选择符 2{ 属性 : 属性值 ; 属性 : 属性值 ; ... }
...
选择符 n{ 属性 : 属性值 ; 属性 : 属性值 ; ... }
【例 4-4 】

4.2.4 入多个外部式文件导样单
导入外部样式单文件是指在嵌入样式单的 <style>...</style> 中插
入多个外部样式单文件。其格式为：
<head>
...

</style>
...
</head>
【例 4-5 】

4.3 新增加的 HTML 扩充标记和属性
4.3.1 class 与 id 属性
1. class 属性
定义带有类选择符的样式说明的格式为：
元素名 . 类选择符名 { 属性 : 属性值 ; 属性 : 属性值 ... }
还有一种用法，在选择符中省略 XHTML“ 元素名”名，可以把几个不同的元素
定义成相同的样式。其格式为：
. 类选择符名 { 属性 : 属性值 ; 属性 : 属性值 ... }
或者
*. 类选择符名 { 属性 : 属性值 ; 属性 : 属性值 ... }
【例 4-6 】
2. id 属性
用 id 选择符定义样式的格式为：
#id 选择符名 { 属性 : 属性值 ; 属性 : 属性值 ... }
“id 选择符名”就是元素的 id 标识，由网页设计者定义。
【例 4-7 】

4.3.2 <div> 与 <span> 定位标记
HTML 的文档结构分为两大类：块级结构与行级结构。
在 HTML 中有 div 和 span 两个标记。
1. <div> 标记
<div> 标记的格式为：
<div id=" 样式名 " align="left|center|right"> 文本、图像或表
格等 </div>
<div class=" 样式名 " align="left|center|right"> 文本、图像或
表格等 </div>
【例 4-8 】
2 ． <span> 标记
<span> 的格式为：
<span id=" 样式名 ">...</span>
<span class=" 样式名 ">...</span>
【例 4-9 】

狠狠撸

网页设计第5节课

More Related Content

网页设计第5节课