html语法1.docx

《html语法1.docx》由会员分享，可在线阅读，更多相关《html语法1.docx（15页珍藏版）》请在冰豆网上搜索。

html语法1

Html的基本语法

1.1Html概况

1.1.1什么是Html

Html英语意思是：

HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。

是所有的internet站点的共同的语言，所有的页面都是以Html格式的文件为基础，再加上其他语言工具（例JavaScript、VBScript等）构成。

用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。

Html文件扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。

Html语言使用标签对的方法编写文件，它通常使用<标签名>来表示标签的开始和结束。

在Html文档中这样的标签对一般是成对使用的。

1.1.2为什么要学习Html

通过前面的学习我们知道，Micromedia公司的Dreamweaver是“所见即所得”的网页制作工具，使用它可以直接开发网页，而不用费劲的书写代码，这使得用户在没有Html语言基础的情况下，照样可以设计网页，而相应的Html文档由开发工具自动编写，这是网页图形编辑工具的最大优点，同时也是它最大的不足。

受到图形编辑工具自身的约束，将产生大量的垃圾代码。

所以，我们应该在掌握图形编辑工具的基础上进一步学会HTML语言，从而知道哪些是垃圾代码，消除无用的代码，制作出高质量的网页。

1.2Html文档的结构

超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

　　头部信息

　　　　

　　　　文档主体，正文部分　

　　

其中在最外层，表示这对标记间的内容是HTML文档。

我们还会看到一些网页省略标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。

之间包括文档的头部信息，如文档总标题等，若不需要头部信息则可省略此标记。

标记一般不能省略，它表示正文内容的开始。

下面是一个最基本的超文本文档的源代码：

欢迎光临我的主页

---

这是一个我的第一个网页

━┓

　┃

文件头

━┛

━┓

　┃

　┃

　┃

　┃文件体

　┃

　┃

━┛

1.3标签的格式

1.3.1标签的作用

HTML标签是组成HTML文档元素，每一个标签描述了一个功能。

HTML标签两端有两个包括字符：

“<”和“>”，这两个包括字符被称为角括号。

HTML标签一般成对出现，比如

和。

无斜杠的标签的为开始标签，有斜杠的为结束标签，在开始和结束标签之间的对象是元素内容。

如

表示一个表格的开始，表示一个表格的结束。

HTML标签是大小写无关的，但我们习惯用小写。

1.3.2标签的分类：

标签分为单标签，双标签两种。

单标签：

只需单独使用就能完整地表达意思，这类标记的语法是：

　　<标签名称>

　　最常用的单标签是
,它表示换行。

双标签：

它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。

始标签前加一个斜杠（/）即成为尾标记。

这类标记的语法是：

　　　　<标签>内容

其中“内容”部分就是要被这对标记施加作用的部分

1.3.3标签的属性：

为了增强标签的功能，许多单标记和双标记的始标记内可以包含一些属性，其语法是：

　　<标签名字属性1=“属性值1”属性2=“属性值2”属性3=“属性值3”…>

各属性之间无先后次序，属性值应该被包含在引号中，常用双引号，但是单引号也可以使用，在有些情况下，比如说属性值本身包含引号，就得使用单引号。

比如：

name='John"ShotGun"Nelson'。

注意：

中文引号跟英文引号是不一样的。

上面所指的引号都是英文状态下的引号，属性也可省略（即取默认值）。

1.4基本标签

1.4.1用于创建Html文档

标签用于Html文档的最前边，用来标识Html文档的开始。

而标签恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，这对标签必须成对使用。

1.4.2

和构成Html文档的头部分，在此标签对之间可以使用、等标签对，这些标签对都是描述Html文档头部信息的标签对，标签对之间的内容是不会在浏览器的框内显示出来的。

这对标签必须成对使用。

1.4.3网页标题

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在标签对之间加入您要显示的文本即可。

注意：

标签对只能放在标签对之间。

1.4.4

