第一章：客户端网页编程简介

1、企业应用计算的演变过程：主机/哑终端的集中计算模式、客户机/服务器计算模式、浏览器/服务器计算模式。


2、网页的基本组成：web应用程序、web服务器、客户端浏览器、HTTP网络协议。


3、发送到客户端的网页的四部分组成：
网页的内容、网页的结构、网页的表现形式、控制网页的网页行为。
其中，网页的结构由XHTML定义、网页的表现形式由CSS定义、网页的行为由JavaScript和DOM定义。


4、web服务器和web浏览器的本质。
web服务器的本质上是一个可以提供网页浏览服务的可执行软件。
web浏览器的本质上是一个解析HTML标记，并将其显示在浏览器窗口内的可执行文件。


5、超文本传输协议HTTP是web服务器和web浏览器共同遵守的一套规则和过程。
它使计算机能够通过web交换信息。
HTTP请求分为：请求行、请求头、一个空行和消息体。
HTTP响应分为：状态行、响应头、一个空行和消息体。


6、开发web应用程序的技术分很多种，根据Web服务器解析网页的方式，可将其分为：静态网页、客户端动态网页、服务器端动态网页。


7、web项目的分工：
网页设计师：负责网页的设计、版面布局、图像制作、网页元素颜色搭配等有关设计的工作。
web程序员：则负责客户端脚本或者服务器端脚本的编码工作。


第二章：XHTML基础
1、XHTML文档的扩展名通常是.html或者.htm


2、所有的XHTML文档都有三个文档级元素：html、head、body


3、XHTML包含了几个块级的标记来限定和格式化段落文本。
常见的块级元素有：
<p>、<h1>到<h6>、<blockquote>、<pre>、<ul>、<ol>、<dl>、<div>、<fieldset>、<form>、<hr />、<table>等。
常见的内嵌元素有：
<span><a><img><label><iframe><object>及所有表单输入元素。


4、块级元素与内嵌元素的不同之处。
块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。


5、常用实体有：
空格：&nbsp;
左尖括号<：&lt;
右尖括号>：&gt;
版权符号：&copy;
and/&符号：&amp;


6、超链
(1)创建一个超链
<a href="#">点击</a>


(2)文档中创建锚点
<a href="#firstPage">转到第一页</a>


(3)结合框架的使用
<a href="index.html" target="main">首页</a>
<ifram width="200" height="200" scrolling="auto" frameborder="0" name="main"></ifram>
注意：
frameborder设置边框的宽度（0或者1）
scrolling是否显示滚动条。


7、target 这个属性指定所链接的页面在浏览器窗口中的打开方式，
它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：
_blank：在新浏览器窗口中打开链接文件。
_parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。
    如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
_self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
_top：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。


target=_self     表示在目前窗口或框架里打开链接（默认的）   
  
target=_parent   表示在父窗口或框架里打开链接    
 
target=_top      表示在顶层框架里打开新链接    
  
target=_blank    表示始终在不同的新窗口打开链接    
  
target=_new      表示始终在同一个新窗口打开链接  


8、在页面中插入多媒体信息使用<object>


第三章：表单部分


1、表单的基本结构
<form action="#" method="get|post"></form>
action:表单提交的位置是一个url
method:表单提交的方式
get:在地址栏里会显示名值对（属性名及属性值）。
  ?name=aaa&psd=1234
post:加密后传送


2、HTML中的三个输入控件元素。
input 用来定义文本框、密码框、单选框、复选框、隐藏字段、文本上传控件、提交按钮、重置按钮、普通按钮、图片按钮
select和option 用来定义下拉列表
textarea 用来定义多行文本框


(1)文本框
<input type="text" size="10" maxlength="15" value="输入内容"/>
size:定义文本框的长度
maxlength:定义可输入的文本长度
value:显示在文本框内的文本


(2)密码框
<input type="password" size="10" maxlength="15" value="123" />
size:定义密码框的长度
maxlength:定义可输入的密码的位数
value:显示在文本框内的密码


(3)单选框
<input type="radio" name="aa" id="aa1" checked="checked" />
<input type="radio" name="aa" id="aa2" />
name必须相同,id不同
checked="checked"：默认已经选中


(4)复选框
<input type="checkbox" name="aa" id="aa1" value=" siChuan" />
<input type="checkbox" name="aa" id="aa2" value=" shangHai" />
<input type="checkbox" name="aa" id="aa3" value=" beiJin" />
name必须相同,id不同
checked="checked"：默认已经选中
value="siChuan": 用来说明选项内容


(5)隐藏字段
<input type="hidden" id="e-mail" value="me@mysite.com">
隐藏字段不在浏览器里面显示，但是它在文档源代码中还是可见的。
不应该在此保存敏感数据。


(6)文件上传控件
<input type="file" id="resume" />
<form>中的enctype属性值为：form/multipart 
//允许要上传的文件与其它数据附带一起传递。


method属性必须设置为post


(7)提交按钮
<input type="submit" value="查询" />
value:显示在按钮上的文字


(8)重置按钮
<input type="reset" value="取消" />
value:显示在按钮上的文字


