基本的HTML语法.docx

资源描述

基本的HTML语法.docx

《基本的HTML语法.docx》由会员分享，可在线阅读，更多相关《基本的HTML语法.docx（18页珍藏版）》请在冰点文库上搜索。

基本的HTML语法.docx

基本的HTML语法

1．基本的HTML语法

用记事本制作第一个网页3-1.htm的步骤如下：

1）打开记事本。

2）在记事本中输入以下代码：

我的第一个网页

这是我用记事本做的第一个网页，我会努力学好HTML！

3）保存文件：

HTML文件的扩展名为.htm或.html

【分析：

】

a）所有的标记都必须以“<>”包围起来，它以开始标记及结束标记将对象围住，例如：

。

b）大部分标记是成对出现的，包括开始标记和结束标记。

开始标记和相应的结束标记定义了标记所影响的范围。

结束标记与开始标记名称相同，但结束标记必须用用一个“/”开头，例如：

c）所有被标记包围的对象，如文本、图像、表格等都按照标记等义的格式显示。

d）有少数标记允许只有开始标记没有结束标记称为空标记。

分行用的标记：

分段用的标记：

水平线标记：

〈hr>

e）开始标记里有形如name="value"的代码，称为标记的属性，用来修饰标记的内容，如标记里的bgcolor="black"、text="#FFFFFF"都是属性，属性里等号左边的称为属性名，等号右边被引号引起来的称为属性值，如bgcolor为属性名，black为属性值。

而且所有的属性都放置在开始标记的尖括号中。

2．注释语言

而有信编译器不解析注释部分，即注释部分不会在浏览器窗口中显示出来。

注释语句的格式是：

—注释语句-->

例如：

今天天气真好！

—字体为7号黑体字-->

今天天气真好！

3．文档的基本结构

①...文档标记

这个标记是全部文档内容的容器，是开始标记，是结束标记，它们分别是网页的第一个和最后一个标记，其他标记代码都位于这两个标记之间。

②...首部标记

首部标记...用于提供与Web页有关的各种信息。

在首部标记中，可以使用...标记来指定网页的标题，标记来定义CSS样式表，使用标记来插入脚本，等等。

③...正文标记

正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。

正文标记属性：

1）text：

用来设定网页中文本的颜色，属性值可以是颜色的名称，也可以是#后面跟6位十六进制数字，如text="black"和text="#000000"都可以把文本颜色设为黑色。

2）bgcolor：

用来设定整个页面的背景颜色，如bgcolor="green"。

3）link：

用来设定链接文本的颜色，如link="blue"。

4）alink：

用来设定活动链接文本的颜色，也就是刚按下鼠标左键还没松开时的颜色。

5）vlink：

用来设定访问过的链接文本的颜色，如vlink="#ff0000"。

6）background：

用来设定页面的背景图片，属性值可以是图片文件的相对路径或绝对路径，如background="bg.gif"。

如果同时设定了页面的背景颜色和背景图片，则只能看到背景图片，因为背景图片在背景颜色之上。

7）leftmargin：

用来设定整个网页内容与浏览器窗口左右边框之间空白大小，属性值为整数，单位为像素，如leftmargin="4"。

8）topmargin：

用来设定整个网页内容与浏览器窗口上下边框之间空白大小。

9）bgproperties：

当属性值为fixed时，可固定页面的背景图片，拖动滚动轴时背景图片不会随着文本而滚动。

例如：

显示在浏览器最上边蓝色条中的文本

红色背景、蓝色文本

书写HTML代码时应注意以下几点：

1）HTML标记及属性中字母不区分大小写，如与对浏览器来说是完全相同的。

2）标记名与左尖括号之间不能留有空白，如是错误的。

3）属性要写在开始标记的尖括号中，放在标记名之后，并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文的引号。

4）结束标记要书写正确，不能忘掉斜杠

4．HTML文本的格式化

（1）字符的格式化

标题hn,字体大小，size,字体颜色color,客户端字体face

White

字符样式和特列字符见书P35表格

（2）常见的标记

：

称为段落标记，用来创建一个段落，段落内容显示时与前后的内容之间保留一空白行。

如果两个段落相连，则可以省略第一个段落的结束标记

，因为第二段的开始自动结束第一段，如“

第一段

第二段

”，当然结束标记也可以不省略。

的常用属性align，用来设定段落的对齐方式，可取属性值有：

1）left：

左对齐。

2）center：

居中对齐。

3）right：

右对齐。

默认为左对齐。

：

称为换行标记，在网页设计中比较常用。

它的作用就是换行，这一点与

相同，与

不同的是换行后行之间不留空白行，页面看起来比较紧凑。

属于空标记，没有结束标记。

：

称为预格式化标记，它的作用是按原始代码的排列方式显示内容。

通常情况下，浏览器显示时会忽略内容中的空白及换行，而

与

之间的空白及换行会被保留。

：

称为水平线标记，可以在页面中产生一条水平线，属于空标记，没有结束标记。

