html网页制作chapter1基本标签_第1页
html网页制作chapter1基本标签_第2页
html网页制作chapter1基本标签_第3页
html网页制作chapter1基本标签_第4页
html网页制作chapter1基本标签_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

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

文档简介

第一章Html基本标签学完本门课程后，你能够：制作界面美观大方、面向企业应用的静态商业网站课程目标制作图文并茂的“广告”页面本章任务本章目标：了解Internet和万维网（www）掌握html文档的基本结构会使用html的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转本章重点：html结构控制标签的运用本章难点：掌握文字内容与修饰相关标签的运用本章目标Internet和万维网全球范围内网络的网络Internet的一部分由包含各种信息的文档组成万维网2-1Web服务器客户端hTTP协议协议用于访问Web上资源的一组规则HTTP是Web协议6万维网2-2Web服务器客户端向服务器发送页面请求Web服务器处理请求并返回请求的页面HTTP负责请求和响应7协议：是一组标准规则，访问Web资源都要遵守相应的协议(HTTP)地址：是一组命名方案，又称之为URL:UniformResourceLocator，用于标识web上的页面和资源WWW资源8WWW资源常用的网址

协议主机WWW资源URL的组成用于通信的协议，例如http,ftp与之通信的主机（服务器）服务器上资源的路径例如：/index.htm10用户从浏览器获得资源输入地址请求11网站：万维网上相关网页的集合网页：文件后缀名通常为*.html或*.htm的页面html：用于制作网页的超文本标记语言(hyperTextMark-upLanguage)浏览器:是安装在客户端计算机上的应用软件,如IE,用来读取html源代码并按指令显示页面

html编辑器：用于开发网页的工具软件Web相关术语html是一种超文本标记语言。使用html编辑的文档可以可以通过万维网浏览器查看。文档中可以包括文本、图象、声音、动画等。用IE、Firefox等浏览器。读取html文本来显示页面

标记语言是由特定字符分隔的基本元素，指定基本元素中所包含的文本如何显示html简介13html文件是一个包含标记的文本文件这些标记指导浏览器怎样显示这个页面html文件必须有htm或者html扩展名html文件可以用一个简单的文本编辑器创建

html文件html文件的编辑工具通过文本编辑器创建使用Dreamwerver编辑器创建

html文件html示例<html> <head> <title>页面标题</title> </head> <body>

这是我的第一个页面

<b>这里的文字要加粗</b> </body></html>运行结果使用记事本创建网页的步骤：1、打开记事本2、输入html代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页演示示例2：如何在记事本里创建网页使用记事本创建网页html编辑器-Dreamweaverhtml文档的结构html文件的基本结构<html><head><title>我的第一个网页

</title></head><body>helloworld!</body></html>html网页<head>头部部分<body>主体部分<html>…</html>标签标记html文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在<body>…</body>

标签内查看源代码这部分包括标题和其他说明信息。包括在<head>…</head>

标签内html标签用来组成html元素html标签两端有两个包括字符：“<”和“>”，这两个包括字符被称为尖括号html标签通常成对出现，比如<b>和</b>，一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容html标签是大小写无关的，<b>跟<B>表示的意思是一样的html标签注释……<!--<li>被注释掉的行将不显示</li>--><li>正常显示行1</li><li>正常显示行2</li>……注释

<!--注释内容-->用于增加代码的可读性，不显示标签可以拥有属性。属性能够为页面上的html元素提供附加信息例如：标签<body>定义了html页面的主体元素，使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：<bodybgcolor="red">属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给html元素的开始标签的标签属性22页面背景色或背景图像<bodybgcolor="#ffccff“background="back_image.gif">helloworld！</body>为了使页面美丽大方，网页背景要尽量地浅……<bodybgcolor="#ffccff“> helloworld!</body>……查看源代码网页背景色彩

网页背景图像

字体、字号标题标签<h1>－<h6><font>标签特殊符号文本相关标签使用了<h2>…换段了设置了字体的大小和颜色换行了特殊符号标题标签<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标签用于指定不同级别的标题查看源代码字体、字号相关标签<font>标签<fontsize=“+2”

color=“red”face=“隶书”

> ...</font>字体的大小值字体的颜色字体的类型特殊符号1、因为<、>等符号在HTML中已使用，所以必须用其他符号来代替2、都以分号结束（；）字体、字号相关标签查看源代码......<body><p><fontsize="+2"color="red">

手机充值、ip卡/电话卡

</font><br/>

