HTML全集
本文转载自：http://blog.csdn.net/iamduoluo/article/details/5875117
| 字体 | 标题字体 <Header> |
<h>标题标签 |
| <hn>标题标签 | ||
| <font>标签 | 设置字体大小<size> | |
| 设置字体风格<face> | ||
| 常用文本格式Tag | 使用缩进<blockquote> | |
| 保留空格和换行<pre> | ||
| 使用内联行<span> | ||
| 使用文字方向<bdo> | ||
| 物理字体 | 设置粗体<b> | |
| 设置斜体<i> | ||
| 设置下划线<u>/<ins> | ||
| 设置中划线<del>/<s>/<strike> | ||
| 设置打印机效果<tt> | ||
| 设置上标<sup> | ||
| 设置下标<sub> | ||
| 逻辑字体 | 设置粗体<strong> | |
| 设置斜体<em> | ||
| 设置等宽字体<code> | ||
| 设置引用<samp> | ||
| 设置输入文本<kbd> | ||
| 设置变量<var> | ||
| 设置突出显示<dfn> | ||
| 设置内容出处<cite> | ||
| 设置小字体<small> | ||
| 设置大字体<big> | ||
| 显示特殊符号 | ||
| 显示< < | ||
| 显示> > | ||
| 显示" " | ||
| 显示& & |
| 超链接 | href属性 | 连接到同一页当前位置 |
<a href="#name1">…</a> <a name="n">…</a> |
|
| 制作本地链接 | 同级链接 | <a href="文件名">…</a> | ||
| 下级链接 | <a href="文件夹名/文件名">…</a> | |||
| 上级链接 | <a href="…/文件名">…</a> | |||
| 制作URL链接 | <a href="http://www.baidu.com/">链接到百度网站</a> | |||
| 制作目录链接 | 目录链接是指互相链接的网页在不同的文件夹里面 | |||
| 制作E-mail链接 | <a href="mailto:123@163.com">邮件连接</a> | |||
| target属性 | 打开空白页_blank | <a href="http://www.baidu.com/" target="_blank">在空白页打开百度链接</a> | ||
| 打开上一级窗口_parent | <a href="http://www.baidu.com/" target="_parent">在上一级窗口打开链接</a> | |||
| 在本窗口打开_self | <a href="http://www.baidu.com/" target="_self">在本窗口打开链接</a> | |||
| 打开整个窗口_top | <a href="http://www.baidu.com/" target="_top">打开整个窗口</a> |
| 图像 | 网页图片概述 | ||
| 背景图像的设定 | <body background="#"></body> | ||
| 网页中插入图片标签 | 选择路径src | <img src="#" /> | |
| 设定替换文本alt | <img src="#" alt="" /> | ||
| 选择宽度width | <img src="#" width="" /> | ||
| 选择高度height | <img src="#" height="" /> | ||
| 设定低分辨率lowsrc | <img src="#" lowsrc="" /> | ||
| 设定映像地图usemap | |||
| 设定排列align | <img src="#" align="" /> | ||
| 设定边框border | <img src="#" border="n" /> | ||
| 设定水平间距hspace | <img src="#" hspace="n" /> | ||
| 设定垂直间距vlign | <img src="#" vspace="n" /> | ||
| 图像的超链接 | 链接本地图像 | <a href="#"><img src="n" /></a> | |
| 链接网上图像 | <a href="#" img src="URL"> | ||
| 链接本地页面 | |||
| 链接网上页面 | |||
| 编辑图像矩形热区 |
<img src="#" usemap="#map" /> <map name="map"> <area shape="rect" coords="33, 36, 109, 94" href="#"> </map> |
||
| 编辑图像椭圆热区 | |||
| 编辑图像多边热区 | |||
| 插入图像占位符 | <img name="" src="" width="" height="" background-color="" /> | ||
| 用<img>标签插入avi文件 | 使用路径dynsrc | <img dynsrc="#" /> | |
| 循环播放次数loop | <img dynsrc="#" loop="n" /> | ||
| 播放方式start | <img dynsrc="#" start="n" /> |
| 表格 | 表格的基本结构 |
<table> <tr> <td></td> </tr> </table> |
|
| 表格<title> | 设置行标签<tr> | ||
| 设置表头单元格<th> |
<table> <tr> <th></th> </tr> </table> |
||
| 设置单元格数据标签<td> |
<table> <tr> <td></td> </tr> </table> |
||
| <table>标签的属性 | 设置宽度width |
<table width="n"> <tr> <td></td> </tr> </table> |
|
| 设置高度height | |||
| 设置背景图片background | |||
| 设置间距cellspacing | |||
| 设置内容与边界的距离cellpadding | |||
| 边框 |
<table border="n"> <tr> <td></td> </tr> </table> |
||
| 编辑边框颜色bordercolor | |||
| 编辑亮边框颜色bordercolorlight | |||
| 编辑暗边框颜色bordercolordark | |||
| 显示整个边框box | <table border="" frame="box"> | ||
| 不显示边框void | |||
| 显示上下边框hsides | |||
| 显示左右边框vsides | |||
| 显示上边框above | |||
| 显示下边框below | |||
| 显示左边框lhs | |||
| 显示右边框rhs | |||
| 表格行的设定 | 设置水平对齐align | <tr align=""> | |
| 设置垂直对齐valign | <tr valign=""> | ||
| 跨多行、多列的表元 | 设置跨多列colspan | <tr colspan="n"> | |
| 设置跨多行rowspan | <td rowspan="n"> | ||
| 表格行分组 | 使用表头标签<thead> | ||
| 使用主体标签<tbody> | |||
| 使用尾注标签<tfoot> | |||
| 表格的标题标签<caption> | <caption></caption> | ||
| 表格的嵌套 |
| 多媒体 | 滚动字幕<marquee> | 滚动字幕<marquee>标签概述 | <marquee>文本内容/链接图片</marquee> | |
| 设置移动方式behavior | 滚动播出 | <marquee behavior="scroll" width="300px" height="100px">滚动播出</marquee> | ||
| 滚动到一方后停止滚动 | <marquee behavior="slide" width="300px" height="100px">滚动播出</marquee> | |||
| 滚动到一方后向相反方向滚动 | <marquee behavior="alternate" width="300px" height="100px">滚动播出</marquee> | |||
| 设置背景颜色bgcolor | <marquee bgcolor="n">文本内容/链接图片</marquee> | |||
| 设置文字卷动方式direction | 从右到左滚动 | <marquee direction="left">文本内容/链接图片</marquee> | ||
| 从左到右滚动 | <marquee direction="right">文本内容/链接图片</marquee> | |||
| 从下到上滚动 | <marquee direction="up">文本内容/链接图片</marquee> | |||
| 从上到下滚动 | <marquee direction="down">文本内容/链接图片</marquee> | |||
| 设置移动速度scrollamount | <marquee scrollamount="n">文本内容/链接图片</marquee> | |||
| 设置停顿时间scrolldelay | <marquee scrolldelay="n">文本内容/链接图片</marquee> | |||
| 设置字幕左右空白区域hspace | <marquee hspace="n">文本内容/链接图片</marquee> | |||
| 设置字幕上下空白区域vspace | <marquee vspace="n">文本内容/链接图片</marquee> | |||
| 设置滚动次数loop | <marquee loop="n">文本内容/链接图片</marquee> | |||
| 设置鼠标滑过onMouseOver | <marquee onMouseOut="this.start()" onMouseOver="this.stop()">文本内容/链接图片</marquee> | |||
| 插入多媒体文件 | 插入音乐 | 设置音乐文件路径src | <embed src="#"></embed> | |
| 设置自动播放autostart | <embed src="#" autostart="true/false"></embed> | |||
| 设置播放次数loop | <embed src="#" loop="true/false"></embed> | |||
| 设置隐藏播放版面hidden | <embed src="#" hidden="true/false"></embed> | |||
| 插入Flash标签<object> | ||||
| 显示Flash标签<param> | ||||
| 插入Flash的另一标签<embed> | ||||
| 嵌入多媒体文件 | 设置背景音乐路径src | <bgsound src="#" /> | ||
| 设置自动播放autostart | <bgsound src="#" autostart="true/false" /> | |||
| 设置循环播放loop | <bgsound src="#" loop=n/indinite /> | |||
| 点播音乐 |
| 框架 | 框架含义 | ||
| 基本构成 |
<frameset> <frame src="#" /> </frameset> |
||
| 框架集<frameset>控制 | 分割左右窗口cols |
<frameset cols="*,*,*"> <frame src="#" /> </frame> |
|
| 分隔上下窗口rows |
<frameset rows="*,*.*"> <frame src="#" /> </frame> |
||
| 设置边框粗细border |
<frameset border="n"> <frame src="#" /> </frameset> |
||
| 设置边框颜色bordercolor |
<frameset border="n" bordercolor=""> <frame src="#" /> </frameset> |
||
| 是否显示边框frameborder |
<frameset frameborder="1/0"> <frame src="#" /> </frameset> |
||
| 设置空白距离framespacing |
<frameset frameborder="n"> <frame src="#" /> </frameset> |
||
| 添加<noframes>标签 |
<frameset> <frame src="#" /> </frameset> <noframes> <body></body> </noframes> |
||
| 子框架<frame>标签的设定 | 设定调节noresize |
<frameset> <frame src="#" /noresize="noresize" /> </frameset> |
|
| 设定窗口嵌套 |
<frameset> <frame src="#"> <frameset> <frame src="#"> <frame src="#"> </frameset> </frameset> |
||
| 窗口的名称和链接 | 框架集语法形式 |
<frameset> <frame src="#" name="n"> </frameset> |
|
| 链接页面语法形式 | <a href="#" target="n"></a> | ||
| 浮动窗口<iframe> | 设置滚动条scrolling属性 | <iframe src="#" scrolling="yes/no">代替文本内容</iframe> | |
| 设置透明浮动窗口allowtransparency属性 | <iframe src="#" allowtransparency="true">代替文本内容</iframe> | ||
| 浮动窗口链接 | 浮动窗口语法形式 | <iframe src="#" name="n">代替文本内容</iframe> | |
| 链接页面语法形式 | <a href="#" target="n"></a> |
| 列表 | 无序列表<ul> | 设置列表结构 |
<ul> <li></li> </ul> |
|
| 使用空心圆样式disc |
<ul type="disc"> <li></li> </ul> |
|||
| 使用空心圆样式circle |
<ul type="circle"> <li></li> </ul> |
|||
| 使用小方块样式square |
<ul type="square"> <li></li> </ul> |
|||
| 有序列表<ol> | 设置列表结构 |
<ol> <li></li> </ol> |
||
| 使用数字标号样式 |
<ol type="1"> <li></li> </ol> |
|||
| 使用大写字母标号样式 |
<ol type="A"> <li></li> </ol> |
|||
| 使用小写字母标号样式 |
<ol type="a"> <li></li> </ol> |
|||
| 使用大写罗马数字标号样式 |
<ol type="Ⅰ"> <li></li> </ol> |
|||
| 使用小写罗马数字标号样式 |
<ol type="i"> <li></li> </ol> |
|||
| 嵌套列表 | 嵌套无序列表 |
<ul> <li> <ul> <li></li> </ul> </li> </ul> |
<ol> <li> <ul> <li></li> </ul> </li> </ol> |
|
| 嵌套有序列表 |
<ul> <li> <ol> <li></li> </ol> </li> </ul> |
<ol> <li> <ol> <li></li> </ol> </li> </ol> |
||
| 自定义列表的标记 | 显示整体列表<dl> |
<dl> <dt></dt> </dl> |
||
| 设置列表项标签<dt> |
<dl> <dt></dt> <dt></dt> </dl> |
|||
| 设置注释项标签<dd> |
<dl> <dt></dt> <dd></dd> </dl> |
|||
| 目录列表<dir> |
<dir> <li></li> </dir> |
|||
| 菜单列表<menu> |
<menu> <li></li> </menu> |
| 表单 | 基本语法 | 设置链接跳转action | <form action=""></form> | |
| 指向链接跳转方法method | <form action="" method="get/post"></form> | |||
| 设置链接跳转方式target | <form action="" target="_blank/_parent/_self/_top"></form> | |||
| 设置字符集列表accept-charset | <form accpet-charset=""></form> | |||
| 设置编码表单内容enctype | <form enctype=""></form> | |||
| 定义表单名称name | <form name=""><form> | |||
| 输入框 |
<form> <imput /> </form> |
输入文字 |
<form> <input type="text" name="n" id="" /> </form> |
|
| 输入密码 |
<form> <input type="password" name="n" id="" /> </form> |
|||
| 使用单选框 |
<form> <input type="radio" name="n" id="" value="" /> </form> |
|||
| 使用复选框 |
<form> <input type="checkbox" name="n" id="" value="" /> </form> |
|||
| 使用图像域 | <form> <input type="image" name="n" id="" src="#" /> </form> |
|||
| 使用隐藏表单的元素 |
<form> <input type="hidden" name="n" value="#" /> </form> |
|||
| 使用列表框 |
<form> <select name="n" id=""> <option value=" "></option> </select> </form> |
|||
| 使用文本区域 | <form> <textarea name="n" id=""cols=""></textarea> </form> |
|||
| 使用按钮 | 设置提交按钮 |
<form> <input type="submit" name="n" id="" value="" /> </form> |
||
| 设置清空按钮 |
<form> <input type="reset" name="n" id="" value="" /> </form> |
| 布局 | 使用表格 | |||
| 使用div | 在内容中应用div | <div style=""></div> | ||
| 嵌套div |
<div> <div> 被嵌套的文本内容 </div> </div> |
|||
| 使用浮动样式定义框架 | <div style="float:left/none/right;"></div> | |||
| 制作左右结构的框架 |
<div> <div style="float:left;"></div> <div style="float:right;"></div> </div> |
|||
| 制作横向结构的框架 | 横向结构的框架是指水平线上分隔出来的框架。它和左右结构的框架有些相似，都利用同样的原理设计，只是多了几个小的div标签。语法形式和左右框架的语法形式一样。 | |||
| 制作纵向结构的框架 | 纵向结构的框架是指垂直线上分割出来的框架。它和横向结构的框架有些相似，只是多了一个clear属性，使框架纵向排列 |
<div> <div style="clear:both;"></div> <div style="clear:both;"></div> </div> |
