网页设计基础HTML语言

上传人：6*** IP属地：湖北上传时间：2023-01-14 格式：PPT 页数：74 大小：462.50KB 积分：28 举报 版权申诉

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

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

文档简介

标记语言:HTML

HTML语言概述

HTML的基本语法HTML的基本标记

HTML的标记及其属性一.HTML语言概述1.超文本标记语言HTML(HyperTextMarkupLanguage)是WEB世界的通用“语言”；2.WEB服务器与浏览器之间通过它互相沟通，WEB中的信息可以通过它来表现；没有HTML就没有WWW“世界”3.HTML不是程序设计语言，而是一种结构语言；4.HTML与平台无关，只要是相同的浏览器；5.HTML有许多元素，文档通过元素标记就形成所谓的HTML文档；6.HTML是文本文件，可以用纯文本编辑器来编辑(如Windows的记事本、写字板)；7.其文件后缀名必须是.html或.htm；8.只有通过浏览器才可以对HTML文档进行相应的解释。

HTML语言概述

HTML的基本语法HTML的基本标记

HTML的标记及其属性二、HTML的基本语法HTML的主要语法是标记、标记属性和内容注释：1.标记—用于描述功能的符号，如：<TITLE>一个HTML实例</TITLE>2.标记属性—HTML语言的的标记具有一定的属性，如：<BODYbackground=“c:\cloud.gif”>3.内容注释—基本格式：

HTML文档的基本结构<HTML>

<HEAD><TITLE>网页的标题</TITLE></HEAD>

<BODY>网页的内容，很多标记都作用于此。</BODY></HTML>1.文档标记：文档处于标记<HTML>与</HTML>之间，<HTML>用以声明这是HTML文件，便于浏览器正确处理。2.头部与体部：文件分两部分，由<HEAD>至</HEAD>称为头部，<BODY>至</BODY>称体部(头部用以存载重要信息，而只有体部会被显示，所以大部分标记会运用于体部)。基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。3.<TITLE>标记：<TITLE>标示文件标题，显示于浏览器标题栏，每页应有明确的标题。特点解说：

HTML语言概述

HTML的基本语法HTML的基本标记

HTML的标记及其属性三.HTML的基本标记1.HTML的基本标记－－文档标记：文档标记<html>2.HTML的基本标记－－头部标记：头部标记<head>头部标题标记<title>3.HTML的基本标记－－体部标记：(1)正文标记<body>(2)换行(ForcedLineBreaks)标记<br>(3)标题(Heading)标记<hn>(n为层次标号)(4)段落(Paragraphs)标记<p>(5)水平线(HorizontalRules)标记<hr>(6)字符格式标记：

<B>－Bold<I>－Italic<U>－Underlined(7)字体(Font)标记<font>

属性：Face--字体Size--字号Color--颜色(8)图像标记<IMG>属性列表：SRC、BORDER、WIDTH、HEIGHT、ALIGN、ALT(9)超链接标记<A>...</A>属性列表：HREF、NAME、TARGET(10)列表(Lists)标记<ul>、<ol>、<dl>(11)表格标记<table>(12)表单标记<form>(13)框架标记<frameset>

HTML语言概述

HTML的基本语法HTML的基本标记

HTML的标记及其属性四.HTML的标记及其属性1.<Body>------</Body>Bgcolor------背景色Text------文本色Link------超级链接对象的颜色Alink------连接中对象的颜色Vlink------连接后对象的颜色Background------背景文件bgproperties-----定义了背景属性，fixed就是设定固定的效果。

四.HTML的标记及其属性2.换行标记<BR>Break单独出现,用于使网页文本另起一行。四.HTML的标记及其属性3.标题标记<Hi>(i=1,2,3,4,5,6)

用于设标记题，隐含换行的作用，H1最大，H6最小，align属性用于对齐。四.HTML的标记及其属性4.段落标记<P>------</P>用于在网页内插入新的段落，可以成对也可以不成对，具有align属性。四.HTML的标记及其属性5.水平线标记<HR>

