第一章(HTML基本标签)

上传人：2*** IP属地：湖北上传时间：2023-02-02 格式：PPT 页数：36 大小：1.88MB 积分：28 举报 版权申诉

已阅读5页，还剩31页未读，继续免费阅读

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

文档简介

第一章HTML基本标签预习检查请详述HTML文档的基本结构！标题标签有哪几种类型？<h1>到<h6>哪些标签可以控制文字样式？<font><b><strong><i><p><pre><br><u>......本章目标了解Internet的相关介绍了解HTML技术掌握网页背景设置掌握字体和段落标签的应用掌握如何在网页中插入图片掌握超级链接的使用掌握列表标签制作滚动效果Internet相关技术介绍TCP/IP协议 TCP/IP协议是Internet国际互联网络的基础。HTTP协议：用于浏览网页FTP协议：用于Internet文件共享IP地址和域名简介IP地址：标识网络中每台主机的唯一地址。域名：用于标识IP地址的有意义的词组。URL(UniformResourceLocator)

统一资源定位符，用于精确定位网络中的各种资源。如网页、图片、音乐、视频等。Internet相关技术介绍Web浏览器

将网页文件翻译成丰富多彩的网页。常用的浏览器：IEFireFoxOpera绝对路径和相对路径绝对路径：文件或目录在硬盘上的真正路径。

C:\xyz\test.txt /index.htm相对路径：相对于某个基准目录的路径。

./代表当前目录 ../代表上级目录HTML语言什么是HTML？HTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如<html>HTML标签通常是成对出现的，比如<b>和</b>标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

HTML网页的结构HTML网页的结构<HTML><HEAD><TITLE>欢迎来到HTML

</TITLE></HEAD><BODY><P>您好，SEC！</P></BODY></HTML>HTML网页<HEAD>头部部分<BODY>主体部分<HTML>…</HTML>标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在<BODY>…</BODY>

标签内这部分包括标题和其他说明信息。包括在<HEAD>…</HEAD>

标签内使用记事本创建网页演示示例：使用记事本创建网页的步骤：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页设置网页背景色或背景图像<BODY

bgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>为了使页面美丽大方，网页背景要尽量地浅……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……网页背景色彩

网页背景图像

设置背景声音<bgsoundsrc=“audio/wind.mp3”loop=“-1”

/><html><head><title>主体背景音乐设置</title></head><body>

<bgsoundsrc=“audio/wind.mp3”loop=“-1”

/></body></html>声音文件

播放次数

添加多媒体资源<html><head><title>多媒体资源设置</title></head><body><palign=“center”>下面是视频文件的播放界面</p><embedsrc=“video/nba.wmv”width=“400”height=“300”autostart=“true”></embed>

<palign=“center”>下面是音频文件的播放界面</p><embedsrc=“audio/wind.mp3”width=“400”height=“300”></embed>

<palign=“center”>下面是Flash动画文件的播放界面</p><embedsrc=“swf/mouse.swf”width=“400”></embed></body></html>字体和段落标签字体、字号标题标签<H1>－<H6><FONT>标签特殊符号行的控制段落标签<P>换行标签<BR>使用了<H2>…<H2>换段了设置了字体的大小和颜色换行了特殊符号<FONTsize=“+2”

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

引号(“”)"小于(<)<大于(>)>版权号(©)©字体的大小值字体的颜色字体的类型字体和段落标签......<BODY><P><FONTsize="+2"color="red">

手机充值、IP卡/电话卡

</FONT><BR/>

移动 | 100| 联通

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

换段了换行了…….<i>斜体</i>

<em>斜体</em><b>粗体</b><strong>粗体</strong><u>下划线</u><pre> aaabbb cccc dddffff</pre>……字体样式

标题标签和水平线标题标签<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标签用于指定不同级别的标题标题标签和水平线水平线<hr/>……<BODY>

春晓<hr/>

春眠不觉晓，<hrsize=“6”/>

处处闻啼鸟。<hrwidth=“40%”/>

夜来风雨声，<hrwidth=“60”aligh=“left”/>

花落知多少。<hrsize=“6”width=“30%”align=“center”noshade/></BODY>……练习利用所学知识，制作一份简易的个人简历。

要求：恰当的使用本节课所学到的基本标签。

内容包括：姓名、年龄、爱好、地址、学习经历和工作经历。图像标签图像的基本语法<IMGsrc=“img/img.jpg“border=”10”

width=“350“height=”180“alt=”可爱的小猫">……<BODY><IMGsrc="img/img.jpg

"alt="可爱的小猫"

border="10“width="350"height="180"></BODY>……查看源代码图像的路径图像的宽度图像的高度为图像添加的提示性文字图像的边框鼠标移到图像上，出现的提示性文字图像标签图像与文本的对齐方式<IMGalign="middle">图像与文本居中对齐,还可以取top,bottom值….<BODY>…

图像中部和同一行文本的基线对齐<imgsrc="img/img.jpg"border="5"width="62"height="42"align="middle"/><hr/>…</BODY>……查看源代码图像和文本居中对齐小结1练习答案练习代码编写如下图所示效果对应的html代码超级链接链接到其他页面<Ahref="register/register.html">[免费注册]</A>链接内容链接的地址<HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref="register/register.html">[免费注册]</A><Ahref="login/login.htm">[登录]</A></BODY></HTML>单击”[免费注册]”之后链接到的页面查看源代码超级链接链接到其他页面绝对路径指定从根目录到文件的完整路径。相对路径指定相对于当前文件的文件位置。

在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径超级链接要链接到同一目录(C:\HTML)下的页面，可编写<AHREF=“Doc1.htm”>或

<AHREF=“C:\html\Doc2.htm”>相对路径名绝对路径名超级链接要实现如下图所示的超链接效果，怎么办？演示示例3：演示锚链接的例子使用锚记标签超级链接链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记

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

<AHREF=“#marker”>主题名称</A>演示示例4：演示锚链接的例子<HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref=“#bottom”>底部</A> ……<A

name=“bottom”>这是底部</A> ……</BODY></HTML>1、定义锚标记2、链接到锚标记所在位置超级链接电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”<Ahref="mailto:webmaster@">站长信箱</A>演示示例5：演示电子邮件链接<HTML><HEAD><TITLE>电子邮件链接</TITLE></HEAD><BODY> ……<Ahref="mailto:taobaoWebMater@">站长信箱</A> ……</BODY></HTML>单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可…网页前台技术<ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>FLASH</li>

</ul>

…网页后台的学习

<ol>

<li>Python</li>

</ol>…列表查看源代码滚动标签<MARQUEE><MARQUEEscrolldelay=“100”direction=“up">

滚动文字或图像</MARQUEE>滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。滚动标签<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">

雅诗兰黛</A><BR>……</MARQUEE>

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

温馨提示

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

第一章(HTML基本标签)

文档简介

温馨提示

最新文档

评论

第一章(HTML基本标签)

文档简介

温馨提示

最新文档

评论

相关文档