是Html文档的主体部分，在此标签对之间可包含

、

、

、

、
、

---

等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。

该标签必须成对使用。

标签中还可以有以下属性：

属性

用途

示例

设置背景颜色。

红色背景

设置文本颜色。

蓝色文本

设置背景图像

把图像设为背景

色彩rrggbb是用16进制的红－绿－蓝（red-green-blue,RGB）值来表示。

例:

body.html

静晚思

床前明月光，疑是地上霜。

举头望明月，低头叫故乡。

1.5格式标签

1.5.1段落标签

格式：

说明：

标签是用来创建一个段落，在此标签之间加入的文本将按照段落的格式显示在浏览器上。

HTML自动在一个段落前后各添加一个空行。

align可以控制段落的对齐方式，取值为：

Left（左对齐）、Center（居中）和Right（右对齐）三个值中的任何一个。

例：

浣溪沙

一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。

无可奈何花落去，似曾相识燕归来。

小园香径几徘徊。

1.5.2换行标签

当需要结束一行，并且不想开始新段落时，使用
标签。

标签不管放在什么位置，都能够强制换行。

它是单标签。

例：

浣溪沙

　

一曲新词酒一杯，去年天气旧亭台，
夕阳西下几时回。

无可奈何花落去，
似曾相识燕归来。

小园香径几徘徊。

1.5.3文章标题标签Hn

一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签，其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

〈H1>…　　　　　第一级标题

〈H2>…　　　　　第二级标题

〈H3>…　　　　　第三级标题

〈H4>…　　　　　第四级标题

〈H5>…　　　　　第五级标题

〈H6>…　　　　　第六级标题

例：

这是一行普通文字

〈H1>一级标题

〈H2>二级标题

〈H3>三级标题

〈H4>四级标题

〈H5>五级标题

〈H6>六级标题

1.5.4预格式化文本

为控制换行和空格，可以预先设定好文本的格式

例：

浣溪沙
一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。
小园香径几徘徊。

1.5.5环绕标签

格式:

...

说明：

方向属性direction=##=left，right，up，down

例：

啦啦啦，我从右向左移！

啦啦啦，我从左向右移！

方式属性bihavior=*8=scroll，slide，alternate

例：

啦啦啦，我一圈一圈绕着走！

啦啦啦，我只走一次就歇了！

啦啦啦，我来回走耶！

循环次数loop，若未指定则循环不止（infinite）

速度属性scrollamount=数字延时属性scrolldelay=数字

例：

啦啦啦，我走一步，停一停！

面积属性height=数字width=数字

例：

啦啦啦，我会移动耶！

这些属性可以单独使用，也可混合使用，下面是一个综合实例：

例：

制作滚动的新闻

当鼠标指向时停止当鼠标移过时滚动

当鼠标指向时停止当鼠标移过时滚动

当鼠标指向时停止当鼠标移过时滚动

其中id为这段文本的名称，要注意的是一个环绕标签只对一个段落起作用。

1.6图像标签

1.6.1图像标签

在网页中插入图像的标签为，它是单标签，语法格式为：

说明：

src为必带属性，它给出了图像的位置，一般是是相对地址，或某个网址。

例:

//www.

Align属性设置图像的对齐方式，它可以取值top，middle，bottom。

border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。

width和Height属性是图像的宽和高，默认单位也是象素。

alt属性是在浏览器装载图像失败的时，告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。

给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且对纯文本浏览器很有用。

例：

1.6.2水平线标签

---

---

标签是在Html文档中加入一条水平线，它是单标签，可以直接使用。

格式：

说明：

size属性设置水平线的厚度

Width属性设定水平线的宽度，默认单位是像素

color属性设置颜色，noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线（不加入此属性水平线将有阴影）。

例1：

---

例2：

1.7链接标签

1.7.1文字链接：

格式：

要链接的文字

说明：

href是必带的属性，url为链接要转到的目标网页，它可以是相对地址，也可以是另一个网站的网址。

