2024年1月24日发(作者：)

网页设计内容·信息管理学院学习小组专用

第一节：HTML重点内容

第一部分：网页内容

1.设置文字大小(n的有效数字是1——7)：文字

2.标题元素：（n的有效数字是1——6）标题文字 【对齐方式：left center right justify】

3.文字的加大与缩小：加大的文字 缩小的文字

4.设置网页字体：（注意：字体名称为计算机里安装的字体，如宋体、隶书、楷书等）文字

5.设置字体的颜色：（颜色的表示：颜色名称和RGB颜色数值。使用RGB必须在十六进制组合前加上“#”字符。）

文字

6.粗体与斜体：加粗的文字 倾斜的文字 加粗的文字 倾斜的文字

7.上标与下标：（用于数学公式和化学分子式）上标文字 下标文字

8.删除线与下划线：(注意：删除线可以简写为删除线.)

删除线 下划线 删除线 插入线

9.开始是一个新的段落：

一段文字

10.文字的居左右中：

文字

11.设置段落的文字方向：

文字

dir的属性值为ltr（从左至右），rtl（从右至左）

12.水平线：

13.预定义格式：

带格式的文字

14.设置文字闪烁： 闪烁的文字 (注意：在IE浏览器中不支持该元素！)

15.滚动文字：

Width=“宽度” >滚动的文字

16.背景颜色：网页内容

17.背景图片：网页内容

18.网页边距：

19.设置网页编写者身份说明：（在meta里设置什么信息，可以有编写者自己发挥。）

20.增加搜索引擎的命中率：①

②

21.限制搜索引擎的搜索行为：

22.常用的HTTP头信息：（注意：HTTP头信息通常在meta元素的HTTP-equiv属性里设置。）

①网页在2010-1-1 12：00：00过期：

②网页30秒后自动跳转到

③网页30秒后自动刷新：

④网页为纯文本型或HTML型，使用UTF-8的编码：

⑤禁止浏览器从本地计算机的缓存中阅读网页内容，用户不能脱机浏览：

⑥如果网页过期，则将存盘的cookies删除：< meta http-equiv=“set-cookies” content=“coookievalue=xxx;expires=

fri,1 JAN 2010 12:00:00 GMT;path=/”>

⑦页面将以独立页显示，可以防止别人在框架里调用该页：

⑧网页所使用的语言为中文：

23.图片元素：

    1. 列表1
    2. 列表1
      3. 项目1

    3. 列表1
    4. 列表1
      5. 说明1

      „„ „„ „„

24

26

25

- 1 -

网页设计内容·信息管理学院学习小组专用

24.无序列表：Compact：减少无序列表项目之间的距离。Type的值为disc（实圆点）circle（空圆点）square（实方块）

25.有序列表：type的值为A、a、I、i或1. Start：有序列表项目编号的起始数字。

26.定义列表：dd对dt的解释

27.创建表格：

①

„„
创建一个表格，其中的属性有：border、width、height、align、valign、summary、frame（表格显示那几条边框void、above、below、hsides、lhs、rhs、vsides、box、border）、rules（内部边界线none、groups、rows、cols）、bordercolor、bordercolorlight、bordercolordark。

②„„是表格的标题部分，其中的属性有：align、valign。

③„„设置表头。„„表格的一行。„„一个单元格。

④单元格跨列：;单元格跨行：

⑤注意：表格、行和单元格的背景颜色在IE浏览器里显示不出来。

28.创建框架：

28.1 垂直框架：„„

28.2 水平框架：„„

28.3 框架属性：frameborder=“0”隐藏边框（可用于frameset 、frame ）；宽度border；颜色bordercolor；

滚动条scrolling=yes，no，auto；固定框架noresize；框架页边界marginwidth，marginheight

28.4 框架中的超链接：参照第二部分锚链接。

28.5 嵌入式框架： 其属性参照28.3

29.在html里插入多媒体：

