网页制作HTML代码简介

1、1.1 html代码简介代码简介 1.1 html代码简介代码简介 html 开发开发 html 标记的格式组成：标记的格式组成： html . . . /html html 标记用于标记标记用于标记 html 文档的开始和结束文档的开始和结束 元素 - 标识标记 属性 - 描述标记 值 - 分配给属性的内容 element attribute = value 1.2 html代码简介代码简介 1.2 html代码简介代码简介 html 文档的结构文档的结构 html 部分 文档头部分 正文部分 html head title欢迎进入欢迎进入 html 世界世界/title /head bod

2、y p这会是一种很有趣的体验这会是一种很有趣的体验/p /body /html 基本结构：基本结构： 运行结果运行结果 1.3 html代码简介代码简介 1.3 html代码简介代码简介 html头部信息头部信息(head) html头部信息头部信息(head)里包含关于所在网页的里包含关于所在网页的 信息。头部信息信息。头部信息(head)里的内容，主要是被浏里的内容，主要是被浏 览器所用，不会显示在网页的正文内容里。览器所用，不会显示在网页的正文内容里。 标题标题(title) 标题标题(title)是最常用的是最常用的head信息。它不显示在信息。它不显示在 html网页正文里，显示在浏

3、览器窗口的标题网页正文里，显示在浏览器窗口的标题 栏里。栏里。 示例代码如下：示例代码如下： html headtitlehtml中文教程头部信息中文教程头部信息 /title/head /html 1.4 html代码简介代码简介 1.4 html代码简介代码简介 正文标题正文标题 html用用h1到到h6这几个这几个tag来定义来定义 正文标题，从大到小。每个正文标题自正文标题，从大到小。每个正文标题自 成一段。成一段。 1.5 html代码简介代码简介 1.5 html代码简介代码简介 html body h1这是这是1号标题号标题/h1 h2这是这是2号标题号标题/h2 h3这是这是3

4、号标题号标题/h3 h4这是这是4号标题号标题/h4 h5这是这是5号标题号标题/h5 h6这是这是6号标题号标题/h6 /body /html 1.6 html代码简介代码简介 1.6 html代码简介代码简介 段落划分段落划分 在在html里用里用p和和/p划分段落划分段落,p可可 以不成对出现。以不成对出现。 1.7 html代码简介代码简介 1.7 html代码简介代码简介 段落标记段落标记 html head title欢迎使用欢迎使用 html/title /head body bgcolor = lavender p这会是一种很有趣的体验这会是一种很有趣的体验 p 另一个段落元素

5、另一个段落元素 /body /html 1.8 html代码简介代码简介 1.8 html代码简介代码简介 使用对齐属性修饰段落使用对齐属性修饰段落 html head title学习学习html/title /head body bgcolor=lavender p align = center这会是一种很有趣的体验这会是一种很有趣的体验/p /body /html 右对齐右对齐 left：左对齐左对齐 center：居中居中 right：右对齐右对齐 1.9 html代码简介代码简介 1.9 html代码简介代码简介 使用对齐属性修饰标题使用对齐属性修饰标题 html body h1 al

6、ign=center这是标题这是标题/h1 p上面的标题是居中显示的。上面的标题是居中显示的。/p /body /html 1.10 html代码简介代码简介 1.10 html代码简介代码简介 换行换行 通过使用通过使用br这个这个tag，可以在不新建，可以在不新建 段落的情况下换行。段落的情况下换行。br没有没有closing tag。 用用p换行是个坏习惯，正确的是使用换行是个坏习惯，正确的是使用 br,即在行末加入即在行末加入br。 1.11 html代码简介代码简介 1.11 html代码简介代码简介 换行标记换行标记 html head title欢迎使用欢迎使用 html/tit

7、le /head body bgcolor = lavender p这会是一种很有趣的这会是一种很有趣的br体验体验 p 另一个段落元素另一个段落元素 /body /html 1.12 html代码简介代码简介 1.12 html代码简介代码简介 html注释注释 在在html文件里，你可以写代码注释，文件里，你可以写代码注释， 解释说明你的代码，这样有助于你和他解释说明你的代码，这样有助于你和他 人日后能够更好地理解你的代码。人日后能够更好地理解你的代码。 注释可以写在注释可以写在!-和和-之间。浏览器是之间。浏览器是 忽略注释的，你不会在忽略注释的，你不会在html正文中看正文中看 到你的

8、注释。到你的注释。 !- this is a comment - 1.13 html代码简介代码简介 1.13 html代码简介代码简介 html body !-这是代码注释这是代码注释- p代码注释是不会显示在网页里的。代码注释是不会显示在网页里的。 /p /body /html 1.14 html代码简介代码简介 1.14 html代码简介代码简介 加入水平线加入水平线 用用hr这个这个tag可以在可以在html文件里加一文件里加一 条横线条横线 hr没有结束标签没有结束标签 1.15 html代码简介代码简介 1.15 html代码简介代码简介 html body p村妇想像皇宫的生活：