Target属性：

定义在什么地方打开链接地址，它可以取值：

_blank、_top、self、_parent等值。

例：

点击则转到下一个页面

新浪

1.7.2图像链接：

格式：

说明：

url1为点击链接后要转到的目标网页，url2为被链接的图片地址。

例：

点击next.gif后转到lastpage.htm页.

1.7.3电子邮件链接

格式：

EMAIL">文字

说明：

EMAIL为接收邮件的邮箱。

例：

xygzjsj@">联系我们

1.7.4锚点链接：

格式：

格式：

文字

说明：

name属性用来创建一个命名的锚。

锚名相当于文章中的一个标签。

使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。

它要和.配合使用。

锚点命名好后，进行链接只要在url后加#，再接锚名即可。

例：

在网页wenzang.htm中命名了三个锚点,

第一节

第二节

第三节

在网页school.htm中，要链接到wenzang.htm的第二节，

第二节

1.8表格标签

...-定义表格

-定义表行

-定义表头，一般用黑体字表示。

-定义表元（表格的具体数据）

常用属性:

属性

用途

设置表格的背景色。

设置边框的宽度，若不设置此属性，则边框宽度默认为0。

设置边框的颜色。

设置表格格子之间空间的大小。

设置表格格子边框与其内部内容之间空间的大小。

设置表格的宽度，单位用绝对像素值或总宽度的百分比

设置表格的边框显示，可以取这八个值

box

显示所有4个边框

above

只显示上边框

below

只显示下边框

hsides

只显示上、下边框

vsides

只显示左、右边框

lhs

只显示左边框

rhs

只显示右边框

void

不显示任何边框

设置表格分隔线，可以取all、groups、rows、cols、none

all

显示所有分隔线

groups

只显示组（Groups）与组之间的分隔线

rows

只显示行与行之间的分隔线

cols

只显示列与列之间的分隔线

none

不显示任何分隔线

设置水平对齐方式，取值为left（左对齐）、center（居中）、right（右对齐）

设置是垂直对齐方式，取值为top（靠顶端对齐）、middle（居中间对齐）或bottom（靠底部对齐）

例1：

三行二列表：

班级姓名

一班李芳

二班刘军

例2：

只显示上下边框

班级姓名

一班李芳

二班刘军

例3：

只显示列分隔线

班级姓名

一班李芳

二班刘军

1.9框架标签

可以用框架把页面分割成几个窗口，在不同窗口打开不同的文件。

1.9.1

这是一对双标签，它有两个常用属性：

cols、rows，cols是把页面纵向分割成若干个窗口，rows是把页面横向分割成几个窗口。

1.9.2帧标签

它是单标签，用来指定在每一个窗口要打开的文件。

把页面分割成窗口后，若没有使用，则窗口显示为空。

常和配合使用。

例：

标签把页面纵向分割成两个窗口，第一个窗口的宽度占30%，在第一个窗口中打开a.html，第二个窗口宽度占70%，在其中打开b.html。

分割的比例也可用像素来表示，或剩余值用*表示。

例：

格式：

说明：

src属性用来指定在窗口中打开的文件名

name属性：

用来给窗口命名。

scrolling属性：

用于描述窗口是否设有滚动条，可以取值：

yes/no/auto，默认auto

noresize属性：

是一个标志，没有取值，设定了该属性，则窗口不能调整大小，缺省为可以自行调整窗口大小。

noframeset>标签，对于不支持框架的浏览器，可以用该标签给出一个说明。

若要在多窗口中相互操作，我们要用到标签和target属性。

对上例进行修改：

b.html文件中和内容为：

新浪

网易

XX

1.9.3内框架

说明：

src：

文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height：

“内部框架”区域的宽与高；

scrolling：

当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：

则自动出现滚动条；如为Yes，则显示;

name：

框架的名字，用来进行识别。

例：

第一章

第二章

第三章

1.10表单标签

表单的基本语法