网页设计-HTML基本标记_第1页
网页设计-HTML基本标记_第2页
网页设计-HTML基本标记_第3页
网页设计-HTML基本标记_第4页
网页设计-HTML基本标记_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

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

文档简介

第二

章

HTML基本标记2回顾：掌握HTML文档的结构掌握HTML标记构成及其使用方法熟练使用超链接●HyperText

Markup

Language—超文本标记语言

制作Web页面的基本编程语言

一系列标记的集合用HTML编写的超文本文档称为HTML文档。●

HTML文档的编写方法手工直接编写：记事本、EditPlus等，存成.htm

或.html文件

可视化编辑器：Dreamweaver、Frontpage等由Web服务器实时动态地生成：IIS、Tomcat等4HTML文档的结构HTML部分文档头部分包含：网页标题、网页说明、CSS样式、脚本代码等文档体部分浏览器页面的显示内容<HTML> <HEAD> <TITLE>欢迎进入HTML世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY></HTML>基本结构：运行结果5HTML标记的格式组成：元素-标识标记属性-描述标记值-分配给属性的内容<ELEMENTATTRIBUTE=value></ELEMENT>标记:人(事物)属性:性别、头发、职业……值:女性、长头发、工程师……

男性、黄头发、培训师……6超链接：锚记AHREF指定链接目标点的地址或名称<AHREF=protocol://host.domain:port/path/filename>

Hypertext

</A>NAME给链接目标点命名<ANAME=name>text</A>eg.<AHREF="F:\Doc2.html">文档2</A><AHREF=“#internet”>互联网部分</A><AHREF=“F:\Doc2.html#internet”>文档2的互联网部分</A><AHREF=“

http://”>地大网</A>

语法为:7内部链接1、到同一网站内的其它网页的链接2、到同一文档内的其他部分的链接外部链接到其他网站或服务器上的页面的链接。----------------------------------------------------------------------Web站点1Web站点2链接类型8链接到其他文档<HTML><HEAD><TITLE>使用链接</TITLE></HEAD><BODY><BR><BR><P>本页的所有内容都讲述关于如何创建到文档的链接

<AHREF=Doc2.html>单击此处查看文档2</A></BODY></HTML>

9链接到同一文档的各个部分<HTML><HEAD><TITLE>使用链接</TITLE></HEAD><BODY>

<AHREF=#Internet>互联网</A><BR><BR>

<AHREF=#HTML>HTML简介</A><BR><BR>

<AHREF=#Consistency>多样化和统一性</A><BR><BR>

<Aname=Internet>互联网</A><BR><P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>

<Aname=HTML>HTML简介</A><BR><P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>

<Aname=Consistency>多样性和统一性</A><BR><P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>单击10链接到另一文档中某个特定位置<HTML><HEAD><TITLE>主文档</TITLE></HEAD><BODY>

<AHREF=副文档.html#Internet>互联网</A><BR><BR>

<AHREF=副文档.html#HTML>HTML简介</A><BR><BR>

<AHREF=副文档.html#Consistency>多样性和统一性</A></BODY></HTML>

单击11链接到另一文档中某个特定位置<HTML><HEAD><TITLE>副文档</TITLE></HEAD><BODY>

<Aname=Internet>互联网</A><BR><P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P>

<Aname=HTML>HTML简介</A><BR><P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P>

<Aname=Consistency>多样性和统一性</A><BR><P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>

单击12链接到其他文档<HTML><HEAD><TITLE>使用链接</TITLE></HEAD><BODY><BR><BR><P>本页的所有内容讲述链接到其它网站

<AHREF="http://">地大网</A></BODY></HTML>补充：<A>目标显示方式属性--target用来指定目标窗口的打开方式。包含4个取值：_blank：在新窗口中打开。_parent：在上一级的浏览窗口中打开。_self：在当前页面或框架中打开。_top：在当前浏览窗口页面中打开。<HTML><head></head><BODY><AHREF="x1.html"TARGET="_blank">文件x</A></BODY></HTML>14HTML基本标记标题标记字体标记IMG图像标记字符级标记段落级标记容器标记水平线标记列表标记16目标使用基本标记在HTML文档中插入图像17题目标记<HTML> <HEAD> <TITLE>HTML简介</TITLE> </HEAD><BODY>

<H1>HTML简介</H1> <H2>HTML简介</H2> <H3>HTML简介</H3> <H4>HTML简介</H4> <H5>HTML简介</H5> <H6>HTML简介</H6></BODY></HTML>可显示六种大小的标题，即<H1>到<H6>，<H1>为最大，<H6>为最小18字符级标记<B>...</B>粗体文本<U>...</U>下划线效果<S>...</S>删除线效果<SUP>.../SUP>上标文本<SUB>.../SUB>下标文本<EM>..</EM>强调文本<CODE>...</CODE>用于显示编程代码<CITE>...</CITE>用于引用19字符级标记<HTML> <HEAD> <TITLE>字符级标记示例</TITLE> </HEAD> <BODY> <PALIGN="center"><B>字符级标记示例</B></P><P>圆的面积=pi*r<SUP>2</SUP></P><P>水的化学符号：H<SUB>2</SUB>O</P><P><EM>这是一种很有趣的体验</EM></P> </BODY></HTML>20块引用标记：<BLOCKQUOTE>标记<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <P>blockquote元素用于以文本块的形式设置内容格式。

