网页编程笔记
网页编程笔记
网站设计师：
1、设计
1）PS网页效果图设计
2）Flash网页动画设计
2、制作
1）html、xhtml、DIV+CSS
2）javascript、jqury——前端
3、创建方式：记事本、dream weaver、动态生成
4、语法:
1）<标记符>双标记
2）<标记符/>单标记
3）标记的属性：<标记属性1=参数1 属性2=参数2……>内容<标记/> 说明：标记与属性、属性之间以空格分隔
属性不分顺序，且属性不是必须的（有默认值）
文档结构：
/*头部信息*/
/*主题部分*/
正文
一、HTML
1.名词解释：
WWW：Word Wide Web，万维网
W3C：World Wide Web Consortium，万维网联盟/W3C理事会。
HTML：Hyper Text Markup Language，超文本标记语言。
CSS：Cascading Style Sheet，级联样式表。
XHTML：eXtensible HyperText Markup Language，可扩展超文本标记语言。
2.参考网页的源代码。右击，查看源文件。
3.HTML不是编程语言，而是一种描述性的标记语言。标记：就是用来描述网页内容的一些特定符号。
4.html标记的语法：标记分为两种，单标记、双标记
<标记符>没有结束的标记—单标记
<开始标记符>—双标记
5.需要注意的：
在xhtml中规定，所有html标记，都要小写
所有的标记，都是要有关闭符号的。如下：
html-------xhtml
------
<标记名称属性= " 属性值">……
所有html都有一个基本结构。
网页的head信息，标识网页文件的头部信息，如标题、搜索引擎关键字等。
6.meta 标记：
meta标记用于定义文件信息，是对网页文件进行说明，便于搜索引擎查找。放置于
之间。用meta设置关键字：
多个关键字用“,”分隔。
设置描述：
设置作者：
设置字符集：
编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。
设置页面定时跳转：里面的2，代表2秒
上面的几个地方需要特别注意：
1.http-equiv之间不能加空格，否则没用，也就是不能写成“http - equiv”！
2.content-type也是一个整体，不能以空格分隔。
7.
标记的详解：【1】
是网页的主体标记。【2】注释的写法：。
【3】
的属性：。上面的边界的单位都是像素。【4】html元素、html标签、html标记都是一样的。
【5】有些html元素，有默认的值，比如margin，它不是直接靠在页面的边缘或顶端的，而是空了一点距离，如果想取消这个可以把leftmargin或者topmargin都设置为0。8.标记语义的应用：
【1】font标记没有语义上的作用。
【2】普通加粗标记：文字内容 普通倾斜标记：文字内容，二者都没有在语义上突出是重点的意思。
【3】语义加强加粗标记：文本内容 语义加强的倾斜标记：文本内容，二者都告诉了浏览器，加粗或倾斜的是重点。
【4】各个标记之间的权限不同，当控制比较重要的内容时，可以用，标题部分，一般都用标记。
【5】下划线文本；删除线文本；上标文本；下标文本，
换行标记。
【6】段落(paragraph)标记
：格式：
……
【7】用适合的html标记，去描述网页内容，这才是网页优化的核心。
9.标题：
【1】
【2】align属性。
10.
换行标记：
【1】
换行不分段，在一个段落里面换行。
11.
水平分割线：
【1】主要属性：
align属性，分割线的对齐方式；
size属性，像素值和百分比，数值越大，线越粗；
width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变。
noshade属性，不带阴影，纯色的实体线。
color属性，颜色。
11.在xhtml中，所有的标签都必须有属性值，如果没有，就是用属性名，例如：
，在html中，可以直接写成
。
12.特殊标记：
【1】定义一个块应用：文本缩进标记
...
属性：cite url被引用的地址。如：
引用的正文……
【2】
【3】预格式化：
13.特殊字符（转义符）的输入：
【1】特殊字符转义码
空格：
版权号?：©
注册商标?：®
引号"："
and符号＆：&
小于符号（＜）：<
大于符号（＞）：>
14.网页中信息的排序显示：
【1】列表的标记：
1、无序列表
- ...
语法：
- 列表内容1
- 列表内容2
……
说明：
2、有序列表
- ...
语法：
- 列表内容1
说明：start属性，表示列表从哪个数字开始，type属性的值有：1、a、A、i、I。也可用上面无序列表的符号。
1 表示编号从阿拉伯数字1开始依次往后。
a 表示小写英文字母开始，a、b、c、d
A 表示大写的英文字母。
i 表示小写的罗马数字，i、ii、iii、iv
I 表示大写的罗马数字，I、II、III、IV
3、定义列表
- ...
语法：
- 标题1
- 内容1
- 内容2
- 标题1
- 内容1
- 内容2
说明：
- ...
15.图片：
【1】语法：。注：src = source。
【2】网页常用图片格式：
GIF：最多只能保存256种颜色，支持透明色，支持动画；
JPEG：不支持透明及动画，颜色可达1670万种。
PNG：支持透明色，不支持动画，颜色从几种到1670万种。
【3】路径：
绝对路径：提供文档全部主机名、路径及文档名称。
相对路径：当前文档开始的路径。一般都用相对路径，把图片和网页放在同一个文件夹内。../向上一级目录。
根相对路径：
【4】标记属性：
■src：图片的路径，URL。
■al t：规定图片的替代文本（图片无法显示时），文本。
■title：鼠标悬停时显示的内容，文本。
■width：设置图片宽度，像素值和百分比，设置成百分比的时候，是相对于浏览器窗口的。
■height：设置图片高度，像素值和百分比。
■border：设置图像的边框，像素值。
■align：对齐方式。
●left：图片靠左，文字靠右
●right：图片靠右，文字靠左
●top：文字垂直居上，文字在右边。
●middle：文字垂直居中，文字在右边。
●bottom：文字垂直居下（默认值），文字在右边。
■vspace：定义图像顶部和底部的空格（垂直边距），像素值。
■hspace：定义图像左侧和右侧的空白（水平边距），像素值。
16.网页布局思想：
【1】传统的table标记，发展到DIV+CSS。
【2】从大到小排列。
【3】从左到右，从上到下。
17.网页布局之table标记：
【1】基本结构：
●
●
●
●
【2】属性：
●
| 的属性： ● | ，设置单元格的宽度。 ● | ，设置单元格的高度。 ● | ，设置单元格的背景颜色。 ● | ，设置单元格的背景图片。 ● | ，设置单元格的水平对齐方式。 ● | ，设置单元格的垂直对齐方式。 ● | ，设置行合并的数目（垂直合并）。 ● | ,设置列合并的数目（水平合并）。 ● | ，设置在单元格中不换行。 【4】合并（延伸）单元格之后，就会有多处的单元格，就要删除。合并单元格，就是删除多余的td。 【5】合并删除td的公式：删除的个数= 合并的个数- 1。 【6】立体表格效果，就是将表格的亮边框颜色（bordercolorlight）和暗边框颜色 （borderclolrdark）对比。 【7】细线表格效果的公式： 将表格自身的border = 0； 给表格设置背景颜色→细线的颜色； 给表格设置单元格之间的距离→线条的粗细。 【8】行（tr）的属性： |
| 之间没有内容时，默认是不显示边框的，如果想看到，可以加上 |
【2】属性值：
align top：标题在表格上方
bottom：标题在表格下方。
21.网页的设计水平：代码精简。省略不必要的代码。
22.表格的结构化：
【1】结构化格式：
【2】直列化格式：
属性值：
align：left，靠左；right，靠右；center，居中。
valign：top，靠上；middle，居中；bottom，靠下。
span：数字，直列数。
bgcolor：颜色值，设置背景颜色。
22.超链接：
【1】语法：
_blank在新窗口中打开。
_self在自身窗口中打开（默认值）。
_parent在上一级窗口中打开，框架会经常使用。
_top在浏览器的整个窗口中打开，忽略任何框架。
【2】超链接的分类：
●内部链接：
●外部链接：
●E-mail链接：
●局部链接（锚点）：
跳转到同一网页或其他文档中的指定位置。用法：
创建锚点：显示内容
链接锚点：显示内容
从当前文档跳转到另一个文档的指定位置：显示内容
●空链接：
就是没有目标端点的链接。格式：显示内容
作用：
设置首页。例如：
把百度设为首页
添加收藏。例如：
●脚本链接：
是一种特殊的链接，当单击设置脚本的文本或图像时，就会执行相应的javascript语句。
常用到的脚本链接：
关闭窗口：关闭窗口
打开窗口：打开窗口 23.HTML表单：
【1】表单的作用是将用户的信息传递给服务器，是客户端与服务器端进行信息交流的途径。
【2】form（表单）标记用于创建一个表单，定义表单的开始与结束。是一个容器。所有表单元素必须在
标记中才有作用。【3】语法：
【4】POST方法可以传递大量信息，GET方式将值附加到请求该页的URL中。适合传递少量信息（默认方式）。
【5】表单元素标记：
●单行文本框：
●密码框：
●单选框：
注意：单选框的name属性要一样，否则无法单选。
●复选框：
●提交按钮：
，定义提交按钮。提交按钮会把表单数据发送到服务器。
●重置按钮：
，定义重置按钮。重置按钮会清除表单中的所有数据。
●列表框：
菜单式：
……
分组：
列表式：
……
具体案例请参见：D:\html\表单标记.htm
●浏览框：
●按钮：
图形按钮：
●多行文本框：
●隐藏域：
●表单外框：
定义围绕表单中元素的边框，legend为fieldset定义标题。
【7】所有表单元素，以input为例，必须包含type属性与name属性！
【8】input标注
label标记，可以点击里面的“男”而达到选中单选框的效果。
24.多媒体元素标记：
【1】FLASH动画的插入：
●语法：
●属性：
src：URL，FLASH文件的路径。
width：像素值/百分比，flash宽度。
height：像素值/百分比，flash高度。
wmode：transparent，使flash背景透明，
title：文本，flash的标题，把鼠标移至上面时显示的提示内容。
【2】滚动字幕：
●语法：
●属性：
direction = "滚动方向"[left，左；right，右；up，上；down，下。]
behavior = "滚动方式"[scroll，一圈一圈绕着走；slide，只走一圈；alternate，来回地走。]
loop = "滚动的循环次数"，若未指定则一直循环（loop = "infinite"）。infinite，无限、无穷。
bgcolor = "背景颜色" width = "宽度" height = "高度"
onMouseOver = "this.stop()" onMouseOut = "this.start()"
scrollamount = "速度值"，数值越大速度越快。
scrolldelay = "延时"，走一步，停一下。
【3】背景音乐的插入：
autostart=true/false，在载入音乐之后，是否自动播放。
loop = "-1"表示无限循环。这种标记好像只有IE能支持，并且无任何播放界面显示。
【4】用来插入音乐：
●语法：
●属性：
autostart = true/false，在载入完成后是否自动播放。
loop = "循环播放的次数"，-1表示无限循环。
hidden = "true/no"，是否隐藏播放界面。
volume = "0-100"，设置音量的大小。
width/height，设置播放器的宽和高。
align，对齐方式。设定控制面板和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。
25.HTML框架：
【1】概述：框架是将浏览器窗口划分为不同的区域，每个区域，可以包含不同的网页，以实现多个网页在同一浏览器窗口中显示。
【2】用框架时不需要写body标记。
【3】语法：
【4】cols，是控制列数及列宽的，有多少列，每列宽度怎样。比如：