HTML 总结.docx

上传人:b****6 文档编号:6947934 上传时间:2023-01-13 格式:DOCX 页数:19 大小:26.27KB
下载 相关 举报
HTML 总结.docx_第1页
第1页 / 共19页
HTML 总结.docx_第2页
第2页 / 共19页
HTML 总结.docx_第3页
第3页 / 共19页
HTML 总结.docx_第4页
第4页 / 共19页
HTML 总结.docx_第5页
第5页 / 共19页
点击查看更多>>
下载资源
资源描述

HTML 总结.docx

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

HTML 总结.docx

HTML总结

第1章(HTML的基本标签)

1.HTML文件的基本结构

完整的HTML文件至少包括标签、标签、标签、和<BODY>标签,并且这些标签都是成对出现的。</p><p>开头标签为<>,结束标签为</>,在这两个标签之间添加内容。</p><p>通过这些标签中的相关属性可以设置页面的背景颜色、背景图像。</p><p> </p><p>2.HTML文档部分</p><p>HTML文档部分由3部分组成:</p><p><HTML>//HTML部分</p><p><HEAD>//头部部分</p><p><TITLE>

//主体部分

标签不区分大小写。

 

3.标签

标签出现在网页的标题部分。

是一个特殊的HTML标签,提供有关的网页信息。

charset属性用于设置网页的编码语系。

如果网页出现了乱码可能是charset属性没有设置正确的编码语系。

简体中文网页使用charset=gb2312,

繁体中文使用charset=big5,

纯英文网页使用iso-8859-1,或者不设编码也可。

 

4.页面背景色或背景图像

bgcolor属性可以改变网页的背景色。

background属性可以把网页的背景设为图片。

语法

hello!

!

经验:

为了使页面美观大方,网页背景要尽量的浅

5.文本相关标签

a)字体、字号相关标签

i.标题标签

HTML提供了六级标签,

为最大,

为最小。

例:

一级标题

二级标题

三级标题

四级标题

ii.标签

标签用于控制网页上文本的显示外观。

文本大小、字体类型和颜色等属性都可以使用标签指定。

例:

size属性用来设置字体的大小,可以为字体指定的大小范围为1~7。

最大为7最小为1。

默认字体大小为3,如果size=+4将使大小增加到7,size=-1将使大小减到2。

color属性用于指定字体的颜色,可以指定颜色名称或十六进制值。

face属性用于指定字体的类型。

iii.特殊符号

用于显示特殊字符的字符实体

特殊字符

转义码

示例

空格

 

移动 | 100| 联通

大于(>)

>

IfA>BThen
A=A+1

小于(<)

<

IfA<BThen
A=A+1

引号(””)

"

"淘宝网"

版权号(@)

©

Copyright©2007

转义码各字符间不能有空格;转义码必须以“;”结束;单独的&不能被认为是转义开始。

 

6.行的控制相关标签

a)段落标签

段落标签

用于标记段落的开始。

一般省略段落结束标记

还可以设置段落的align属性,设置段落的对齐方式,如左对齐、居中、右对齐

b)换行标签

只要在文本中放入
标签,就会强制换行。

 

7.图像标签

a)图像的基本语法

标签用于在HTML文档中插入图像,该标签可以放在要显示图像的位置。

标签不含任何内容,它使用src属性指定图像源文件所在的路径。

语法:

其中,src参数用来设置图像文件所在的位置,width和height属性用来指定图像的宽度和高度,

alt属性有两个作用:

1.在网页中,如果图像没有被下载,在图像位置上出现提示文字;

2.如果图像下载完,将鼠标放在该图像上,在鼠标旁边出现的提示文字。

b)图像与文本的对齐

align属性用于调整图像对于周围文本的对齐方式

align可取的值:

top、bottom、middle、left或right。

 

c)文字布局

可以使用


标签对文本内容进行分割,使用列表对文本内容进行整齐排列。

使用

标签让指定的文本内容以指定的格式在网页中显示。

d)使用


标签


