html网页设计总结.docx

上传人:b****5 文档编号:5171209 上传时间:2022-12-13 格式:DOCX 页数:12 大小:20.37KB
下载 相关 举报
html网页设计总结.docx_第1页
第1页 / 共12页
html网页设计总结.docx_第2页
第2页 / 共12页
html网页设计总结.docx_第3页
第3页 / 共12页
html网页设计总结.docx_第4页
第4页 / 共12页
html网页设计总结.docx_第5页
第5页 / 共12页
点击查看更多>>
下载资源
资源描述

html网页设计总结.docx

《html网页设计总结.docx》由会员分享,可在线阅读,更多相关《html网页设计总结.docx(12页珍藏版)》请在冰豆网上搜索。

html网页设计总结.docx

html网页设计总结

 

 

目录

1第一章3

1.1第一节3

1.1.1第一课认识HTML3

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第三课框架,标签iframe13

1.2.4第四课背景音乐,多媒体14

1.3第三节css15

1.3.1第一课了解css15

1.3.2第二课属性15

1.3.3第三课样式表的三类应用方式17

1第一章

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”

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

6.表格镶嵌:

在表格中添加一个表格

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

1.hr标签的属性

color:

可以设置水平线的颜色

width:

可以设置水平线的宽度

align:

可以设置水平线的位置,左,中,右

2.滚动字符:

marquee

要滚动的字体

属性:

bgcolor:

滚动轨迹的颜色

direction:

设置内容滚动的方向

Behavior:

设置内容滚动的方式

Height:

高度

Width:

宽度

scrolldelay:

设置二次滚动的时间间隔

Loop:

滚动的次数

3.列表

无序列表:

列表内容前面的符号是一样的

有序列表:

列表内容前面的符号是自动排列的

自定义列表:

自己设置列表内容前面的符号

无序列表的标签:

    无序列表内容项的标签:

  • 在无序列表中有一个重要的属性:

    type

  • 第一个
  • 第八个

type的值有:

circle:

空心圆

disc:

实心圆

square:

方块

有序列表的标签:

    有序列表内容项的标签:

  1. 在有序列表中有一个重要的属性:

    type

  2. 童年
  3. 老年

自定义列表的标签:

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

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

自定义图标内容

内容

4.热点:

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

1.2第二节

1.2.1第一课表单

1.表单标签:

标签的属性:

id:

编号(不能重复)

name:

名称(可以重复)

method:

数据提交的方式,只有二个值

get:

显示的提交数据

post:

隐式的提交数据

action:

提交的路径类似于

2.输入标签:

分类:

文本框:

maxlength:

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

value:

文本框中的默认值

密码框:

单选框:

checked:

代表默认选中的选项,值truefalse

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的属性

当使用

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1