一、名词解释
一、 HTML : Hypertext Markup Language 超文本标记语言
二、 CSS : Cascading Style Sheet 层叠样式表
三、 浏览器:解释和执行HTML源码的工具。
a) 五大浏览器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)
b) 解析引擎：
i. Trident引擎：（就是IE的WebBrowser控件）
ii. WebKit引擎：（开源浏览器内核），现在很多非IE核心的浏览器用的是WebKit引擎。比如遨游3或搜狗的双核、Chrome、Safari. http://www.webkit.org。
四、 各浏览器之间的兼容问题：（CCS和JS的兼容问题）
五、 网站页面分为静态页面和动态页面两种：
a) 静态页面：后缀名为html或htm都是静态页面。有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；
b) 动态页面：动态页面中会包括一些脚本代码。服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。
c) htm、html都是静态页面。
d) asp、aspx、jsp、php等都是动态页面。
六、 开发工具：
a) 记事本、高级记事本(Editplus、Notepad++、UltraEdit)。
b) Dreamweaver、Expression Web(FrontPage的改头换面版) 等快速开发工具，这些工具是给页面美工用的。
c) 开发人员用VisualStudio写html就够了。
七、 HTML标签：
a) 所有内容都在<html></html>标签之内；
b) <head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。
c) <head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；
d) <body></body>是页面的主体，大部分显示内容都定义在这里。
八、 HTML注释：<!-- --> ：
a) 注释不允许嵌套
九、 html与xml相同点：
a) 都是标记语言、注释都是：<!-- 内容、内容 -->
b) 都可以通过dom编程方式来访问
c) 都可以通过CSS来改变外观
十、 html与xml的不同点：
a) xml比html语法要求更严格。
b) 有开始标签必须有结束标签、大小写一致、属性用双引号等。
c) xml侧重于数据存储，html侧重于数据展示。趋势：数据存储与数据表现相分离(html中只有要显示的页面内容，样式都有CSS来控制,html页面中不再有<font>等标签，控制样式都用CSS)。
十一、 html常用标签:
a) h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
b) <br/>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br/>则没有。
c) <center>居中显示.
d) <b>、<strong>粗体，<i>、<em>斜体。<u>下划线。
e) <sub>2</sub>下标，如：H<sub>2</sub>O
f) <sup>2</sup>上标，如：10<sup>2</sup>
g) <font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
h) <hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
i) <pre> 预格式化 保持本色
j) HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格，Nonbreaking space ）。
k) 超链接：<a>标签的一些常用属性：href、title、target、name
l) 插入图片：<img src=“a.jpg”/>
m) 列表：dl→definition list(定义列表)，ul→unordered list(无序列表)， ol→ordered list(有序列表)。
n) 表格：<table>；创建行：<tr>；创建单元格：<td>；表格标题：< caption>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。
- o) rowspan(合并行)、colspan（合并列）
p) <input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。
十二、 meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）
a) <meta name="keywords" content="新闻,娱乐,八卦"/>
b) <meta name="description" content="中国最全的八卦新闻"/>
c) <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
d) <meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。
e) <meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" />三秒钟后重定向到新网页。
f) <meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
g) <meta name="名字" content="值" />关于网页的描述信息。
h) <meta http-equiv="名字" content="值" />模拟http响应头信息。
十三、 表单：
a) <form action="" method>
b) method = Post / Get
c) target：表单提交后返回的窗口
d) encoding：表单的编码方式
e) length：表单所含元素的数量
f) reset()：重置
g) submit()：提交
h) 事件：onreset; onsubmit;
十四、 其他标签：
a) <input type="text" /> type = "radio" "checkbox" "password" "button" "reset" "file" "hidden" "image"
b) <select><option value="123">123</option></select>
c) <textarea rows="10" cols="30"></textarea>
d) Text：size宽度 value值 maxlength最大长度 readonly="readonly" 只读
e) Select：size上下宽度 multiple多选 <option>选项 <option selected="selected">选中 <optgroup label="111"><option>...</optgroup>分组
十五、 框架
-> 基本语法
- i. <frameset cols=“30%, *” rows=“”>
- ii. <frame src=“URL” noresize=“noresize”/>
- iii. <noframes><body></body></noframes>
- iv. </frameset>
- v. noresize设置是否可以拖动框架大小。
-> 内联框架
- i. <iframe src=“URL”></iframe>
<font color="red">hello</font>文字属性修改
Acid 测试兼容
IETester 继承了各个版本的ie
有WebBrowser,控件,基于IE核心,很多都是嵌入了一个webBrowser控件
ie基于Trident, 先很多基于WebKit引擎
去下载*
静态页面,动态页面,
静态页面:html,可以使用Dreamweaver, Expression Web(FrontPage的改头换面)等工具,美工用.vs2010开发用
动态页面:C#,VB,PHP编写实现
选取颜色,最后一项,选择,全屏幕取色
XHTML:比较标准的html语法,开始结束都有很明显的标记
HTML: 中可以不闭合,为了遵循XHTML规范,推荐像XML一样严格关闭.<br/> <img src="1.gif"/>支持dom编程，标记语言，侧重于数据展示
XML:严格规范要求，支持dom编程，标记语言，侧重于数据存储
格式标签:<p></p>创建段落;
" 表示一个空格&代表&进行转义为什么转义字符<>要用<>代替?就是因为<>有特殊含义,标签的定义
<h1~6></h1~6> 标签的使用：要根据具体的语义来使用，不要根据效果来选择。页面的样子要用css来控制。
<center>传智博客</center>居中显示 过时
h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体
<b>a</b>粗体.推荐<strong></strong>(可以表示这个是重点，重点放在strong标签里面，需要加粗使用css)
<font></font>字体标签 <font color="red">红色</font> size是1~7 face="华文行楷"
<font size="30" color="red">红色</font>
http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip 还有URI的概念,比URL大
超级链接: <a href="http://www.rupeng.com">如腾网</a>
<a>中还可以嵌套图片,这样就是点击图片打开链接
<a href="http://www.rupeng.com"><img src="http:www.rupeng.com/forum/templates/ogo.gif"/></a>
相对URL, /表示根目录, ../表示上一级目录, ../../上上级目录, ./或不写为当前目录,站内引用最好使用相对URL
<a>的target属性设定为""_blank"就可以在新窗口中打开超链接"
用name属性为<a>起名字:<a name="Last">这里是最后</a>,这样可以通过<a href="#Last">转到平台</a>来跳到超链接的部分..
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--国内大多习惯在新窗口中打开-->
target=“自定义” 这样打开都在一个窗口中打开，title类似于tooltip的效果，name(锚)
<image src="a.jpg"/> src alt title width height
src指向的文件地址 alt 属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示"点击查看大图"
border属性指定边框,border="0",不显示边框;
with、height属性指定图片的大小,如果不指定则是图片的原始大小.
最好指定with,height,哪怕是原始尺寸大小,因果如果不指定大小,图片会不占位置,图片下载后才能调整大小,会造成页面很乱.
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下witch,height来缩小,因为仍然会下载大图,会使得加载速度很慢.
<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>. unordered list 无序
<ol></ol>有序的列表,用得很少 type=“1|a|A|...”
<tr align="right"><td>姓名</td><td>性别</td></tr>
</table>
<tr>的属性:align,水平对齐,可选值left,right,center; valign,垂直对齐,可选top,middle,bottom
<td>也有align和valign.
(*)还可以使用rowspan,colspan进行单元格的合并,用vs可视化的功能来做就行
(*)表头的td可以用th代替,这样就会表头粗体,居中显示
建议表头用<thead>代替<tr>
<td>也有align和valign,<tr align="right"><td>姓名</td><td align="left">性别</td></tr>,td如果没有设置,默认继承父亲类型
<form>标签为表单标签.如果要把数据提交到服务器,则需要
<input type="" value="" >
type 有bottun(普通按钮),text,checkbox(复选框),image(图片),submit(提交到服务器),file(选取文件),password(密码输入框),radio(单选),reset(重置按钮)
<input type="image" src="">
正确的使用方法:缩略图最好用比较小的图片,原图用大的图
submit:点击submit按钮表单,中文IE下默认按钮文本为 提交查询 ,可以设置value改变
text::size(长度大小控制),maxlength(限制输入长度),readonly(只读)
checkbox::checked(是否被选上),必须有属性值,好的习惯很重要
radio::相同name属性为一组,不同radio设定不同的value值,这样通过取指定的name的值就可以知道谁被选中了
file::form的enctype必须设置multipart/for-data,method属性为POST(*)
image::使用src属性指定图片的地址,用来美化的“登录按钮”
用于创建类似于winform的ComboBox或者ListBox
如果size属性大于1就是listbox,否则就是combobox
<select size=""><!--大于1就是listbox-->
<option value="1">显示的文字</option>
</select>
实现选择是slected,不选择是需要value="-1",编程判断select
<optgroup label="不能选择"></optgroup>实现combobox中不能选择的项,很少用
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
可以设置大小,属性: cols, rows控制列,行
<label for="ma">婚否</label><input id="ma" type="checkbox"/>
<fieldset>
<legend>GroupBox类似效果控件</lengend>
<input type="text"/>
</fieldset>
<meta name=“keywords” content=“新闻,娱乐,八卦”/>
<meta name=“description” content=”中国最全的八卦新闻”/> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。
<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止浏览器缓存页面。
15.css(层叠样式表),描述控件是什么样子
三种使用方法:
内联:style="background-color:Red;border-color:Green".可以描述各种
页面嵌入,在head,的title,后面写
<style type="text/css">
17.<div>
层<div>,表示一个层,可编程,把一堆东西块起来
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动等,div非常强大和常用
position:absolute;绝对定位,
即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移，或者是整个文档。
position:fixed;固定定位,IE6及以下版本不支持。
即完全脱离文档流, 相对于视区进行偏移.
position:relative;相对定位,
这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位
position:static; 默认值 文档流
使用z-index,需要设置position:absolute;z-index大的在上面。
18.span
div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影 响布局,显示 一般只输入文字
css计量单位,css中表示宽度,px(像素),30%(百分比),em(相对单位),.width:20px
background-color:Red 背景颜色
border-style:solid实现,默认无边框 边框风格 border-color 边框颜色 border-width 默认0无边框
display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素先后会带换行符),inline(显示为内联元素,元素前后没有换行符)
cursor,鼠标在元素上是显示的光标图案,可选值: cursor(默认光标), pointer(超链接上的手),text(输入),wait(漏斗,等待),help(帮助)等,cur或者ani格式
LI不显示圆点:LIST-STYLE-TYPE:none 一般设在li或者ul
20.样式选择器
样式适合哪些元素,三种,标签选择器,class选择器,id选择器
class选择器
.warning{background:Yellow;}
.heighlight{font-size:xx-large;cursor:help;}
21.样式优先级
<div class="warning" style="background-color:Blue;">
你好的,点我吧
</div>
style覆盖class,style的优先级比较高
22.标签+class选择器
class可以针对不同的标签,同样的样式名针对不同的样式
input.acc{color:Green;}
label.acc{background:blue;}
....
<input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
23.id选择器
#username
{
font-size:xx-large;
}
<!--id选择器-->
<input id="username" type="text" value="aaaaaaaaa" />
style,class可以同时组合使用
<input id="username" class="acc" style="font-size:xx-large" type="text" value="123123123" />
24.更多选择器
关联选择器
P strong{background-color:Red;}
<strong>sdfsdfsdfdsf</strong>
<p><strong>sdfsdfdsfds</strong></p>
组合选择器
H1,H2.input{backuground-color:Red;border-color:Green;}
25.伪选择器 为标签的不同状态设定不同的样式
A:visited{TEXT-DECORATION: none}
A:active{TEXT-DECORATION: none}
A:link{TEXT-DECORATION: none}
A:hover{TEXT-DECORATION: underline}
不是所有的元素都支持伪选择器。（不同浏览器支持情况不一样,IE7以下不支持input:hover等标签。），目前大多数只在A标签时使用。注意浏览器缓存问题。其他伪类：:first-letter首字母、:first-line首行、:focus获得焦点思考：页面上 部分超链接默认是红色、部分超链接默认是白色。怎么实现？（.myAnchor:link）