HTML文档的基本语法结构

合集下载

相关主题

html基本语法

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML文档的基本结构<HTML> HTML文件开始
<HEAD> HTML文件的头部开始
…… HTML文件的头部内容
</HEAD> HTML文件的头部结束
<BODY> HTML文件的主体开始
…… HTML文件的主体内容
</BODY> HTML文件的主体结束
</HTML> HTML文件结束
编写文档的注意事项：
“<”和“>”是任何标记的开始和结束;
标记与标记之间可以嵌套;
如:<H2><CENTER>I LOVE CHINA!</CENTER></H>
在源代码中不区分大小写;
任何回车和空格在源代码中不起作用。

HTML标记中可以放置各种属性;
可增加注释,以“”结束,注释只出现在源代码中,不会在浏览器中显示。

HTML 标记的格式: <标记名属性= “值”>
标题标记<title>
⏹基本语法: <TITLE>……</TITLE>
段落标记<p>
⏹基本语法: <P>……</P>
段落标记的对齐属性A L I G N
⏹ALIGN属性可以使段落文字进行居左left、居中center、居右right的对齐。

换行标记<br>
标题字标记<Hn> ：（n=1~6）
⏹基本语法: <Hn>……</Hn>标题字的对齐属性ALIGN
<BODY>标记
⏹<body>标记中放置要在浏览器中所显示信息的所有标志和属性
⏹<body>的属性：
☐Bgcolor:背景色☐Background:背景图片☐T ext:文字颜色
☐Link:超链接颜色☐Vlink:访问后超链接颜色
☐Alink:鼠标按下链接文字时的链接颜色
插入水平线标记<hr>
⏹<HR>标记的属性：
☐Width:水平条的宽度。

(单位为像素或百分比) ☐Size:水平条的厚度 ☐Noshade:无阴影 ☐Align:对齐方式 ☐Color:水平条的颜色
在HTML 文档中使用特殊字符
  空格 ¥ 货币符号
> > < <
" “ & &
© © ® ®
&trade TM
字符级标记
地址文字标记：<ADDRESS> 标记
这个标记用于显示E-mail 、地址等文字内容，显示为斜体字。

基本语法： <ADDRESS>……</ADDRESS>
缩进标记<BLOCKQUOTE>
实现页面文字的段落缩排,实现多次缩排可以使用多次缩排标记.
基本语法: <BLOCKQUOTE>……</BLOCKQUOTE>
使用FONT 标记用于控
制文本在页面上的显示。

语法:<FONT FACE=“字体名” SIZE=“字号值”COLOR=“颜色”>……</FONT>
注:字号值从1到7,1号是最小的字号 ,这些属性可一起使用，也可以单独使用. 要创创建超链接建超链接，必须指定要链接的文件的完整地址或URL
C:\internet\index.html
service/index.html
链接标记<A>
常用属性:HREF 指定链接地址
NAME 给链接命名
TARGET 指定链接的目标窗口
链接属性TARGET 其值有:_blank(以新窗口显示);_self(在当前窗口);_parent ; _top 链接到外部网站:
<A HREF=“http:// ”>文字链接</A>
书签链接
建立书签链接分为两步：建立书签、为书签制作链接。

建立书签：<A NAME=“书签名”>链接文字</A>
链接同一页中的书签:
<A HREF=“#书签名”>链接文字</A>
链接到其他页面中的书签:
<A HREF=“页面路径#书签名”>链接文字</A>
⏹相对路径的使用方法：
如果链接到同一目录下，只需输入要链接文档的名称。

要链接到下一级目录中的文件，只需先输入目录名，然后加…/‟，再输入文件。

若链接到上一级目录中的文件，则先输入…../‟，再输入目录名、文件名。

预格式化标记<PRE>标记
与表相关的标记
表格的常用属性:
边框线宽度属性BORDER
语法: <TABLE BORDER=value>
表格的宽度和高度属性WIDTH,HEIGHT
语法: <TABLE WIDTH=value HEIGHT=value>
边框色属性BORDERCOLOR
语法: <TABLE BORDERCOLOR=value>
背景颜色属性BGCOLOR
语法: <TABLE BGCOLOR=value>
水平对齐属性ALIGN
语法: <TABLE ALIGN=“value”>
此处value值可以是“left ”居左“center”居中“right”居右
TABLE属性:
表格的单元格间距属性CELLSPACING
⏹语法: <TABLE CELLSPACING=value>
表格的单元格边距属性CELLPADDING
⏹语法: <TABLE CELLPADDING=value>
表格标题<CAPTION>
语法:
<TABLE>
<CAPTION>标题内容</CAPTION>
……
</TABLE>
表格标题的水平对齐属性ALIGN
合并单元格-行
⏹跨行属性ROWSPAN
语法: <TH ROWSPAN=value>
合并单元格-列
⏹跨列属性COLSPAN
语法: <TH COLSPAN=value>
列表
无序列表
语法：
<UL>
<LI>项目一
<LI>项目二
……
</UL>
无序列表的类型属性TYPE
⏹<UL TYPE = square>…</UL> 方形项目符号;
⏹<UL TYPE =disc> …</UL> 实心圆项目符号, 默认为此项;
⏹<UL TYPE = circle> …</UL>空心圆项目符号.
有序列表
语法：
<OL>
<LI>项目一
<LI>项目二
<LI>项目三
……
</OL>
<OL>标记属性
属性TYPE:
大写罗马数字 <OL TYPE = I> 小写罗马数字 <LI TYPE = i>
大写字母 <OL TYPE = A> 小写字母 <LI TYPE = a>
属性START:
默认情况下,有序列表从数字1开始计数,这个起始值通过START属性可以调整语法:<OL START=VALUE>……</OL>
VALUE值是计数起始值.
定义列表
定义列表包含在<DL> .. </DL>标记内。

