参考： http://www.runoob.com/html/html-intro.html
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
说明：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
实例：
-
标题（Heading）是通过<h1> - <h6> 标签来定义的.
-
段落是通过标签 <p> 来定义的.
-
链接是通过标签 <a> 来定义的.
<a href="http://www.runoob.com">这是一个链接</a>
- 图像是通过标签 <img> 来定义的
<img src="/images/logo.png" width="258" height="39" />
元素：
- <p>
- <body>
- <html>
就是没有关闭标签的空元素（
标签定义换行）
属性：
http://www.runoob.com/tags/html-reference.html
| 标签 | 描述 |
|---|---|
| <a> | 定义超文本链接 |
| <audio>New | 定义音频内容 |
| <b> | 定义文本粗体 |
| <body> | 定义文档的主体 |
| <br> | 定义换行 |
| <button> | 定义一个点击按钮 |
| <canvas>New | 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形 |
| <caption> | 定义表格标题 |
| <center> | HTML5不支持，不赞成使用。定义居中文本。 |
| <code> | 定义计算机代码文本 |
| <col> | 定义表格中一个或多个列的属性值 |
| <colgroup> | 定义表格中供格式化的列组 |
| <figure>New | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <h1> to <h6> | 定义 HTML 标题 |
| <i> | 定义斜体字 |
| <html> | 定义 HTML 文档 |
| <p> | 定义段落。 |
| <span> | 定义文档中的节。 |
| <select> | 定义选择列表（下拉列表）。 |
| <section>New | <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
| <sub> | 定义下标文本。 |
| <title> | 定义文档的标题。 |
| 定义注释 |
文本内容：
注释：
<!-- 这是一个注释 -->
水平线标签：
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
标题：
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
段落：
| 标签 | 描述 |
|---|---|
| <p> | 定义一个段落 |
| <br> | 插入单个折行（换行） |
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub>> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
| <abbr> | 定义缩写 |
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<q>Build a future where people live in harmony with nature.</q>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
链接
<a href="url">链接文本</a>
发送邮件：
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
- mailto 发送人
- subject 主题
- 在进行抄送时，需要使用关键字：cc
- 在进行密送时，需要使用关键字：bcc
参数说明：
| 参数 | 描述 |
|---|---|
| mailto:name@email.com | 邮件接收地址 |
| cc=name@email.com | 抄送地址 |
| bcc=name@email.com | 密件抄送地址 |
| subject=subject text | 邮件主题 |
| body=body text | 邮件内容 |
| ? | 第一个参数分隔符 |
| & | 其他参数分隔符 |
注：多个邮件地址用 ; 隔开，空格用 %20 代替。
头部 head
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
- <style> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--为网页定义描述内容-->
<meta name="description" content="免费 Web & 编程 教程">
<!--定义网页作者-->
<meta name="author" content="Runoob">
<!--每30秒钟刷新当前页面-->:
<meta http-equiv="refresh" content="30">
- HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
HTML 样式- CSS
CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
CSS 教程
- 内联样式
显示出如何改变段落的颜色和左外边距
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
字体, 字体颜色 ，字体大小
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
图像
<img src="url" alt="some_text">
- alt 丢失图片显示文字
- width, height 尺寸
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="https://images2015.cnblogs.com/blog/1027162/201611/1027162-20161113162105295-307972897.png", width="80%">
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
表格
<table border="1" cellpadding="10">
<caption>Monthly savings</caption>
<tr>
<th>Header 1</th>
<th>Header 2</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>
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
区块
HTML 可以通过 <div> 和 <span>将元素组合起来。
<div>组合HTML元素的容器， <span> 内联元素，可用作文本的容器
- HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 - HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>
</html>
| 标签 | 描述 |
|---|---|
| <div> | 定义文档区块，块级(block-level) |
| <span> | 定义 span，用来组合文档中的行内元素。 |
布局
使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。 通过坐标位置控制
使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
表单
- 文本域/密码
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd"><br>
<input type="submit" value="提交">
</form>
- 按钮
<form action="demo-form.php" method="get">
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交"><br>
<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
- 表单发送邮件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h3>发送邮件到 someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
</body>
</html>
框架
<iframe src="URL"></iframe>
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
<iframe src="http://www.runoob.com">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe><br>
<iframe src="http://www.runoob.com"></iframe>
```
### 颜色：
<http://www.runoob.com/html/html-colornames.html>
<p style="background-color:rgb(255,255,0)">
颜色
<p>
网友评论