文档库 最新最全的文档下载
当前位置:文档库 › HTML CSS JavaScript 网页制作从入门到精通

HTML CSS JavaScript 网页制作从入门到精通

HTML CSS JavaScript 网页制作从入门到精通
HTML CSS JavaScript 网页制作从入门到精通

HTML(Hyper Text Markup Language),是网页超文本标记语言,不是编程语言,而是一款描述性的标记语言,用于描述超文本中内容的显示方式。

HTML基本标记

一个完整的HTML文档必须包括3个部分:一个由元素定义的文档版本信息,一个由定义各项声明的文档头部和一个由定义的文档主体部分。作为各种声明信息的包含元素出现在文档顶端,并且要先于出现。而用来显示文档主体内容。

认识HTML标记

标记:它放在HTML的开头,表示网页文档的开始。

标记:出现在文档的起始部分,标明文档的头部信息,一般包括标题和主题信息,其结束标记指明文档标题部分的结束。

标记:用来指明文档的主体区域,网页所要显示的内容都放在这个区域。

保存:用记事本编辑语言之后,保存的扩展名为.html或.htm

一般用Dreamweaver编写HTML文件

在网页中单击鼠标右键——查看源文件,即可查看代码。

正文

1、HTML头部标记head

语法:……

说明:元素的作用范围是整篇文档。元素中可以有元信息定义、文档样式表定义和脚本等信息,定义在HTML语言头部的内容往往不会直接显示在网页上。

2、标题标记title

语法:……

说明:即页面标题

3、元信息标记meta

3.1设置页面关键字

语法:

说明:在搜索引擎中,检索信息是通过输入关键字来实现的。该语法中,name

为属性名称,这里是keywords.也就是设置网页的关键字属性,而在content中则定义具体的关键字。

3.2设置页面说明

语法:

说明:在content中定义具体的描述语言,页面说明也是为了便于搜索引擎的查找,它用来详细说明网页的内容,页面说明在网页中不显示出来。

3.3定义编辑工具

语法:

举例:

3.4设置作者信息

语法:

3.5设置网页文字及语言

语法:

说明:http-equiv用于传送HTTP通信协议的标头,而在content中才是具体的属性值。Charset用于设置网页的内码语系,也就是字符集的类型,国内常用的是GB码,charset往往设置为gb2312即简体中文。英文是ISO-8859-1字符集。

3.6设置网页的定时跳转

语法: 举例:

网页的定时跳转

20秒后自动跳转

默认时跳转时间以秒为单位,refresh表示网页的刷新。

4、网页主体标记body

4.1网页背景色bgcolor

语法:

举例:

页面背景颜色

4.2网页背景图片background

语法:

举例:

图片的地址可以是绝对的,也可以是相对的,默认的为平铺。

4.3文字颜色text

语法:

在没有对文字的颜色进行单独定义时,这一属性可以对页面中所有的文字起作用。

4.4链接文字属性link、alink、vlink

语法:

举例:

Alink是正在访问的文字颜色,vlink访问后的链接文字的颜色

4.5边距margin

语法:

说明:默认情况下以像素为单位,一般设置为0值,这样页面看上去不会有太多空白。

5、页面注释标记

语法:

说明:插入描述性文本,用来解释该代码或提示其他信息。注释不会显示在浏览器的页面中。

文字与段落标记

1、标题字

1.1标题字标记h

语法:

一级标题

二级标题

……(此处在编写过程中不能省略)

六级标题

说明:该语法中有六个级别的标题,headline6字号最小。

1.2标题字对齐属性align

语法:

举例:

1级标题

2级标题左对齐

3级标题居中对齐

4级标题右对齐

2、文本基本标记

标记用来控制字体、字号、颜色等属性。

2.1字体属性face

语法:……

举例:

说明:P为段落标记

2.2字号属性size

语法:……

举例:

说明:字号1-7的整数,代表字体大小的绝对字号。-4-+4的整数,字体相对于3号放大和缩小的字号。

2.3颜色属性color

语法:……

举例:

3、文本格式化标记

3.1粗体标记b、strong

语法:加粗的文字 (strong的用法同b)

3.2斜体标记i、em、cite(用法同上,略)

3.3上标标记sup

举例:a2+b2=(a+b)2-2ab

翻译:即a^2+b^2=(a+b)^2-2ab

3.4下标标记sub(如,用于化学方程式,用法同上,略)

3.5大号字体标记big、小号字体标记small、下划线标记u(略)

4、段落标记

4.1段落标记p

语法:

段落文字

说明:可以没有结束标记

活用:邪恶使一个人变聪明

