HTML基础知识教学篇_第1页
HTML基础知识教学篇_第2页
HTML基础知识教学篇_第3页
HTML基础知识教学篇_第4页
HTML基础知识教学篇_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

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

文档简介

HTML基础知识教学1随着互联网的迅猛发展，人们可以获取、交换和存错连接到网络上的各计算机上的信息。网络上存放信息和提供服务的地方就是网站。一个成功的网站离不开精美绚丽的网页，要制作出美观的网页，首先要学习网页制作的相关知识，例如制作网页的知识、制作网页元素的知识以及设计网页效果的知识等。而一个网页的成功与否，很重要的因素就在于制作者对网页设计基本知识的掌握程度，富有创意的构思与巧妙的页面元素处理会让网页内容更加鲜明与美观，而Dreamweaver作为目前最受欢迎的网页制作软件之一，使用它可以制作出绚丽的网页。2知识要点：基本的HTML语法结构常用的HTML标记的使用3HTML文档=网页HTML文档描述网页

HTML文档包含HTML标签和纯文本HTML文档也被称为网页

Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容41.什么是HTML？HTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言

(markuplanguage)标记语言是一套标记标签

(markuptag)HTML使用标记标签来描述网页5HTML标签

HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如<html>HTML标签通常是成对出现的，比如<b>和</b>标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