9、皇后得用金扁担挑水吧。村妇想像皇宫的生活：皇后得用金扁担挑水吧。 /p hr p问：谁是世界上最可怜的人？答：炮兵连炊事班问：谁是世界上最可怜的人？答：炮兵连炊事班 战士！问：为什么？答：戴绿帽还给别人背黑锅战士！问：为什么？答：戴绿帽还给别人背黑锅/p /body /html 1.16 html代码简介代码简介 1.16 html代码简介代码简介 html利用超链接打开链接文件利用超链接打开链接文件 html用用a/a来表示超链接来表示超链接 a/a可以指向任何一个文件源：一个可以指向任何一个文件源：一个 html网页，一个图片，一个影视文件网页，一个图片，一个影视文件 等。用法如下：等。用

10、法如下： a href=url链接的显示文字链接的显示文字/a 点击点击a/a当中的内容，即可打开一当中的内容，即可打开一 个链接文件，个链接文件，href属性则表示这个链接属性则表示这个链接 文件的路径。文件的路径。 1.17 html代码简介代码简介 1.17 html代码简介代码简介 html body a href=biaoti.htm这是一个链接这是一个链接 /abr a href=http:/新浪新浪 站点链接站点链接/a /body /html 1.18 html代码简介代码简介 1.18 html代码简介代码简介 链接的链接的target属性属性 使用链接的使用链接的targe

11、t属性，可以在一个新属性，可以在一个新 窗口里打开链接文件。窗口里打开链接文件。 1.19 html代码简介代码简介 1.19 html代码简介代码简介 html body a href=biaoti.htm这是一个链接这是一个链接 /abr a href=http:/ target=_blank 新浪站点链接新浪站点链接/a /body /html 1.20 html代码简介代码简介 1.20 html代码简介代码简介 链接的链接的title属性属性 使用使用 链接的链接的title 属性，可以让鼠标悬停属性，可以让鼠标悬停 在超链接上的时候，显示该超链接的文在超链接上的时候，显示该超链接的

12、文 字注释。字注释。 1.21 html代码简介代码简介 1.21 html代码简介代码简介 html body a href=biaoti.htm这是一个链接这是一个链接 /abr a href=“http:/” target=_blank title=新浪站点链接新浪站点链接 新浪站点链接新浪站点链接/a /body /html 1.22 html代码简介代码简介 1.22 html代码简介代码简介 链接到链接到email地址地址 在网站中，你经常会看到在网站中，你经常会看到“联系我们联系我们” 的链接，一点击这个链接，就会触发你的链接，一点击这个链接，就会触发你 的邮件客户端，比如的邮件

13、客户端，比如outlook express ，然后显示一个新建，然后显示一个新建mail的窗口。用的窗口。用a 可以实现这样的功能。可以实现这样的功能。 1.23 html代码简介代码简介 1.23 html代码简介代码简介 html body a href=biaoti.htm这是一个链接这是一个链接 /abr a href=http:/ target=_blank title=新浪站点链接新浪站点链接新浪站新浪站 点链接点链接/a a href = mailto:联系新联系新 浪浪/a /body /html 1.24 html代码简介代码简介 1.24 html代码简介代码简介 html

14、相对路径相对路径(relative path)和绝对路径和绝对路径(absolute path) html有有2种路径的写法：相对路径和绝对路径。种路径的写法：相对路径和绝对路径。 html相对路径相对路径(relative path) 同一个目录的文件引用同一个目录的文件引用 如果源文件和引用文件在同一个目录里，直接写引用文如果源文件和引用文件在同一个目录里，直接写引用文 件名即可。件名即可。 a href=biaoti.htm这是一个链接这是一个链接/a 如何表示上级目录如何表示上级目录 ./表示源文件所在目录的上一级目录，表示源文件所在目录的上一级目录，././表示源文件表示源文件 所在

15、目录的上上级目录，以此类推。所在目录的上上级目录，以此类推。 如何表示下级目录如何表示下级目录 引用下级目录的文件，直接写下级目录文件的路径即可引用下级目录的文件，直接写下级目录文件的路径即可 。 1.25 html代码简介代码简介 1.25 html代码简介代码简介 html绝对路径绝对路径(absolute path) html绝对路径绝对路径(absolute path)指带域指带域 名的文件的完整路径。名的文件的完整路径。 a href=“http:/ index.htm target=_blank 新浪站点新浪站点 链接链接/a 1.26 html代码简介代码简介 1.26 html

16、代码简介代码简介 html图片图片(images) 用用 img 这个这个 tag 可以在可以在html里面插里面插 入图片。最基本的语法如下：入图片。最基本的语法如下： img src=url url表示图片的路径和表示图片的路径和 文件名。比如文件名。比如 url 可以是可以是 images/logo/blabla_logo01.gif，也可，也可 以是个相对路径以是个相对路径 ./images/logo/blabla_logo01.gif。 1.27 html代码简介代码简介 1.27 html代码简介代码简介 html body p 图片：图片：img src=t1.jpg /p /b