【1】插入图片：见23.

【2】插入声音：

【3】插入视频：

第二部分：HTML中的超级链接

1. 超链接的五个部分：目标地址、连接对象、标题说明、目标窗口及锚。

2. 超链接元素：超链接文字或插入图片元素

3. 设置超链接的打开窗口

Target值

_Parent

_Blank

_Self

_Top

目标窗口打开的方式

在上一级窗口打开，常在分帧的框架页面中使用

新建一个窗口打开

在同一窗口打开，与默认方式相同

在浏览器的整个窗口打开，将会忽略所有的框架结构

4. 链接网站虚拟目录里的默认网页：单击输入默认网页

5. 链接网页在上级目录下：单击输入默认网页

6. 创建本页命名锚链接：

第一步，在要让用户跳转到的区域里输入 文字

第二步，创建一个跳转命名锚的超链接 链接文字

7. 链接到其他网页上的指定位置：

第一步，在目标网页上设置好命名锚 锚文字

第二步，在当前网页上设置好超链接 超链接文字

8. 设置超链接的tab顺序 超链接文字 【注意：n=0——32767】

9. 设置超链接的快捷键 超链接文字

10. 注意事项：①两个超链接嵌套有用的只有里面那个。②在超链接元素里包含了font元素后，link、vlink、alink这三种属性就失效了，只会显示font元素里指定的属性。③上一条反过来也成立。

第三部分：HTML中的表单

1. 表单元素：

„„

2. 列表框基本语法：

3. 其他应用： ① 分组

描述内容

② 多行下拉列表：

④设置选中状态：只需在option中加上selected

4. input元素的type属性值【input type=“”】

表单控件

单行文本框

密码框

单选框

复选框

文件选择框

普通按钮

提交按钮

清除按钮

图片按钮

隐藏域

Type属性值

Text

Password

Radio

Checkbox

File

Button

Submit

Reset

Image

Hidden

第二节：CSS+DIV布局

一．仔细分析和规划页面结构

结构位置

标志和站点名称

主页面内容

站点导航(主菜单)

子菜单

搜索框

功能区(例如购物车、收银台)

页脚(版权和有关法律声明)

Div定义模式

二．XHTML 下css+div 布局总结

xml (extensible Markup Language)的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应用在web 上，也可 以应用在任何地方。标准称为可能。

XHTML 是The Extensible HyperText Markup Language 可扩展标识语言的缩写。在HTML4.0 的基础上，用XML 的规则对其进行扩展，得到了XHTML。它实现HTML 向XML 的过渡。

CSS 是Cascading Style Sheets 层叠样式表的缩写。纯 CSS 布局与结构式XHTML 相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

1)为页面添加正确的DOCTYPE

DOCTYPE 是 document type 的简写。主要用来说明你用的XHTML 或者HTML 是什么版本。浏览器根据你

DOCTYPE 定义的

DTD(文档类型定义)来解释页面代码。

XHTML1.0 提供了三种DOCTYPE 可选择：

(1)过渡型（Transitional ）--使用非常普遍。

1.0 Transitional//EN" "/TR/xhtml1/DTD/">

(2)严格型（Strict ）

Strict//EN" "/TR/xhtml1/DTD/xhtml1 -">

(3)框架型（Frameset ）

- 3 -

网页设计内容·信息管理学院学习小组专用

Frameset//EN" "/TR/xhtml1/DTD/">

2)设定一个名字空间（Namespace）

直接在DOCTYPE 声明后面添加如下代码：

一个namespace 是收集元素类型和属性名字的一个详细的DTD，namespace 声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

3)声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML 文档都必须声明它们所使用的编码语言。代码如下：

这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

4)用小写字母书写所有的标签

XML 对大小写是敏感的，所以，XHTML 也是大小写有区别的。所有的XHTML 元素和属性的名字都必须使用小写。否则你的