单独使用，属性：SizeWidthAlign四.HTML的标记及其属性6.字符格式标记

<B>Bold<I>Italic<U>Underlined四.HTML的标记及其属性7.字体标记<FONT>

属性：Face---字体Size---字号Color---颜色四.HTML的标记及其属性标记及其属性综合例子<html>

<head><title>文字显示和段落控制</title></head>

<bodytext="#ff2222"><center><h1>一级标题</h1></center><hrwidth=90%color=green><fontface="黑体"size=7color="0000ff">这是黑体，大小为7号字，蓝色</font><br>四.HTML的标记及其属性标记及其属性综合例子(续)<p>这是一个段落<br><I>这是斜体</I><B>这是粗体</B><U>这是下划线字体</U><big>这是大字体</big><small>这是小字体</small>这是下标字体<sub>1</sub>四.HTML的标记及其属性标记及其属性综合例子(续)这是上标字体<sup>2</sup><br><fontface="楷体"size=6color="cc8888"><I><B><U>这些标记还可以混合使用</U></B></I></font></p><palign=center>这是另一个段落<br><B> 以下是转义序列</B><br><小于号；>大于号；&与号；"双引号；例如:a>b</p></body></html>四.HTML的标记及其属性8.图像标记<IMG>SRC：指明图像文件的地址，可使用本地文件名，也可使用URL形式；WIDTH：图像宽度，值为整数，单位为屏幕像素点；HEIGHT：图像高度，值为整数，单位为屏幕像素点；ALIGN：图像对齐方式；ALT：以小标签显示该属性值；BORDER：指明图像边框粗细。图像标记<IMG>案例四.HTML的标记及其属性9.超链接标记<A>...</A>

基本链接的分类:外部链接—链接至网络的某个URL网址或文件内部链接—链接本HTML文件的某个区段常用链接标记<A>...</A>链接指令。相关属性:

·HREF链接的URL位址或文件

·NAME名称

·TARGET

指定链接的URL位址或文件显示于哪个窗口外部链接：<AHREF="/"TARGET=frame1></A>

超链接标记<A>...</A>案例<html>

<head><title>超链接URL</title></head>

<body>点击<ahref="xp.htm"target=_blank><b>这里</b></a>可以见我的照片<br>点击<ahref=""><b>这里</b></a>可以进入金陵热线<br>点击<ahref="mailto:moon@"><b>这里</b></a>可以给我发信<br>点击<ahref="E4_2.htm#aaa"><b>这里</b></a>可以到我的简历<br><aname="aaa">我的简历：</a>

</body></html>四.HTML的标记及其属性10.

HTML的列表标记列表类型：无序列表(unorderedList)有序列表(orderedlist)定义列表(definitionlist)列表标记：无序列表标记：<ul>列表项</ul>有序列表标记：<ol>列表项</ol>定义列表标记：<dl>列表项</dl>四.HTML的标记及其属性10.HTML的列表标记(1)无序列表(ul)无序列表用(ul)开始，每一个列表条目用<li>引导，最后是</ul>，注意列表条目不需要结尾标记</Li>。输出时每一列表条目缩进，并且以圆点标示。例如：<ul>

<li>Today

<li>Tommorow

</ul>

输出为

●Today

●Tommorow

四.HTML的标记及其属性10.HTML的列表标记(2)有序列表<ol>有序列表与无序列表相比，只是在输出时列表条目用数字标示，下面是一个例子及其输出：例如：

<ol>

<li>Today

<li>Tommorow

</ol>

输出为：

1.Today

2.Tommorow四.HTML的标记及其属性10.HTML的列表标记(3)定义列表<dl>定义列表用于对列表条目进行简短说明的场合，用<dl>开始，列表条目用<dt>引导，它的说明用<dd>引导。<dl>

<dt>Item1

<dd>Thedefinitionofitem1

<dt>Item2

<dd>Definitionorexplainationofitem2</dl>输出为：

Item1

