1、 浏览器
A、浏览器(browser) :万维网(Web)服务的客户端浏览程序。通过HTTP协议与网页服务器通信,并向万维网(Web)服务器发送各种请求,对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。
B、可以使用IETester工具,测试IE浏览器兼容问题(IE6 IE7 IE8共存)。
C、现在常用的浏览器引擎有Trident、WebKit。
2、静态网页与动态网页
A、什么是静态网页
使用HTML,XHTML,XML,CSS,JavaScript,Flash等不需要服务器端运算的程序实现的网页。
B、什么是动态网页
使用ASP,PHP,JSP等需要服务器端运算的程序实现的网页。
3、HTML基本结构
A、<HTML></HTML>
HTML标签放置于HTML文件的头尾,它的作用是告诉浏览器这个文件是HTML文件。
<HEAD></HEAD>
HEAD 标签一般在HTML标签和BODY标签的中间,是用来定义一些头部说明。
<TITLE></TITEL>
TITLE标签是用来定义这个HTML文档的标题,让浏览者访问网页时能够一下子明白网页的相关内容。它将显示在浏览器左上方。
<BODY></BODY>
在<BODY>标签里,可以定义网页的背景色,文字,链接等的颜色,甚至可以调入一些程序执行。在<BODY>和</BODY>中间,是网页的主要内容,是直接呈现给网友的部分。
4、HTML与XHTML
A、XHTML 要求正确嵌套
正确:嵌套元素
<p>Dragon <em>XHTML教程</em>.</p>
不正确:层叠元素
<p>Dragon <em>XHTML教程</p>.</em>
B、元素和属性名必须小写
对于所有HTML元素和属性名, XHTML文档必须使用小写。因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签。
C、对非空元素,必须使用结束标签
在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签。
正确:结束的元素
<p>XHTML教程.</p><p> CSS教程.</p>
不正确:未结束的元素
<p>XHTML教程.<p> CSS教程.
D、属性值必须在引号中
所有的属性值必须在引号中,即使是以数字形式的属性值
正确:在引号中的属性值
<table rows="3">
不正确:不在引号中的属性值
<table rows=3>
E、属性最小化
XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.
正确:非最小化属性
<input checked="checked">
不正确:最小化属性
<input checked>
F、元素必须被关闭
空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>。
正确:结束的空元素
<br/><hr/>
错误:未结束的空标签
<br><hr>
G、用id 属性代替name 属性
HTML 4.01 针对下列元素定义 name 属性:a, applet, frame, iframe, img, 和map。
在 XHTML 中不鼓励使用 name 属性,应该使用 id 取而代之。
正确:
<img src="picture.gif" id="picture1" />
错误:
<img src="picture.gif" name="picture1" />
5、HTML的格式标签
A、<br/>回车,<p>分段。
<center>Dragon</center>居中显示。
h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体。
<b>Dragon</b>粗体。
<font></font>字体标签。
B、URL、超链接
URL表示资源在网络中的地址。
超链接<a href="http://www.cnblogs.com/PBDragon">Dragon</a>。
图片超链接<a href="http://www.cnblogs.com/PBDragon"><img src="http://www.cnblogs.com/PBDragon/logo.gif"/></a>。
C、超链接(续)
"/"表示网站根目录,"../"表示父目录,"../../"表示父目录的父目录。
将<a>的target属性设置为"_blank/"在新窗口中打开超链接。
用name属性为<a>起名,<a name="last">这里是最后部分</a>。这样可以通过<a href="#last">转到..</a>来跳转到某部分。
D、列表、表格
列表:<li>表示列表项。<ul>表示无序排列,<ol>表示有序排列。即在<ul> </ul>中写入<li>可以构成一个无序列表,而在<ol> </ol>中写入<li>构成的是一个有序列表
表格:<table></table>为表格,通过<tr>创建行,<tr>内通过<td>创建单元格,将table的border属性设为0隐藏表格线。
<tr>的属性:align水平对齐,可选left、right、center;valign垂直对齐,可选top、middle、bottom。
<td>的属性:也有align、valign。
注意:子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父标签的属性。
6、表单
A、form标签用于为用户输入创建 HTML 表单。
表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。
B、form的必要属性action
规定当提交表单时,向何处发送表单数据。
C、form的可选属性accept 规定通过文件上传来提交的文件的类型。
accept-charset服务器处理表单数据所接受的字符集。
enctype规定表单数据在发送到服务器之前应该如何编码。
method 以get、post方法发送表单数据。
name规定表单的名称。
Target 以_blank、_parent、_self、_top 规定在何处打开 action URL。
D、input标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
E、input的type属性可选button、checkbox、file、hidden、image、password、radio、reset、submit、text 元素类型。
F、select 元素可创建单选或多选菜单。
当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。
如选属性:disabled 规定禁用该下拉列表。
multiple 规定可选择多个选项。
name 规定下拉列表的名称。
size 规定下拉列表中可见选项的数目。
option 元素定义下拉列表中的一个选项(一个条目)。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。
如选属性:disabled规定此选项应在首次加载时被禁用。
label定义当使用 <optgroup> 时所使用的标注。
selected 规定选项(在首次显示在列表中时)表现为选中状态。
value定义送往服务器的选项值。
G、TextArea标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
必需的属性:
cols number 规定文本区内的可见宽度。
rows number 规定文本区内的可见行数。
可选的属性:
disabled规定禁用该文本区。
name规定文本区的名称。
readonly规定文本区为只读。
H、label标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
7、CSS样式表
CSS(层叠样式表)用于美化页面,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS有以下三种方式来插入样式:
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
8、DIV和SPAN
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理。Div是将内容放到一个矩形的区块中,会影响布局。
Span:只是把一段内容定义成一个整体进行操作,不影响布局显示。
9、CSS常见样式
1、CSS计量单位:CSS中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。常见:width:20px。
2、background-color:Red;背景颜色;color:文本颜色。
3、border-style:solid;边框风格,实线,还是dotted(点)等值;border-color:边框颜色;border-width:边框宽度。例子:style=“border-color:Red;border-width:1px;border-style:dotted;”
4、display:元素是否显示,可选值none(不显示)、block(显示为块级元素,此元素前后会带有换行符。)、inline(显示为内联元素,元素前后没有换行符)等。
5、cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接)。
6、LI不显示圆点:LIST-STYLE-TYPE:none;一般设在LI或者LU上。
10、CSS样式选择器
selector有三种方式:HTML selector , CLASS selector , ID selector还有几个扩充的选择器:关联选择器,组合选择器,伪元素选择器。
HTML selector: 选择器 { 属性1:值;属性2:值 }
CLASS selector: .class(类别名称){ 属性1:值;属性2:值;}
ID selector: #id(id选择器) { 属性1:值;属性2:值; }
注:在CSS中少用ID selector,但在javascrip里面会得已广范使用。因为可以根据这个ID值来操纵和定位这个特定的HTML标签。
关联选择器:指用一个空格隔开的两个或更多的单一选择器组成的字符串。
组合选择器:可以对多个标签对采用相同的样式。
11、样式优先级
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
!important > [ id > class > tag ]
使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
4位特殊性标志 [0.0.0.0]
1、内联样式 [1.0.0.0]
2、ID选择器 [0.1.0.0]
3、类,属性,伪类选择器 [0.0.1.0]
4、元素标签,伪元素选择器 [0.0.0.1]
LVHA伪类,样式按LVHA优先级顺序从右至左覆盖,不同的顺序会产生不同的效果。
a:link - 默认链接样式
a:visited - 已访问链接样式
a:hover - 鼠标悬停样式
a:active - 鼠标点击样式