(水平线)标签用于在页面上绘制水平线。

只有开始标签,没有结束标签。

语法:

size用来指定水平线的高度,以像素为单位;color可用来设置水平线的颜色。

width用于改变水平线的宽度,可以以像素为单位,也可以是窗口的百分比。

e)使用列表

不同类型的列表:

无序列表

1.无序列表就是“项目列表”,列表项前面带有项目符号,

包含无序列表标签

    内。

    列表中每项都用列表标签

  • ,其中LI表示列表项,结束标签
  • 为可选项。

    语法:

  • 如何激活会员号?

  • 如何注册淘宝会员?

  • ………..

    type属性决定了列表开始的符号,它可以去disc(默认值,表示实心圆点)、circle(空心圆环)、square(空心正方形)这3个值。

    ii.有序列表

    1.有序列表包含

      …..
    标签内。

    也显示列表项。

    区别在于有序列表的列表项以自动生成的顺序显示。

    语法

  • 填写信息
  • 收电子邮件
  • ……..

    type属性决定有序列表的序号类型,它可以取如下5个值:

    1、a、A、i、I。

    分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字序列、大写罗马数字序列。

    8.使用预格式文本

    标签

    标签用于显示预先在HTML代码中已定义好格式的文本。

    当文本显示在浏览器中时,会遵循已在HTML源文档中定义的格式。

     

    9.页面链接标签

    标签用于超链接。

    语法:

    [免费注册]

    href属性用来指定要链接的地址。

    “[免费注册]”是热点文本。

    绝对路径名:

    指定从根目录到文件的完整路径。

    相对路径名:

    指定相对于当前文件的文件位置。

    10.链接到本页面

    作用是未来了方便用户阅读过长的页面内容,可以使用锚点链接。

    主题名称

    标签的name属性用于创建锚记。

    主题名称

    超链接名称前面的符号“#”告诉浏览器当前链接是文档中的一个锚记点。

     

    11.电子邮件链接

    用户可以从网页发送电子邮件。

    要做到这一点,可在链接标签中插入“mailto:

    邮箱地址”

    例:

    taobaoWebMater@”>站长信箱

     

    12.滚动标签

    此标签不仅可以移动文字,还可以移动图片。

    语法

    滚动文字或图像

    scrolldelay:

    表示滚动延迟时间,默认值为90ms。

    direction:

    表示滚动的方向。

    默认为从右向左。

    可以取:

    up、down、left、right。

    当图片含有超链接时:

    图片外面会有边框,设置图片的border属性为0,可以使边框消失。

    设置align属性为middle可以使图片居中。

     

    13.如果想让鼠标所指的位置出现类似超链接的小手,则设置style属性。

    设置cursor为hand。

    例:

    style="cursor:

    hand;”

    第2章(表格基础)

    1.在HTML语言中,表格至少由

    、、
    这3个标签组成。

    a)

    用于创建表格。

    b)

    用于创建表格行。

    c)

    用于创建每一行又有若干个表格单元格。

    border属性用于指定边框的厚度,如果其值设置为零(0),则不显示边框。

    2.如何创建表格

    语法:

    单元格内容

    3.跨多行多列的表格

    colspan属性用于创建跨多列的单元格。

    rowspan属性用于创建跨多行的单元格。

    a)跨多列的表格

    语法:

    单元格内容

    b)跨多行的表格

    语法:

    单元格内容

    c)跨多行多列的表格将上面两个结合运用。

    经验:

    一般情况下在设置表格行和列的时候,为了保证在表格里不出现空白区域,可以将跨多列或跨多行的单元格看成多个单元格,而单元格的个数就是所跨的列数或行数,只要保证各行的单元格列数相同,就不会出现空白区域。

    4.表格的美化

    a)表格的高度、宽度和边框。

    b)表格、行、列的背景。

    c)表格、行、列的对齐方式。

    d)表格的填充、间距属性。

    1)设置表格的尺寸和边框

    如果不指定表格的宽度和高度,浏览器就会根据表格内容的多少自动调整高度和宽度。

    如果不指定表格的边框宽度(border属性),则浏览器将不显示表格的边框。

    语法

    ……………………….

    表格的宽度和高度可以用像素来表示。

    也可以用百分比来表示。

    2)设置表格的背景

    a)表格背景

    语法:

    …………….

    b)行背景色

    语法

    …………

    c)单元格背景色

    语法:

    单元格内容

    d)

    e)

    3)设置对齐方式

    属性align属性为right(右对齐)、center(居中)或left(左对齐),默认为“左对齐”

    例:

    单元格内容

    4)设置填充、间距属性

    文字与边框距离设置属性cellpadding

    表格与表格(表格内框)距离设置属性cellspacing

    例:

    ………………..

    第3章(表单和框架)

    1.表单包含的控件通常放在

    标签对之间一起使用。

    标签属于一个容器标签,表示其他标签需要在它的包围中才有些效。

    元素的属性

    属性

    说明

    action

    此属性指示服务器上处理表单输出的程序。

    一般来说,当用户单击表单上的“提交”按钮后,信息发送到web服务器上,有由action属性所指定的程序处理。

    语法为:

    action=”URL”

    method

    此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法(用post方法还是get方法)。

    如果值为get,浏览器创建一个请求,该请求包含页面URL、一个问号和表单的值。

    浏览器会将该请求返回给URL中指定的脚本,以进行处理。

    如果将值指定为post,表单上的数据会作为一个数据块发送到脚本,而不使用请求字符串。

    语法为:

    method=(get|post)

    一般情况下把method的属性设置为post比较安全。

    使用get提交表单信息不安全。

    2.表单元素的统一格式

    表单元素的统一格式:

    元素的属性

    属性

    说明

    type

    此属性指定表单元素的类型。

    可用的选项有:

    text、password、checkbox、radio、submit、reset、file、hidden(隐藏)、image和button。

    默认选项为text

    name

    此属性指定表单元素的名称。

    例如,如果表单上有几个文本框,可以按名称来标识它们,如text1、text2等。

    名称属性的作用域为Form元素内

    value

    此属性是可选属性,它指定表单元素的初始值。

    但如果type为radio,则必须指定一个值

    size

    此属性指定表单元素的初始宽度。

    如果type为text或password,则表单元素的大小以字符为单位。

    对于其他输入类型,宽度以像素为单位

    maxlength

    此属性用于指定可在text或password元素中输入的最大字符数。

    默认值为无限大。

    checked

    此属性是boolean属性,指定按钮是否是被选中的。

    当输入类型为radio或checkbox时,使用此属性

    3.列表框

    是通过标签用于显示可供用户选择的下拉列表。

    每个选项由一个

    size确定列表中可同时看到的行数;selected表示该选项在默认情况下是被选中的。

     

    4.按钮

    在HTML中按钮分为3种:

    分别是普通按钮(button)、提交按钮(submit)、重置按钮(reset)。

    普通按钮主要用来响应onClick事件,提交按钮用来提交表单信息。

    重置按钮用来清除表单中已填信息。

    语法:

    若type=”buttom”表示是普通按钮;若type=”submit”表示是提交按钮;若type=”reset”表示是重置按钮。

    name是用来给按钮起名字。

    value用来设置显示在按钮上的文字。

    5.多行文本框

    文本内容

    cols用来指定多行文本框的列数,rows用来指定多行文本框的行数。

    此标签不能使用value属性来赋值。

    6.框架

    一个框架结构是由两部分组成的:

    1)框架(Frame):

    是浏览器窗口中的一个区域,它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。

    2)框架集(Frameset):

    是一个网页文件,它将一个窗口通过横向或纵向的方式分割成多个框架,每个框架中要显示的都是不同的网页文件。

    不同的网页文件可以通过超链接联系起来。

     

    7.框架的基本结构

    框架集(Frameset)页面的结构是通过属性rows和cols来设置的。

    语法:

    ……..

    FrameSet是一个框架的集合。

    Frame标签可以提供对单独HTML文档URL引用,每个html文档占据一个框架。

    cols将页面沿垂直方向分割为几个窗口。

    rows将页面沿水平方向分割为几个窗口。

    src指定框架窗口的源文件。

    对其中一个页面再次分割时需要使用标签代替标签。

    例:

     

    如果一个页面有标签存在,就不能有标签存在。

     

    8.设置窗口连接的显示位置

    a)使用标签中的name属性和标签的target属性

    target目标窗口分为两类:

    一类是框架页面之间的链接;另一类是4个特殊窗口的超链接。

    1)框架页面之间的链接

    需要两步:

    1.设计好框架集页面,并为每个框架窗口定义名称。

    2.设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字。

    如:

    target属性主要用于超链接标签中使用

    2)4个特殊的窗口

    语法:

    target目标窗口的打开方式

    属性值

    说明

    _blank

    新启一个窗口打开链接

    _self

    在同一个窗口中打开,默认取值(指没有设置target属性值时的情况)

    _paremt

    在上一级窗口中打开(框架页面中使用较多)

    _top

    在整个浏览器窗口中打开

    第4章(CSS样式表)

    1.CSS样式表

    主要是基于以下几点原因:

    1)HTML标签的外观样式比较单一。

    2)样式表的作用相当于华丽的衣服。

    2.样式表的基本结构为:

    P{

    color:

    red;

    font-size:

    30px;

    font-family:

    隶书;

    }

    ……..

    文档样式表一般位于HTML文件的头部,即和标签之间,定义的样式规则就可应用到当前页面中。

     

    3.样式表按类型可以分为:

    标签样式、类样式、ID样式。

    定义标签样式时必须写标签名放在

     

    6.样式表的3个应用方式

    内嵌样式表只对某张网页起作用;

    如果希望某张网页中部分内容“与众不同”,那么就得采用行内样式;

    如果让网站中所有的网页都拥有一致性的风格,那就必须使用外部样式表文件。

    外部样式表文件是一个以.CSS为后缀的CSS文件,这个样式文件可以被多个网页引用,从而保证多个网页具有统一风格。

    7.外部样式表文件

    根据样式文件与网页的关联方式,又分为两种:

    链接外部样式表和导入样式表

    1)链接外部样式表

    链接外部样式表是指通过HTML的LINK(链接)标签,把样式文件和网页建立关联,这是早期浏览器的用法,格式如下:

    其中,rel=”stylesheet”表示在网页中使用这个外部样式表,type=”text/css”表示文本类型的样式,href=’’newstyle.css”指定样式文件。

    2)导入样式表

    使用@import方法导入样式表。

    @import样式表文件.css;

    经验:

    如果有多个样式规则作用域同一个页面时,样式规则起作用的优先级是:

    行内样式表(写在标签内的)>内嵌样式表(写在文档头部的)>外部样式表(在外部文件中)。

     

    第5章(使用DreamWeaver制作网页)

    1.创建锚记

    1)在“文档”窗口的“设计”视图中,将插入点放在需要命名锚记的地方。

    2)执行下列操作之一:

    选择菜单“插入”→“命名锚记”命令。

    按下Ctrl+Alt+A组合键。

    在插入栏的“常用”类别中,单击“命名锚记”按钮。

    3)为锚记命名。

    链接到命名锚记,

    4)在“文档”窗口的“设计”视图中,选择要从其创建链接的文本或图像。

    5)在“属性”检查器的“链接”文本框中,输入一个数字符号(#)和锚记名称。

    注:

    在“链接”文本框中输入的名称必须与锚记的名称完全一致。

    2.换行,换段

    a)将插入点放置在文本块的任一位置。

    b)然后“属性”检查器中的“格式”下拉列表框中选择“段落”选项。

    或者选择“文本”→“段落格式”→“段落”命令。

    c)将插入点放置在该文本块的需要换行的位置

    d)然后按下Shif

    展开阅读全文
    相关搜索

    当前位置:首页 > 幼儿教育 > 幼儿读物

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

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