Thedefinitionofitem1

Item2

Definitonorexplainationofitem2HTML的列表标记案例<html><head><title>课表</title></head><body><B>今天我要上以下的课</B><UL><LI>局域网工程<LI>操作系统<LI>数据结构</UL><B>今天我要上以下的课</B>HTML的列表标记案例(续)<OL><LI>局域网工程<LI>操作系统<LI>数据结构</OL><DL><DT><B>局域网</B><DD>局域网是指将小范围内的数据设备经过通信系统连接起来的计算机网络</DL></body></html>表格的基本构成：

标题(Caption)：指示表格的含义；可有可无

数据项名(标记)：指示行、列存放内容的说明

表格数据：表格中存放的信息

表格单元：表格中各个独立的区域四.HTML的标记及其属性11.

表格的基本标记<table>...</table>

HTML要求一个表格的全部内容要包含在该标记中；其border属性用来控制表格边框的宽度，无border时为表格没有边框。

<tr>-定义表行：用<TR>和</TR>表示表格每一行的开始与结束；

<th>-定义表头：用<TH>和</TH>表示数据标记(数据项名)

<td>-定义表元(表格的具体数据)：用<TD>和</TD>表示数据项，用于存放数据<TH>和<TD>标记将产生不同的显示效果。四.HTML的标记及其属性11.

表格的基本标记<table>...</table>(1)表格的对齐表格的对齐是指规定表格在网页上的位置。使用<table>标记的ALIGN属性可以将表格定位在网页的左端、右端或居中。<tablealign=left><tablealign=right><tablealign=center>(2)表格单元的对齐指规定表格数据在表格单元中的位置。表格单元的对齐方向有：水平和垂直。用Align和Valign控制。(3)表格的大小及间距表格的宽度可以用WIDTH属性来定义，有两种方法：绝对定义和相对定义。相对定义是用屏幕的宽度的百分比来定义如60%。表格的间距通过<table>标记的几个属性定义：border 属性：表格边框宽度；cellspacing 属性：表格单元之间的距离；cellpadding 属性：表格单元边缘与单元内容之间的距离。

表格的基本标记案例1<tableborder=1cellspacing=2cellpadding=4><caption>物资列表</caption><tr><td>商品类别</td><td>数量</td></tr><tr><td>日用百货</td><td>10</td></tr><tr><td>电器</td><td>20</td></tr><tr><td>轿车</td><td>5</td></tr></table>表格的基本标记案例2－－表格中使用链接练习制作一个简单的通迅录四.HTML的标记及其属性11.

表格的基本标记<table>...</table>(4)跨多列的单元格A.有横向通栏的表用<thcolspan=#>属性说明：colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。跨多列的单元格<thcolspan=#>

<tableborder=2><tr><tdcolspan=3>MorningMenu</td></tr><tr><td>Food</td><td>Drink</td><td>Sweet</td></tr><tr><td>食物</td><td>饮料</td><td>糕点</td><tr></table>

B.有纵向通栏的表用rowspan=#属性说明：rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用</tr>明确给出一横向栏目结束,这是和表的基本形式不同的。跨多行的单元格<throwspan=#>

<tableborder><tr><throwspan=3>MorningMenu</th><th>Food</th><td>A</td></tr><tr><th>Drink</th><td>B</td></tr><tr><th>Sweet</th><td>C</td></tr></table>四.HTML的标记及其属性11.

表格的基本标记<table>...</table>(4)单元格的背景色彩和背景图象<thbgcolor=#><thbackground="URL">#=rrggbb16进制RGB数码,或者是下列预定义色彩名称。<tableborder><tr><thbgcolor=ffaa00>Food</th><thbgcolor=Red>Drink</th><throwspan=2background="image.gif">Sweet</th></tr><trbgcolor=white><td>A</td><td>B</td></tr></table>表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作。提交后表单的内容就从客户端的浏览器传送到服务器上。经过服务器上的ASP或CGI等处理程序处理后，将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。四.HTML的标记及其属性(2007.3.19)12.表单定义语法如下：<formmethod=“get/post”action=“处理程序名”>[<inputtype=输入域种类name=输入域名>][<textarea>定义][<select>定义]</form>

