标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html>
可以看出：
基础扩展：
<a>：定义链接
href：指定超链接地址
示例： <a href = "http://www.gameres.com">游资网</a>
<img>：定义图像
示例：<img src="testImg.png" width="400" height="270">
如果不按图标自身的长宽比来配置，图标会按配置的长宽比进行拉伸/压缩
HTML 属性：
上述的 href 就是一种属性，img 标签的图片源、长、宽都是由属性提供的，可以知道：
id 属性示例：
<html> <head> <script type="text/javascript"> function change_header() { document.getElementById("myHeader").innerHTML="Nice day!"; } </script> </head> <body> <h1 id="myHeader">Hello World!</h1> <button onclick="change_header()">Change text</button> </body> </html>
HTML 水平线与注释：
<hr> <!-- 注释测试 --> <hr> <hr>
HTML 段落换行：
<p>这个<br>段落<br>演示了分行的效果</p>
HTML 文本格式化：
<b>显示 加粗文本</b> <br> <!-- 换行无效--> <i>显示斜体文本</i> <br> <big>显示 大号文本</big> <br> <small>显示 小号文本</small> <br> <pre> <!-- 换行有效--> 换行可以不用标签 就可以实现 </pre> <p>WWF‘s goal is to: <!-- 换行有效--> <q>Build a future where people live in harmony with nature.</q> <!-- <q> 输出引号 --> We hope they succeed.</p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <!-- 删除效果与下划线效果 -->
留下教程来源方便查询：http://www.runoob.com/html/html-formatting.html。
HTML 链接：
target 属性：定义被链接的文档在何处显示。
<a href="http://www.gameres.com" target="_blank">游资网</a>
将一张图片作为链接点：
<p>图片链接 <a href="http://www.gameres.com"> <img src="testImg.png" width="730" height="270"> </a></p>
链接到当前页面的指定位置：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p> <a href="#C2">查看章节2</a> </p> <h2>章节 1</h2> <p>这边显示该章节的内容……</p> <h2><a id="C2">章节 2</a></h2> <p>这边显示该章节的内容……</p> <h2>章节 3</h2> <p>这边显示该章节的内容……</p> </body> </html>
HTML 头部：
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
标签：
原文地址：http://www.cnblogs.com/Daniel-Liang/p/5916268.html
