本笔记记录最基本的标签和使用例程，在些记录下来，方便以后巩固，也方便其它同行参阅和简单例子，×××长城从小做起，html 5这么琐碎的东西，还得一步步来，没有什么其它好办法吧！

另外，我的编程环境如下配置：html 5编辑IDE使用是Brackets,php使用Notepad ++.部署是用的xammn.

例程1：hello world

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第一个教程</title></head><body><h2>helloworld</h2></body></html>

说明：

<!DOCTYPE html>声明为 HTML5 文档

<html>元素是 HTML 页面的根元素

<head>元素包含了文档的元（meta）数据

<title>元素描述了文档的标题

<body>元素包含了可见的页面内容

<h2>元素定义一个大标题

<p>元素定义一个段落

例程2：标题

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><h2>我的标题1</h2><h3>我的标题2</h3><h4>我的标题3</h4><h5>我的标题4</h5><h6>我的标题5</h6><h7>我的标题6</h7></body></html>

例程3：html 段落

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><h2>我的标题1</h2><p>这是第一个段落</p><p>这是第二个段落</p></body></html>

例程4：html链接

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><ahref="http://www.runoob.com">网易</a></body></html>

例程5 html 图像

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><imgsrc="screenshots/quick-edit.png"width="200"height="200"></body></html>

例程6:在网页上加上一条线

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><imgsrc="screenshots/quick-edit.png"width="200"height="200"><hr><p>段落1</p><hr><p>段落2</p><hr></body></html>

例程7：给程序加上注释

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><!--在网页上显示图片--><imgsrc="screenshots/quick-edit.png"width="200"height="200"><hr><!--段落1的内容--><p>段落1</p><hr><p>段落2</p><hr></body></html>

例程8 字体格式化输出

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>第二个例子</title></head><body><b>加粗文本</b><br><br><i>斜体文本</i><br><br><code>电脑自动输出</code><br><br>这是<sub>下标</sub>和<sup>上标</sup></body></html>

例程9 html css

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的例程</title></head><body><ahref="http://www.163,com/">访问网易!</a><h2>居中对齐</h2></body></html>

例程10 表格

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的例程</title></head><body><tableborder="1"><tr><th>头部1</th><th>头部2</th></tr><tr><td>第1行第1列</td><td>第1行第2列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td></tr></table></body></html>

例程11 无序列表

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的例程</title></head><body><ul><li>第一</li><li>第二</li><li>第三</li></ul></body></html>

例程12：有序列表

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的例程</title></head><body><ol><li>呵呵</li><li>呵呵</li><li>呵呵</li></ol><olstart="50"><li>呵呵</li><li>呵呵</li><li>呵呵</li></ol></body></html>

例程13：块区域

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的例程</title></head><body><div><h4>这是一个在div元素中的标题。</h4><p>这是一个在div元素中的文本。</p></div></body></html>