17、ody /html 1.28 html代码简介代码简介 1.28 html代码简介代码简介 图片图片align属性属性 用用align属性，可以改变水平对齐方式属性，可以改变水平对齐方式(居左、居左、 居中、居右居中、居右)。 用用valign属性，可以改变图片的垂直属性，可以改变图片的垂直(居上、居上、 居中、居下居中、居下)对齐方式图片的大小对齐方式图片的大小 在缺省状况下，图片显示原有的大小。你可在缺省状况下，图片显示原有的大小。你可 以用以用height和和width属性改变图片的大小。不属性改变图片的大小。不 过图片的大小一旦被改变，图片会相应放大过图片的大小一旦被改变，图片会相应放

18、大 或缩小，显示出来的结果可能会很难看。或缩小，显示出来的结果可能会很难看。 1.29 html代码简介代码简介 1.29 html代码简介代码简介 html body img src=t1.jpg width=150 heigh=50 /body /html 1.30 html代码简介代码简介 1.30 html代码简介代码简介 html背景颜色和背景图片背景颜色和背景图片 html的的 body 有两个关于背景的属性，有两个关于背景的属性， bgcolor属性属性 bgcolor属性用来设置属性用来设置html网页的背景颜色网页的背景颜色 。 background属性属性 backgrou

19、nd属性用来设置属性用来设置html网页的背网页的背 景图片。景图片。background属性值就是背景图片属性值就是背景图片 的路径和文件名，如果背景图片小于网页显的路径和文件名，如果背景图片小于网页显 示窗口，那么这个背景图片会自动重复。示窗口，那么这个背景图片会自动重复。 1.31 html代码简介代码简介 1.31 html代码简介代码简介 html body bgcolor=yellow h2看，这个页面是黄色的。看，这个页面是黄色的。/h2 /body /html 1.32 html代码简介代码简介 1.32 html代码简介代码简介 html body background=t1

20、.jpg h3这个网页有背景图片哦！这个网页有背景图片哦！/h3 p如果图片比页面小，图片会自动重复。如果图片比页面小，图片会自动重复。 /p /body /html 1.33 html代码简介代码简介 1.33 html代码简介代码简介 html表格用表格用table表示。表示。 一个表格可以分成很多行，用一个表格可以分成很多行，用tr表示表示 ； 每行又可以分成很多单元格，用每行又可以分成很多单元格，用td表表 示。示。 这三个这三个tag是创建表格最常用的是创建表格最常用的tag。 如何创建如何创建html表格表格 1.34 html代码简介代码简介 1.34 html代码简介代码简介

21、html bodytable width=150 border=1 tr td1/tdtd2/tdtd3/td /tr tr td4/tdtd5/td td6/td /tr tr td7/tdtd8/tdtd9/td /tr /table /body /html 1.35 html代码简介代码简介 1.35 html代码简介代码简介 html常用文本格式常用文本格式 html定义了一些文本格式的定义了一些文本格式的tag，比如，比如 利用利用tag，可以将字体变成粗体或者斜，可以将字体变成粗体或者斜 体。从下面的示例，你可以了解各种文体。从下面的示例，你可以了解各种文 本格式本格式tag如何改

22、变如何改变html文本的显示。文本的显示。 常用文本格式常用文本格式tag b/b粗体粗体bold i/i斜体斜体 u/u下划线下划线 1.36 html代码简介代码简介 1.36 html代码简介代码简介 html字体字体(fonts) 在在html里，可以用里，可以用font这个元素及其属性来设定字体这个元素及其属性来设定字体 的大小，颜色和字体风格。的大小，颜色和字体风格。 字体大小字体大小 用字体大小属性用字体大小属性(size)来设定字体的大小。示例代码如来设定字体的大小。示例代码如 下：下： pfont size=2这一段的字体大小的值是这一段的字体大小的值是2。 /font/p

23、字体风格字体风格 用用face属性来设定字体风格。示例代码如下：属性来设定字体风格。示例代码如下： pfont face=arial这一段的字体风格是这一段的字体风格是arial。 /font/p 字体颜色字体颜色 用颜色属性用颜色属性(color)来设定字体颜色。来设定字体颜色。 1.37 html代码简介代码简介 1.37 html代码简介代码简介 html headtitle字体大小字体大小 font size/title/head body pfont size=1这段文字的字体大小值为这段文字的字体大小值为1。 /font/p pfont size=2这段文字的字体大小值为这段文字的字体大小值为2。 /font/p pfont size=3这段文字的字体大小值为这段文字的字体大小值为3。 /font/p pfont size=4这段文字的字体大小值为这段文字的字体大小值为4。 /font/p /body /html 1.38 html代码简介代码简介 1.38 html代码简介代码简介 html headtitle字体风格字体风格 font face/title/head body p以下第一段用的是以下第一段用的是arial字体，第二段用的