《网页制作HTML代码简介.ppt》由会员分享，可在线阅读，更多相关《网页制作HTML代码简介.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1.1HTML代码简介代码简介HTML 开发开发HTML标记的格式组成：标记的格式组成：HTML ./HTMLHTML 标记用于标记标记用于标记 HTML 文档的开始和结束文档的开始和结束元素-标识标记属性-描述标记值-分配给属性的内容ELEMENT ATTRIBUTE=value1.2HTML代码简介代码简介HTML 文档的结构文档的结构HTML 部分文档头部分正文部分HTML HEAD TITLE欢迎进入欢迎进入 HTML 世界世界/TITLE/HEAD BODY P这会是一种很有趣的体验这会是一种很有趣的体验/P/BODY/HTML基本结构：基本结构：运行结果运行结果1.3HTML代码简
2、介代码简介HTML头部信息头部信息(Head)HTML头部信息头部信息(head)里包含关于所在网页的里包含关于所在网页的信息。头部信息信息。头部信息(head)里的内容，主要是被浏里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。览器所用，不会显示在网页的正文内容里。标题标题(title)标题标题(title)是最常用的是最常用的head信息。它不显示在信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题网页正文里，显示在浏览器窗口的标题栏里。栏里。示例代码如下：示例代码如下：htmlheadtitleHTML中文教程头部信息中文教程头部信息/title/head/html1.
3、4HTML代码简介代码简介正文标题正文标题HTML用用h1到到h6这几个这几个Tag来定义来定义正文标题，从大到小。每个正文标题自正文标题，从大到小。每个正文标题自成一段。成一段。1.5HTML代码简介代码简介htmlbodyh1这是这是1号标题号标题/h1h2这是这是2号标题号标题/h2h3这是这是3号标题号标题/h3h4这是这是4号标题号标题/h4h5这是这是5号标题号标题/h5h6这是这是6号标题号标题/h6/body/html1.6HTML代码简介代码简介段落划分段落划分在在HTML里用里用p和和/p划分段落划分段落,P可可以不成对出现。以不成对出现。1.7HTML代码简介代码简介段落
4、标记段落标记HTML HEAD TITLE欢迎使用欢迎使用 HTML/TITLE/HEAD BODY BGCOLOR=lavender P这会是一种很有趣的体验这会是一种很有趣的体验 P 另一个段落元素另一个段落元素/BODY/HTML 1.8HTML代码简介代码简介使用对齐属性修饰段落使用对齐属性修饰段落HTML HEAD TITLE学学习习HTML/TITLE /HEAD BODY BGCOLOR=lavender P align=center这这会是一种很有趣的体会是一种很有趣的体验验/P/BODY/HTML右对齐右对齐Left：左对齐左对齐Center：居中居中Right：右对齐右对齐
5、1.9HTML代码简介代码简介使用对齐属性修饰标题使用对齐属性修饰标题htmlbodyh1align=center这是标题这是标题/h1p上面的标题是居中显示的。上面的标题是居中显示的。/p/body/html1.10HTML代码简介代码简介换行换行通过使用通过使用br这个这个Tag，可以在不新建，可以在不新建段落的情况下换行。段落的情况下换行。br没有没有ClosingTag。用用p换行是个坏习惯，正确的是使用换行是个坏习惯，正确的是使用br,即在行末加入即在行末加入br。1.11HTML代码简介代码简介换行标记换行标记HTML HEAD TITLE欢迎使用欢迎使用 HTML/TITLE/H
6、EAD BODY BGCOLOR=lavender P这会是一种很有趣的这会是一种很有趣的BR体验体验 P 另一个段落元素另一个段落元素/BODY/HTML 1.12HTML代码简介代码简介HTML注释注释在在HTML文件里，你可以写代码注释，解文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。日后能够更好地理解你的代码。注释可以写注释可以写在在!-和和-之间。浏览器是之间。浏览器是忽略注释的，你不会忽略注释的，你不会在在HTML正文中看到正文中看到你的注释。你的注释。!-Thisisacomment-1.13HTML代
7、码简介代码简介htmlbody!-这是代码注释这是代码注释-p代码注释是不会显示在网页里的。代码注释是不会显示在网页里的。/p/body/html1.14HTML代码简介代码简介加入水平线加入水平线用用hr这个这个Tag可以在可以在HTML文件里加一文件里加一条横线条横线Hr没有结束标签没有结束标签1.15HTML代码简介代码简介htmlbodyp村妇想像皇宫的生活：皇后得用金扁担挑水吧。村妇想像皇宫的生活：皇后得用金扁担挑水吧。/phrp问：谁是世界上最可怜的人？答：炮兵连炊事班问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽还给别人背黑锅战士！问：为什么？答：戴绿帽还
8、给别人背黑锅/p/body/html1.16HTML代码简介代码简介HTML利用超链接打开链接文件利用超链接打开链接文件HTML用用a/a来表示超链接来表示超链接a/a可以指向任何一个文件源：一个可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。网页，一个图片，一个影视文件等。用法如下：用法如下：ahref=url链接的显示文字链接的显示文字/a点击点击a/a当中的内容，即可打开一当中的内容，即可打开一个链接文件，个链接文件，href属性则表示这个链接属性则表示这个链接文件的路径。文件的路径。1.17HTML代码简介代码简介htmlbodyahref=biaoti.htm这是
9、一个链接这是一个链接/abrahref=http:/新浪新浪站点链接站点链接/a/body/html1.18HTML代码简介代码简介链接的链接的target属性属性使用链接的使用链接的target属性，可以在一个新窗属性，可以在一个新窗口里打开链接文件。口里打开链接文件。1.19HTML代码简介代码简介htmlbodyahref=biaoti.htm这是一个链接这是一个链接/abrahref=http:/target=_blank新浪站点链接新浪站点链接/a/body/html1.20HTML代码简介代码简介链接的链接的title属性属性使用使用链接的链接的title属性，可以让鼠标悬停属性，
10、可以让鼠标悬停在超链接上的时候，显示该超链接的文在超链接上的时候，显示该超链接的文字注释。字注释。1.21HTML代码简介代码简介htmlbodyahref=biaoti.htm这是一个链接这是一个链接/abrahref=“http:/”target=_blanktitle=新浪站点链接新浪站点链接新浪站点链接新浪站点链接/a/body/html1.22HTML代码简介代码简介链接到链接到email地址地址在网站中，你经常会看到在网站中，你经常会看到“联系我们联系我们”的链接，一点击这个链接，就会触发你的链接，一点击这个链接，就会触发你的邮件客户端，比如的邮件客户端，比如OutlookExpr
11、ess，然后显示一个新建，然后显示一个新建mail的窗口。用的窗口。用a可以实现这样的功能。可以实现这样的功能。1.23HTML代码简介代码简介htmlbodyahref=biaoti.htm这是一个链接这是一个链接/abrahref=http:/target=_blanktitle=新浪站点链接新浪站点链接新浪站新浪站点链接点链接/aahref=mailto:联系新联系新浪浪/a/body/html1.24HTML代码简介代码简介HTML相对路径相对路径(Relative Path)和绝对路径和绝对路径(Absolute Path)HTML有有2种路径的写法：相对路径和绝对路径。种路径的写法
12、：相对路径和绝对路径。HTML相对路径相对路径(RelativePath)同一个目录的文件引用同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文如果源文件和引用文件在同一个目录里，直接写引用文件名即可。件名即可。ahref=biaoti.htm这是一个链接这是一个链接/a如何表示上级目录如何表示上级目录./表示源文件所在目录的上一级目录，表示源文件所在目录的上一级目录，././表示源文件表示源文件所在目录的上上级目录，以此类推。所在目录的上上级目录，以此类推。如何表示下级目录如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。引用下级目录的文件，直接写下级目录文
13、件的路径即可。1.25HTML代码简介代码简介HTML绝对路径绝对路径(Absolute Path)HTML绝对路径绝对路径(absolutepath)指带域指带域名的文件的完整路径。名的文件的完整路径。index.htmtarget=_blank新浪站新浪站点链接点链接/a1.26HTML代码简介代码简介HTML图片图片(Images)用用img这个这个Tag可以在可以在HTML里面插里面插入图片。最基本的语法如下：入图片。最基本的语法如下：imgsrc=urlurl表示图片的路径和表示图片的路径和文件名。比如文件名。比如url可以是可以是images/logo/blabla_logo01.
14、gif，也可，也可以是个相对路径以是个相对路径./images/logo/blabla_logo01.gif。1.27HTML代码简介代码简介htmlbodyp图片：图片：imgsrc=t1.jpg/p/body/html1.28HTML代码简介代码简介图片图片align属性属性用用align属性，可以改变水平对齐方式属性，可以改变水平对齐方式(居左、居左、居中、居右居中、居右)。用用valign属性，可以改变图片的垂直属性，可以改变图片的垂直(居上、居上、居中、居下居中、居下)对齐方式图片的大小对齐方式图片的大小在缺省状况下，图片显示原有的大小。你可在缺省状况下，图片显示原有的大小。你可以用
15、以用height和和width属性改变图片的大小。不属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。或缩小，显示出来的结果可能会很难看。1.29HTML代码简介代码简介htmlbodyimgsrc=t1.jpgwidth=150heigh=50/body/html1.30HTML代码简介代码简介HTML背景颜色和背景图片背景颜色和背景图片HTML的的body有两个关于背景的属性，有两个关于背景的属性，bgcolor属性属性bgcolor属性用来设置属性用来设置HTML网页的背景颜色。网页的背景颜色。backg
16、round属性属性background属性用来设置属性用来设置HTML网页的背景网页的背景图片。图片。background属性值就是背景图片的属性值就是背景图片的路径和文件名，如果背景图片小于网页显示路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。窗口，那么这个背景图片会自动重复。1.31HTML代码简介代码简介htmlbodybgcolor=yellowh2看，这个页面是黄色的。看，这个页面是黄色的。/h2/body/html1.32HTML代码简介代码简介htmlbodybackground=t1.jpgh3这个网页有背景图片哦！这个网页有背景图片哦！/h3p如果图
17、片比页面小，图片会自动重复。如果图片比页面小，图片会自动重复。/p/body/html1.33HTML代码简介代码简介HTML表格用表格用table表示。表示。一个表格可以分成很多行，用一个表格可以分成很多行，用tr表示；表示；每行又可以分成很多单元格，用每行又可以分成很多单元格，用td表表示。示。这三个这三个Tag是创建表格最常用的是创建表格最常用的Tag。如何创建如何创建HTML表格表格1.34HTML代码简介代码简介htmlbodytablewidth=150border=1trtd1/tdtd2/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/trtrtd7/tdtd8
18、/tdtd9/td/tr/table/body/html1.35HTML代码简介代码简介HTML常用文本格式常用文本格式HTML定义了一些文本格式的定义了一些文本格式的Tag，比如，比如利用利用Tag，可以将字体变成粗体或者斜体。，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格从下面的示例，你可以了解各种文本格式式Tag如何改变如何改变HTML文本的显示。文本的显示。常用文本格式常用文本格式Tagb/b粗体粗体boldi/i斜体斜体U/U下划线下划线1.36HTML代码简介代码简介HTML字体字体(Fonts)在在HTML里，可以用里，可以用font这个元素及其属性来设定字体这
19、个元素及其属性来设定字体的大小，颜色和字体风格。的大小，颜色和字体风格。字体大小字体大小用字体大小属性用字体大小属性(size)来设定字体的大小。示例代码如来设定字体的大小。示例代码如下：下：pfontsize=2这一段的字体大小的值是这一段的字体大小的值是2。/font/p字体风格字体风格用用face属性来设定字体风格。示例代码如下：属性来设定字体风格。示例代码如下：pfontface=arial这一段的字体风格是这一段的字体风格是arial。/font/p字体颜色字体颜色用颜色属性用颜色属性(color)来设定字体颜色。来设定字体颜色。1.37HTML代码简介代码简介htmlheadtit
20、le字体大小字体大小fontsize/title/headbodypfontsize=1这段文字的字体大小值为这段文字的字体大小值为1。/font/ppfontsize=2这段文字的字体大小值为这段文字的字体大小值为2。/font/ppfontsize=3这段文字的字体大小值为这段文字的字体大小值为3。/font/ppfontsize=4这段文字的字体大小值为这段文字的字体大小值为4。/font/p/body/html1.38HTML代码简介代码简介htmlheadtitle字体风格字体风格fontface/title/headbodyp以下第一段用的是以下第一段用的是arial字体，第二段用
21、的字体，第二段用的是是courier字体，第三段用的是字体，第三段用的是verdana字体。字体。/ppfontface=arialarialcourierverdana/font/ppfontface=courierarialcourierverdana/font/ppfontface=verdanaarialcourierverdana/font/p/body/html1.39HTML代码简介代码简介htmlheadtitle字体颜色字体颜色fontcolor/title/headbodyp这段文字用的是缺省的字体颜色。这段文字用的是缺省的字体颜色。/ppfontcolor=#FF0000
22、这段文字的字体这段文字的字体颜色为红色。颜色为红色。/font/p/body/html1.40HTML代码简介代码简介HTML表单表单(Forms)HTML表单表单(Form)是是HTML的一个重要部的一个重要部分，主要用于采集和提交用户输入的信分，主要用于采集和提交用户输入的信息。息。举个简单的例子，一个让用户输入姓名举个简单的例子，一个让用户输入姓名的的HTML表单表单(Form)。示例代码如下：。示例代码如下：1.41HTML代码简介代码简介htmlheadtitle输入用户姓名输入用户姓名/title/headbodyformaction=“yonghu.aspmethod=get请输入你的姓名：请输入你的姓名：inputtype=textname=yournameinputtype=submitvalue=提交提交/form/body/html