实训中学到的HTML基础知识（2）

今天是实训的第三天，是正式上课的第二天，今天学习到的知识是HTML里的表单标签和CSS样式表。

一、表单

表单是一个包含表单元素的区域，表单元素允许用户在表单（比如文本域、下拉列表、单选框、复选框等等）输入信息的元素。

form

表单标签

<form>   定义供用户输入的表单

<input>   定义输入域

<textarea>   定义文本域 (一个多行的输入控件)

<label>   定义了 <input> 元素的标签，一般为输入标题

<fieldset>   定义了一组相关的表单元素，并使用外框包含起来

<legend>   定义了 <fieldset> 元素的标题

<select>   定义了下拉选项列表

<optgroup>   定义选项组

<option>   定义下拉列表中的选项

<button>   定义一个点击按钮

<datalist>New   指定一个预先定义的输入控件选项列表

<keygen>New   定义了表单的密钥对生成器字段

<output>New   定义一个计算结果

输入元素

文本域 text

密码字段 password

复选框 checkboxes

单选按钮 radio buttons

提交按钮 submit

属性

value：提交数据到服务器的值（后台程序PHP使用）

name：为控件命名，以备后台程序 ASP、PHP 使用

checked：当设置 checked=”checked” 时，该选项被默认选中

selected：使此选项成为默认选项。

disabled：使此选项无法点击。

style=”display:none”：使此选项不在旧版浏览器中显示。

hidden：使此选项不显示在下拉列表中。

二、CSS样式表

CSS

选择器

标签选择器

HTML标签名(元素)作为选择器名称，如：div 、h1 、p …

类选择器

类(class)用于描述一组标签的样式，class 可以用在多个标签中

ID选择器

ID选择器用于为标有特定ID的HTML标签设置样式

通配选择器

利用 * 为指定范围内的所有标签设置样式

包含选择器

HTML中为父元素(标签)下的子元素设置样式

选择器分组

一组元素设置相同样式，利用逗号分割多个选择器

文本样式

color：设置文本颜色

text-align：设置文本水平对齐方式

line-height：设置文本的行高

背景样式

background-color：设置背景颜色

background-image：设置背景图片

background-repeat：设置背景图片重复方式

repeat 表示背景图片重复（默认值）

no-repeat 表示背景图片不重复

repeat-x 表示背景图水平重复

repeat-y 表示背景图垂直重复

background-attachment：设置背景是否随页面滚动

background-position：设置背景图片位置

left top 左上

left center 左中

left bottom 左下

right top 右上

right center 右中

right bottom 右下

center top 中上

center center 中中部

center bottom 中下

背景样式简写

CSS超链接

状态

a:link – 正常状态，未访问过的超链接状态

a:visited – 已访问过状态，用户已访问过的超链接状态

a:hover – 鼠标放上状态，当用户鼠标放在超链接上时状态

a:active – 点击状态，超链接被点击的那一刻状态

样式

color：字体颜色

background-color：背景颜色

font-size:字体

text-decoration：链接文字下划线的有无

cursor:鼠标形状

default:默认光标

pointer:超链接的指针

wait:指示程序正在忙

help:指示可用的帮助

text:指示文本

crosshair:鼠标呈现十字状

CSS字体样式

字体类型：font-family

大小：font-size

风格：font-style

粗细：font-weight

设置字体属于属性：font