4.2换行标记br

举例:连续的多个
标记能实现多个换行。

我们将血流成河铸成的地狱,
命名为了世界。

4.3不换行标记nobr

语法:< nobr>不换行文本

5、水平线

5.1插入水平线hr

语法:


说明:单独一行

5.2水平线宽度width(像素值) 高度size(像素值) 水平线去掉阴影noshade 水平线颜色color 水平线排列align

举例:


6、其他标记

6.1插入空格

语法: 

说明:一个 代表一个半角空格,可多次连续使用此符号。

6.2插入特殊符号

1、图像格式

2.2 图像的源文件src(见照片)

2.3图像的提示文字(见照片)

2.4图像的宽度和高度(见照片)

2.5、2.6图像的边框图像的垂直边距(见照片)

2.7图像的水平间距(见照片)

2.8图像的排列(见照片)

3、图像的超链接(见照片)

超链接1

超链接2

超链接3

超链接4

使用列表

1、认识列表标记

HTML列表共有3种类型:无序列表,项目符号由几个符号构成。有序列表,项目符号由字母或数字进行排序。定义列表,它作用产生条件和描述的双重列表,可以对列表进行更为灵活的定义。

2、有序列表

有序列表在列表中将每个元素按数字或字母顺序标号创建一个有序列表时,以打开和关闭

    为开始,然后在每个列表元素前用标记
  1. 标识,标识的结束标记为
  2. 2.1有序列表ol

    语法:

    1. 有序列表项
    2. 有序列表项
    3. 有序列表项
    4. 有序列表项
    5. ……

    说明:

    标记标志着有序列表的开始和结束,而
  3. 表示这是一个列表项。

    2.2有序列表的序号类型type

    语法:

    1. 有序列表项
    2. 有序列表项
    3. 有序列表项
    4. 有序列表项
    5. ……

    2.3有序列表的起始数值start

    语法

    1. 有序列表项
    2. 有序列表项
    3. 有序列表项
    4. 有序列表项
    5. ……

    说明:该语法中,起始数值用1、2、3、4、5……数字表示,但是同样可以对字母和罗马数字起作用。

    举例:

      则有序列表起始数值为b

      3、无序列表

      3.1无序列表标记

        (用法同上,默认情况下显示符号为·)

        3.2无序列表的类型type

        注:不能将数字列表作为一个无序列表的一部分或附属列表,却能够使用嵌套列表项产生于数字列表项的下一层。

        • 列表项
        • 列表项
        • 列表项
        • 列表项
        • ……

        3.3目录列表标记

        说明:用法同上,目录列表一般用来创建多列的目录列表,它在浏览器中的显示效果与无序列表相同,因为它的功能也可以通过无序列表来实现。

        3.4定义列表标记

        定义列表由两部分组成:定义条件和定义描述。定义列表的英文全称definition list,

        用来指定需要解释的名词(definition term),
        是具体的解释(definition description)

        语法:

        定义条件

        定义描述

        ……

        举例:

        CSS
        CSS就是……,中文翻译为“层叠样式表”,

        显示效果:

        CSS

        CSS就是……,中文翻译为“层叠样式表”,

        3.5菜单列表标记

        语法:

      • 列表项
      • 列表项
      • 列表项
      • ……

        说明:菜单列表主要用于设计单列的菜单列表,其在浏览器中的显示效果和无序列表是相同的。

        使用表格

        1、创建表格

        1.1表格的基本构成table(表格标记)、tr(行标记)、td(单元格标记)

        语法:

        (border为表格边框)

        第一行第1列单元格第一行第2列单元格
        第二行第1列单元格第二行第2列单元格

        表格的综合举例

        ……表格宽度(像素值或百分比),高度,对齐方式,边框宽度(像素值)、内框与文字的距离、内框宽度、边框颜色、表格背景(或background=”images/2.jpg”)

        ……表格标题(没有表格框但随表格的移动而移动)

        ……表格的表首标记

        ………………………………表格第一行开始标记、行背景、边框颜色、行高、行文字的水平对齐方式、行文字的垂直对齐方式(top middle bottom).

        ……表格第一列标记、单元格宽度、单元格高度、单元格背景

        ……表格第二列标记

        ……………………………表格第一行结束标记

        …………表格的表主体标记,与用法类似

        …………表格的表尾标记

        ……表示在表格中最后一行将3个单元格合并,表格中内容为thank you

        神乐作品
        樱花5442424
        ……
        ……
        ……
        thank you

        建立超链接(图片13张)

        添加多媒体

        1、设置滚动条效果

        1.1滚动标记marquee(可滚动文字图片、表格等,且默认方向是从右向左滚动) 语法:……

        说明:若要改变滚动方向,则direction有4个取值up 、down 、left 、right 举例:……

        1.2滚动方式behavior(scroll 循环滚动默认效果slide只一次alternate来回交替进行滚动)滚动速度scrollamount(以像素为单位,设置每次滚动时移动的长度)滚动延迟scrolldelay(单位是毫秒) 滚动循环loop 滚动范围width、height 滚动背景颜色bgcolor

        综合举例

        我们把血流成河铸成的地狱,命名为了世界。

        1.3空白空间

        默认情况下,滚动对象周围的文字或图像是与滚动背景紧密连接的,使用hspace和vspace可以设置它们之间的空白。单位均为像素,用法同上,略。

        2、插入多媒体

        2.1Flash动画

        语法:

        2.2插入音频和视频文件

        语法:同上

        3、背景音乐bgsound

        语法:

        4、插入Java Applet(是一种允许开发并可以嵌入Web页面的编程语言。Java Applet小程序是在Java的基础上演变而成的应用程序,可以嵌入到网页中用来执行一定的任务,能够产生特殊的效果)

        语法:

        (水中倒影效果,操作出现问题)

        使用框架结构

        1、框架的基本概念(略)

        2、设置框架集的属性frameset

        框架页面的结构是在框架集中设置的,可以根据框架的分割方式分为水平分割窗口、垂直分割窗口和嵌套窗口。

        2.1水平分割窗口rows

        语法:

        ……

        说明:rows中可以取多个值,它由逗号分割的像素值或百分比值

        2.2垂直分割窗口cols

        语法:换了名称同上

        2.3嵌套分割窗口

        语法:

        ……

        2.4框架的边框frameborder

        语法:

        说明:取值只能是0、1或者yes、no

        2.5框架的边框宽度framespacing和颜色bordercolor

        语法:

        说明:单位为像素

        3、设置窗口属性frame

        用来定义每一个单独的框架页面,框架页面的属性设置都在该标记里进行。

        3.1页面源文件src

        语法:

        说明:页面的源文件可以是一个网页文件,也可以是一个图片,地址类型可以是相对地址,也可以是绝对地址或有锚点链接的地址。

        3.2页面名称name

        语法:

        说明:为了便于页面的查找和链接所提供的一个属性。例如左侧为链接,右侧

        为正文,当单击左侧链接以后要在右侧框架中打开正文,此时遇到该代码标记。

        3.3禁止调整窗口的尺寸norsize

        语法:

        3.4边框与页面内容的水平边距marginwidth

        语法:

        说明:用于设置框架边框与页面内容的左、右边缘的距离。

        3.5边框与页面内容的垂直边距marginheight

        语法:同上

        3.6控制框架滚动条显示scrolling

        语法:

        说明:取值为yes no auto

        3.7不支持框架标记noframes

        语法:替换显示内容

        说明:如果遇到不支持框架结构的浏览器,或者用户关闭了浏览器的框架显示功能,此时就用该语法,告诉浏览者其浏览器无法打开框架页面。

        4、浮动框架iframe

        4.1页面源文件src

        语法:

        说明:浮动框架是在浏览器窗口中嵌套的子窗口。

        4.2浮动框架的宽和高width height 对齐方式align 滚动条显示属性scrolling

        使用框架结构的综合举例

        框架结构

        使用表单

        1、表单标记form

        1.1提交表单action

        语法:

        ……

        说明:action用于指定表单数据提交到哪个地址进行处理

        举例:

        欢迎您预订本店房间,您填写的预订表将发送到酒店客房预订处,我们会在最短的时间内给您回复。

        1.2表单名称name

        语法:

        ……

        说明:名称不能包含特殊字符和空格

        举例:

        1.3传送方法method

        举例:

        说明:取值只有get(表单数据被传送到action属性指定的URL,然后这个新URL 被送到处理程序上)和post(表单数据被包含在表单主体中,然后被送到处理程序上)两种。

        1.4编码方式enctype

        语法:……

        1.5目标显示方式target

        语法:

        ……

        说明:目标窗口的打开方式有4个选项:_blank(将连接的文件载入一个未命名的新浏览器窗口中)_parent(将连接的文件载入含有该连接框架的父框架集或父窗口中)_self(所在的同一框架或同窗口中)_top(在整个浏览器窗口中载入所有连接的文件,因而会删除所有框架)

        2、插入表单对象

        2.1文字字段text

        语法:

        2.2密码域password(见图片15张)

相关文档