HTML基本语法汇总大全
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第 2 页 共 11 页
速度及延迟
八、自动更新及自动转向（转向例子） 自动更新:<meta http-equiv="refresh" content="value"> value 为时间“秒” 自动转向:<meta http-equiv="refresh" content="value;url=filename_URL">
line-height
设定网页的行距，可用点数 pt 或百分比
margin-left|right|top|bottom
设定网页的左、右、上、下边界，用象素 表示
px
text-decortion
下划线，加用 underline ，不加用 none
text-transform
设定文字转换，uppercase 大写，capitalize 首字大写
四、背景图案颜色及音乐
背景图案<body background="image_file" bgproperties=fixed>图形文件格式为 gif 和 jpg,后面的
背景颜色<body bgcolor=#rrggbb>(RGB 色码)
fixed 为浮水印效果
背景文字颜色<body text=#rrggbb>(RGB 色码)
height=? width=?为高度和宽度，点和百分比
<tr>
bgcolor=?表格的背景色，亦可加到<tr>或<td>内
<td>...<td>
......
</tr>
<tr>
<td>...<td>
......
</பைடு நூலகம்r>
......
</table>
<table bordercolor=? bordercolordark=? bordercolorlight=?>框线、暗面、亮面的颜色
在正文中用 class=样式名，来调用 <p class="aa">字体和颜色的变化</p> 正文区段<body></body>(放此文件的内容) 文字颜色<body text=?> (RGB 色码) 打开窗口提示信息：<body onload=alert('info1') 点击关闭窗口<a href="javascript:window.close()">点击关闭窗口</a> 关闭窗口提示信息：<body onunload=alert('info2')> 标题<h?></h>(?=1~6,改变标题字的大小) 标题对齐<h align=right,left,center></h> 字加大<big></big> 字变小<small></small> 粗体字<b></b> 斜体字<i></i> 底线字<u></u> 上标字<sup></sup> 下标字<sub></sub> 文字对中<center></center> 基本字体大小<basefont size>(取值范围从 1 到 7，默认值为 3) 改变字体大小<font size=?></font>(?=1~7) 字体颜色<font color=#rrggbb></font>(RGB 色码) 指定字型<font face=?></font>(?=宋体，楷体等)
<th>...</th>标题行与<td>类似，只是默认为粗体居中对齐。
<table rules=none|rows|cols|all>表格内框线，不显示｜水平线｜垂直线｜所有线
<table rowspan=? colspan=?>行或列的合并
六、输入特殊符号
特殊符号 ＠ < > " & 回车
HTML 表示法 © < > " &
例：<base href="61.158.10.5/llzhi" target="Content"> CSS 样式表：
例一、<style>body{background-attachment:fixed}</style>本例为固定背景图片 例二、先在<head>区进行定义 <style type="text/css"> <!-.aa{font-size:100;color:redbackground-color:pink} .bb{font-size:50;color:#00ff00} --> </style>
第 3 页 共 11 页
<H2 CLASS=bigred>......</H2> <FONT CLASS=smallblue>......</FONT>
5 绝对位置的编排(引用方法与 4 相同） <STYLE TYPE="text/css"> .bigtitle{position:absolute;top:80pt;left:50pt;visibility:visible; z-index:1;background-color:blue;color:yellow;font-size:19pt} </STYLE>
环
例：<bgsound src="star.mid" Loop=-1> 支持.mid 及.wav 等格式
五、表格的使用
基本组成：
<table border=? height=? width=? bgcolor=?>border=?框线宽度，单位为点数，0 为不显示框线。
<caption>...</caption>表格标题文字
2 重新设定<p>标记样式 <STYLE TYPE="txet/css"> P{font-size:12pt;color:yellow;background-color:blue;line-height:25px;} </STYLE>
3 重新设定超级链接标记的样式 <STYLE TYPE="text/css"> A:link{font-size:9pt;color:blue;text-decoration:none}未查看的链接 A:active{font-size:9pt;color:green;text-decoration:none}准备查看的链接 A:visited{font-size:9pt;color:yellow;text-decoration:none}已经查看过的链接 A:hover{font-size:9pt;color:red;text-decoration:underline}当鼠标移到链接上时 </STYLE>
<DIV STYLE="color:blue;font-size:20pt;margin-left:15px">局部样式
样式属性值
说明
color
设定颜色，颜色名或＃十六进制数
background
设定背景颜色，同上
font-size
设定字体尺寸，直接指定点数 pt
font-family
设定使用的字体，例如：楷体
如：<meta http-equiv="refresh" content="5;url=http://61.158.10.1">
九、设定默认语系 <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
十、局部套用的 CSS（一般用在<div>区块或<span>对象标记标签中，也可用于<a>或<p>标签中 格式如下：
程序码 属性值
说明
position absolute|relative|static 定位方式为绝对、相对和静态
lfet
pt|百分比|auto
左边界距离，象素、百分比或自动
top
pt|百分比|auto
上边界距离，象素、百分比或自动
width
pt|百分比|auto
显示宽度，象素、百分比或自动
height pt|百分比|auto
未链结点颜色<body link=#rrggbb>(RGB 色码)
已链结点颜色<body vlink=#rrggbb>(RGB 色码)
正在链结点颜色<body alink=#rrggbb(RGB 色码)
背景音乐<bgsound src="music_file" Loop=?/-1>加在<head>或<body>中均可，？为次数，－1 为循
七、字幕文字<marquee> <marquee>字幕文字内容</marquee>
<marquee bgcolor=?>字幕文字的背景色 <marquee height=? width=?>字幕文字范围的大小 <marquee behavior=scroll|slide|alternate>显示方向：循环｜到一边停｜左右移动 <marquee direction=left|right loop=n|-1 scrollamount=? scrolldelay=?>滚动方向、次数、
HTML 基本语法汇总
如果你是刚刚学习制作自己的网页，则本文对你可能有所帮助。它列出了超文本标记语言 HTML 最基 本的语法 一、基本标记 文件格式<html></html>(文件的开头与结尾) 文头区段<head></head>(描述文件的信息)
标题<title></title>(显示在 IE 的标题栏) 基底网址<base href="URL" target="Frame_name"> 在 IE 中取得完整的文件或网址路径
4 自定义名称的样式（用以“.”开头的名称定义，用 class=名称，来引用。 可用于<font><h?><P><A>及<DIV>等标记中，示例
<STYLE TYPE="text/css"> .smallblue{font-size:9pt;color:blue} .bigred{font-size:25pt;color:red} </STYLE>
显示高度，象素、百分比或自动
z-index auto|整数
显示网页元素重叠时的顺序编号
visibility visible|hidden
是否显示此元素，显示或隐藏
十二、外部链接的 CSS： 将各种样式标记储存成一个独立的“.CSS”文件； 套用方法：在<HEAD>中用下面的命令引用之： <LINK REL="stylesheet" HREF="css_file" TYPE="text/css">
<table align=left|center|right> 表格的水平对齐（左、中、右）（可制作成浮动表格）
<table cellspacing=? cellpadding=?>单元格间、单元格与数据的间隙
<table background="image_file">表格的背景图片，亦可加到<th>或<td>中
三、区段划分 段落<p></p>（font 标签自动分段） 断行<br> 关闭换行<nobr></nobr> 保留段落格式<pre></pre>
第 1 页 共 11 页
区块<div></div>不能含有 P 标签 横线<hr> 横线厚度<hr size=?>(?以像素为单位) 横线长度<hr width=?>(?以像素为单位) 横线长度<hr width=?%>(?与页宽相比较) 实横线<hr noshade>(无立体效果) 实线颜色<hr color=?>(RGB 色码)
二、超链结 网址链结<a href="URL"></a> 设定锚点<a name="?"></a>(?以容易记为原则) 链结到锚点<a href="#?"></a>(同一份文件) <a href="URL#?"></A>(锚点不同文件) 显示图形<img src="URL"></a> 图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位 置) 图形取代文字<img src="URL"alt=?>(无法显示图形时用) 图形尺寸<img src="URL" width=? height=?>(?以像素为单位) 连结图形边线<img src="URL"border=?>(?以像素为单位) 图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)
cursor
设定光标显示的外观形状
十一、内嵌式的 CSS：一般在<head>中定义，在<body>中引用 1 重新设定<body>标记的样式：在<body>前定义 CSS 样式 <STYLE TYPE="text/css"> BODY{font-size:10pt;font-famliy:楷体_GB2312;line-height:120%;} SPAN{font-size:20pt;font-family:宋体;} </STYLE>
速度及延迟
八、自动更新及自动转向（转向例子） 自动更新:<meta http-equiv="refresh" content="value"> value 为时间“秒” 自动转向:<meta http-equiv="refresh" content="value;url=filename_URL">
line-height
设定网页的行距，可用点数 pt 或百分比
margin-left|right|top|bottom
设定网页的左、右、上、下边界，用象素 表示
px
text-decortion
下划线，加用 underline ，不加用 none
text-transform
设定文字转换，uppercase 大写，capitalize 首字大写
四、背景图案颜色及音乐
背景图案<body background="image_file" bgproperties=fixed>图形文件格式为 gif 和 jpg,后面的
背景颜色<body bgcolor=#rrggbb>(RGB 色码)
fixed 为浮水印效果
背景文字颜色<body text=#rrggbb>(RGB 色码)
height=? width=?为高度和宽度，点和百分比
<tr>
bgcolor=?表格的背景色，亦可加到<tr>或<td>内
<td>...<td>
......
</tr>
<tr>
<td>...<td>
......
</பைடு நூலகம்r>
......
</table>
<table bordercolor=? bordercolordark=? bordercolorlight=?>框线、暗面、亮面的颜色
在正文中用 class=样式名，来调用 <p class="aa">字体和颜色的变化</p> 正文区段<body></body>(放此文件的内容) 文字颜色<body text=?> (RGB 色码) 打开窗口提示信息：<body onload=alert('info1') 点击关闭窗口<a href="javascript:window.close()">点击关闭窗口</a> 关闭窗口提示信息：<body onunload=alert('info2')> 标题<h?></h>(?=1~6,改变标题字的大小) 标题对齐<h align=right,left,center></h> 字加大<big></big> 字变小<small></small> 粗体字<b></b> 斜体字<i></i> 底线字<u></u> 上标字<sup></sup> 下标字<sub></sub> 文字对中<center></center> 基本字体大小<basefont size>(取值范围从 1 到 7，默认值为 3) 改变字体大小<font size=?></font>(?=1~7) 字体颜色<font color=#rrggbb></font>(RGB 色码) 指定字型<font face=?></font>(?=宋体，楷体等)
<th>...</th>标题行与<td>类似，只是默认为粗体居中对齐。
<table rules=none|rows|cols|all>表格内框线，不显示｜水平线｜垂直线｜所有线
<table rowspan=? colspan=?>行或列的合并
六、输入特殊符号
特殊符号 ＠ < > " & 回车
HTML 表示法 © < > " &
例：<base href="61.158.10.5/llzhi" target="Content"> CSS 样式表：
例一、<style>body{background-attachment:fixed}</style>本例为固定背景图片 例二、先在<head>区进行定义 <style type="text/css"> <!-.aa{font-size:100;color:redbackground-color:pink} .bb{font-size:50;color:#00ff00} --> </style>
第 3 页 共 11 页
<H2 CLASS=bigred>......</H2> <FONT CLASS=smallblue>......</FONT>
5 绝对位置的编排(引用方法与 4 相同） <STYLE TYPE="text/css"> .bigtitle{position:absolute;top:80pt;left:50pt;visibility:visible; z-index:1;background-color:blue;color:yellow;font-size:19pt} </STYLE>
环
例：<bgsound src="star.mid" Loop=-1> 支持.mid 及.wav 等格式
五、表格的使用
基本组成：
<table border=? height=? width=? bgcolor=?>border=?框线宽度，单位为点数，0 为不显示框线。
<caption>...</caption>表格标题文字
2 重新设定<p>标记样式 <STYLE TYPE="txet/css"> P{font-size:12pt;color:yellow;background-color:blue;line-height:25px;} </STYLE>
3 重新设定超级链接标记的样式 <STYLE TYPE="text/css"> A:link{font-size:9pt;color:blue;text-decoration:none}未查看的链接 A:active{font-size:9pt;color:green;text-decoration:none}准备查看的链接 A:visited{font-size:9pt;color:yellow;text-decoration:none}已经查看过的链接 A:hover{font-size:9pt;color:red;text-decoration:underline}当鼠标移到链接上时 </STYLE>
<DIV STYLE="color:blue;font-size:20pt;margin-left:15px">局部样式
样式属性值
说明
color
设定颜色，颜色名或＃十六进制数
background
设定背景颜色，同上
font-size
设定字体尺寸，直接指定点数 pt
font-family
设定使用的字体，例如：楷体
如：<meta http-equiv="refresh" content="5;url=http://61.158.10.1">
九、设定默认语系 <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
十、局部套用的 CSS（一般用在<div>区块或<span>对象标记标签中，也可用于<a>或<p>标签中 格式如下：
程序码 属性值
说明
position absolute|relative|static 定位方式为绝对、相对和静态
lfet
pt|百分比|auto
左边界距离，象素、百分比或自动
top
pt|百分比|auto
上边界距离，象素、百分比或自动
width
pt|百分比|auto
显示宽度，象素、百分比或自动
height pt|百分比|auto
未链结点颜色<body link=#rrggbb>(RGB 色码)
已链结点颜色<body vlink=#rrggbb>(RGB 色码)
正在链结点颜色<body alink=#rrggbb(RGB 色码)
背景音乐<bgsound src="music_file" Loop=?/-1>加在<head>或<body>中均可，？为次数，－1 为循
七、字幕文字<marquee> <marquee>字幕文字内容</marquee>
<marquee bgcolor=?>字幕文字的背景色 <marquee height=? width=?>字幕文字范围的大小 <marquee behavior=scroll|slide|alternate>显示方向：循环｜到一边停｜左右移动 <marquee direction=left|right loop=n|-1 scrollamount=? scrolldelay=?>滚动方向、次数、
HTML 基本语法汇总
如果你是刚刚学习制作自己的网页，则本文对你可能有所帮助。它列出了超文本标记语言 HTML 最基 本的语法 一、基本标记 文件格式<html></html>(文件的开头与结尾) 文头区段<head></head>(描述文件的信息)
标题<title></title>(显示在 IE 的标题栏) 基底网址<base href="URL" target="Frame_name"> 在 IE 中取得完整的文件或网址路径
4 自定义名称的样式（用以“.”开头的名称定义，用 class=名称，来引用。 可用于<font><h?><P><A>及<DIV>等标记中，示例
<STYLE TYPE="text/css"> .smallblue{font-size:9pt;color:blue} .bigred{font-size:25pt;color:red} </STYLE>
显示高度，象素、百分比或自动
z-index auto|整数
显示网页元素重叠时的顺序编号
visibility visible|hidden
是否显示此元素，显示或隐藏
十二、外部链接的 CSS： 将各种样式标记储存成一个独立的“.CSS”文件； 套用方法：在<HEAD>中用下面的命令引用之： <LINK REL="stylesheet" HREF="css_file" TYPE="text/css">
<table align=left|center|right> 表格的水平对齐（左、中、右）（可制作成浮动表格）
<table cellspacing=? cellpadding=?>单元格间、单元格与数据的间隙
<table background="image_file">表格的背景图片，亦可加到<th>或<td>中
三、区段划分 段落<p></p>（font 标签自动分段） 断行<br> 关闭换行<nobr></nobr> 保留段落格式<pre></pre>
第 1 页 共 11 页
区块<div></div>不能含有 P 标签 横线<hr> 横线厚度<hr size=?>(?以像素为单位) 横线长度<hr width=?>(?以像素为单位) 横线长度<hr width=?%>(?与页宽相比较) 实横线<hr noshade>(无立体效果) 实线颜色<hr color=?>(RGB 色码)
二、超链结 网址链结<a href="URL"></a> 设定锚点<a name="?"></a>(?以容易记为原则) 链结到锚点<a href="#?"></a>(同一份文件) <a href="URL#?"></A>(锚点不同文件) 显示图形<img src="URL"></a> 图形位置<img src="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位 置) 图形取代文字<img src="URL"alt=?>(无法显示图形时用) 图形尺寸<img src="URL" width=? height=?>(?以像素为单位) 连结图形边线<img src="URL"border=?>(?以像素为单位) 图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)
cursor
设定光标显示的外观形状
十一、内嵌式的 CSS：一般在<head>中定义，在<body>中引用 1 重新设定<body>标记的样式：在<body>前定义 CSS 样式 <STYLE TYPE="text/css"> BODY{font-size:10pt;font-famliy:楷体_GB2312;line-height:120%;} SPAN{font-size:20pt;font-family:宋体;} </STYLE>