基本的HTML语法.docx

1、基本的HTML语法1 基本的HTML语法用记事本制作第一个网页3-1.htm的步骤如下：1) 打开记事本。2) 在记事本中输入以下代码： 我的第一个网页 这是我用记事本做的第一个网页，我会努力学好HTML！ 3) 保存文件：HTML文件的扩展名为.htm或.html【分析：】a) 所有的标记都必须以“”包围起来，它以开始标记及结束标记将对象围住，例如：。b) 大部分标记是成对出现的，包括开始标记和结束标记。开始标记和相应的结束标记定义了标记所影响的范围。结束标记与开始标记名称相同，但结束标记必须用用一个“/”开头，例如：c) 所有被标记包围的对象，如文本、图像、表格等都按照标记等义的格式显示。

2、d) 有少数标记允许只有开始标记没有结束标记称为空标记。分行用的标记：分段用的标记：水平线标记：hre) 开始标记里有形如name=value的代码，称为标记的属性，用来修饰标记的内容，如标记里的bgcolor=black、text=#FFFFFF都是属性，属性里等号左边的称为属性名，等号右边被引号引起来的称为属性值，如bgcolor为属性名，black为属性值。而且所有的属性都放置在开始标记的尖括号中。2 注释语言而有信编译器不解析注释部分，即注释部分不会在浏览器窗口中显示出来。注释语句的格式是：例如：今天天气真好！ 今天天气真好！3 文档的基本结构.文档标记这个标记是全部文档内容的容器，是

3、开始标记，是结束标记，它们分别是网页的第一个和最后一个标记，其他标记代码都位于这两个标记之间。.首部标记首部标记.用于提供与Web页有关的各种信息。在首部标记中，可以使用.标记来指定网页的标题，和标记来定义CSS样式表，使用和标记来插入脚本，等等。.正文标记 正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。正文标记属性：1) text：用来设定网页中文本的颜色，属性值可以是颜色的名称，也可以是#后面跟6位十六进制数字，如text=black和text=#000000都可以把文本颜色设为黑色。2) bgcolor：用来设定整个页面的背景颜色，如bgcolor

4、=green。3) link：用来设定链接文本的颜色，如link=blue。4) alink：用来设定活动链接文本的颜色，也就是刚按下鼠标左键还没松开时的颜色。5) vlink：用来设定访问过的链接文本的颜色，如vlink=#ff0000。6) background：用来设定页面的背景图片，属性值可以是图片文件的相对路径或绝对路径，如background=bg.gif。如果同时设定了页面的背景颜色和背景图片，则只能看到背景图片，因为背景图片在背景颜色之上。7) leftmargin：用来设定整个网页内容与浏览器窗口左右边框之间空白大小，属性值为整数，单位为像素，如leftmargin=4。8)

5、 topmargin：用来设定整个网页内容与浏览器窗口上下边框之间空白大小。9) bgproperties：当属性值为fixed时，可固定页面的背景图片，拖动滚动轴时背景图片不会随着文本而滚动。例如：显示在浏览器最上边蓝色条中的文本红色背景、蓝色文本 书写HTML代码时应注意以下几点：1) HTML标记及属性中字母不区分大小写，如与对浏览器来说是完全相同的。2) 标记名与左尖括号之间不能留有空白，如是错误的。3) 属性要写在开始标记的尖括号中，放在标记名之后，并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号一定要是英文的引号，不能是中文的引号。4) 结束

6、标记要书写正确，不能忘掉斜杠4 HTML文本的格式化（1） 字符的格式化标题hn,字体大小，size, 字体颜色 color,客户端字体 faceWhite 字符样式和特列字符见书P35表格 （2） 常见的标记：称为段落标记，用来创建一个段落，段落内容显示时与前后的内容之间保留一空白行。如果两个段落相连，则可以省略第一个段落的结束标记，因为第二段的开始自动结束第一段，如“第一段第二段”，当然结束标记也可以不省略。的常用属性align，用来设定段落的对齐方式，可取属性值有：1) left：左对齐。2) center：居中对齐。3) right：右对齐。默认为左对齐。：称为换行标记，在网页设计中比