(9)普通按钮
<input type="button" value="点击" />
value:显示在按钮上的文字


(10)图片按钮
<input type="image" src="img/file.jpg" value="submit" alt="查询">
value:用来指明按钮的类型
alt:当图片不显示的时候，所显示的文字


(11)下拉列表
<select name="food" id="food" size="3" multiple="multiple">
  <option value="siChuan" selected="selected">川菜</option>
  <option value="beiFang">北方菜</option>
</select>
size:显示的项目的个数
multiple:可多选
selected="selected":默认已经选择


(12)多行文本框
<textarea rows="10" cols="30" id="comment">请在此输入文本
</textarea>


3、label元素:为表单字段定义一个文本标签
<label for="name">姓名</label>
<input type="text" id="name" />


4、fieldset和legend来设置细线框及标题
<fieldset>
  <legend>个人信息</legend>
</fieldset>


5、设置tab次序、设置键盘快捷键
<input type="text" id="firstName" value="" size="30" tabindex="3" accesskey="F">
tabindex:用于定义当用户按tab键时，输入字段的选择顺序。
accesskey:为输入控件定义一个键盘快捷键。


6、防止改变字段内容、使输入控件不可用
<input type="text" id="oID" size="12" value="x1248" readonly="readonly" />
readonly="readonly":防止改变字段内容


<input type="text" id="price" size="12" value="1000" disabled="disabled" />
disabled="disabled":使输入控件不可用


第四：CSS基础
一、举例写出引入css的三种方式
1、外部链接（写在head当中的）
<link rel="stylesheet" href="css/test1.css"/>


2、嵌入式（写在head当中的）
<style type="text/css" >
   /*样式选择器*/
</style>


3、内联方式
<p style="width:200px;height:200px;background-color:pink;">
   内联方式
</p>


二、举例写出七种选择器
1、元素选择器
h1,p,div {
  font-size:2em;
}


2、类选择器
样式表部分：
.div1 {
   color:red;
}
body中部分：
<div class="div1">实现IT梦想</div>


3、ID选择器
样式表部分：
#span1 {
   background-color:yellow;
}
body中部分：
<span id="span1">
  ID选择器
</span>


4、通配符选择器
样式表部分：
* {
  padding:0;
  margin:0;
  font-size:12px;
}


5、包含选择器
样式表部分：
ul li {
  float:left;
  list-style-type:none;
  border-right:1px solid gray;
}


body部分
<ul>
  <li>首页</li>
  <li>产品介绍</li>
</ul>


6、伪类选择器
样式表部分：
a:link {
  color:pink;
}


a:visited {
  color:blue;
}


a:hover {
  display:block;
  background-color:orange;
}


a:active {
  font-size:200%;
}


7、伪元素选择器
p:first-letter {
  font-size:1.5em;
}
P:first-line {
  font-weight:bold;
}


三、用外部链接的方式来实现此导航条。
首页 | 产品介绍 | 联系我们 |
1、样式表部分：navi.css
ul li {
   float:left;
   list-style-type:none;
   display:block;
   border-right:1px solid gray;
}


2、head中的部分:
<link rel="stylesheet" type="text/css" href="css/navi.css" />


3、body中的部分：
<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品介绍</a></li>
  <li><a href="#">联系我们</a></li>
</ul>


第五章：CSS页面布局基础
1、CSS属性单位：
(1)常用的长度单位有哪些？分别用在哪里？
绝对长度：cm,mm,pt 
相对长度：px(边框),em(文本内容,边距),ex


(2)常用的颜色单位的表示方式有哪些？
百分比：rgb(50%,0,0)
0-255之间的数值表示：rgb(0,0,255)
十六进制数字：#ff00ff
简化十六进制数字：#fff
颜色的英文名称：white
 
2、举例设置元素内容的字体
(1)举例设置字体名称
(2)举例设置倾斜程序
(3)举例设置字体的变体
(4)举例设置字体的字重
(5)举例设置字体的大小
font: italic small-caps bold 2em 宋体; 


3、设置元素内容的文本属性
(1)举例设置文本首行缩进
   text-indent:2em;


(2)举例设置文本对齐方式
   text-align:left | right | center;


(3)举例设置文本修饰方式
   text-decoration:underline;


(4)举例设置行高
   line-height:1.5em;


(5)举例设置字间距
   letter-spacing:2em;


(6)举例设置词间距
   word-spacing:0.5em;


(7)举例空白显示形式 P56
   white-space:pre;


4、设置元素的字体颜色及背景
(1)举例设置字体颜色 
color:red;


(2)举例设置一个背景图片，样式为不平铺(x轴方向平铺)、定位于左上角
background:blue url(img/bg.jpg) no-repeat left top;


5、用嵌入CSS样式的方式来设置树型目录
样式表部分：navi.css
ul li {
   list-style-image:url(img/file.jpg);
   border-right:1px solid gray;
}


head中的部分:
<link rel="stylesheet" type="text/css" href="css/tree.css" />


body中的部分：
<p>
  <img src="fileDiv.jpg">
  <a href="#">产品介绍</a>
