html网页设计总结_html网页设计报告

html网页设计总结由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“html网页设计报告”。

第一章......................................................................................................................................3 1.1 第一节...........................................................................................................................3

1.1.1 第一课 认识HTML.........................................................................................3 1.1.2 第二课 段落及超链接.....................................................................................4 1.1.3 第三课 设置背景图及图片.............................................................................6 1.1.4 第四课 表格.....................................................................................................6 1.1.5 第五课 hr属性、滚动字符、列表.................................................................8 1.2 第二节.........................................................................................................................10 1.2.1 第一课 表单...................................................................................................10 1.2.2 第二课按钮及下拉框.....................................................................................11 1.2.3 第三课 框架，标签iframe...........................................................................13 1.2.4 第四课背景音乐，多媒体.............................................................................14 1.3 第三节c...................................................................................................................15 1.3.1 第一课 了解c.............................................................................................15 1.3.2 第二课 属性...................................................................................................15 1.3.3 第三课 样式表的三类应用方式...................................................................17

第一章

1.1 第一节 1.1.1 第一课 认识HTML 1.html：超文本标记语言

网页又称WEB页面

2.html：包括文字，表格，图片，声音，视频.以及各种功能按钮 3.首页：进入一个网站第一个显示的页面

4.网页的格式是国际标准组织定义的叫做W3C.具体标准是HTML，标记语言格式

5.标记的基本语法： 6.新建一个网页：先新建文本文档，然后把后缀名改成“***.html”即可

7.html文件的后缀名：***.html或***.htm 用html语言编写的文档就是html文档，也常被称为“静态网页”文件

8.html标记语言规定：（1）html标签必须是成对出现

（2）html标签不区分大小写 9.常用标签

加粗 斜体下划线换行 下标上标 水平线标题 10.font字体标签 “”>字体内容 Face:字体的风格

size：设置字体的大小 11.当开始标签与结束标签中间有内容时使用 内容 当开始标签与结束标签中间没有内容时使用 例： 1.1.2

1.

段落标签 第二课 段落及超链接

多个段落之间会自动换行，并且每个段落中间会空一行。

行级层标签：

多个span之间没有换行。

块级层标签：

多个div之间会自动换行，但是没有空行。

预格式化段落标签：

在代码写的内容，在显示时完全相同。2.特殊符号的处理：

空格：

>:

> 3.属性：

对标签的描述称为属性。

属性的说法:

属性的名称=“值”

属性所写的位置：要写到开始标签的里面，每个属性之间用空格隔开。

4.标签的属性

bgcolor:设置背景色

text:设置文字的颜色 5.超链接

链接分类：

外部链接：在多个页面之间使用的效果

内部链接（锚链接）：只能在一个页面中的链接

邮件链接：点击一个地址，可以快速的写邮件。6.链接的标签：

标签：

在点击的文字 7.绝对路径 和相对路径

绝对路径：在链接地址中带有盘符的路径称为绝对路径

相对路径：相对于某一个文件夹的路径称为相对路径 8.邮件链接

文字 9.内部链接

书签内容 “#标签a”>单击此处使浏览器调到“标签a” 1.1.3 第三课 设置背景图及图片

1.dw的运行网页的快捷键：f12 2.设置网页的背景图片的属性：background 当路径中出现“../”时，代表是上一级的信息 3.在网页中添加图片

解释： src:图片的路径 width:宽度 height:高度

border:边框的大小(0代表无边框)alt:图片不存在时，显示的文字

1.1.4

1.表格标签： 第四课 表格

表格标签

代表行的标签

代表列的标签 使文字加粗并且居中 解释：

设置行的背景色：bgcolor 设置列的背景色：bgcolor 设置行的边框颜色:bordercolor 2.表格的合并

行合并：在不同行中单元格的合并称为行合并

列合并：在同一行中单元格的合并称为列合并 3.列合并单元格的属性：colspan 行合并单元格的属性：rowspan 4.表格中线的宽度属性：cellspacing 这个属性必须写到table标签中 表格中的文字到表格线的距离：cellpadding 这个属性必须写到table标签中 5.设置表格中文字的位置：

(1)左（left），中（center），右（right）的属性align(2)上（top），中（middle），下（bottom）的属性valign 表格镶嵌：在表格中添加一个表格

1.1.5 第五课 hr属性、滚动字符、列表

