网页制作HTML代码简介.ppt
《网页制作HTML代码简介.ppt》由会员分享,可在线阅读,更多相关《网页制作HTML代码简介.ppt(41页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
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种路径的写法:相对路径和绝对路径。种路径的写法
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 HTML 代码 简介
限制150内