</p>
<ul>
  <li><a href="#">产品1</a></li>
  <li><a href="#">产品2</a></li>
  <li><a href="#">产品3</a></li>
</ul>


6、盒模型包括哪些部分？
border,margin,padding,width,height.
这些属性可以以三种方式来设置值。
四个属性值时，代表： 上    右   下  左
三个属性值时，代表： 上    左右 下
二个属性值时，代表： 上下  左右
一个属性值时，代表： 所有方向


外边距margin:围绕在元素边框之外的可选区域。
内边距padding：文本内容到边框之间的可选区域。


<span>等文本类型的内嵌元素，设置顶部和底部外边距不会影响行高，
而设置左、右外边距将会导致内嵌元素的第一个字符之前以及最后一个字符之后保留一定数量空间。


边框border的样式有哪些？
border-style:none;
border-style:dotted;//小圆点
border-style:solid;//直线
border-style:double;//双直线
border-style:dashed;//虚线


7、元素浮动属性：
float:left;   //向左浮动
float:right;  //向右浮动
float:none;   //不浮动


清除浮动：
clear:none;  //允许元素的两边都可以有浮动
clear:left;  //不允许左边有浮动元素
clear:right; //不允许右边有浮动元素
clear:both;  //两边都不允许有浮动元素


8、定位类型position
position:absolute;  
//绝对定位：相对于最近的已定位祖先元素，若没有，则相对于最初包含块。
position:relative; 
//相对定位:相对是父级或相邻的元素。
//原始空间会保留下来。


9、指定裁剪区域
position:absolute;
clip:rect(top right bottom left);


top:从上到下裁去top的长度。
left:从左到右裁去left的长度。


right:从左到右裁出right的长度。
bottom:从上到下裁出bottom的长度。


10、设置元素的可见性
(1)写出display:none;与visibility:hidden;区别，与共同点？
共同点：都可以不显示指定的元素。
区别：前者不保留原有的显示空间，后者保留原有的显示空间。


(2)如何将块级元素转化为字符级元素？
display:inline;


(3)如何将字符级元素转化为块级元素？
display:block;


11、处理溢出
position:absolute;
overflow:visible;  //溢出区域可见
overflow:hidden;   //溢出区域不可见
overflow:scroll;   //溢出区域出现滚动条


12、z-index:8;
值越大，显示的位置越靠前


13、优先级
内联式>嵌入式>外部样式>用户浏览器方式
内联样式>id选择器>类选择器>元素选择器/伪元素选择器>通配符选择器




第六章： WEO及基于Web标准创建Web界面


1、Web标准是一系列标准的集合，
除了网页内容外，网页主要由三部分组成：结构、表现和行为。
对应的标准也分三方面：
结构化标准语言主要包括XHTM和XML，
表现标准语言主要包括CSS，
行为标准主要包括对象模型W3C DOM、ECMAScript等。


2、在网页编程时，将网页的各个部分分别用不同的Web标准技术实现，体现了网页开发中结构、表现形式和行为分离的思想。


3、通过W3C的校验器，我们可以对XHTML网页和CSS进行验证。


4、XHTML1.0 提供了三种DOCTYPE可选择：
(1)过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
(2)严格型
(3)框架型


5、搜索引擎搜索结果排名有两种方法：一个是自然排名，一个竞价排名。
自然排名是使用搜索引擎优化技术，提高网络自然排名。
竞价排名是按点击付费用，给钱的关键词获得流量。


6、搜索引擎是获得网站网页资料，能够建立数据库并提供查询的系统。
(1)按工作原理不同分为：全文搜索引擎和分类目录。
典型的全文搜索引擎有：google,百度。
典型的分类目录有：雅虎中国，搜狐、新浪、网易分类目录、网址之家、hao123等。
(2)特点：
全文搜索引擎依靠软件进行，数据库的容量非常庞大，查询结果往往不够准确。
分类目录依靠人工收集和整理网站，能够提供更为精确的查询结果，收集的内容非常有限。
(3)一般对全文搜索引擎的查询称为搜索“所有网站”或“全部网站”，比如Google全文搜索。
对分类目录的查询称为搜索“分类目录”或搜索“分类网站”，比如新浪搜索和雅虎中国搜索。


7、SEO是一种让网站在百度、谷歌、雅虎等搜索引擎获得较好的排名从而赢得更多潜在客户一种的网络营销方式。


8、SEO分为站外SEO和站内SEO
(1)站外SEO:是指外部站点对网站在搜索引擎排名的影响。脱离站点的搜索引擎技术。
比如：反向链接（外部链接）。
(2)站内SEO:是指通过对网站网页进行相关的优化，提高在搜索引擎上的排名，最终提升网站的综合能力的一种技术。
包括：丰富网站关键词、主题网站、站点设计、站点的内部链接、有规律的更新、导出链接、明智的选择域名、每篇文章的主题越紧凑越好、写适宜长度的文章、避免内容重复、目录的数量、提交到搜索引擎。

转载于:https://my.oschina.net/u/1040761/blog/127446