day4

复习

表单：表单是为数据而存在的！

<form  action=”abc.php”  method=”post”>

<input type=”text”  name=”n1” value=”初始文字”  size=”10”  maxlength=”15” readonly=”readonly” />

<input type=”password” name=”n2” />

<input type=”radio” name=”n3”  value=”1” checked=”checked” /><input type=”radio” name=”n3”  value=”2” />

<input type=”checkbox” name=”n4”  value=”1” checked=”checked” /><input type=” checkbox” name=”n4”  value=”2” />

<input type=”file”  name=”n5” />

<input type=”submit” name=”n6” value=”提交” />

<input type=”reset” name=”n7” value=”重置” />

<input type=”button” name=”n8” value=”按钮” />

<input type=”image” name=”n9” src=”图片地址url” />

<input type=”hidden”  name=”n10 />

<select name=”n11” size=”行数”  multiple=”multiple” >

<option  value=”1” selected=”selected” >文字1</option>

</select>

<textarea  name=”n12”  rows=”5” cols=”10”></textarea>

</form>

框架：

框架标签是用于将“当前窗口”进行瓜分成更小窗口的一种技术。framseset代替body标签，并要使用框架文档类型。

<frameset  rows=”行高度划分”  cols=”列宽度划分”>

<frame src=”第1个小窗口中的网页地址url” border=”0”  scrolling=”no” />

<frame src=”第2个小窗口中的网页地址url”  />

</frameset>

css基本概念：

css是用于这样一个目的： 将网页中的某个（些）标签（元素）的某(些)方面特性设置为某(些)个值。

css的语法基本模式为：

选择器 {  css属性1：值1；css属性2：值2；………  }

所谓选择器，其实就是某种可以对应到网页中的某个（些）标签的语法形式。

css选择器分类：

标签选择器：

一个英文单词{….}

所谓一个英文单词，其实也就是一个应该存在的标签名

类选择器（class选择器）

.类名{…}

<p  class=”类名1”  align=”center”> 啊啊啊啊啊</p>

<img src=”某图片路径”  width=”100”  class=”类名2”  />

<input  type=”text”  name=”name名”  class=”类名3”  />

id选择器：

#id名{…..}

<input  type=”text”  name=”name名”  class=”类名3”  id=”id名” />

特别注释：title,  class,  id就是我们所谓的“通用属性”——即谁都可以用。

通用选择器：

*{….}

伪类选择器：

a:link{…}

a:visited{…}

a:hover{。。。}

a:active{….}

注意：上述４个伪类用于ａ标签通常就必须按上述顺序写。

另外，实际应用中，常常简化为这样：

a{……} 

a:hover{….}

含义是：a连接标签只分“鼠标放上去状态”和“其他状态”

层级选择器：

选择器1  选择器２｛。。。。。｝

分组选择器：

选择器1， 选择器２｛。。。。。｝

文字段落的样式属性

color：设定一个标签中的文字的颜色，颜色值可以使用英文单词，16进制语法和rgb语法：

color: red;    color: #f0fcf8; color:rgb(123, 88, 205);

font-size: 设定文字大小，单位通常为像素（px）—— 一般的商业网站的文字大小通常都是12px。

font-weight: 设置文字粗体（bold）或非粗体（normal）。

font-style: 设置文字斜体(italic) 或非斜体（normal）

font-family：设置文字的字体名字，可以使用多个字体名，中间用逗号分开，表示的含义是：首先使用第一个字体，如果用户电脑中没有第一个，则是用第二个，以此类推。举例：

font-family: 宋体，仿宋，微软雅黑，arial, “Times New roman”;

line-height:设置文字的行高，单位通常也是px，即一行文字所占据的空间高度——行高不是文字的高度。

letter-spacing:设置字符（或字母）之间的间隔距离，中文其实就是“字”的间隔。

word-spacing:设置单词之间的间隔距离——通常只对西方拉丁语系的字符有效。

text-align:设定文字的水平对齐方式。其功能是相当于标签属性中的align属性。但要注意：align作为html属性，其实只在其中的某几个标签中使用，但text-align是几乎所有标签都可以用的。

text-indent: 设定一个段落中的首行缩进距离，单位通常也是px。

text-decoration:设置文字的“修饰线”：下划线（underline）,中划线(line-through)，上划线（overline）,none(无)

vertical-align: 设定文字在一个表格盒子（单元格）的垂直对齐方式：top（顶对齐），middle(中对齐)，bottom(底对齐)

盒子模型初步

盒子是css中最重要的概念。

盒子

首先先建立一个观念： 几乎所有标签其实都是一个盒子——而所谓盒子，无非就是一个“矩形的区域范围而已”。其实所谓网页，无非是一个盒子套一个盒子。

一个盒子有如下一些区域（结构）构成：

边框（border）：一个线型的区域，可以是实线或虚线或其他形状。

外边距（margin）：也叫“边界”，边框线之外的一块空白区域，其含义是“不能放置物体”

内边距（padding）：也叫“补白”，边框线之内的一块空白区域，其含义也是“不能放置物体”

内容区（没有对应的css属性名）：指一个盒子中可以放置“物体”的区域——也就是盒子的主要区域。其中放置的物体可以是普通的文字或其他标签——对应我们之前学的html中的“内容部分”。内容区通常只能设置其宽高属性（ｗｉｄｔｈ，ｈｅｉｇｈｔ）。