的常用属性有：

1）align：

用来设定水平线的对齐方式，可取属性值有：

left、center、right。

2）width：

用来设定水平线的水平长度，属性值可以是绝对值或相对值，如width="300"表示长度为300像素，是绝对长度，width="50%"表示水平长度为上一级容器水平总长度的一半，是相对长度。

3）size：

用来设定水平线的厚度，属性值为整数，单位为像素，如size="4"。

4）color：

用来设定水平线的颜色。

5）noshade：

水平线默认为立体显示，具有阴影，加上此属性可删除水平线阴影，如

：

称为居中标记，可以使标记的内容居中显示，属于围堵标记，使用时需要结束标记。

例：

新建网页文档3-2.htm，其代码如下：

排版标记举例

--读者可以试试每个标记的各个属性的用法-->

这是一个居中对齐段落，有三行
第二行
第三行

月落乌啼霜满天，江枫渔火对愁眠。

故苏城外寒山寺，夜半钟声到客船。

（3）设置列表文本

有序列表：

有序列表

列表项1

列表项2

列表项3

列表项1

列表项2

列表项3

无序列表：

无序列表

空心圆

实心圆

方块1

方块2

5．超链接

网页设计中，经常需要设置文件路径，文件的路径可分为绝对路径和相对路径。

1）绝对路径：

文件的绝对路径提供文档的完整URL，而且包括所使用的协议（如对于Web页，通常使用http:

//）。

如

2）相对路径：

相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。

在站点内，通常都采用文档相对路径，便于站点的移植，因为在整个站点移植过程中，文件相对路径不变，移植后不需要修改路径。

为了便于说明文档相对路径的写法，假设有如图3.7所示的目录结构，其中root、web、a、b、c为文件夹，t.htm、1.gif、2.gif等为相应文件夹中的文件。

假设在网页文件t.htm里有一个表格，如果要把表格的背景图像设置为2.gif，则

里应加上属性background="2.gif"，因为2.gif同t.htm在同一目录下，所以2.gif相对于文档t.htm的路径为文件名；如果要把表格的背景图像设置为5.gif，则应写background="c/5.gif"；如果要把表格的背景图像设置为1.gif，则应写background="../1.gif"，路径中两个句点代表向上回溯一个目录；同理background="../../4.gif"和background="../b/3.gif"都使用了正确的文档相对路径。

（背景示例）

（1）链接标记

链接是用标记来定义的，定义的语法为：

作为链接的文本或图片

的常用属性有：

1）href：

用来设定链接的目标地址，属性值视链接类型而定，可以是链接到的文档的绝对路径或相对路径，可以是命名锚点，也可以是邮件地址等。

2）name：

用来设定锚点的名字，属性值为自定义字符串。

3）target：

用来设定链接打开后显示在哪个窗口，属性值可以选用保留的目标名或已命名框架的名称。

保留目标名有：

（1）_blank：

将链接的文件载入一个未命名的新浏览器窗口中。

（2）_parent：

将链接的文件载入含有该链接的框架的父框架集或父窗口中。

如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。

（3）_self：

将链接的文件载入该链接所在的同一框架或窗口中。

此目标是默认的，所以通常不需要指定它。

（4）_top：

将链接的文件载入整个浏览器窗口中，因而会删除所有框架。

（2）链接标记的几种用法

在网页设计中，链接标记有以下几种使用方法：

1）链接网页：

用链接标记链接本地网页或外部网页，这时应设置href属性为所链接网页文件的相对路径或绝对路径，例如：

2）链接命名锚点：

命名锚点是在文档中设置的有名字的标记，这些标记通常放在文档的特定主题处或顶部，通过到这些命名锚点的链接，可快速将访问者带到文档中指定位置。

也就是说，通过点击锚点链接，可以跳转到同一页面或不同页面的指定位置。

制作锚点链接的过程如下：

（1）设置的name属性创建命名锚点。

例如，在页面开始位置加上代码：

与之间可以有内容，也可以为空，这样就在页面顶端创建了一个名字为top的锚点。

（2）创建到命名锚点的链接。

例如，在页面的底端加上代码：

返回顶端

这样就创建了一个到锚点top的链接，单击链接后可以跳转到页面顶端的位置。

如果要链接到其他文件中的锚点，可以在#号前加上文件的路径，例如：

表示链接到了同一目录下文件a.htm里的锚点top。

3）链接非Web数据：

如果把的href属性设置为非网页格式的文件路径，访问者就可以通过链接来下载相应的文件。

例如：

我的简历

4）电子邮件链接：

把的href属性设置为“mailto:

”加上电子邮件地址就可以创建电子邮件链接，例如：

hrm007@">给我写信

注意在冒号和电子邮件地址之间不能键入任何空格。

单击电子邮件链接时，该链接打开一个新的空白邮件窗口（使用的是与用户浏览器相关联的邮件程序）。

在电子邮件消息窗口中，“收件人”文本框自动显示电子邮件链接中指定的地址。

