html 基础代码
2014-05-07 21:43
330 查看
一、HTML各种命令的代码：
文本标签(命令)
<pre>内容</pre> 创建预格式化文本
<h1>内容</h1> 创建最大的标题
<h6>内容</h6> 创建最小的标题
<b>内容</b> 创建黑体字
<i>内容</i> 创建斜体字
<tt>内容</tt> 创建打字机风格的字体
<cite>内容</cite> 创建一个引用,通常是斜体
<em>内容</em> 加重一个单词（通常是斜体加黑体）
<strong>内容</strong> 加重一个单词（通常是斜体加黑体）
<font size=?>内容</font> 设置字体大小，从 1 到 7
<font color=?>内容</font> 设置字体的颜色,使用名字或下面的色码。
文字的边外加光辉效果代码：
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>
文字重叠效果代码1：
<DIV style="FILTER: shadow(color=#00ff00, strength=5); WIDTH: 600px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#808000> 期待您的精采！ </FONT></DIV>
文字重叠效果代码2：
<DIV style="FILTER: shadow(color=#000000, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ff0000> 春风秋雨 </FONT></DIV>
凹陷文字
<div style='"width:300px; padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all;font-size:12px;line-height:18px;background-color:#eeeeee;">
<font disabled>
陷下去了嘛~~<br>
^_#<br>
<a href="http://www./">www.</a></font>
</div>
文字有颜色背景的代码：
<font STYLE="background-color:#0000ff" font face=黑体 style="FONT-SIZE: 22pt; color=#FFECEC"><b> 〖文字有颜色背景的代码〗</font></b>
文字靠左竖排代码：
<p> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
文字居中竖排代码：
<p align=CENTER> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
文字靠右竖排代码：
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
全屏及图框代码
１．全屏（相对定位）代码：
<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
</DIV><br><br>
２颜色背景图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 bgColor="图框背景颜色代码" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
3图片背景的图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 background="背景图片地址" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
图形(命令)
<img original="name"> 添加一个图像
<img original="name" align=?> 排列对齐一个图像:左中右或上中下
<img original="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小（高度）
<hr width=?> 设置水平线的宽度（百分比或绝对像素点）
<hr noshade> 创建一个没有阴影的水平线
链接(命令)
<a href="网址">连接名称</a> 创建一个超链接
<a href="电子邮箱">连接</a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接
格式排版(命令)
<p> 创建一个新的段落。放在文字的结尾
<p align=?> 将段落按左、 中、 右对齐
<br> 空开一行，必须在文字的开头与结尾同时用
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
<div align=?> 一个用来排版大块HTML 段落的标签，也用于格式化表
二、HTML基本语法
文件格式<html></html> (文件的开头与结尾)
主题<title></title> (放在文件的开头)
文头区段<head></head> (描述文件的信息)
内文区段<body></body> (放此文件的内容)
标题<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>
居左<left> </left>
居右<right> </right>
基本字体大小<basefont size> (取值范围从1到7，默认值为3)
改变字体大小<font size=?></font>(?=1~7)
字体颜色<font color=#rrggbb></font> (RGB色码)
指定字型<font face=?></font> (?=宋体，楷体等)
网址链结<a href="URL"></a>
设定锚点<a name="?"></a> (?以容易记为原则)
链结到锚点<a href="#?"></a> (同一份文件)
<a href="URL#?"></A> (锚点不同文件)
显示图形<img original="URL"></a>
图形位置<img original="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)
图形取代文字<img original="图片地址"alt=1> (无法显示图形时用，可以设置边框大小)
图形尺寸<img original="图片地址" width=宽 height=高> (?以像素为单位)
连结图形边线<img original="图片地址"border=?> (?以像素为单位)
图形四周留白<img original="图片地址"hspace=? vspace=?>(?以像素为单位)
段落<p></p>
断行<br></br>
横线<hr>
横线厚度<hr size=?> (?以像素为单位)
横线长度<hr width=?> (?以像素为单位)
横线长度<hr width=?%> (?与页宽相比较)
实横线<hr noshade> (无立体效果)
背景图案<body background=图片地址> (图形文件格式为gif和jpg)
背景颜色<body bgcolor=#rrggbb> (RGB色码)
背景文字颜色<body text=#rrggbb> (RGB色码)
未链结点颜色<body link=#rrggbb> (RGB色码)
已链结点颜色<body vlink=#rrggbb> (RGB色码)
正在链结点颜色<body alink=#rrggbb> (RGB色码)
基本语法总结如下
1）贴图：<img original=“图片地址“>
2)加入连接：<a href=“所要连接的相关地址“>写上你想写的字</a>
3)在新窗口打开连接：<a href=“相关地址“ target=“_blank“>写上要写的字</a>
4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>
5)字体加粗：<b>写上你想写的字</b>
6)字体斜体：<I>写上你想写的字</I>
7)字体下划线: <U>写上你想写的字</U>
8)字体删除线: <s>写上你想写的字</s>
9)字体加大: <BIG>写上你想写的字</BIG>
10)字体控制大小：<H1>写上你想写的字</H1> (其中字体大小可从H1-H5,H1最大，H5最小)
11)更改字体颜色：<font color=“#value“>写上你想写的字</font>(其中value值在000000与FFFFFF(16位进制)之间
12)消除连接的下划线：<a href=“相关地址“ style=“text-decoration:none“>写上你想写的字</a>
13)贴音乐：<embed original=“音乐地址“ width=“宽度“ height=“高度“ autostart=false>
14)贴flash: <embed original=“flash地址“ width=“宽度“ height=“高度“>
15)贴影视文件：<img dynoriginal=“文件地址“ width=“宽度“ height=“高度“ start=mouseover>
16)换行：<br>
17)段落：<p>段落</p>
18)原始文字样式：<pre>正文</pre>
19)换帖子背景：<body background=“背景图片地址“>
20)固定帖子背景不随滚动条滚动：<body background=“背景图片地址“ body bgproperties=FIXED>
21)定制帖子背景颜色：<body bgcolor=“#value“>(value值见10)
22)帖子背景音乐：<bgsound=“背景音乐地址“ loop=infinite>
23)贴网页：<iframe original=“相关地址“ width=“宽度“ height=“高度“></iframe>
24)字体上标：一个字<sup>写上你想写的字</sup>
25)字体下标：一个字<sub>写上你想写的字</sub>
特效代码
1、公告栏里滚动的字幕，可以将以下代码放入布告中
<marquee direction=left>文字内容</marquee>
公告栏里滚动的图片
<marquee direction=left><img original="图片地址"></marquee>
其中，引号中的url可以自己选择
2、自己定义字体的大小和颜色
<font size=7 color=red>文字内容</font>
其中，7可以改为1到7中的任意数字，red可以改为任何一种颜色
3、在叶面上加flash
<iframe
original=FLASH地址 frameborder=0 width=650 height=400 ;></iframe>
其中，地址可以自己修改
代码如下<MARQUEE>滚动文字</MARQUEE>
<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" ><br />
</div >
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</marquee >
marquee 参数：
BGColor：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left、Right、up和down。
scrolldelay：每轮滚动之间的延迟时间，越大越慢。
scrollamount：一次滚动总的时间量，数字越小滚动越慢。
Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动） lide（单次滚动）、Alternate（来回滚动）。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop：滚动次数。默认为infinite
hspace、vspace：前后、上下的空行。
文本标签(命令)
<pre>内容</pre> 创建预格式化文本
<h1>内容</h1> 创建最大的标题
<h6>内容</h6> 创建最小的标题
<b>内容</b> 创建黑体字
<i>内容</i> 创建斜体字
<tt>内容</tt> 创建打字机风格的字体
<cite>内容</cite> 创建一个引用,通常是斜体
<em>内容</em> 加重一个单词（通常是斜体加黑体）
<strong>内容</strong> 加重一个单词（通常是斜体加黑体）
<font size=?>内容</font> 设置字体大小，从 1 到 7
<font color=?>内容</font> 设置字体的颜色,使用名字或下面的色码。
文字的边外加光辉效果代码：
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>
文字重叠效果代码1：
<DIV style="FILTER: shadow(color=#00ff00, strength=5); WIDTH: 600px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#808000> 期待您的精采！ </FONT></DIV>
文字重叠效果代码2：
<DIV style="FILTER: shadow(color=#000000, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ff0000> 春风秋雨 </FONT></DIV>
凹陷文字
<div style='"width:300px; padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all;font-size:12px;line-height:18px;background-color:#eeeeee;">
<font disabled>
陷下去了嘛~~<br>
^_#<br>
<a href="http://www./">www.</a></font>
</div>
文字有颜色背景的代码：
<font STYLE="background-color:#0000ff" font face=黑体 style="FONT-SIZE: 22pt; color=#FFECEC"><b> 〖文字有颜色背景的代码〗</font></b>
文字靠左竖排代码：
<p> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
文字居中竖排代码：
<p align=CENTER> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
文字靠右竖排代码：
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>
全屏及图框代码
１．全屏（相对定位）代码：
<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
</DIV><br><br>
２颜色背景图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 bgColor="图框背景颜色代码" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
3图片背景的图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 background="背景图片地址" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
图形(命令)
<img original="name"> 添加一个图像
<img original="name" align=?> 排列对齐一个图像:左中右或上中下
<img original="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小（高度）
<hr width=?> 设置水平线的宽度（百分比或绝对像素点）
<hr noshade> 创建一个没有阴影的水平线
链接(命令)
<a href="网址">连接名称</a> 创建一个超链接
<a href="电子邮箱">连接</a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接
格式排版(命令)
<p> 创建一个新的段落。放在文字的结尾
<p align=?> 将段落按左、 中、 右对齐
<br> 空开一行，必须在文字的开头与结尾同时用
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
<div align=?> 一个用来排版大块HTML 段落的标签，也用于格式化表
二、HTML基本语法
文件格式<html></html> (文件的开头与结尾)
主题<title></title> (放在文件的开头)
文头区段<head></head> (描述文件的信息)
内文区段<body></body> (放此文件的内容)
标题<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>
居左<left> </left>
居右<right> </right>
基本字体大小<basefont size> (取值范围从1到7，默认值为3)
改变字体大小<font size=?></font>(?=1~7)
字体颜色<font color=#rrggbb></font> (RGB色码)
指定字型<font face=?></font> (?=宋体，楷体等)
网址链结<a href="URL"></a>
设定锚点<a name="?"></a> (?以容易记为原则)
链结到锚点<a href="#?"></a> (同一份文件)
<a href="URL#?"></A> (锚点不同文件)
显示图形<img original="URL"></a>
图形位置<img original="URL" align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)
图形取代文字<img original="图片地址"alt=1> (无法显示图形时用，可以设置边框大小)
图形尺寸<img original="图片地址" width=宽 height=高> (?以像素为单位)
连结图形边线<img original="图片地址"border=?> (?以像素为单位)
图形四周留白<img original="图片地址"hspace=? vspace=?>(?以像素为单位)
段落<p></p>
断行<br></br>
横线<hr>
横线厚度<hr size=?> (?以像素为单位)
横线长度<hr width=?> (?以像素为单位)
横线长度<hr width=?%> (?与页宽相比较)
实横线<hr noshade> (无立体效果)
背景图案<body background=图片地址> (图形文件格式为gif和jpg)
背景颜色<body bgcolor=#rrggbb> (RGB色码)
背景文字颜色<body text=#rrggbb> (RGB色码)
未链结点颜色<body link=#rrggbb> (RGB色码)
已链结点颜色<body vlink=#rrggbb> (RGB色码)
正在链结点颜色<body alink=#rrggbb> (RGB色码)
基本语法总结如下
1）贴图：<img original=“图片地址“>
2)加入连接：<a href=“所要连接的相关地址“>写上你想写的字</a>
3)在新窗口打开连接：<a href=“相关地址“ target=“_blank“>写上要写的字</a>
4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>
5)字体加粗：<b>写上你想写的字</b>
6)字体斜体：<I>写上你想写的字</I>
7)字体下划线: <U>写上你想写的字</U>
8)字体删除线: <s>写上你想写的字</s>
9)字体加大: <BIG>写上你想写的字</BIG>
10)字体控制大小：<H1>写上你想写的字</H1> (其中字体大小可从H1-H5,H1最大，H5最小)
11)更改字体颜色：<font color=“#value“>写上你想写的字</font>(其中value值在000000与FFFFFF(16位进制)之间
12)消除连接的下划线：<a href=“相关地址“ style=“text-decoration:none“>写上你想写的字</a>
13)贴音乐：<embed original=“音乐地址“ width=“宽度“ height=“高度“ autostart=false>
14)贴flash: <embed original=“flash地址“ width=“宽度“ height=“高度“>
15)贴影视文件：<img dynoriginal=“文件地址“ width=“宽度“ height=“高度“ start=mouseover>
16)换行：<br>
17)段落：<p>段落</p>
18)原始文字样式：<pre>正文</pre>
19)换帖子背景：<body background=“背景图片地址“>
20)固定帖子背景不随滚动条滚动：<body background=“背景图片地址“ body bgproperties=FIXED>
21)定制帖子背景颜色：<body bgcolor=“#value“>(value值见10)
22)帖子背景音乐：<bgsound=“背景音乐地址“ loop=infinite>
23)贴网页：<iframe original=“相关地址“ width=“宽度“ height=“高度“></iframe>
24)字体上标：一个字<sup>写上你想写的字</sup>
25)字体下标：一个字<sub>写上你想写的字</sub>
特效代码
1、公告栏里滚动的字幕，可以将以下代码放入布告中
<marquee direction=left>文字内容</marquee>
公告栏里滚动的图片
<marquee direction=left><img original="图片地址"></marquee>
其中，引号中的url可以自己选择
2、自己定义字体的大小和颜色
<font size=7 color=red>文字内容</font>
其中，7可以改为1到7中的任意数字，red可以改为任何一种颜色
3、在叶面上加flash
<iframe
original=FLASH地址 frameborder=0 width=650 height=400 ;></iframe>
其中，地址可以自己修改
代码如下<MARQUEE>滚动文字</MARQUEE>
<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" ><br />
</div >
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</marquee >
marquee 参数：
BGColor：滚动文本框的背景颜色。
Direction：滚动方向设置，可选择Left、Right、up和down。
scrolldelay：每轮滚动之间的延迟时间，越大越慢。
scrollamount：一次滚动总的时间量，数字越小滚动越慢。
Behaviour：滚动的方式设置，三种取值：Scroll（循环滚动） lide（单次滚动）、Alternate（来回滚动）。
Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop：滚动次数。默认为infinite
hspace、vspace：前后、上下的空行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 第一天：代码入门、HTML语法基础及文档类标签
- html 基础代码
- HTML基础代码 form-select中的size属性为2的时候，显示出来选项的个数
- JavaScript基础：在HTML中插入js代码
- 基础html代码大全参考
- html基础代码演示2
- 基础html代码大全参考
- “阿一web标准学堂”第5课：HTML和CSS基础知识(2)（附视频、课件、代码下载）
- sublime 快速生成html基础代码
- html和js基础功能代码备份
- html基础知识代码
- 妙味云课堂_HTMLCSS基础_代码初识-1
- html基础代码使用
- 网站建设基础HTML代码总结
- python 解析html基础 HTMLParser库,方法,及代码实例
- html基础,写代码时的总结等---ShinePans
- HTMLCSS基础_代码初识-1
- 网页制作HTML基础标签代码大全
- “阿一web标准学堂”第4课：HTML和CSS基础知识(1)（附视频、课件、代码下载）
- HTML+CSS基础课程之CSS基础代码语法