br 折行
p 段落标签
h1，h2,h3,h4,h5,h6 标题标签
a 链接标签 例： <a href="http://www.runoob.com">这是一个链接</a>
img 图片标签 例： <img src="/images/logo.png" alt="这是某个图片">
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
<h1 align="center">标题在页面中进行了居中排列</h1>
<hr/ >标签定义水平线
<!--这是一段注释。注释不会在浏览器中显示。-->
<body bgcolor="red"> 设置body背景为红色
<b>This text is bold</b> 文本加粗
<strong>This text is strong</strong> 强调文本
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains
<sub>subscript</sub>
address 地址标签 例：
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit me at:<br>
Example.com<br>
Box 564, Disneyland<br>
US
</address>
定义缩写：<abbr title="etcetera">etc.</abbr>
<bdo dir="rtl"> 定义文字方向
本行会从右向左输出 (rtl)
</bdo>
这是长的引用：（还有短的）
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的
引用。这是长的引用。
</blockquote>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。大多数浏览器会改写为删除文本和下划线文本。</p>
<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<a href="/index.html">本文本</a> 这创建了一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 这创建了一个指向万维网上的页面的链接。</p>
链接到同一个页面的不同位置:
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
创建文件链接：
<p>
这是邮件链接：
<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>
</p>
创建垂直水平框架：
<frameset cols（/rows）="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
混合框架结构：（可通过显示的图片自由调节大小比例）
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
不可调节比例：
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
内敛框架：
<html>
<body>
<iframe src="/b/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
表格标题：
<table border="6">
<caption>我的标题</caption>
<tr> <!--表示行-->
<th>年龄</th> <!--表示表头-->
<td></td> <!--表示空格表格-->
</tr>
<tr>
<th>年龄</th>
<td>40</td>
</tr>
</table>
单元格边距：
<table border="1" cellpadding="10">
单元格间距：
<table border="1" cellspacing="10">
向单元格添加背景颜色：
<table border="1" bgcolor="red">
向单元格背景图像：
<table border="1" background="/i/eg_bg_07.gif">
在表格单元中排列内容：
<th align="left">消费项目....</th>
表格里的框架属性：
<table frame="box">
<table frame="above">
<table frame="below">
<table frame="hsides">
<table frame="vsides">
<table bgcolor="cyan" border="2" width="80%" height="60%" cellpadding="0" cellspacing="0">
有序列表：
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
1.咖啡
2.牛奶
3.茶
无序列表：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
不同类型的无序列表：
Disc 项目符号列表： <ul type="disc"> 项目前是原点
Circle 项目符号列表： <ul type="circle"> 项目前是圆圈
Square 项目符号列表： <ul type="square"> 项目前是方形
不同类型的有序列表：
<ol> <!--数字列表-->
<ol type="A"> 项目是从A开始的大写字母
<ol type="a"> 项目是从a开始的小写字母
<ol type="I"> 项目是从I开始的字母
<ol type="i"> 项目是从i开始的大写字母
定义一个列表：
<dl> <!--定义列表-->
<dt>计算机</dt> <!--定义项目-->
<dd>用来计算的仪器 ... ...</dd> <!--定义描述-->
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<dl><dt><dd>
显示：
计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...
输入密码：<input type="password/text(输入文本)/checkbox(复选框)/radio/button/reset" name="password">
单选框：<input type="radio" checked="checked" name="Sex" value="male" />
简单的下拉列表：
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="fiat" selected="selected">Fiat</option>
</select>
</form>
文本域：
<body>
<textarea cols="30" rows="5">Web 技术教程 </textarea>
</body>
本例演示如何在数据周围绘制一个带标题的框：
用 <fieldset> 组合表单数据:
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
实例
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
从表单发送电子邮件：
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
电邮：<input type="text" name="mail" value="yourmail" size="20">
设置图像的对齐方式：
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
调整图像尺寸：
<img src="/i/eg_mouse.jpg" width="100" height="100">
为图像设置无法显示时的替换文本：<img src="/i/eg_goleft123.gif" alt="向左转" />
没有下划线的链接：
<a href="/example/html/lastpage.html" style="text-decoration:none">
<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>
<meta http-equiv="Content-Language"content="zh-cn"/>
<link rel="stylesheet" href="http://www.filmset.com/style.css" type="text/css">
解释：定义了梦之都的样式表,rel属性定义为stylesheet样式表,相关的文档为http://www.filmset.com/style.css.
文档描述：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"content="myboke.com.cn">
<meta name="revised"content="mary,8/1/07">
<meta name="generator"content="Dreamweaver 8.0en">
插入一段脚本：
<body>
<script type="text/javascript">
document.write("<h1>hello world!</h1>")
</script>
</body>
不支持 JavaScript 的浏览器将显示 noscript 元素中的文本:
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
<hr size="6" width="10%"align="center" noshade color=red>
<pre>标签 作用：输入时怎么写的文本输出时就怎么显示。
<blockquote>…</blockquote>作用：实现文字缩排。一次标记缩进5个字符，使用两次缩进10个。依次类推。
<a href="url" title="指向链接时显示的提示信息" target="_parent/_film/_self/_blank">超链接名称</a>
_parent:在上一级窗口中打开，一般使用分帧的框架页会用
_top：在浏览器的整个窗口中打开，忽略框架
_self：在同一个帧或窗口中打开，默认
_blank：在新窗口中打开
html提供了三种链接：相对/绝对/根路径
html链分为内部链接和外部链接 内部链接常用到相对和绝对路径 外部路径常用到绝对路径
绝对路径例如：http://www.sina.com.cn
相对路径是以当前文件所在文件为起点进行相对文件的查找 因为它与当前文档的访问协议和主机名相同，甚至又相同的目录路径。所以通常只包含文件
夹名和文件名。有时甚至只有文件名。
若链接到同一目录下的文件，只输入链接文件的名称即可；
若链接到本地当前路径下名称为web的子目录里的文件ma.html 则输入文件名：web/ma.html;
若链接到上一级子目录中的文件 则输入../ma.html;链接到上两级为：../..ma.html
根路径：适用于创建内部链接。多数情况不建议使用这种。链接本地文件时用相对路径较好。
c|web/news/index.html 代表c盘web/news/目录下的index.html文件
内部链接指同一个网站内部不同html页面之间的链接关系 用相对路径较好。
外部链接：跳转到当前网站外部。与其他网站中页面或其他资源之间的链接关系。一般要用完整的URL路径。
src可以是相对路径也可以是绝对路径。
Comment ，计算机专业术语，表示文档中注释节点的内容。
插入滚动文字的标签：<marquee>…</marquee>
属性：
behavior:设置文字的滚动方式
值：scroll:循环滚动
slide:滚动一次停止
alternate:来回交替滚动
direction：滚动文字的方向
bgcolor
width/height
hspace/vspace:滚动文字的背景和周围其他元素的空白间距
loop：设置滚动文字的循环次数
scrollmount:设置滚动文字每次移动的距离 单位px
scrolldelay：滚动文字每次滚动后的间歇时间。单位ms
默认滚动背景的面积和文字等高。和浏览器等宽。
<body>
<table width="30%"border="0"cellspacing="0"cellpadding="0"bgcolor="#7fffd4"align="left">
<tr>
<td align="center">
<font face="隶书"size="5">公 告</font></td>
<tr>
<td height="150px">
<marquee behavior="scroll"direction="up"bgcolor="#7fffd4"height="150px"vspace="15"scrolldelay="300"
onMouseOver=this.stop() onMouseOut=this.start()>
<font face="宋体"size="4">
学校将于明天举行校园卡拉OK大赛，报名截止时间为今天晚上十点，报名处就在这里，希望同学们踊跃参加。</font>
</marquee></td></tr></table></body>
<embed src="url" loop="true|false" autostart="true|false" width="width" height="height" type="meta-type" pluginspage="plugin">
autostart:指定媒体文件在下载后是否自动播放
width/height:指定多媒体窗口的宽和高。为0时类似背景音乐可隐藏面板。
type:指多媒体的播放类型
pluginspace:指定插件页面
<table frame="" rules="">
frame属性控制可以只显示部分表格边框；rules属性控制可以只显示部分内部边框
frame=above/below/hspace/lhs/rhs/vside/border/void
rules=all/none/cols/rows/groups
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta
charset="gbk">。
p 段落标签
h1，h2,h3,h4,h5,h6 标题标签
a 链接标签 例： <a href="http://www.runoob.com">这是一个链接</a>
img 图片标签 例： <img src="/images/logo.png" alt="这是某个图片">
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
<h1 align="center">标题在页面中进行了居中排列</h1>
<hr/ >标签定义水平线
<!--这是一段注释。注释不会在浏览器中显示。-->
<body bgcolor="red"> 设置body背景为红色
<b>This text is bold</b> 文本加粗
<strong>This text is strong</strong> 强调文本
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains
<sub>subscript</sub>
address 地址标签 例：
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit me at:<br>
Example.com<br>
Box 564, Disneyland<br>
US
</address>
定义缩写：<abbr title="etcetera">etc.</abbr>
<bdo dir="rtl"> 定义文字方向
本行会从右向左输出 (rtl)
</bdo>
这是长的引用：（还有短的）
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的
引用。这是长的引用。
</blockquote>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。大多数浏览器会改写为删除文本和下划线文本。</p>
<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<a href="/index.html">本文本</a> 这创建了一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 这创建了一个指向万维网上的页面的链接。</p>
链接到同一个页面的不同位置:
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
创建文件链接：
<p>
这是邮件链接：
<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>
</p>
创建垂直水平框架：
<frameset cols（/rows）="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
混合框架结构：（可通过显示的图片自由调节大小比例）
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
不可调节比例：
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
内敛框架：
<html>
<body>
<iframe src="/b/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
表格标题：
<table border="6">
<caption>我的标题</caption>
<tr> <!--表示行-->
<th>年龄</th> <!--表示表头-->
<td></td> <!--表示空格表格-->
</tr>
<tr>
<th>年龄</th>
<td>40</td>
</tr>
</table>
单元格边距：
<table border="1" cellpadding="10">
单元格间距：
<table border="1" cellspacing="10">
向单元格添加背景颜色：
<table border="1" bgcolor="red">
向单元格背景图像：
<table border="1" background="/i/eg_bg_07.gif">
在表格单元中排列内容：
<th align="left">消费项目....</th>
表格里的框架属性：
<table frame="box">
<table frame="above">
<table frame="below">
<table frame="hsides">
<table frame="vsides">
<table bgcolor="cyan" border="2" width="80%" height="60%" cellpadding="0" cellspacing="0">
有序列表：
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
1.咖啡
2.牛奶
3.茶
无序列表：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
不同类型的无序列表：
Disc 项目符号列表： <ul type="disc"> 项目前是原点
Circle 项目符号列表： <ul type="circle"> 项目前是圆圈
Square 项目符号列表： <ul type="square"> 项目前是方形
不同类型的有序列表：
<ol> <!--数字列表-->
<ol type="A"> 项目是从A开始的大写字母
<ol type="a"> 项目是从a开始的小写字母
<ol type="I"> 项目是从I开始的字母
<ol type="i"> 项目是从i开始的大写字母
定义一个列表：
<dl> <!--定义列表-->
<dt>计算机</dt> <!--定义项目-->
<dd>用来计算的仪器 ... ...</dd> <!--定义描述-->
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<dl><dt><dd>
显示：
计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...
输入密码：<input type="password/text(输入文本)/checkbox(复选框)/radio/button/reset" name="password">
单选框：<input type="radio" checked="checked" name="Sex" value="male" />
简单的下拉列表：
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="fiat" selected="selected">Fiat</option>
</select>
</form>
文本域：
<body>
<textarea cols="30" rows="5">Web 技术教程 </textarea>
</body>
本例演示如何在数据周围绘制一个带标题的框：
用 <fieldset> 组合表单数据:
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
实例
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
从表单发送电子邮件：
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
电邮：<input type="text" name="mail" value="yourmail" size="20">
设置图像的对齐方式：
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
调整图像尺寸：
<img src="/i/eg_mouse.jpg" width="100" height="100">
为图像设置无法显示时的替换文本：<img src="/i/eg_goleft123.gif" alt="向左转" />
没有下划线的链接：
<a href="/example/html/lastpage.html" style="text-decoration:none">
<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>
<meta http-equiv="Content-Language"content="zh-cn"/>
<link rel="stylesheet" href="http://www.filmset.com/style.css" type="text/css">
解释：定义了梦之都的样式表,rel属性定义为stylesheet样式表,相关的文档为http://www.filmset.com/style.css.
文档描述：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"content="myboke.com.cn">
<meta name="revised"content="mary,8/1/07">
<meta name="generator"content="Dreamweaver 8.0en">
插入一段脚本：
<body>
<script type="text/javascript">
document.write("<h1>hello world!</h1>")
</script>
</body>
不支持 JavaScript 的浏览器将显示 noscript 元素中的文本:
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
<hr size="6" width="10%"align="center" noshade color=red>
<pre>标签 作用：输入时怎么写的文本输出时就怎么显示。
<blockquote>…</blockquote>作用：实现文字缩排。一次标记缩进5个字符，使用两次缩进10个。依次类推。
<a href="url" title="指向链接时显示的提示信息" target="_parent/_film/_self/_blank">超链接名称</a>
_parent:在上一级窗口中打开，一般使用分帧的框架页会用
_top：在浏览器的整个窗口中打开，忽略框架
_self：在同一个帧或窗口中打开，默认
_blank：在新窗口中打开
html提供了三种链接：相对/绝对/根路径
html链分为内部链接和外部链接 内部链接常用到相对和绝对路径 外部路径常用到绝对路径
绝对路径例如：http://www.sina.com.cn
相对路径是以当前文件所在文件为起点进行相对文件的查找 因为它与当前文档的访问协议和主机名相同，甚至又相同的目录路径。所以通常只包含文件
夹名和文件名。有时甚至只有文件名。
若链接到同一目录下的文件，只输入链接文件的名称即可；
若链接到本地当前路径下名称为web的子目录里的文件ma.html 则输入文件名：web/ma.html;
若链接到上一级子目录中的文件 则输入../ma.html;链接到上两级为：../..ma.html
根路径：适用于创建内部链接。多数情况不建议使用这种。链接本地文件时用相对路径较好。
c|web/news/index.html 代表c盘web/news/目录下的index.html文件
内部链接指同一个网站内部不同html页面之间的链接关系 用相对路径较好。
外部链接：跳转到当前网站外部。与其他网站中页面或其他资源之间的链接关系。一般要用完整的URL路径。
src可以是相对路径也可以是绝对路径。
Comment ，计算机专业术语，表示文档中注释节点的内容。
插入滚动文字的标签：<marquee>…</marquee>
属性：
behavior:设置文字的滚动方式
值：scroll:循环滚动
slide:滚动一次停止
alternate:来回交替滚动
direction：滚动文字的方向
bgcolor
width/height
hspace/vspace:滚动文字的背景和周围其他元素的空白间距
loop：设置滚动文字的循环次数
scrollmount:设置滚动文字每次移动的距离 单位px
scrolldelay：滚动文字每次滚动后的间歇时间。单位ms
默认滚动背景的面积和文字等高。和浏览器等宽。
<body>
<table width="30%"border="0"cellspacing="0"cellpadding="0"bgcolor="#7fffd4"align="left">
<tr>
<td align="center">
<font face="隶书"size="5">公 告</font></td>
<tr>
<td height="150px">
<marquee behavior="scroll"direction="up"bgcolor="#7fffd4"height="150px"vspace="15"scrolldelay="300"
onMouseOver=this.stop() onMouseOut=this.start()>
<font face="宋体"size="4">
学校将于明天举行校园卡拉OK大赛，报名截止时间为今天晚上十点，报名处就在这里，希望同学们踊跃参加。</font>
</marquee></td></tr></table></body>
<embed src="url" loop="true|false" autostart="true|false" width="width" height="height" type="meta-type" pluginspage="plugin">
autostart:指定媒体文件在下载后是否自动播放
width/height:指定多媒体窗口的宽和高。为0时类似背景音乐可隐藏面板。
type:指多媒体的播放类型
pluginspace:指定插件页面
<table frame="" rules="">
frame属性控制可以只显示部分表格边框；rules属性控制可以只显示部分内部边框
frame=above/below/hspace/lhs/rhs/vside/border/void
rules=all/none/cols/rows/groups
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta
charset="gbk">。