基本语法：
<DL>
<DT>名词一<DD>解释一
<DT>名词二<DD>解释二
<DT>名词三<DD>解释三
……
</DL>
解释:<DT>标记用于指定名词标题，而<DD>标记用于对名词解释.
HTML 文档中的图像
⏹GIF（Graphics Interchange Format ）图像(.GIF)
⏹JPEG（Joint Photographic Experts Group）图像(.JPG)
插入图像标记<IMG>
插入图像标记<IMG>的属性
利用<IMG>标记插入AVI文件
⏹ DYNSRC属性指定AVI源文件所在的路径,完成AVI视频文件的插入.
插入AVI文件的其他属性
设定AVI文件循环次数属性LOOP
LOOP的取值可以为数值,也可以为infinite,实现无限次播放.
设定AVI文件播放方式属性START
START 属性的值:
Fileopen网页打开时即播放
Mouseover 当鼠标滑动到AVI文件上方后播放
图片的超链接
⏹前面介绍了通过文字的链接,通过图像也可以链接,链接标记和文字相同<A>
⏹如:
<A HERF=“abc.htm”><IMG Src=“ab.jpg”>链接文字</A>
Head 标记
⏹头部分以<head>标记开始，以</head>标记结束。

此部分包含文档的标题，文档使用的脚本，样式定义等信息。

还可以包含搜索工具和索引所要的其他信息。

⏹常用的头部标记内容：
<BASE>设定浏览器中文件的绝对地址
<LINK> 设定外部文件的链接
<META> 有关文档本身的元信息
<STYLE>设定CSS层叠样式表的内容
<SCRIPT>设定页面中程序脚本的内容
<TITLE>等.
基底网址标记<BASE>
<BASE>标记用于制定网页中超连接的基准地址；<BASE>标记不能多于一个,必须放在头部.
语法: <BASE HREF=“URL” TARGET=“value”>
元信息标记<META>
<META>标记的功能是定义页面中的信息，这些文件信息并不会出现在浏览器页面的显示之中,只会显示在源代码中。

<META>标记的属性:
HTTP-EQUIV生成一个HTTP标题域.
NAME在网页中加入一些关于网页的描述信息.
HTTP-EQUIV和NAME属性后面都有一个配对的
CONTENT属性需要设置.
使用<META>标记1
1.提供关于网页的信息
设定作者:
如:<META name=“Author”content=“ROUNDING”>设定关键字
如: <META name=“Keywords” content=“音乐,摇滚,MP3”>
设定描述
如:<META name=“Description” content=“这是有趣的体验">
定义编辑工具
如: <META name=“Generator” content=“NOTEPAD”>
使用<META>标记2
2.应用：
设定有效期
如:<META http-equiv="Expires" content="Mon, 15 Sep 2006 14:25:27 GMT"> 设定字符集
如: <META http-equiv="Content-Type" content="text/html;charset=gb2312"> 自动刷新页面
如: <META http-equiv="Refresh" content=“30”>
设定自动跳转
使用HTTP-EQUIV属性中的REFRESH不仅能够完成页面自身的自动刷新,也可以实现页面之间的跳转格式。

如: <META http-equiv="Refresh" content=“30；URL=HTTP://…”>
<LINK>标记
显示本文档和其他文档之间的链接关系。

格式如下： <LINK REL="stylesheet" HREF="style.css">
REL属性说明两个文档之间的关系,HREF说明目标文档名。