用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。四.HTML的标记及其属性表单具有action、method等属性：

(1)action值是处理程序的程序名(包括网络路径:网址或相对路径)

如：<formaction=“/counter.cgi”>，当用户提交表单时，服务器将执行网址/上的名为counter.cgi的程序。

(2)method属性用来定义处理程序从表单中获得信息的方式，可取值为get和post的其中一个。

1)get方式是处理程序从当前html文档中获取数据。该方式传送的数据量有限，一般1KB以下。四.HTML的标记及其属性如果将表单的method属性设为POST，则浏览器会将表单的值包括在发送给服务器的消息的正文中。

2)post方式，与get方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。如果将表单的method属性设为GET，则浏览器会将表单值追加到action属性中指定的URL中，并将信息发送给服务器。四.HTML的标记及其属性表单的输入域：以标记<input>定义的多种输入域，包括text，radio，checkbox，password，hidden，button，submit和reset等；以标记<textarea>定义的文本域；以标记<select>和<option>定义的下拉列表框。四.HTML的标记及其属性

(1)<inputtype="">用来定义用户输入区，用户可在其中输入信息。该标记必须放在<form></form>标记对之间。<inputtype="">标记中共提供了八种输入区域，具体是哪一种类型由type属性来决定。四.HTML的标记及其属性请看下边列表：

四.HTML的标记及其属性1)文字输入和密码输入<inputtype=*value=**>，其中，type="text，password"

<formaction=/cgi-bin/post-querymethod=POST>你的姓名:<inputtype=textname=姓名><br>您的主页的网址:<inputtype=textname=网址value=http://><br>密码:<inputtype=passwordname=密码><br><inputtype=submitvalue="发送"><inputtype=resetvalue="重设"></form>四.HTML的标记及其属性<inputtype=textvalue=**size=**maxlength=**><formaction=/cgi-bin/post-querymethod=POST>

<inputtype=textname=a01size=40><br><inputtype=textname=a02maxlength=5><br>

<inputtype=submit><inputtype=reset></form>四.HTML的标记及其属性2)复选框(Checkbox)和单选框(RadioButton)<inputtype=checkboxcheckedvalue=**name=**><formaction=/cgi-bin/post-querymethod=POST><inputtype=checkboxname=水果1>Banana<p><inputtype=checkboxname=水果2checked>Apple<p><inputtype=checkboxname=水果3value=橘子>Orange<p><inputtype=submit><inputtype=reset></form>四.HTML的标记及其属性<inputtype=radiocheckedvalue=**name=**><formaction=/cgi-bin/post-querymethod=POST><inputtype=radioname=水果>Banana<p><inputtype=radioname=水果checked>Apple<p><inputtype=radioname=水果value=橘子>Orange<p><inputtype=submit><inputtype=reset></form>四.HTML的标记及其属性3)图像和隐藏文本<inputtype=imagename=*src=url><formaction=/cgi-bin/post-querymethod=POST><inputtype=imagename=facesrc=f.gif><p><inputtype=hiddenname=addvalue=hoge@hoge.jp>Hereisahiddenelement.<p><inputtype=submit><inputtype=reset></form>四.HTML的标记及其属性

(2)<select></select> <option>

<select>用来创建一个下拉列表框或复选列表框，<select>具有multiple、name和size属性：

1)multiple属性不用赋值，直接加入标记中即可使用，加入了此属性后列表框可多选；

2)name是此列表框的名字；

3)size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。四.HTML的标记及其属性

(3)<select></select> <option>