5）空链接：

空链接也称假链接，是未指派的链接，用于向页面上的对象或文本附加行为。

把的href属性设置为“javascript:

;”就可以创建空链接。

例如：

;">单击没返应

6）脚本链接：

脚本链接用于单击链接时执行一些JavaScript代码。

把的href属性设置为“javascript:

”后面跟一些JavaScript代码或函数就可创建脚本链接。

6.插入对象

链入图像的基本语法如下.

例如：

图像和文字对齐的基本语法如下：

图像和文字的对齐方式有top,middle或者bottom三种方式，分别是指图像和文字顶端对齐、居中对齐或者底部对齐。

插入图像

7.网页布局

（1）使用HTML表格布局

创建表格是指令是

...

。

HTML中一个表格通常是由

、、、

三个标记来定义的，这三个标记分别表示表格、表格行、单元格。

在对表格进行设置时，可以设置整个表格（

）或表格中的行（）或单元格（），表格行（）优先于表格（

）的属性，它们优先顺序为：

单元格（

）优先于表格行（

）。

例如，如果将某个单元格的背景色属性设置为红色，然后将整个表格的背景色属性设置为蓝色，则红色单元格不会变为蓝色。

称为表格标记，整个表格始于

而终于

，它是一个容器标记，用于声明一个表格，

等只能在它的范围内使用。

常用的属性有：

1）width：

用来设定表格的宽度，属性值可以是相对的或绝对的，如width="50%"。

2）align：

用来设定表格水平对齐方式，属性值可以是left、center、right三者中之一。

3）border：

用来设定表格边框的厚度，属性值为整数，单位为像素。

4）cellpadding：

用来设定边距的大小，也就是单元格中内容与单元格边框之间留的空白大小，属性值为整数，单位为像素。

5）cellspacing：

用来设定单元格与单元格之间的距离，属性值为整数，单位为像素。

6）bgcolor：

用来设定整个表格的背景颜色。

7）background：

用来设定表格的背景图像，属性值为图像文件的相对路径或绝对路径。

3.2.3.3

用来标记表格行，是单元格（

或

）的容器，使用时要放在容器里，结束标记可以省略。

常用的属性有：

1）align：

用来设定这一行单元格中内容的水平对齐方式，属性值为left、center或right。

2）bgcolor：

用来设定这一行的背景颜色。

3）valign：

用来设定这一行单元格中内容的垂直对齐方式，可取属性值有：

（1）top：

顶端对齐。

（2）middle：

中间对齐。

（3）bottom：

底端对齐。

3.2.3.4

与之间。

意大利

英格兰

西班牙

AC米兰

佛罗伦萨

曼联

纽卡斯尔

巴塞罗那

皇家社会

尤文图斯

桑普多利亚

利物浦

阿申纳

皇家马德里

……

拉齐奥

国际米兰

切尔西

米德尔斯堡

马德里竞技

……

在表格中表示一个单元格，是表格中具体内容的容器，使用时要放在

的常用属性有：

1）align：

用来设定单元格中内容的水平对齐方式，属性值为left、center或right。

2）background：

用来设定单元格的背景图像。

3）bgcolor：

用来设定单格的背景颜色。

4）colspan：

用来在水平方向向右合并单元格，属性值为跨列的数目。

5）height：

用来设定单元格的高度，属性值可以是像素数，也可以是占整个表格高度的百分比。

7）rowspan：

用来在垂直方向向下合并单元格，属性值为跨行的数目。

8）valign：

用来设定单元格中内容的垂直对齐方式，属性值为top、middle或bottom。

9）width：

用来设定单元格的宽度，属性值可以是像素数，也可以是占整个表格宽度的百分比。

10）bordercolorlight:

设置边框明亮部分的颜色（当border的值大于等于1时才有用）。

11）bordercolordark:

设置边框昏暗部分的颜色（当border的值大于等于1时才有用）。

3.2.3.5

在表格中也表示一个单元格，用法与

相同，不同的是，

所标记的单元格中文本内容默认以粗体显示，且居中对齐。

3.2.3.6表格标记举例

[例3.3]新建网页文档3-4.htm，其代码如下：

表格标志的综合示例

bordercolorlight="#7D7DFF"bordercolordark="#0000A0">

利用可VS工具对表格布局

在工具箱中拖出一个表格，设置其属性：

表格的背景色、边框的大小、颜色、rows的属性以及cells的属性其中，columnspan表示跨列，rowspan表示跨行。

（2）使用层布局

HTML>

使用层布局

100px;position:

relative;

height:

100px;border-style:

solid">我是层

8.插入多媒体

本标记可以用来在主页中嵌入多媒体文本，如：

电影（movie）,声音（sound）,虚拟现实语言（vrml）等。

例如插入一个名叫frame.swf的flash动画到网页中，就可以使用如下代码。

9.使用框架

frameset是确定网页分框的定义，其包括cols、rows、border等属性。

cols及row

展开阅读全文