62.HTML文档的结构2.1.1标记基础1.基本的HTML语法(1)在HTML语言中，所有的标记都必须用尖括号（即小于号“<”和大于号“>”）括起来。例如，<HTML>、<HEAD>、<BODY>等。(2)大部分标记都是成对出现的，包括开始标记和结束标记，开始标记和相应的结束标记定义了标记所影响的范围；结束标记与开始标记名称相同，但结束标记总是以一个斜线符号开头的。例如，<HTML>和</HTML>、<HEAD>和</HEAD>等。(3)HTML标记不区分大小写，但通常约定使用大写字母来表示，以利于HTML文档的维护。72.标记符的属性大多数标记都拥有一个属性集，通过这些属性可以对作用的内容进行更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。<FONTFACE="楷体_GB2312"SIZE="2">心想事成。</FONT>82.1.2HTML文档的基本结构一个基本的HTML文档通常包含3对顶级标记HTML标记<HTML><HTML>…</HTML>是全部文档内容的标记，分别在网页的第一个标记和最后一个标记，其他所有的代码都位于这两个标记之间。可选的。首部标记<HEAD><HEAD>…</HEAD>用语提供与WEB页相关的各种信息。<TITLE>…</TITLE>标记指定网页的标题正文标记<BODY><BODY>..</BODY>标记包含了文档的内容，网页中的文字、图像、动画、超链接以及其他的HTML元素均位于该标记中。9<HTML><HEAD><TITLE>个人主页</TITLE></HEAD><BODY>文本、图像、动画、HTML其它元素等</BODY></HTML>10实例2.1利用HTML标记、首部标记和正文标记，在记事本（或在DeamweaverMX2004的代码编写窗口）中编写一个简单的HTML文档，将文件名指定为2-01.htm，并保存在CH1目录下。图2-2第一个网页的效果------2-01.htm------<HTML><HEAD><TITLE>这是我制作的第一个网页</TITLE><HEAD><BODY>万丈高楼平地起，制作网页刚开始。</BODY></HTML>112.2设置文本格式2.2.1分段与换行分段标记<P>换行标记<BR>实例2.2显示分段标记和换行标记的用法以及它们的区别，源代码如下：图2-3分段标记的效果------2-02.htm------<HTML><HEAD><TITLE>分段与换行标记的使用</TITLE></HEAD><BODY><P>高楼万丈平地起，</P><!--分段标记--><P>蟠龙卧虎高山顶，</P>边区的太阳红又红，<BR><!--换行标记-->边区的太阳红又红。</BODY></HTML>123.标题标记<Hn>其中n的取值是1－6实例2.3演示各种标题标记的使用方法，源代码如下：图2-4各种标题标记效果------2-03.htm------<HTML><HEAD><TITLE>标题标记的使用</TITLE></HEAD><BODY><H1align="center">这是一级标题（最大）</H1><!--align是对齐方式--><H2align="center">这是二级标题</H2><H3align="center">这是三级标题</H3><H4align="center">这是四级标题</H4><H5align="center">这是五级标题</H5><H6align="center">这是六级标题（最小）</H6><Palign="center">这是普通文字。</P></BODY></HTML>134.水平线标记<HR><HR>标记用于在文档中添加一条水平线，以分开文档的两个部分。该标记有以下属性：(1)ALIGN：指定线的对齐方式，取值为left（左对齐）、center（居中对齐）或right（右对齐），默认值为center。(2)COLOR：指定线的颜色。(3)NOSHADE：若指定该项，则显示一条无阴影的实线。(4)SIZE：指定线的宽度，以像素为单位。(5)WIDTH：指定线的长度，单位可以是像素或百分比（占页面宽度的百分比）。14图2-5插入水平线效果实例2.4在网页中通过<HR>标记的各种属性来控制水平线的显示效果，源代码如下所示：------2-04.htm------<HTML><HEAD><TITLE>水平线的显示效果</TITLE></HEAD><BODY>以下是默认的水平线：<HR>以下是SIZE为6、WIDTH为300像素的水平线：<HRSIZE="6"WIDTH="300">以下是SIZE为1、WIDTH为页面宽度80%的实线水平线：<HRSIZE="1"WIDTH="80%"NOSHADE>以下是WIDTH=90%的红色水平线：<HRWIDTH="90%"COLOR="red"></BODY></HTML>152.2.2设置段落对齐方式在网页中有四种段落对齐方式：左对齐、右对齐、居中对齐和两端对齐。在HTML语言中，可以使用ALIGN属性来设置段落的对齐方式。ALIGN属性可以应用于多种标记，例如：分段标记<P>…</P>、标题标记<Hn>…</Hn>以及水平线标记<HR>等。ALIGN属性的取值可以是：left（左对齐）、center（居中对齐）、right（右对齐）以及justify（两边对齐）。两边对齐是指将一行中的文本在排满的情况下向左右两页边对齐，以避免在左、右两边处出现锯齿状。16实例2.5使用ALIGN属性来控制段落的对齐方式，源代码如下所示：------2-05.htm------<HTML><HEAD><TITLE>设置段落的对齐方式</TITLE></HEAD><BODY><!--设置段落的对齐方式--><PALIGN="left">这是左对齐的效果。</P><PALIGN="center">这是居中对齐的效果。</P><PALIGN="right">这是右对齐的效果。</P><H3ALIGN="center">春夜喜雨</H3>图2-6段落对齐效果<!--设置节的对齐方式--><DIVALIGN="center"><P>春眠不觉晓，处处闻啼鸟。</P><P>夜来风雨声，花落知多少。</P></DIV></BODY></HTML>172.2.3设置字体、字号和颜色在HTML语言中，可以使用字体标记<FONT>…</FONT>来设置文本的字符格式，为此可以将文本置于<FONT>和</FONT>标记之间，并通过FACE、SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种字体，例如：<FONTFACE="楷体_GB2312>超文本标记语言</FONT>SIZE属性指定字体的大小（即字号），其取值可以从1到7，默认值为3。SIZE属性值越大，显示的字号就越大。相对于基本字体（BASEFONT）的大小，也可使用+或-号来指定相对字号。如：<FONTSIZE="6">超文本标记语言</FONT><FONTSIZE="+2">ASP动态网页设计</FONT>COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。例如：<FONTCOLOR="red">超文本标记语言</FONT><FONTCOLOR="#00FF00">电子商务网页设计</FONT>18实例2.6使用字体标记来设置文本的字体、字号和颜色，源代码如下所示------2-06.htm------<HTML><HEAD><TITLE>设置字体、字号和颜色</TITLE></HEAD><BODY><H1ALIGN="center">设置字体、字号和颜色</H1><HRCOLOR="black"WIDTH=90%SIZE=1><DIVALIGN="center"><P><FONTFACE="宋体"SIZE="3"COLOR="red">电子商务网页设计</FONT></P><P><FONTFACE="仿宋_GB2312"SIZE="4"COLOR="green">电子商务网页设计</FONT></P><P><FONTFACE="楷体_GB2312"SIZE="5"COLOR="blue">电子商务网页设计</FONT></P><P><FONTFACE="黑体"SIZE="6"COLOR="maroon">电子商务网页设计</FONT></P></DIV></BODY></HTML>192.2.4设置字符样式通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：<B>…</B> 粗体 <BIG>…</BIG> 大字体 <I>…</I> 斜体 <S>…</S> 删除线 <SMALL>…</SMALL> 小字体<STRIKE>…</STRIKE>删除线<SUP>…</SUP> 上标<SUB>…</SUB> 下标<TT>…</TT> 固定宽度字体<U>…</U> 下划线20实例2.7使用各种标记来设置字符的样式，源代码如下所示：--2-07.htm------<HTML><HEAD><TITLE>设置字符样式</TITLE></HEAD><BODY><P><B>粗体字：电子商务网页设计</B></P><P><BIG>大字体：电子商务网页设计</BIG></P><P><I>斜体字：电子商务网页设计</I></P><P>上标示例：a<SUP>2</SUP>+b<SUP>2</SUP>=c<SUP>2</SUP></P><P>下标示例：H<SUB>2</SUB>SO<SUB>4</SUB></P></BODY></HTML>212.3使用图像2.3.1插入图像标记<IMG>1.标记格式:<IMGSRC=图片的地址属性>其中:图片可以是*.gif；*.jpg格式的图片，地址可以是相对地址或绝对的地址。主要属性有：Alt：用于设置鼠标移上去显示的文本信息。Hight和Width：用于设置图片的高度或宽度。如width=200。Borter：用于设置图象边框的宽度。如Borter=4。Hspace和Vspace：用于设置图片与文本之间的距离。Align：用于设置图文混排时的对齐方式。如align=“right”。222.实例2.8

