html
HTML 标题 HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 实例 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML 段落 HTML 段落是通过 <p> 标签进行定义的。 实例 <p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接 HTML 链接是通过 <a> 标签进行定义的。 实例 <a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像 HTML 图像是通过 <img> 标签进行定义的。 实例 <img src="w3school.jpg" width="104" height="142" />
HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性
空的 HTML 元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 属性 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现，比如：name="value"。 属性总是在 HTML 元素的开始标签中规定。 HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定： <a href="http://www.w3school.com.cn">This is a link</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完颜成立</title> <style type="text/css"> <!-- a:link { color: #0000CC; text-decoration: none; } a:visited { text-decoration: none; color: #CC0000; } a:hover { text-decoration: underline; color: #660066; } a:active { text-decoration: none; color: #FF0000; } --> </style>
<h1 align="center"> 拥有关于对齐方式的附加信息。 TIY : 居中排列标题
<body> 定义 HTML 文档的主体。 <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
HTML 水平线 <hr /> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。 实例 <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
。用 <br /> 标签产生空行
HTML 折行 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签： <p>This is<br />a para<br />graph with line breaks</p>
<html>
<body>
<h1>春晓</h1>
<p> 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。 </p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
此例演示如何在一个 HTML 文件中对文本进行格式化 <b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
此例演示如何使用 pre 标签对空行和空格进行控制。 <pre> for i = 1 to 10 print i next i </pre>
<code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br />
<p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p>
此例演示如何在 HTML 文件中写地址。 <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
此例演示如何改变文字的方向 <bdo dir="rtl"> Here is some Hebrew text </bdo>
此例演示如何实现长短不一的引用语。
这是长的引用： <blockquote> 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。 </blockquote>
这是短的引用： <q> 这是短的引用。 </q>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head>
<body> <h1>header 1</h1> <p>A paragraph.</p>
本例演示如何使用样式属性做一个没有下划线的链接。 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <a href="/example/html/lastpage.html" style="text-decoration:none"> 这是一个链接！ </a>
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html>
如何使用样式 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表： 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。 <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> 内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 <p style="color: red; margin-left: 20px"> This is a paragraph </p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
HTML 链接 - target 属性 使用 Target 属性，你可以定义被链接的文档在何处显示。 下面的这行会在新窗口打开文档： <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
实例 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）： <a name="tips">基本的注意事项 - 有用的提示</a> 然后，我们在同一个文档中创建指向该锚的链接： <a href="#tips">有用的提示</a> 您也可以在其他页面中创建指向该锚的链接： <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a> 在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
本例演示如何跳出框架，假如你的页面被固定在框架之内。 <body> <p>被锁在框架中了吗？</p> <a href="/index.html" target="_top">请点击这里！</a>
<p> 这是邮件链接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> </p> <p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p>
<p> 这是另一个 mailto 链接： <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a> </p>
<p> <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 </p>
p> 来自 W3School.com.cn 的图像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p>
替换文本属性（Alt） alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。 <img src="boat.gif" alt="Big Boat">
向 HTML 页面添加背景图片。 <body background="/i/eg_background.jpg">
本例演示如何在文字中排列图像。 <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>
本例演示如何使图片浮动至段落的左边或右边。 p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p>
<p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p>
本例演示如何将图片调整到不同的尺寸。
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>
<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
<img src="/i/eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<img src="/i/eg_goleft123.gif" alt="向左转" />
在 HTML 文档中创建表格。 <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4> <table border="1"> <tr> <td>100</td> </tr> </table>
<h4>一行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>
<h4>两行三列：</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
各种类型的表格边框。 <h4>带有普通的边框：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>带有粗的边框：</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>带有很粗的边框：</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
表格 table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
表格的表头 表格的表头使用 <th> 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本： <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器显示如下： HeadingAnother Heading row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2
<p> 一幅图像： <img src="img/eg_mouse.jpg" width="128" height="128" /> </p>
<p> 一幅动画图像： <img src="img/eg_cute.gif" width="50" height="50" /> </p>
背景图 <body background="/i/eg_background.jpg">
浮动图像 <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p>
<p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p>
插入MP3 <object height="100" width="100" data="medium/song.mp3"></object>
优酷解决方案 在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。 如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频： <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
最好的 HTML 解决方法 HTML 5 + <object> + <embed> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video> 亲自试一试 上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
使用超链接 如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。 以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件： 实例 <a href="movie.swf">Play a video file</a>
优质内容筛选与推荐>>1、MySQL数据类型 转
2、yii2.0分页
3、（原）数据结构——线索二叉树
4、工厂三兄弟之抽象工厂模式（一）转
5、图片base64编码利器：在线 Data URI 生成工具 – Duri.me