7、较常用。它的作用就是换行，这一点与相同，与不同的是换行后行之间不留空白行，页面看起来比较紧凑。属于空标记，没有结束标记。：称为预格式化标记，它的作用是按原始代码的排列方式显示内容。通常情况下，浏览器显示时会忽略内容中的空白及换行，而与之间的空白及换行会被保留。：称为水平线标记，可以在页面中产生一条水平线，属于空标记，没有结束标记。的常用属性有：1) align：用来设定水平线的对齐方式，可取属性值有：left、center、right。2) width：用来设定水平线的水平长度，属性值可以是绝对值或相对值，如width=300表示长度为300像素，是绝对长度，width=50%表示水平长度为上

8、一级容器水平总长度的一半，是相对长度。3) size：用来设定水平线的厚度，属性值为整数，单位为像素，如size=4。4) color：用来设定水平线的颜色。5) noshade：水平线默认为立体显示，具有阴影，加上此属性可删除水平线阴影，如：称为居中标记，可以使标记的内容居中显示，属于围堵标记，使用时需要结束标记。例：新建网页文档3-2.htm，其代码如下： 排版标记举例 这是一个居中对齐段落，有三行第二行第三行 月落乌啼霜满天，江枫渔火对愁眠。 故苏城外寒山寺，夜半钟声到客船。 （3） 设置列表文本有序列表：有序列表 列表项1 列表项2 列表项3 列表项1 列表项2 列表项3无序列表：无序

9、列表空心圆实心圆方块1方块25 超链接网页设计中，经常需要设置文件路径，文件的路径可分为绝对路径和相对路径。1) 绝对路径：文件的绝对路径提供文档的完整URL，而且包括所使用的协议(如对于Web页，通常使用http:/)。如2) 相对路径：相对路径又分为根相对路径和文档相对路径，根相对路径总是以站点根目录“/”为起始目录，写起来比较简单；文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。在站点内，通常都采用文档相对路径，便于站点的移植，因为在整个站点移植过程中，文件相对路径不变，移植后不需要修改路径。为了便于说明文档相对路径的写法，假设有如图3.7所示的目录结构，其中root、w

10、eb、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都使用了正

11、确的文档相对路径。(背景示例)(1) 链接标记链接是用标记来定义的，定义的语法为：作为链接的文本或图片 的常用属性有：1) href：用来设定链接的目标地址，属性值视链接类型而定，可以是链接到的文档的绝对路径或相对路径，可以是命名锚点，也可以是邮件地址等。2) name：用来设定锚点的名字，属性值为自定义字符串。3) target：用来设定链接打开后显示在哪个窗口，属性值可以选用保留的目标名或已命名框架的名称。保留目标名有：(1) _blank：将链接的文件载入一个未命名的新浏览器窗口中。(2) _parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的

12、，则链接文件加载到整个浏览器窗口中。(3) _self：将链接的文件载入该链接所在的同一框架或窗口中。此目标是默认的，所以通常不需要指定它。(4) _top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架。(2) 链接标记的几种用法在网页设计中，链接标记有以下几种使用方法：1) 链接网页：用链接标记链接本地网页或外部网页，这时应设置href属性为所链接网页文件的相对路径或绝对路径，例如： a href= 2) 链接命名锚点：命名锚点是在文档中设置的有名字的标记，这些标记通常放在文档的特定主题处或顶部，通过到这些命名锚点的链接，可快速将访问者带到文档中指定位置。也就是说，通过点击锚点链接，

13、可以跳转到同一页面或不同页面的指定位置。制作锚点链接的过程如下：(1) 设置的name属性创建命名锚点。例如，在页面开始位置加上代码： 与之间可以有内容，也可以为空，这样就在页面顶端创建了一个名字为top的锚点。(2) 创建到命名锚点的链接。例如，在页面的底端加上代码： 返回顶端 这样就创建了一个到锚点top的链接，单击链接后可以跳转到页面顶端的位置。如果要链接到其他文件中的锚点，可以在#号前加上文件的路径，例如： a 表示链接到了同一目录下文件a.htm里的锚点top。3) 链接非Web数据：如果把的href属性设置为非网页格式的文件路径，访问者就可以通过链接来下载相应的文件。例如： 我的简

