HTML(Hypertext Markup Language) 简介
HTML 是一种标记语言
使用 HTML 标记和元素,可以:
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单,收集用户的信息、执行事务等等
插入动画
开发帮助文件
使用META标记 2-1 name和http-equiv
1.提供关于网页的信息
<!--获得文档的作者名称--> <META name=“Author” content=“Graham Browne”> <!--根据关键词生成响应--> <META name=“KEYWORDS” content=""> <!--对网页的描述--> <META name="DESCRIPTION" content="">
<meta name=“description” content=“欢迎学习META元素" >
"description"中的content="网页描述",是对一个网页概况的介绍,这些信息可能会出现在搜索结果中,因此需要根据网页的实际情况来设计,尽量避免与网页内容不相关的“描述”,另外,最好对每个网页有自己相应的描述(至少是同一个栏目的网页有相应的描述),而不是整个网站都采用同样的描述内容,因为一个网站有多个网页,每个网页的内容肯定是不同的,如果采用同样的description,显然会有一些网页内容没有直接关系,这样不仅不利于搜索引擎对网页的排名,也不利于用户根据搜索结果中的信息来判断是否点击进入网站获取进一步的信息。
2.应用:关键词生成响应
<!设置网页的到期值--> <META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT"> <!--设置网页使用gb2312编码--> <META http-equiv="Content-Type" content="text/html; charset=gb2312">
3.自动刷新页面
<META http-equiv="Refresh" content="10; url=http://yourlink">
最常用的字符实体
空格: <小于号:< >大于号:> &号:& "引号:"
¢分: ¢ £镑:£ ¥日圆:¥ §节:§ '撇号:'
?版权:© ?注册商标:® ×乘号:× ÷除号:÷
链接标记A
1.链接到同一文档的各个部分
<HTML> <HEAD><TITLE>使用链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A><BR> <A HREF = #HTML>HTML简介</A><BR> <A HREF = #Consistency>多样化和统一性</A><BR> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。就是说,计算机网络可以跨越国家甚至全球的范围连接到其他网络</P> <A name = HTML>HTML简介</A><BR> <P>超文本标记语言是Web用来创建和识别文档的标准语言。</P> <A name = Consistency>多样性和统一</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。</P> </BODY> </HTML>
2.链接到另一文档中某个特定位置
<HTML> <HEAD> <TITLE>主文档</TITLE> </HEAD> <BODY> <A HREF=sg_1.12.html#Internet>互联网</A> <BR> <A HREF= sg_1.12.html#HTML>HTML简介</A> <BR> <A HREF=sg_1.12.html#Consistency>多样性和统一性</A> </BODY> </HTML>
3.使用电子邮件
如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件,则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。
<A HREF="mailto:[email protected]">我的电子邮件</A>
基本 HTML 元素
标题标记:可显示六种大小的标题,即<H1>到<H6>,<H1>为最大,<H6>为最小
段落级标记:<ADDRESS> 标记,定义地址元素; <BLOCKQUOTE>标记;
块标记:<SPAN> <DIV>
字符级标记:<SUP> . . . <SUP> 上标文本 <SUB> . . . </SUB> 下标文本
<EM> . . </EM> 强调文本 <CODE< . . .</CODE> 用于显示编程代码
<CITE>. . .</CITE> 用于引用
无序列表
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY> <UL> <LI>星期一 <LI>星期二 <LI>星期三 <LI>星期四 <LI>星期五 </UL> </BODY> </HTML>
有序列表
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY> <OL> <LI>星期一 <LI>星期二 <LI>星期三 <LI>星期四 <LI>星期五 </OL> </BODY> </HTML>
大写罗马数字 <LI TYPE = I>
小写罗马数字 <LI TYPE = i>
大写字母 <LI TYPE = A>
小写字母<LI TYPE = a>
从第n个值开始编号<OL START = n>
定义列表
<HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY> <DL> <DT>星期日 <DD>一周的第一天 <DT>HTML <DD>超文本标记语言 <DT>互联网 <DD>网络的网络 </DL> </BODY> </HTML>
table 表
<HTML> <BODY> <TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2 CELLPADDING = 6> <CAPTION>创建表</CAPTION> <TH ALIGN = CENTER COLSPAN = 3>第一季度</TH> <TH ALIGN = CENTER COLSPAN = 3>第二季度</TH> <TR> <TD>一月</TD> <TD>二月</TD> <TD>三月</TD> <TD>四月</TD> <TD>五月</TD> <TD>六月</TD> </TR> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>
插入GIF动画
<IMG SRC=coffeecup.gif ALT="冒热汽的咖啡">
HTML 文档中的图片
GIF(Graphics Interchange Format )图像 (.GIF)
JPEG(Joint Photographic Experts Group)图像 (.JPG)
PNG(Portable Network Graphics )
插入声音
<!--其中 path"sound filename 为声音文件的路径和文件名Netscape Navigator 不支持 BGSOUND 元素--> <BGSOUND SRC="path"sound filename">
插入视频
<EMBED ALIGN=CENTER WIDTH= "200" HEIGHT= "200" SRC= ""path"file name" AUTOSTART= "TRUE">
使用表单<FORM>
<FORM action="http://mysite.com/processform" METHOD="post"> 表单内容 </FORM>
HTML 输入元素input属性
TYPE:此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、 FILE、HIDDEN和BUTTON。默认值为TEXT。
TYPE:此属性指定表单元素的名称。例如,如果表单上有几个文本框,可以按照名称来标识它们 - TEXT1、TEXT2或用户选择的任何名称。
VALUE:此属性是可选属性,它指定表单元素的初始值
MAXLENGHT:此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的
SRC:SRC="URL"。当使用IMAGE作为输入类型时使用此属性,它用于标识图像的位置。TextArea 元素:属性有Cols、Rows
BUTTON 元素:属性有Name、Value、Type
列表(下拉框)SELECT 元素:Name、Size、Multiple
框架使用
<HTML> <FRAMESET COLS=”40%,60%”> <FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes> <FRAMESET ROWS=”60,*”> <FRAME SRC=”x.html” NAME=”x” SCROLLING=no FRAMEBORDER=no> <FRAME SRC=”y.html” NAME=”y”> <NOFRAMES> 未显示框架。请单击这里 <A href=”main.htm”>查看无框架版本</A> </NOFRAMES> </FRAMESET> </FRAMESET> </HTML>
内嵌框架
<HTML> <P>很有趣吧。你已经对框架有所了解。 <BR> <IFRAME src="x.html" width="100" height="150" scrolling=auto frameborder=1> </IFRAME> <BR> <P><FONT color = hotpink>上面是一个内嵌框架。 </HTML>