html网页制作PPTchapter1基本标签

第一章Html基本标签•学完本门课程后，你能够：制作界面美观大方、面向企业应用的静态商业网站课程目标•制作图文并茂的“广告”页面本章任务•本章目标：•了解Internet和万维网（）•掌握html文档的基本结构•会使用html的基本结构创建网页•会使用文本相关标签实现文字修饰和布局•会使用图像相关标签实现图文并茂的页面•会使用超链接相关标签实现页面间的跳转•本章重点：html结构控制标签的运用•本章难点：掌握文字内容与修饰相关标签的运用本章目标Internet和万维网•全球范围内网络的网络•Internet的一部分•由包含各种信息的文档组成6万维网2-1Web服务器客户端协议•用于访问Web上资源的一组规则•HTTP是Web协议7万维网2-2Web服务器客户端向服务器发送页面请求Web服务器处理请求并返回请求的页面HTTP负责请求和响应8协议：是一组标准规则，访问Web资源都要遵守相应的协议(HTTP)地址：是一组命名方案，又称之为URL:UniformResourceLocator，用于标识web上的页面和资源资源•常用的网址://资源•URL的组成用于通信的协议，例如http,ftp与之通信的主机（服务器）服务器上资源的路径例如：协议主机路径http用户从浏览器获得资源输入地址请求•网站：万维网上相关网页的集合•网页：文件后缀名通常为*.html或*.htm的页面•html：用于制作网页的超文本标记语言(hyperTextMark-upLanguage)•浏览器:是安装在客户端计算机上的应用软件,如IE,用来读取html源代码并按指令显示页面•html编辑器：用于开发网页的工具软件Web相关术语13•html是一种超文本标记语言。使用html编辑的文档可以可以通过万维网浏览器查看。文档中可以包括文本、图象、声音、动画等。•用IE、Firefox等浏览器。读取html文本来显示页面•标记语言是由特定字符分隔的基本元素，指定基本元素中所包含的文本如何显示html简介•html文件是一个包含标记的文本文件•这些标记指导浏览器怎样显示这个页面•html文件必须有htm或者html扩展名•html文件可以用一个简单的文本编辑器创建html文件•html文件的编辑工具通过文本编辑器创建使用Dreamwerver编辑器创建html文件html示例htmlheadtitle页面标题/title/headbody这是我的第一个页面b这里的文字要加粗/b/body/html运行结果使用记事本创建网页的步骤：1、打开记事本2、输入html代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页演示示例2：如何在记事本里创建网页使用记事本创建网页html编辑器-Dreamweaver•html文档的结构html文件的基本结构htmlheadtitle我的第一个网页/title/headbodyhelloworld!/body/htmlhtml网页head头部部分body主体部分html…/html标签标记html文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在body…/body标签内查看源代码这部分包括标题和其他说明信息。包括在head…/head标签内•html标签用来组成html元素•html标签两端有两个包括字符：“”和“”，这两个包括字符被称为尖括号•html标签通常成对出现，比如b和/b，一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容•html标签是大小写无关的，b跟B表示的意思是一样的html标签•注释……!--li被注释掉的行将不显示/li--li正常显示行1/lili正常显示行2/li……注释!--注释内容--用于增加代码的可读性，不显示22•标签可以拥有属性。属性能够为页面上的html元素提供附加信息•例如：标签body定义了html页面的主体元素，使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：bodybgcolor=red•属性通常由属性名和值成对出现，就像这样：name=value。属性通常是附加给html元素的开始标签的标签属性页面背景色或背景图像bodybgcolor=#ffccff“background=back_image.gifhelloworld！/body为了使页面美丽大方，网页背景要尽量地浅……bodybgcolor=#ffccff“helloworld!/body……查看源代码网页背景色彩网页背景图像•字体、字号•标题标签h1－h6•font标签•特殊符号文本相关标签使用了h2…换段了设置了字体的大小和颜色换行了特殊符号标题标签h#.../h##=1,2,3,4,5,6说明：h1到h6字体大小依次递减字体、字号相关标签……bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body……h1到h6标签用于指定不同级别的标题查看源代码字体、字号相关标签•font标签fontsize=“+2”color=“red”face=“隶书”.../font字体的大小值字体的颜色字体的类型•特殊符号特殊字符转义码空格 引号(“”)"小于()<lessthan大于()>graterthan版权号(©)©1、因为、等符号在HTML中已使用，所以必须用其他符号来代替2、都以分号结束（；）字体、字号相关标签查看源代码......bodypfontsize=+2color=red手机充值、ip卡/电话卡/fontbr/移动 | 100| 联通| 50/pcopyright©2007"淘宝网"allrights./body……空格效果…….palign=center淘宝集市欢迎您！/ppalign=left淘宝网首届翠友会！br……/p……•段落标签p•段(paragraph)(可以看作是空行)p•换行标签br•换行br行的控制相关标签查看源代码换段了换行了和p的区别：前后不换行•hrsize=5color=redwidth=300“/如何使用内容分隔hr标签……bodyhrsize=5color=redwidth=300hrsize=10color=blackwidth=200hrsize=5color=#0000ffwidth=50%/body……线的厚度值线的宽度查看源代码hr标签用于在页面上绘制水平线线的颜色•图像标签……imgsrc=images/drink.jpgalt=精品热卖：高清晰，30寸等离子电视title=精品热卖：高清晰，30寸等离子电视/……为了不同浏览器之间的兼容，推荐使用title属性，确保能显示提示文字imgsrc=图片地址alt=提示文字title=提示文字/31•图像与文本的对齐方式•imgalign=middle图像标签图像与文本居中对齐,还可以取top,bottom值….bodyahref=star.htmlimgalign=middlesrc=images/adv_2.jpgwidth=180height=95border=0//a请点击广告进入明星专区/body……查看源代码图像和文本居中对齐编写如下图所示效果对应的html代码小结1字号大小为3练习答案练习代码•项目列表和编号•有序列表ol•无序列表ul文字布局水平分隔线hr有序列表无序列表用了预先定义好的格式如何使用列表•无序列表语法ulli列表项内容/li……/ul•有序列表语法olli列表项内容/li……/ol查看源代码h4注册步骤：/h4oltype=1li填写信息/lili收电子邮件/lili注册成功/li/ol新人上路指南ultype=circleli如何激活会员名？/lili如何注册淘宝会员？/lili注册时密码设置有什么要求？/lili支付宝认证/li/ul•定义描述标签……bodydldt咖啡/dtdd一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。/dddd可以提神，刺激神经。/dd/dl/body……这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合dldt标题/dtdd描述1/dd……/dl36……bodydldt图片的HTML代码（后续讲解）……dtdd商品名称：灿坤蒸气电熨斗/dddd商品价格：388元/dddd商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计/dd/dl/body……•用定义描述标签实现图文混编的效果文字有一定的缩进37小结2有序列表OL无序列表UL练习答案练习代码编写如下图所示效果对应的html代码超链接•超链接---实现页面间的导航链接文本或图像链接地址（目标）39……ahref=span.htmltarget=_blank灿坤蒸气电熨斗/a……基本语法链接在新窗口中打开ahref=链接地址target=目标窗口位置链接热点文本或图像/a40……ahref=../web1.htm上级目录/aahref=../../web2.htm上上级目录/a……链接路径•相对地址：相对于当前目录的地址，常用•绝对地址：指向目标地址的完整描述，少用上级目录：../上上级目录：../../ahref=“/memAdmin/login/login.htm”登录/aahref=搜狐/aahref=login/login.htm登录/a41……ahref=register/register.html[免费注册]/aahref=login/login.htm[登录]/a……超链接的三类应用场合4-1•页面间链接•锚链接•功能性链接常用于网站导航相对路径42•实现锚链接1、定义标记（锚）：aname=标记名目标位置/a2、设置链接到标记位置：ahref=#标记名当前位置/a……ahref=#star[明星专区]/a……aname=“star”明显专区内容/a……超链接的三类应用场合4-2定义标记设置链接到标记位置A.页面内的锚链接适用于页面内容较多，超过一屏的场合43超链接的三类应用场合4-3•实现锚链接……标记所在页….ahref=#star[明星专区]/a……B.页面间的锚链接……链接页….明星体验：ahref=anchor.html#star明星专区/a……44•功能性链接•邮箱、QQ链接等……ahref=mailto:[e-mail]站长信箱/a……超链接的三类应用场合4-445marqueescrolld