<!Doctype>
⏹定义文档类型DTD标记,它出现在HTML文档的最开始位置.
⏹典型DTD格式:
<!DOCTYPE HTML PUBLIC “version name” “URL”>
Version name指定该HTML版本的标识名称.
URL 指定该HTML语言的定义规范文件在Internet上的位置.
如:<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd">
框架集标记<FRAMESET>
⏹框架基本的页面代码：
<HTML>
<HEAD>
……</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
……
</FRAMESET>
</HTML>
框架的分割
左右分割窗口属性COLS
语法：<FRAMESET COLS=“value,value,…”>
……
</FRAMESET>
解释:value为定义各个框架的宽度值,单位可以是像素,也可以是百分比,还可使用“*”代表分割剩下的部分.
上下分割窗口属性ROWS
语法：<FRAMESET ROWS=“value,value,…”>
……
</FRAMESET>
嵌套分割窗口属性
既按行来分割,又按列来分割，这种框架称为嵌套框架.
框架集标记属性:
边框宽度属性FRAMESPACING
语法:<FRAMESET FRAMESPACING=“value”>
边框颜色属性BORDERCOLOR
语法:<FRAMESET BORDERCOLOR=“value”>
框架标记<FRAME>
⏹每一个框架都有一个显示的页面,这个页面文件称为框架页面.通过<FRAME>标记定义其内容.
⏹<FRAME >标记的属性包括：
☐Name：此属性指定框架的名字。

☐Src：此属性指定框架显示的文件的路径。

☐Noresize：它指定框架窗口的大小不能调整。

☐Scrolling：此属性指定框架窗口的滚动模式。

（值可以为Auto:自动加，默认值；Yes:始终提供；No:不为窗口提供滚动条。

）☐Frameborder：此属性设置框架的边框是否显示。

显示值为1,否则为0.
☐Marginwidth：此属性指定框架内容的左右边距。

☐Marginheight：此属性指定框架内容的上下边距
不支持框架标记<NOFRAMES>
内嵌框架<IFRAME>
⏹此框架是一种特殊的框架页面,在浏览器窗口中可以嵌套子窗口,在其中显示页面的内容.
⏹语法:
<IFRAME SRC=“FILE_URL” HEIGHT=value WIDTH=value
NAME=“IFRAME_name” ALIGN=“value”>
</IFRAME>
⏹<IFRAME>常用属性
☐Src：此属性指定框架内容的URL。

☐Width：此属性指定内嵌框架的宽度。

☐Height：此属性指定内嵌框加的高度。

表单标记<FORM>
⏹语法：
<FORM ACTION=“URL“ METHOD=“method_value">
...表单内容...
</FORM>
说明：METHOD值有两个：get或post
在FORM标记中,可以包含4个标记
<INPUT>表单输入标记
<SELECT>菜单和列表标记
<OPTION>菜单和列表项目标记
<TEXTAREA>文字域标记
<FORM>
<INPUT>……</INPUT>
<TEXTAREA>……</TEXTAREA>
<SELECT>
<OPTION>……</OPTION>
</SELECT>
</FORM>
输入标记<INPUT>
⏹语法：
<FORM>
<INPUT NAME=“field_name” TYPE=“type_name”>
</FORM>
⏹解释:
NAME域的名称TYPE域的类型
Input标记的Type属性的值:
文本域TEXT
⏹语法：
<INPUT TYPE=“text” NAME=“field_name” SIZE=“value”
MAXLENGTH=“value” VALUE=“field_value” >
⏹解释:
NAME文字域的名称MAXLENGTH文字域的最大输入字符数
SIZE文字域的宽度(以字符为单位) VALUE文字域的默认值
密码域PASSWORD
⏹语法：
<INPUT TYPE=“Password” NAME=“field_name” maxlength=value size=value> 复选框CHECKBOX
⏹语法：
<INPUT TYPE=“Checkbox” NAME=“field_name” checked VALUE=“value”>⏹解释：
CHECKED表示此项被默认选中。

VALUE表示选中项目后传送到服务器端的值。

每个复选框的名字与值互不相同
单选框RADIO
⏹语法：
<INPUT TYPE=“Radio” NAME=“field_name” checked VALUE=“value”>选项值⏹组中的单选框应当具有相同的名称，有其独立的值。

普通按钮BUTTON
⏹语法: <INPUT TYPE=“BUTTON” NAME=“field_name” VALUE=“TEXT”>
提交按钮SUBMIT
⏹语法:<INPUT TYPE=“Submit” NAME=“field_name” VALUE=“TEXT”>
重置按钮RESET
⏹语法:<INPUT TYPE=“Reset” NAME=“field_name” VALUE=“TEXT”>
图像域IMAGE
⏹语法:<INPUT TYPE=“Image” NAME=“field_name” SRC=“IMAGE_URL”>
菜单和列表标记<SELECT>,<OPTION>
⏹每个option标记代表一个选项。

每个select标记必须包含至少一个option标记。

⏹语法:
<SELECT NAME=“name” SIZE=value MULTIPLE>
<OPTION VALUE=“value” SELECTED>选项
<OPTION VALUE=“value” >选项
</SELECT>
菜单和列表标记属性:
文字域标记TEXTAREA
⏹语法:
<TEXTAREA NAME=“NAME” COLS=value ROWS=value >
……
</TEXTAREA>
⏹嵌入多媒体标记<EMBED>
⏹在页面中可以放置如MP3音乐，电影，SWF动画等多媒体内容。

⏹<embed src=“url” loop=“true” autostart=“true”>
⏹loop,autostart两个属性，属性值只能为True或NO.
☐WIDTH,HEIGHT。