html语法基础市公开课一等奖省赛课微课金奖课件_第1页
html语法基础市公开课一等奖省赛课微课金奖课件_第2页
html语法基础市公开课一等奖省赛课微课金奖课件_第3页
html语法基础市公开课一等奖省赛课微课金奖课件_第4页
html语法基础市公开课一等奖省赛课微课金奖课件_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一章HTML基本标签11/33就业技能结构图22/33本门课程目标和课程项目展示本门课程目标学完本门课程后，你能够：课程项目展示演示示例1：课程项目展示

能制作界面美观大方、面向企业应用静态商业网站，不含动态脚本功效。33/33预习检验请详述HTML文档基本结构。图像与文本对齐方式有哪几个？通常使用那个标签那个属性来创建超链接？44/33本章任务制作图文并茂“广告”页面查看源代码55/33本章目标会使用HTML基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂页面会使用超链接相关标签实现页面间跳转66/33HTML文件基本结构HTML文档结构<HTML><HEAD><TITLE>我第一个网页

</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML网页<HEAD>头部部分<BODY>主体部分<HTML>…</HTML>标签标识HTML文档开始和结束网页标题网页内容，能够是文本、图像等这部分包含文本、图像和链接。它包含在<BODY>…</BODY>标签内查看源代码这部分包含标题和其它说明信息。包含在<HEAD>…</HEAD>标签内77/33使用记事本创建网页演示示例2：怎样在记事本里创建网页

使用记事本创建网页步骤：1、打开记事本2、输入HTML代码3、保留为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页88/33<META>标签<HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>网页标题</TITLE></HEAD>

网页页面中出现乱码，那怎样消除乱码使其正常显示？使用<META>标签简体汉字：gb2312繁体汉字：big5纯英文网页：iso-8859-1能够防止页面中乱码99/33页面背景色或背景图像<BODYbgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>为了使页面漂亮大方，网页背景要尽可能地浅……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……查看源代码网页背景色彩

网页背景图像

1010/33文本相关标签字体、字号标题标签<H1>－<H6><FONT>标签<B>粗体<U>下划线<I>斜体特殊符号行控制段落标签<P>换行标签<BR>使用了<H2>…<H2>换段了设置了字体大小和颜色换行了特殊符号1111/33字体、字号相关标签标题标签<H#>...</H#>#=1,2,3,4,5,6说明：<H1>到<H6>字体大小依次递减……<BODY><H1>一级标题</H1><H2>二级标题</H2><H3>三级标题</H3><H4>四级标题</H4><H5>五级标题</H5><H6>六级标题</H6></BODY>……H1到H6标签用于指定不一样级别标题查看源代码1212/33<FONTsize=“+2”

color=“red”face=“律书”> ...</FONT>字体、字号相关标签<FONT>标签特殊符号特殊字符转义码空格

引号(“”)"小于(<)<大于(>)>版权号(©)©字体大小值字体颜色字体类型1313/33字体、字号相关标签查看源代码......<BODY><P><FONTsize="+2"color="red">

手机充值、IP卡/电话卡</FONT><BR/>

移动 | 100| 联通| 50</P>Copyright©

"淘宝网"Allrights.</BODY>……空格效果1414/33…….

<Palign="center">淘宝集市欢迎您！</P><Palign="left">淘宝网首届翠友会！<BR>……</P>……行控制相关标签段落标签<P>段(Paragraph)(能够看作是空行)<p>换行标签<BR>换行<br>