文档将被W3C 校验认为是无效的。例如下面的代码是不正确的：

5)为图片添加 alt 属性

为所有图片添加alt 属性。alt 属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对 纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了 alt 属性，代码才会被W3C 正确性校验通过。注意的是我们要添加有意义的alt 属性，象下面这样的写法毫无意义：

正确的写法：

6)给所有属性值加引号

在HTML 中，你可以不需要给属性值加引号，但是在XHTML 中，它们必须被加引号。还必须用空格分开属性。

例：

这也是不正确的

7)关闭所有的标签

在XHTML 中，每一个打开的标签都必须关闭。空标签也要关闭，在标签尾部使用一个正斜杠 "/"来关闭它们自己。例如：

8)收藏夹小图标

例如：首先制作一个 16x16 的icon 图标，命名为，放在根目录下。然后将下面的代码嵌入head 区：

9)用CSS 定义元素外观

用 css 布局的一个好处是可以批量对页面进行修改，它能将文档结构和表现层分离开来，减轻工作量和服务器的负荷，增加站点的扩展能力和应用。

css 是不区别空格和大小写的，下面是一些基础的归纳

(1)颜色值

颜色值可以用 RGB 值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子 color:#FF0000。如果十

六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。

(2)定义字体 web 标准推荐如下字体定义方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有 Lucida Grande 字体，文档将被指定为 Lucida Grande。没有的话，就被指定为Verdana 字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；

Lucida Grande 字体适合Mac OS X；

Verdana 字体适合所有的Windows 系统；

Lucida 适合UNIX 用户

"宋体"适合中文简体用户;

如果所列出的字体都不能用，则默认的 sans-serif字体能保证调用;

(3)群选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：

p, td, li { font-size : 12px ; }

(4)派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，例如这样：

- 4 -

网页设计内容·信息管理学院学习小组专用

li strong { font-style : italic; font-weight : normal；}

就是给 li下面的子元素 strong定义一个斜体不加粗的样式。

(5)id选择器

用CSS 布局主要用层"div"来实现，而 div 的样式通过"id选择器"来定义。例如我们首先定义一个层

然后在样式表里这样定义： #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定义的 id名称。注意在前面加"#"号。

id选择器也同样支持派生，例如： #menubar p { text-align : right; margin-top : 10px; }

这个方法主要用来定义层和那些比较复杂，有多个派生的元素。

(6)类别选择器

在CSS 里用一个点开头表示类别选择器定义，例如： .14px {color : #f60 ;font-size:14px ;}

在页面中，用 class= "类别名"的方法调用： 14px 大小的字体

这个方法比较简单灵活，可以随时根据页面需要新建和删除。

(7)定义链接的样式

CSS 中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和 a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上语句分别定义了 "链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是 “LVHA”。

(8)组合使用选择器创造精致的设计效果

用漂亮的图案代替普通无序列表前沉闷的黑点。站点 /

先用 css规则告诉类别属性 inventory 的无序列表。

ory{

list-style:disc url(/images/common/) inside;}

它的调用标记:

  • Angelfish(67 items)

  • Angels/Frogfish(35 items)

  • Angelfish(5526 items)

  • Angelfish(15 items)

      • (9)缩写是按照顺时针的顺序 margin:25px 0 25px 0;

      (10)行高 line-height:150% 说明行距为正常的 150%

      10)结构化代码div(division)、id、class

      用它们来书写紧凑的 xhtml，更明智的使用css.

      (1)结构化 id标签，与 class 的有区别： 如果你的属性页面包含了一个 div，它的id为"content",它就不可能有另外一个 div或者其他元素拥有相同的名字。相反，class属性可以在意个页面中一次又一次地使用。

      (2)id的规则

      一个 id 值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。空格和连字符-都是不允许的。

      11）制作好的网站可以到w3c 进行标准校正

      http:

      /css-validator/

      注意：详细内容参见CSS2.0中文手册！

      - 5 -