<option>标记用来指定列表框中的一个选项，它放在<select></select>标记对之间。<option>标记具有selected和value属性，selected用来指定默认选项，value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。请看下例：四.HTML的标记及其属性四.HTML的标记及其属性<formaction=/cgi-bin/post-querymethod=POST><selectname=fruits><option>Banana<optionselected>Apple<optionvalue=My_Favorite>Orange</select><p><selectname=课程size=3><option>C程序<optionselected>WEB程序<optionvalue=My_class>高数<option>软件工程</select><inputtype=submit><inputtype=reset></form>

四.HTML的标记及其属性

(3)<textarea></textarea><textarea></textarea>用来创建一个可以输入多行的文本框，此标记对用于<form></form>标志对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。四.HTML的标记及其属性

<textarea></textarea><formaction=/cgi-bin/post-querymethod=POST><textareaname=commentrows=5cols=60></textarea><P><inputtype=submit><inputtype=reset></form>四.HTML的标记及其属性

表单举例：<html><head><title>表单使用</title></head>

<body><b>请选择您学习的方式</b><br>

<formmethod=postaction=“/jxyd/stu/099/jxdebug.asp”>

<inputtype=radiocheckedname=rvalue=在读>全日制在读

<inputtype=radioname=rvalue=走读>走读

<inputtype=radioname=rvalue=函授>函授<br><br>

<b>请选择您所要学习的课程</b><br><inputtype=checkboxvalue="yes"name="局域网工程"checked>局域网工程<br>四.HTML的标记及其属性<inputtype=checkboxvalue="yes"name="操作系统">操作系统<br>

<inputtype=checkboxvalue="yes"name="数据结构">数据结构<br><br>

<b>请输入您的要求</b><br>

<textareaname="comment"rows=4cols=50></textarea><br>

<inputtype=submitname="ok"value="提交">

<inputtype=resetname="re-input"value="重选"></form>

</body>

</html>四.HTML的标记及其属性13.框架框架的基本常识前面我们学习的HTML文件，当用户用浏览器阅读时，都是在单一窗口中显示。即如果用户正在阅读某个网页，再调用另一个网页时，则前一个网页自动关闭。这里介绍几个新的标记，用它们书写的HTML文件，可以对屏幕进行横向或纵向的分割，在同一屏幕上出现多个窗口，每个窗口上显示不同的网页内容，并且可以独立变化。使用多窗口技术，可以使屏幕的信息量增大，使Web网页更加吸引读者。多窗口（FRAMESET）HTML书写并不复杂，只是多了几个标记。四.HTML的标记及其属性框架及基本格式1)框架将流览器窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容2)框架由<frameset>指定，并且可以嵌签，分区部分显示的内容用<frame>指定。可以将窗口横向分成几个部分，也可以分成纵向几个部分。四.HTML的标记及其属性框架及基本格式3)框架的基本结构如下：

</head>

<framesrc="url">

</frameset>

</html>四.HTML的标记及其属性框架的基本种类

1)横向分割窗口(横向帧结构)

横向帧结构用<frameserrows=#>指定，#可以是一个百分数，也可以是一整数。前者规定各帧占窗口的百分数，后者指定各帧的绝对大小。例如，下面的例子将窗口分成30%、20%、50%的几个区域，各区域的内容分别为A.html，B.html，C.html。横向排列多个窗口：

<framesetrows=25%,25%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html"></frameset>四.HTML的标记及其属性框架的基本种类

2)纵向分割窗口(纵向帧结构)

纵向帧结构用<framesetcols=#>指定，参见下例，纵向排列多个窗口：

<framesetcols=30%,20%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html">

</frameset>四.HTML的标记及其属性框架的基本种类

3)纵横分割窗口(混合帧结构)

将窗口分成横纵几个区域时，用<frameset>代替<frame>链接至即可将原的分好的<frame>区域再次分割。

下面的例子先将窗口分成20%,80%，然后将右边的区域再分成分别占40%和60%的上下两个区域，纵横排列多个窗口：

<framesetcols=20%,*>

<framesrc="A.html">

<frame

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

网页设计基础HTML语言

文档简介

温馨提示

最新文档

评论

网页设计基础HTML语言

文档简介

温馨提示

最新文档

评论

相关文档