查看源代码换段了换行了1515/33图像标签常见图片格式介绍图像类型优点缺点适用场所制作工具*.jpg体积小，比较清楚有损压缩、画面失真网页图片Photoshop*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限透明度,效果不如别图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画Flash*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸photoshop1616/33图像标签图像基本语法<IMGsrc="images/adv_2.jpg"width="300“height="150“alt="明星演唱会开幕">……<BODY><IMGsrc="images/adv_2.jpg"alt="明星演唱会开幕"width="300"height="150"></BODY>……查看源代码鼠标移到图像上，出现提醒性文字图像位置图像宽度图像高度为图像添加提醒性文字1717/33图像标签图像与文本对齐方式<IMGalign="middle">图像与文本居中对齐,还能够取top,bottom值….<BODY><Ahref="star.html"><IMGalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></A>请点击广告进入明星专区</BODY>……查看源代码图像和文本居中对齐1818/33小结1字号大小为3练习答案练习代码编写以下列图所表示效果对应html代码1919/33文字布局内容分隔<HR>标签项目列表和编号有序列表<OL>无序列表<UL>预格式文本<PRE>标签水平分隔线<HR>有序列表无序列表用了预先定义好格式2020/33怎样使用内容分隔<HR>标签<HRsize="5"color="red"width="300">……<BODY><HRsize="5"color="red"width="300"><HRsize="10"color="black"width="200"><HRsize="5"color="#0000FF"width="50%"></BODY>……线厚度值线宽度查看源代码<HR>标签用于在页面上绘制水平线线颜色2121/33怎样使用列表无序列表语法<UL> <LI>列表项内容</LI> ……</UL>有序列表语法

<OL><LI>列表项内容</LI> ……</OL>查看源代码<H4>注册步骤：</H4><OLtype=“1”>---1/a/i<LI>填写信息</LI><LI>收电子邮件</LI><LI>注册成功</LI></OL>

新人上路指南

<ULtype="circle">---disc(实心圆)/square(方框)/circle(空心圈)

<LI>怎样激活会员名？</LI><LI>怎样注册淘宝会员？</LI><LI>注册时密码设置有什么要求？</LI><LI>支付宝认证</LI></UL>2222/33预格式文本<PRE>标签怎样实现以下列图所表示页面中文字效果？使用<PRE>标签能够实现2323/33怎样使用预格式文本<PRE>标签<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">

腾讯-QQ币/QQ幻想-30元卡

一口价：26.45元运费：卖家负担运费剩下时间：5天宝贝类型：全新

卖主申明：货到付款，可试用10天！

</PRE>查看源代码HTML中代码格式与浏览器中显示效果一样2424/33页面链接<A>标签链接到其它页面<A

href="register/register.html">[无偿注册]</A>链接内容链接地址<HTML><HEAD><TITLE>链接到其它页面</TITLE></HEAD><BODY><Ahref="register/register.html“>[无偿注册]</A><Ahref="login/login.htm"target="_blank"

>[登录]</A></BODY></HTML>单击”[无偿注册]”之后链接到页面查看源代码2525/33页面链接<A>标签链接到其它页面绝对路径 指定从根目录到文件完整路径。相对路径 指定相对于当前文件文件位置。

在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件路径有几个方式？两种方式：相对路径和绝对路径2626/33页面链接<A>标签要链接到同一目录(C:\HTML)下页面，可编写<AHREF=“Doc2.htm”>或<AHREF=“C:\html\Doc2.htm”>相对路径名绝对路径名2727/33页面链接<A>标签要实现以下列图所表示超链接效果，怎么办？演示示例3：演示锚链接例子

使用锚记标签2828/33页面链接<A>标签链接到本页面锚记标签用于使用户“跳”到文档某个部分HTMLNAME属性用于创建锚标识

<ANAME=“marker”>主题名称</A>为到达这种跳转效果，请在HREF参数中使用该标识

<AHREF=“#marker”>主题名称</A>演示示例4：演示锚链接例子

<HTML><HEAD><TITLE>链接到其它页面</TITLE></HEAD><BODY><Ahref="#helpme">[新人上路]</A> ……<A

name="helpme">新人上路指南</A> ……</BODY></HTML>1、定义锚标识2、链接到锚标识所在位置2929/33滚动<MARQUEE>标签<MARQUEEscrolldelay=“100”direction=“up">滚动文字或图像</MARQUEE>滚动延迟时间滚动对象方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动方向，默认为从右向左。3030/33查看源代码滚动<MARQUEE>标签<MARQUEEscrolldelay="100">水平滚动</MARQUEE><MARQUEEscrolldelay="200"direction="up">垂直滚动</MARQUEE><MARQUEEscrolldelay="300"direction="up"onmouseover="this.stop()"onMouseOut="this.start()"><Ahref="#"><IMGsrc="images/scroll/1.gif"border="0"align="middle">Avon化装品</A><BR><Ahref="#"><IMGsrc="images/scroll/2.gif"border="0"align="middle">

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论