<BLOCKQUOTE>

汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂·邓普蒂拼起来 </BLOCKQUOTE> <P>请注意，上述内容显示为一个文本块。 </BODY></HTML>可以使用BLOCKQUOTE元素显示文档中的引用文本。BLOCKQUOTE用于较长的引用且显示为缩进式段落。

21预排版标记：<PRE>标记<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <PRE>汉普蒂·邓普蒂坐在墙上 汉普蒂·邓普蒂摔了一大跤国王所有的马 和所有的人也无法再把汉普蒂·邓普蒂拼起来 </PRE> </BODY></HTML>如果希望文本以预定义的格式显示，可以使用PRE元素。此元素用于定义文本的格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。22使用FONT标记<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODY> <H3><FONTSIZE=3COLOR=HOTPINKFACE="隶书">我的第一个HTML文档</FONT></H3> <P>这<FONTCOLOR=BLUESIZE=6>将会</FONT>是一种很有趣的体验

</BODY></HTML><FONT>标记用于控制文本在网页上的显示。可以指定size（大小）、color（颜色）face（字体）style（样式）等属性。

23补充：关于颜色颜色值是一个关键字或一个RGB格式的数字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow24在HTML中对于颜色的定义可以用6位十六进制数。电脑屏幕的色彩是由rgb（红、绿、蓝）三种色光所合成的，通过调整这三个基色就可以调配出其它的颜色。每2位数代表一种颜色的浓度，三种颜色的顺序为红、绿、蓝，00代表颜色浓度最小，FF代表颜色浓度最大。#000000代表纯黑、#FFFFFF代表纯白、25d图中所示是部分颜色的RGB代码:

例：为页面设置背景色：

<bodybgcolor=“#FFFF33”>26容器（区域控制）标记<SPAN>、<DIV>

<DIV>…</DIV>可以设定多行或跨段落或某一区域的内容样式；<SPAN>…</SPAN>一般只用在一行中设定几个字的情况。<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY>

<DIV>

第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素

</DIV>

<DIValign=right>

第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2>

</DIV> <P>第二部分向右对齐。

<SPANSTYLE="font-size:25">

公共格式</SPAN>应用于这一部分中的所有元素 </BODY></HTML>

27列表无序列表有序列表定义列表28无序列表<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <UL>

<LI>星期一</LI> <LI>星期二</LI> <LI>星期三</LI> <LI>星期四</LI> <LI>星期五</LI> </UL> </BODY></HTML>无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列表标记<UL>..</UL>内。列表中的每个项目都使用列表标记<LI>进行标记，其中LI表示ListItem（列表项）。关闭标记</LI>是可选的。29自定义项目符号<LITYPE=SQUARE>方形项目符号<LITYPE=DISC>实心圆项目符号<LITYPE=CIRCLE>空心圆项目符号30有序列表<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <OL>

<LI>星期一</LI> <LI>星期二</LI> <LI>星期三</LI> <LI>星期四</LI> <LI>星期五</LI> </OL> </BODY></HTML>有序列表包含在<OL>..</OL>标记内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。

31自定义编号大写罗马数字<LITYPE=I>小写罗马数字<LITYPE=i>大写字母<LITYPE=A>小写字母<LITYPE=a>从第n个值开始编号<OLSTART=n><HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <UL> <LI>星期一

<OL> <LITYPE=i>简介HTML</LI> <LITYPE=i>创建列表</LI> </OL> <LI>星期二 <OL> <LITYPE=a>创建表</LI> <LITYPE=a>插入图像</LI> </OL> <LI>星期三 <LI>星期四 <LI>星期五 </UL> </BODY></HTML>32定义列表<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DL>

<DT>星期日 <DD>一周的第一天 <DT>HTML <DD>超文本标记语言 <DT>互联网 <DD>网络的网络 </DL> </BODY></HTML>定义列表用于生成术语列表（术语和定义）。定义列表包含在<DL>..</DL>标记内。<DT>标记用于指定要定义的术语，而<DD>标记用于对术语的定义。33水平线<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODY> <H3>我的第一个HTML文档</H3>

<HRnoshadesize=5align=centerwidth=50%> <HRsize=15align=leftwidth=80%> <HR> <P>这将会是一种很有趣的体验 </BODY></HTML><HR>水平线标记用于在页面上绘制一条水平线。可借助于下列属性控制水平

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

温馨提示

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

最新文档

评论

0/150

提交评论