14、历 4) 电子邮件链接：把的href属性设置为“mailto:”加上电子邮件地址就可以创建电子邮件链接，例如： 给我写信 注意在冒号和电子邮件地址之间不能键入任何空格。单击电子邮件链接时，该链接打开一个新的空白邮件窗口(使用的是与用户浏览器相关联的邮件程序)。在电子邮件消息窗口中，“收件人”文本框自动显示电子邮件链接中指定的地址。5) 空链接：空链接也称假链接，是未指派的链接，用于向页面上的对象或文本附加行为。把的href属性设置为“javascript:;”就可以创建空链接。例如： 单击没返应 6) 脚本链接：脚本链接用于单击链接时执行一些JavaScript代码。把的href属性设置为“j

15、avascript:”后面跟一些JavaScript代码或函数就可创建脚本链接。例如： click me 6.插入对象链入图像的基本语法如下. 例如： 图像和文字对齐的基本语法如下： 图像和文字的对齐方式有top, middle或者bottom三种方式，分别是指图像和文字顶端对齐、居中对齐或者底部对齐。 插入图像 插入图像 插入图像插入图像 7.网页布局（1） 使用HTML表格布局创建表格是指令是.。 HTML中一个表格通常是由、三个标记来定义的，这三个标记分别表示表格、表格行、单元格。在对表格进行设置时，可以设置整个表格()或表格中的行()或单元格()的属性，它们优先顺序为：单元格()优先于

16、表格行()，表格行()优先于表格()。例如，如果将某个单元格的背景色属性设置为红色，然后将整个表格的背景色属性设置为蓝色，则红色单元格不会变为蓝色。称为表格标记，整个表格始于而终于，它是一个容器标记，用于声明一个表格，、等只能在它的范围内使用。常用的属性有：1) width：用来设定表格的宽度，属性值可以是相对的或绝对的，如width=50%。2) align：用来设定表格水平对齐方式，属性值可以是left、center、right三者中之一。3) border：用来设定表格边框的厚度，属性值为整数，单位为像素。4) cellpadding：用来设定边距的大小，也就是单元格中内容与单元格边框之

17、间留的空白大小，属性值为整数，单位为像素。5) cellspacing：用来设定单元格与单元格之间的距离，属性值为整数，单位为像素。6) bgcolor：用来设定整个表格的背景颜色。7) background：用来设定表格的背景图像，属性值为图像文件的相对路径或绝对路径。3.2.3.3 用来标记表格行，是单元格(或)的容器，使用时要放在容器里，结束标记可以省略。常用的属性有：1) align：用来设定这一行单元格中内容的水平对齐方式，属性值为left、center或right。2) bgcolor：用来设定这一行的背景颜色。3) valign：用来设定这一行单元格中内容的垂直对齐方式，可取属性

18、值有：(1) top：顶端对齐。(2) middle：中间对齐。(3) bottom：底端对齐。3.2.3.4 在表格中表示一个单元格，是表格中具体内容的容器，使用时要放在与之间。的常用属性有：1) align：用来设定单元格中内容的水平对齐方式，属性值为left、center或right。2) background：用来设定单元格的背景图像。3) bgcolor：用来设定单格的背景颜色。4) colspan：用来在水平方向向右合并单元格，属性值为跨列的数目。5) height：用来设定单元格的高度，属性值可以是像素数，也可以是占整个表格高度的百分比。7) rowspan：用来在垂直方向向下合

19、并单元格，属性值为跨行的数目。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-

20、4.htm，其代码如下： 表格标志的综合示例 意大利 英格兰 西班牙 AC米兰 佛罗伦萨 曼联 纽卡斯尔 巴塞罗那 皇家社会 尤文图斯 桑普多利亚 利物浦 阿申纳 皇家马德里 拉齐奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 利用可VS工具对表格布局在工具箱中拖出一个表格，设置其属性：表格的背景色、边框的大小、颜色、rows的属性以及cells的属性其中，columnspan表示跨列，rowspan表示跨行。（2） 使用层布局HTML 使用层布局我是层8.插入多媒体 本标记可以用来在主页中嵌入多媒体文本，如：电影(movie), 声音(sound), 虚拟现实语言(vrml)等。例如插入一个名叫frame.swf的flash动画到网页中，就可以使用如下代码。9.使用框架frameset是确定网页分框的定义，其包括cols、rows、border等属性。cols及row