使用IMG标记在网页中插入一个图像，源代码如下所示：图2-9插入图像效果------2-8.htm------<HTML><HEAD><TITLE>插入图像示例</TITLE></HEAD><BODY><FONTFACE="楷体_GB2312"SIZE="6">美丽的海滨城市---青岛</FONT><HR><IMGSRC="Images/Photo01.jpg"ALT="西双版纳风光"></BODY></HTML>232.3.2播放多媒体文件<IMG>标记不仅用于在网页中插入图像，也可以用于播放VideoforWindows的多媒体文件（*.avi）。若要在网页中播放多媒体文件，应在<IMG>标记中设置以下属性：(1)CONTROLS：显示一套视频控件。(2)DYNSRC：指定要播放的多媒体文件的URL。(3)START：指定何时开始播放多媒体文件，其取值可以是fileopen或mouseover。(4)LOOP：整数，指定多媒体文件的播放次数。如果不限播放次数，则应将该属性设置为关键字infinite。(6)LOOPDELAY：整数，指定两次播放之间的延迟，以毫秒为单位。24实例2.10在网页中播放多媒体文件，源代码如下所示：------2-10.htm------<HTML><HEAD><TITLE>播放多媒体文件示例</TITLE></HEAD><BODY><H3>播放多媒体文件</H3><HR><IMGDYNSRC="Image/earth.avi"CONTROLSLOOP="infinite"START="fileopen"></BODY></HTML>252.4使用字幕和背景音乐2.4.1滚动字幕标记<MARQUEE>标记格式：<MARQUEE属性>要滚动显示的文本信息</MARQUEE>MARQUEE标记的主要属性有：(1)ALIGN：指定字幕与周围文本的对齐方式，其取值可以是top、middle或bottom。(2)BEHAVIOR：指定文本动画的类型，其取值可以是scroll、slide或alternate。(3)BGCOLOR：指定字幕的背景颜色。(4)DIRECTION：指定文本的移动方向，其取值可以是down、left、right或up。(5)HEIGHT：指定字幕的高度，以像素或百分比为单位。(6)HSPACE：整数，指定字幕的外部边缘与浏览器窗口之间的左右边距（像素）。(7)LOOP：指定字幕的滚动次数。(8)SCROLLAMOUNT：整数，指定字幕文本每次移动的距离，以像素为单位。(9)SCROLLDEALY：整数，指定与前段字幕文本延迟多少ms后重新开始移动文本。262.实例2.11在网页中插入一个字幕，源代码如下所示：图2-11滚动字幕效果<HTML><HEAD><TITLE>字幕演示网页</TITLE></HEAD><BODY><CENTER><H3>在网页中插入一个自下而上移动的字幕</H3><HR><MARQUEEBGCOLOR="blue"DIRECTION="up"SCROLLAMOUNT="2"SCROLLDELAY="100"WIDTH="236"HEIGHT="180"><FONTFACE="楷体_GB2312"SIZE="5"COLOR="yellow"><B>月落乌啼霜满天，<BR>江枫渔火对愁眠。<BR>姑苏城外寒山寺，<BR>夜半钟声到客船。</B></FONT></MARQUEE></CENTER></BODY></HTML>272.4.2背景音乐标记<BGSOUND>1.标记格式：<head><bgsoundsrc=“音乐文件地址”属性＝值>……</head>28实例2.12在网页中插入背景音乐。源代码如下所示：------2-12.htm------<HTML><HEAD><TITLE>在网页中插入背景音乐</TITLE><BGSOUNDSRC="image/music.mid"LOOP="-1"></HEAD><BODY><P>当页面被打开时，你将会听到美妙的背景音乐。</P></BODY></HMTL>292.5使用表格1.格式：<TABLE> <CAPTION>表格标题文字<CAPTION> <TR> <Th>标题1</Th><Th>标题2</Th>…<Th>标题n</Th> </TR> <TR> <TD>数据11</TD><TD>数据12</TD>…<TD>数据1n</TD> </TR> <TR> <TD>数据21</TD><TD>数据22</TD>…<TD>数据2n</TD> </TR> …… <TR> <TD>数据n1</TD><TD>数据n2</TD>…<TD>数据nn</TD> </TR> </TABLE>30实例2.13使用HTML语言创建一个基本表格，源代码如下所示：<HTML><HEAD><TITLE>创建基本表格</TITLE></HEAD><BODY><DIVALIGN="center"><TABLEBORDER="1"><CAPTION>创建基本表格</CAPTION><TR><TH>第1列标题</TH><TH>第2列标题</TH><TH>第3列标题</TH><TH>第4列标题</TH></TR><TR><TD>春游芳草地</TD><TD>夏赏绿河池</TD><TD>秋饮黄花酒</TD><TD>冬听白雪诗/TD></TR><TR><TD>春游芳草地</TD><TD>夏赏绿河池</TD><TD>秋饮黄花酒</TD><TD>冬听白雪诗</TD></TR><TR><TD>春游芳草地</TD><TD>夏赏绿河池</TD><TD>秋饮黄花酒</TD><TD>冬听白雪诗</TD></TR></TABLE></DIV></BODY></HTML>312.6使用超链接2.6.1什么是超链接超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像或一个按钮等。目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。322.6.2超链接标记<A>在HTML语言中，可以使用<A>标记来创建超链接，标记格式如下：<AHREF=“目标地址”TARGET=“打开方式”TITLE=“显示文本”>文本</A><A>标记的属性有：(1)HREF：该属性是必选项，用于指定目标端点的URL地址，可以包含一个或多个参数。(2)TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字。(3)TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。TARGET属性的取值：33“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中；“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。34实例2.15使用<A>标记创建超链接，源代码如下所示：------2-15.htm------<HTML><HEAD><TITLE>创建超链接示例</TITLE></HEAD><BODY><FONTFACE="楷体_GB2312"SIZE="5"COLOR="red">创建超链接示例</FONT><BR>图2-14创建超链接效果<HRSIZE="1"COLOR="red"><P><AHREF="2-08.htm"TITLE="打开示例网页">查看图文绕排效果</A></P><P><AHREF="Image/scen267.jpg"TITLE="打开一个风景照片">美丽的海边风光</A></P><P><AHREF=""TITLE="打开新浪首页"><IMGSRC="Images/sina_logo.gif"></A></P></BODY></HTML>352.7使用表单什么是表单？表单是用来收集访问者信息的域集。表单用于用户收集信息，然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。36<FORM属性>…</FORM>FORM标记的常用属性有：(1)NAME：指定表单的名称，以标识表单。如：NAME=“biao1"。命名表单后，可以使用脚本语言（如VBScript或JScript）来引用或控制该表单。(2)METHOD：指定将表单数据传输到服务器的方法，其取值可以是：post：在HTTP请求中嵌入表单数据。get：将表单数据附加到请求该页的URL中。如：METHOD="post“（或者methot=“get”）(3)ACTION：指定将要接收表单数据的服务器端程序或动态网页的网址。如：ACTION="字符串"(4)onSubmit：指定提交表单时调用的事件处理程序。(5)onReset：指定重置表单时调用的事件处理程序。(6)TARGET：指定一个目标窗口372.7.2使用输入型表单控件为了让用户通过表单输入数据，可以使用<INPUT>标记创建各种输入型表单控件。通过将<INPUT>标记的TYPE属性设置为不同的值，可以创建不同类型的输入型表单控件，包括单行文本框、密码框、复选框、单选按钮、文件域以及按钮等。1.在表单中添加单行文本框在<FORM>...</FORM>之间添加一个<INPUT>标记，并将其TYPE属性指定为“text”。其标记格式为：<INPUTTYPE=“text”NAME=“名称”VALUE=“初始值”SIZE=“宽度”MAXLENGTH=“字符数”>2.在表单中添加密码域在<FORM>...</FORM>之间添加一个<INPUT>标记，并将其TYPE属性指定为“password”。383.在表单中添加按钮使用<INPUT>标记可以在表单中添加三种类型的按钮：即提交按钮、重置按钮和自定义按钮。其标记格式为：<INPUTTYPE="submit|reset|button"NAME=

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

温馨提示

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

最新文档

评论

0/150

提交评论