我的学习总结

第一章

1.客户机/服务器计算机模式（C/S)   C/S模式开发的系统具有信息共享性好，网络信息传递量小等优点，但不易维护，用户操作界面风格不一样，能够处理的数据类型不易扩展。 2.浏览器/服务器计算机模式   客户端只需一个简单的浏览器，减少了客户端的维护工作量，方便了用户使用。   能够方便的将任何一台计算机网络或互联网连入到企业的计算机系统，成为企业管理信息系统的一台客户机。

3.网页的分类   静态网页   客户端动态网页   服务器端动态网页

4.运行一个完整的Web应用程序所需的最基本的Web服务器，由网页组的Web应用程；存放Web程序并提供网页浏览的服务；解析网页并显示网页给用户。

5.网页的表现形式由CSS定义，网页的行为由JavaScrit和DOM定义

第二章  

1.XHTML：可扩展的超文本语言

2.XHTML文档的扩展名通常是.html,.htm

3.所有的XHTML都有html,head,body组成

4.XHTML元素使用XHTML标记定义，每对定义必须在<>内，标记通常成对出现。

5.定义正文标题h1-h6都用粗体显示，字体大小有h1-h6递减。

6.定义一个段落用元素p:<p></P>

7.定义应用文本用blockquote元素：<blockquote></blockquote>

8.定义列表   有序列表：用元素ol定义   无序列表：用元素ul定义   定义列表：用元素dl定义，由dd和dt构成，dt用来定义列表的名称；dd用来定义列表的具体内容。

9.定义预编排文本用pre元素，可以是文本一模一样的在浏览器中显示。 10.定义分区块文本用元素div 11.span元素可以跨越多个字符或词。

12.特殊字符（实体）    &nbsp;空格    &lt;左尖括号或小于符号    &gt;右尖括号或大于符号    &copy;版权符号    &amp;and符号&    &#151;长破折号

13.用元素a创建超链接，其语法形式：    <a href="目标URL">描述文本</a>

14.在网页中显示图形用<img>标记    <img src="" alt=""/>

15.插入多媒体信息用<object>元素 16.插入表格状数据<table>元素    <th>字体加粗</th>    <tr>行级元素    <td>列    colspan跨列合并    rowspan跨行合并

17.在网页中插入其它网页    <iframe>元素    src是外部网页文件的路径    width，height，内部框架的宽度和高度；    scrolling滚动条 auto自动出现滚动条 no不出现滚动条 yes出现滚动条

18.块级元素和内嵌元素    内嵌元素：下一个元素就显示在该行元素的后续位置 如：span，a, img,iframe,object.    块级元素:下一个元素就显示在浏览器的下一行显示  如：p,div,blockquote,table,ul,ol,dl,fielset,form,h1-h6.

第三章

1.<form>的属性：   accept:可以接收的内容型列表，列表用逗号隔开   accept-charset：使用的字符集列表，列表用逗号隔开   enctype:表单数据的内容类型，及编码类型   name：表单的名称   id：表单名称的唯一标识号

2.action：定义一个URL,指示表单中的数据应该被发送到哪里处理   method：用户控制数据是如何发送到处理程序的。它的有效值有两个：get和post

3.input：用type定义不同控件，包括文本，密码，复选框，单选框，提交和重置按钮   maxlength限制输入字数

4.value：指定用户选定某一个选项时返回的值。

5.checked：当浏览器显示表单时，某个选项是否被选中。

6.当用要提交表单时，浏览器将文件的副本和表单其它数据一起发送给web服务器，使用input元素，令type=“file”   指定<form>的enctype的属性为：form/multipart以允许要上传的文件与其它数据附带在一起传递。   使用method属性为post,不是get。

7.创建下拉列表：   使用<select>元素的name属性给整个列表命名;   使用<option>元素来给每个选项一个唯一的值。   选择多个选项必须在<select>元素中添加muliple属性，通常按住CTRL和ALT键，同时点击列表中的选项。   制定下拉列表中的某个选项已经被选中，只需在<option>元素中设置selected属性就可以了。

8.使用<textarea>元素，并设置改元素的rows和columns属性指定控件的高度和宽度，就可以创建一个多行的文本框。

9.提交按钮：使用<input>元素，设置其type属性为submit，创建一个按钮，   重置按钮：使用<input>元素，设置其type属性为reset，创建一个按钮。

10.label元素：    <label for="相关标记的id">标签文本</label>

11.在文本框增加一个readonly属性，可以防止修改文本内容。    disabled属性可以使输入控件不可用。

12.fieldset和legend元素    fieldset元素被用作表单元素的一个容器，他在被包含的元素周围显示一个细边框的盒子。legend元素放在fieldset元素内部，在盒子上加一个标签。

第四章

1.将CSS引入HTML的方式有三种
（1）.外部样式表
不需要style标签
<link rel=“stylesheet” href=“” />
（2）.嵌入样式表
<style type=“text/css”>
p{}
</style>
（3）.内联样式表
属性名为style
举例:<p style=“”></p>

2.元素选择器

HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器:元素 { 属性: 值; }

3.类选择器

如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。

.类名 {属性：值；}

4.ID选择器

ID选择器只能被引用一次，而类选择器可以被多次引用。

要将一个ID包括在样式定义中，应用一个井号（#）作为ID名称的前缀 

#id名 { 属性: 值;  }

5.伪类和伪元素选择器

选择器:伪类 { 属性: 值; } a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */

a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */

a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

选择器:伪元素 { 属性:值; } p:first-letter {font-size:2em}  /* p元素中内容首字母放大 */

6.复合选择器

复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。

（1）并集选择器

h1,h2,h3,h4,h5,h6{color:red} /* 并集选择器 */
h2.special,.special,#one{font-size:2em}

（2）交集选择器

p.special{color:red}
h3.cls{font-size:2em}
以上选择器匹配
<p class=“special”></p>
<h3 class=“cls”></h3>

（3）后代选择器

p span{ color:blue; } /*注意p和span之间以空格分隔*/

后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的”各级后代“。

7.设置图片边框

（1）.border-width(粗细)：可以使用各种CSS中的长度单位。

（2）.border-color(颜色)：可以使用各种合法的颜色来定义。
（3）.border-style(线性)：可以在一些预先定义好的线性中选择。

8.为不同的边框分别设置样式

一个边框分为四个方向，分别是left(左)、right(右)、top(上)、bottom(下)。可以为这四个方向的边框分别设置边框样式，比如：border-left-style、border-top-width。

9.可以将border的各个值写到一个语句中，用空格分离。比如：border:1px solid red，这个表示边框宽度为1像素，红色的实线。

10.图片缩放

通过width和height两个属性来实现。

img{
 width:50%; /* 相对宽度 */
 height:100px; /* 绝对高度 */
}

11.图文混排

文字环绕

在CSS中主要是通过给图片设置float属性来实现文字环绕的。

img{
       float:left;  /* 图片在文字左边 */
}

12.图片与文字的对齐方式

水平对齐

通过text-align属性来设置。比如在img标记的父标记中设置text-align后，该图片同样能根据设定的值进行对齐

垂直对齐

通过vertical-align属性来实现各种效果的

<p><img src=“1.jpg” style=“vertical-align:text-bottom” /></p>

13.设置背景颜色与图像

设置背景颜色
background-color:#00F

设置背景图片
background-image:url(bg.jpg)

设置背景图片平铺

repeat：水平和垂直方向平铺，默认值。
no-repeat：不平铺。
repeat-x：只沿水平方向平铺。
repeat-y：只沿垂直方向平铺。

14.设置背景图像位置

使用background-position属性

body{
 background-image:url(bg.jpg);
 background-repeat:no-repeat;
 background-position:right bottom;
}
/*

在background-position属性中，设置两个值:
 1.第一个值用于设定水平方向位置，可以选择left(左)、center(中)、right(右)。
 2.第二个值用于设定垂直方向的位置，可以选择top(上)、center(中)、bottom(下)。
除了可以使用固定值外，也可以使用像素和百分比来设定显示位置。

15.设置背景图片位置固定

使用CSS的background-attachment属性可以把背景图像设置成固定不变的效果，使背景图像固定

 background-attachment: fixed;

16.控制表格

表格中<tr>表示行,<td>表示列,<th>表示列标题。
<table>标记有一些HTML属性可以设置表格的基本属性。比如：
cellspacing：列间距
cellpadding：列的内边距
border：表格边框
bgcolor：表格颜色

border-collapse
合并相邻列的边框线
border-spacing
设置列的间距

设置表格的宽度

table-layout
fixed：固定方式
auto：自动方式

16.表格的其他标记

table中还提供了很多标记来对内容进行分类，利用这些标记与CSS结合可以更好的控制表格的样式。
<thead>：表示表头
<tbody>：表示表内容
<tfoot>：表示表尾

制作像文字一样的按钮
使用transparent来设置背景透明
  order设置为0px
制作多彩下拉菜单
  ption标记设置CSS样式
制作只有下划线的输入框
  order设置为0px
  border-bottom

17.创建按钮式超链接

a:link,a:visited{
            color:#A62020;
            padding:4px 10px 4px 10px; /*文字位置*/
            background-color: #ddd;    /*背景颜色*/
            text-decoration: none;
            border-top: 1px solid #eee; /*边框实现阴影效果*/
            border-left:1px solid #eee;
            border-right:1px solid #717171;
            border-bottom:1px solid #717171;
        }
   a:hover{
            color:#821818;
            padding:5px 8px 3px 12px;
            background-color: #ccc;
            border-top: 1px solid #717171;  /*边框变换，实现“按下去”的效果*/
            border-left:1px solid #717171;
            border-right:1px solid #eee;
            border-bottom:1px solid #eee;
        }

18.控制鼠标指针

通过cursor属性可以设置各式各样的鼠标指针样式

body{
 cursor:pointer;
}

19.创建简单的导航菜单

实现横竖转换只需设置float:left即可，同时把宽度取消掉。