移动 | 100| 联通

| 50</p>copyright©2007"淘宝网"allrights.</body>……空格效果…….

<palign="center">淘宝集市欢迎您！</p><palign="left">淘宝网首届翠友会！<br>……</p>……段落标签<p>段(paragraph)(可以看作是空行)<p>换行标签<br>换行<br>

行的控制相关标签查看源代码换段了换行了和<p>的区别：前后不换行<hrsize="5"color="red"width="300“/>如何使用内容分隔<hr>标签……<body><hrsize="5"color="red"width="300"><hrsize="10"color="black"width="200"><hrsize="5"color="#0000ff"width="50%"></body>……线的厚度值线的宽度查看源代码<hr>标签用于在页面上绘制水平线线的颜色图像标签

……<imgsrc="images/drink.jpg"alt="精品热卖：高清晰，30寸等离子电视"title="精品热卖：高清晰，30寸等离子电视"/>……为了不同浏览器之间的兼容，推荐使用title属性

，确保能显示提示文字<imgsrc="图片地址"alt="提示文字"title="提示文字"/>图像与文本的对齐方式<imgalign="middle">图像标签图像与文本居中对齐,还可以取top,bottom值….<body><ahref="star.html"><imgalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></a>请点击广告进入明星专区</body>……查看源代码图像和文本居中对齐31编写如下图所示效果对应的html代码小结1字号大小为3练习答案练习代码项目列表和编号有序列表<ol>无序列表<ul>文字布局水平分隔线<hr>有序列表无序列表用了预先定义好的格式如何使用列表无序列表语法

<ul> <li>列表项内容</li> ……</ul>有序列表语法

<ol><li>列表项内容</li> ……</ol>查看源代码<h4>注册步骤：</h4><oltype="1"><li>填写信息</li><li>收电子邮件</li><li>注册成功</li></ol>

新人上路指南

<ultype="circle"><li>如何激活会员名？</li><li>如何注册淘宝会员？</li><li>注册时密码设置有什么要求？</li><li>支付宝认证</li></ul>定义描述标签

……<body><dl><dt>咖啡</dt><dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd><dd>可以提神，刺激神经。</dd></dl></body>……这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合<dl><dt>标题</dt><dd>描述1</dd>……</dl>……<body><dl>

<dt>图片的HTML代码（后续讲解）……<dt><dd>商品名称：灿坤蒸气电熨斗</dd><dd>商品价格：388元</dd><dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd></dl></body>……用定义描述标签实现图文混编的效果文字有一定的缩进36小结2有序列表OL无序列表UL练习答案练习代码编写如下图所示效果对应的html代码37超链接超链接---实现页面间的导航链接文本或图像链接地址（目标）

……<ahref="span.html"target="_blank">灿坤蒸气电熨斗</a>……基本语法链接在新窗口中打开<ahref="链接地址"target="目标窗口位置">链接热点文本或图像</a>39……<ahref="../web1.htm">上级目录</a><ahref="../../web2.htm">上上级目录</a>……链接路径

相对地址：相对于当前目录的地址，常用

绝对地址：指向目标地址的完整描述，少用

上级目录：../上上级目录：../../<ahref=“/memAdmin/login/login.htm”>登录</a><ahref="">搜狐</a><ahref="login/login.htm">登录</a>40……<ahref="register/register.html">[免费注册]</a><ahref="login/login.htm">[登录]</a>……超链接的三类应用场合4-1

页面间链接

锚链接功能性链接

常用于网站导航相对路径41实现锚链接

1、定义标记（锚）：<aname="标记名">目标位置</a>2、设置链接到标记位置：<ahref="#标记名">当前位置</a>

……<ahref="#star">[明星专区]</a>……

<aname=“star”>明显专区内容</a>……超链接的三类应用场合4-2

定义标记设置链接到标记位置A.页面内的锚链接适用于页面内容较多，超过一屏的场合42超链接的三类应用场合4-3

实现锚链接……标记所在页….<ahref="#star">[明星专区]</a>……B.页面间的锚链接……链接页….明星体验：<ahref="anchor.html#star">明星专区</a>……43功能性链接邮箱、QQ链接等……<ahref="mailto:guimeiWebMater@">站长信箱</a>……超链接的三类应用场合4-4

44<marqueescrolldelay=“100”direction=“up"

behavior=“alternate”>滚动文字或图像</marquee>滚动<marquee>标签滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。behavior:表示滚动的方式,值可以是scroll(

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论