HTML 标题
<h1>--<h6>
<span style="font-size:14px;"><html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html></span>水平线
<hr/>
注释
<!--注释类容-->
段落
<p>内容</p> 段落的行数依赖于浏览器窗口的大小
换行
<br/>
文本格式化
<b>粗体
<big>大号字体
<em>着重
<i>斜体
<small>小号
<strong> 加重语气
<ins>下划线字（插入字）
<del>删除字
例子 点击打开链接
预格式化文本
<pre>内容</pre>
用来表示代码，可以保留空格和换行
pre可以使用<a>标签，详细参考<pre>标签
字符实体
"<"→"<" ">"→">" "&"→"&"
地址
<address></address>
缩写
<abbr title="全写内容">缩写内容</abbr>
标记一个缩写，当鼠标移上去时显示全部
例子：
<!DOCTYPE HTML>
<html>
<body>
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
</body>
</html>
文字方向
<bdo dir="方向">内容</ado>
<html>
<body>
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
<q>内容</q>短引用，会在周边加引号
<blockquote>内容</blockquote>长引用 有自己的空间（增加外边距）
HTML样式
内部样式
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
外部样式
样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
点击打开链接
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>也可以是
<p >叽里呱啦<span style="color: red; margin-left: 20px"> This is a paragraph </span>叽里呱啦
</p>
一些标签
<style>定义样式 <style type="text/css">内容</style>位于head部分中 参考内部式
<link>链接一个外部样式表 参考外部式 也一般在head 里
<div>定义文档中的块级
栗子
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
<span>定义行内小块
<p >叽里呱啦<span style="color: red; margin-left: 20px"> This is a paragraph </span>叽里呱啦
</p>
<html>
<body>
<p><font size="5" face="arial" color="red">A paragraph.</font></p>
</body>
</html>
链接
<a href="url"> 内容</a>
图像链接
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
点击打开链接
没有下划线的链接
<html>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>
target 属性
target="_blank" 新窗口
<html>
<body>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
</body>
</html>
连接到同一个页面不同的位置（类似百科）
图像
<img src="路径" alt="图像没显示出来代替的文本" />背景图像
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>
排列图像
align="bottom" middle top
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
点击打开链接
图片浮动
align="left" right
调整图片属性
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
创建图像映射
涉及到<map>usemap <area>
可点击图片某些区域，每个区域又是超链接
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
