网页编程笔记.docx

《网页编程笔记.docx》由会员分享，可在线阅读，更多相关《网页编程笔记.docx（34页珍藏版）》请在冰豆网上搜索。

网页编程笔记

网页编程笔记

网站设计师：

1、设计

1）PS网页效果图设计

2）Flash网页动画设计

2、制作

1）html、xhtml、DIV+CSS

2）javascript、jqury——前端

3、创建方式：

记事本、dreamweaver、动态生成

4、语法:

1）<标记符>双标记

2）<标记符/>单标记

3）标记的属性：

<标记属性1=参数1属性2=参数2……>内容<标记/>

说明：

标记与属性、属性之间以空格分隔

属性不分顺序，且属性不是必须的（有默认值）

文档结构：

/*头部信息*/

/*主题部分*/

正文

一、HTML

1.名词解释：

WWW：

WordWideWeb，万维网

W3C：

WorldWideWebConsortium，万维网联盟/W3C理事会。

HTML：

HyperTextMarkupLanguage，超文本标记语言。

CSS：

CascadingStyleSheet，级联样式表。

XHTML：

eXtensibleHyperTextMarkupLanguage，可扩展超文本标记语言。

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】标题内容，标题标记，n的取值范围是1-6。

标题标记内的文本会以加粗方式显示，hn针对的是段落，font标记针对的是任意对象的文字。

【2】align属性。

10.
换行标记：

【1】
换行不分段，在一个段落里面换行。

11.

---

水平分割线：

【1】主要属性：

align属性，分割线的对齐方式；

size属性，像素值和百分比，数值越大，线越粗；

width属性，像素值和百分比，决定线的长度。

其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变。

noshade属性，不带阴影，纯色的实体线。

color属性，颜色。

11.在xhtml中，所有的标签都必须有属性值，如果没有，就是用属性名，例如：

，在html中，可以直接写成。

12.特殊标记：

【1】定义一个块应用：

文本缩进标记

...

属性：

citeurl被引用的地址。

如：

--这里的链接不会显示在网页中-->

引用的正文……

【2】

……居中（在xhtml中已被废弃的标记）。

【3】预格式化：

13.特殊字符（转义符）的输入：

【1】特殊字符转义码

空格：

 

版权号©：

©

注册商标®：

®

引号"：

"

and符号＆：

&

小于符号（＜）：

<

大于符号（＞）：

>

14.网页中信息的排序显示：

【1】列表的标记：

1、无序列表

...

[UnorderedList无序列表]

语法：

列表内容1

列表内容2

……

说明：

...

表示一个列表。

项目符号类型有三种，disc是实心圆圈，circle是空心圆○，square是正方形。

2、有序列表

...

[OrderList（有序列表），li=list]

语法：

列表内容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、定义列表

...

[definelist定义列表]

语法：

标题1

内容1

内容2

标题1

内容1

内容2

说明：

...

定义一个列表；

...

表示一个项目（标题）；

...

表示一个项目（标题）下更详细的内容的解释。

15.图片：

【1】语法：

。

注：

src=source。

【2】网页常用图片格式：

GIF：

最多只能保存256种颜色，支持透明色，支持动画；

JPEG：

不支持透明及动画，颜色可达1670万种。

PNG：

支持透明色，不支持动画，颜色从几种到1670万种。

【3】路径：

绝对路径：

提供文档全部主机名、路径及文档名称。

相对路径：

当前文档开始的路径。

一般都用相对路径，把图片和网页放在同一个文件夹内。

../向上一级目录。

根相对路径：

【4】标记属性：

■src：

图片的路径，URL。

■alt：

规定图片的替代文本（图片无法显示时），文本。

■title：

鼠标悬停时显示的内容，文本。

■width：

设置图片宽度，像素值和百分比，设置成百分比的时候，是相对于浏览器窗口的。

■height：

设置图片高度，像素值和百分比。

■border：

设置图像的边框，像素值。

■align：

对齐方式。

●left：

图片靠左，文字靠右

●right：

图片靠右，文字靠左

●top：

文字垂直居上，文字在右边。

●middle：

文字垂直居中，文字在右边。

●bottom：

文字垂直居下（默认值），文字在右边。

■vspace：

定义图像顶部和底部的空格（垂直边距），像素值。

■hspace：

定义图像左侧和右侧的空白（水平边距），像素值。

16.网页布局思想：

【1】传统的table标记，发展到DIV+CSS。

【2】从大到小排列。

【3】从左到右，从上到下。

17.网页布局之table标记：

【1】基本结构：

●

...定义表格

●...定义表行，是tablerow的缩写，row，“行”的意思。

●...定义单元格，是tabledatacell的缩写，cell，“单元格”。

●...定义标题栏（文字加粗）。

【2】属性：

●，设置表格的背景颜色。

●，设置表格的背景图片。

●，设置表格边框的