1.hr标签的属性

color:可以设置水平线的颜色

width:可以设置水平线的宽度

align:可以设置水平线的位置，左，中，右 2.滚动字符 ：marquee

要滚动的字体

属性：

bgcolor:滚动轨迹的颜色

direction:设置内容滚动的方向

Behavior：设置内容滚动的方式

Height：高度

Width:宽度

scrolldelay：设置二次滚动的时间间隔

Loop：滚动的次数 3.列表

无序列表:列表内容前面的符号是一样的 有序列表:列表内容前面的符号是自动排列的 自定义列表: 自己设置列表内容前面的符号

无序列表的标签:

无序列表内容项的标签：

在无序列表中有一个重要的属性：type

第一个

第八个

type的值有： circle：空心圆

disc：实心圆

square：方块

有序列表的标签:

有序列表内容项的标签：

在有序列表中有一个重要的属性：type

童年

老年

自定义列表的标签：

设置自定义列表的图标标签：

自定义列表内容项的标签:

自定义图标内容 内容

4.热点：

把一张图片分为多个区域进行超链接

1.2 第二节 1.2.1 第一课 表单

1.表单标签：

标签的属性：

id:编号(不能重复)

name:名称(可以重复)

method:数据提交的方式，只有二个值

get:显示的提交数据

post:隐式的提交数据

action:提交的路径 类似于

2.输入标签：

分类：

文本框:

maxlength:在文本框中可输入的最大长度

value：文本框中的默认值

密码框：

单选框：

checked:代表默认选中的选项，值true false

true :选中，false代表不选中。

注意点：要想多个单选框成为一组，必须把name的值设置为相同。

复选框：

1.2.2 第二课按钮及下拉框

1.type=“button” 普通按钮

2.type=“submit” 提交按钮

注意点：当使用提交按钮时，需要把form表单标签中的action属性赋值。3.type=“image” 图片提交按钮

4.type=“reset” 重置按钮

作用：把页面中所有用户输入的内容恢复到

初始状态。

5.type=“file” 上传文件标签（可以选择要上传的内容）

6.type=“hidden” 隐藏内容标签

7.下拉框标签：

值

值

标签的属性：

标签的属性：

陕西省

说明：id是option的编号

value：一般去保持编号如（张三的编号是：s10010）

张三 8.多行文本框：标签

属性：

默认值 1.2.3 第三课 框架，标签iframe 1.iframe的属性

标签：

的属性：

当使用标签时，需要和一起使用。

在 Target:—blank 显示一个新的窗口

—self 显示在同一个窗口

—parent 显示在iframe的前一份文件的窗口

—top 显示整个浏览器

2.框架（混合排列多个窗口）必须写在head里面 “30%，*”>

1.2.4 第四课背景音乐，多媒体

1.插入背景音乐

2.插入多媒体

没有控制条的多媒体

Start：mouseover鼠标滑到文件时播放

Fileopen 打开网页就播放 有控制条的多媒体

volume=“音量” with=“值” hight=“值”> 1.3 第三节c 1.3.1 第一课 了解c 1.c写在中 2.html样式

P{属性：值；属性：值;} 3.类样式

以点开始后面随意起名字 例如：.red 1.3.2 第二课 属性

1.text—align 文本对齐

font—size 字体大小 font—family 字体类型

font—style 字体样式

color设置或检索文本的颜色 背景的属性

Background—color 设置背景颜色 Background—image 设置背景图片

Background—repeat 设置一个指定的图像如何被重复 3.方框属性

Padding—left 设置内容与左边框之间的距离

Padding—right设置内容与右边框之间的距离

Padding—top设置内容与上边框之间的距离

Padding—bottom设置内容与下边框之间的距离 margin-top设置对象的上边距 margin-bottom设置对象的下边距 margin-left设置对象的左边距 margin-right设置对象的右边距 border-style设置边框的样式 border-width设置边框的宽度 border-color设置边框的颜色 4.特殊样式

a：link{color：#ff0000} 未被访问的链接红色

a：visited{color：#00ff00} 已被访问的链接绿色

a：hover{color：#ffcc00} 鼠标悬浮在上的颜色橙色

a：active{color：#0000ff} 鼠标点中激活链接蓝色 1.3.3

1.内嵌样式表 第三课 样式表的三类应用方式

样式规则

2.行内（嵌入）样式表

文字