什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
HTML 实例
<!DOCTYPE html> <html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
实例解析
- DOCTYPE 声明了文档类型
- 位于标签 <html> 与 </html> 描述了文档类型
- 位于标签 <body> 与 </body> 为可视化网页内容
- 位于标签 <h1> 与 </h1> 作为一个标题使用
- 位于标签 <p> 与 </p> 作为一个段落显示
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.
<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>
HTML 段落
<p>这是一个段落。</p> <p>这是另外一个段落。</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
<a href="http://www.baidu.com">这是一个链接</a>
HTML 图像
HTML 图像是通过标签 <img> 来定义的
<img src="image.png" width="104" height="142">
HTML 元素
HTML 文档由 HTML 元素定义。
<p> 这是一个段落 </p> <a href="default.htm"> 这是一个链接 </a> <br>
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>This is a paragraph
<p>This is a paragraph
<p>This is a paragraph
以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.runoob.com">这是一个链接</a>
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的.
<h1> 定义最大的标题。 <h6> 定义最小的标题。
注释: 浏览器会自动地在标题的前后添加空行。
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br>a para<br>graph with line breaks</p>
HTML 格式化标签
HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。 然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
<b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字
HTML "计算机输出" 标签
<code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
<abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：:
<a href="url">链接文本</a>
href 属性描述了链接的目标。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.baidu.com/" target="_blank">访问baidu!</a>
HTML 连接- id 属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a> #在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"： <a href="#tips">访问有用的提示部分</a> #或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： <a href="http://www.runoob.com/html-links.htm#tips"> 访问有用的提示部分</a>
HTML <head>
<title> - 定义了HTML文档的标题
使用 <title> 标签定义HTML文档的标题
使用 <base> 定义页面中所有链接默认的链接目标地址
<meta> - 提供了HTML文档的meta标记
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
HTML <head> 元素 <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head> <base href="http://www.w3cschool.cc/images/" target="_blank"> </head>
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你需要指定样式文件来渲染HTML文档:
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
HTML <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于 <head>区域
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词 页面编码（告诉浏览器是什么编码） < meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 刷新和跳转 < meta http-equiv=“Refresh” Content=“30″> < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> 关键词 < meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" > 描述 例如：cnblogs X-UA-Compatible 微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。 与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。 当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta> 标签- 使用实例 为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 为网页定义描述内容: <meta name="description" content="Free Web tutorials on HTML and CSS"> 定义网页作者: <meta name="author" content="Hege Refsnes"> 每30秒中刷新当前页面: <meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
- 引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 写js代码
< script type="text/javascript" > ... </script >
总结-
HTML head 元素 标签 描述 <head> 定义了文档的信息 <title> 定义了文档的标题 <base> 定义了页面链接标签的默认链接地址 <link> 定义了一个文档和外部资源之间的关系 <meta> 定义了HTML文档中的元数据 <script> 定义了客户端的脚本文件 <style> 定义了HTML文档的样式文件
HTML 样式- CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。
常用样式参数
color 设置颜色
background-color : red; 定义背景颜色
font-family 设置字体
font-size 字体大小
text-align 文字对齐方式
更多的属性查看一些官方文档
HTML 图像标签
<img> 定义图像 <map> 定义图像地图 <area> 定义图像地图中的可点击区域
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <thead> <tr> <td colspan="3">aaa</td> </tr> <tr> <td rowspan="2">aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>bbb</td> <td>ccc</td> </tr> </thead> </table> border表示边框为1px colspan=3表示占据三列 rolspan=2表示占据两行
注释：colspan="0" 指示浏览器横跨到列组的最后一列。
HTML 列表
HTML支持有序、无序和定义列表
有序列表
<!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html>
- 咖啡
- 牛奶
- 茶
- 咖啡
- 牛奶
- 茶
<html> <body> <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>小写罗马字母列表：</h4> <ol type="i"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> </body> </html> 数字列表： 苹果 香蕉 柠檬 桔子 字母列表： 苹果 香蕉 柠檬 桔子 小写字母列表： 苹果 香蕉 柠檬 桔子 罗马字母列表： 苹果 香蕉 柠檬 桔子 小写罗马字母列表： 苹果 香蕉 柠檬 桔子
无序列表
<html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
- 咖啡
- 茶
- 牛奶
<html> <body> <h4>Disc 项目符号列表：</h4> <ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Circle 项目符号列表：</h4> <ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Square 项目符号列表：</h4> <ul type="square"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> </body> </html> Disc 项目符号列表： 苹果 香蕉 柠檬 桔子 Circle 项目符号列表： 苹果 香蕉 柠檬 桔子 Square 项目符号列表： 苹果 香蕉 柠檬 桔子
自定义列表
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Coffee Black hot drink Milk White cold drink
<html> <body> <h4>一个嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul> </body> </html>
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
HTML <div> 和 <span>
可以通过 <div>块模块 和 <span>内联模块 将 HTML 元素组合起来。
HTML 布局
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;} div#footer {background-color:#99bbbb;clear:both;text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0;font-size:18px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html>
HTML 表单和输入
在大多数浏览器中，文本域的缺省宽度是20个字符。
<html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastname"> </form> </body> </html>
密码文本框
<html> <body> <form> 用户： <input type="text" name="user"> <br /> 密码： <input type="password" name="password"> </form> <p> 请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 </p> </body> </html>
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
name的值必须一致
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
这里即使name一致 也是复选框
带有标题的框
<!DOCTYPE HTML> <html> <body> <form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form> <p>如果表单周围没有边框，说明您的浏览器太老了。</p> </body> </html>
input File
<input type="file" value="file"> 提交文件时： enctype='multipart/form-data' method='POST' <p>提交文件时： enctype='multipart/form-data' method='POST'</p>
textarea
<textarea style="width:500px;height: 200px;"></textarea>
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="http://www.baidu.com" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
type=submit提交按钮
从表单发送邮件
<html> <body> <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>这个表单会把电子邮件发送到 W3School。</h3> 姓名：<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 电邮：<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 内容：<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="发送"> <input type="reset" value="重置"> # reset 重置表单内容 </form> </body> </html>
表单标签
<form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域 (一个多行的输入控件) <label> 定义一个控制的标签 <fieldset> 定义域 <legend> 定义域的标题 <select> 定义一个选择列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个按钮
下拉列表select
<select> <!--selected="selected" 默认选择--> <option>北京</option>> <option selected="selected">上海</option>> <option>广州</option>> </select> <!--滚动条--> <select size="5"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--ctrl多选--> <select size="5" multiple="multiple"> <option>北京</option>> <option>上海</option>> <option>广州</option>> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--分组--> <select> <optgroup label="中国"> <option>北京</option>> <option>上海</option>> <option>广州</option>> </optgroup> <optgroup label="美国"> <option>旧金山</option>> <option>华盛顿</option>> </optgroup> </select>
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
垂直框架
本例中演示三个不同的页面制作一个垂直框架
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html>
总结.....
块级标签
| <address> | information on author |
| <blockquote> | long quotation |
| <button> | push button |
| <caption> | table caption |
| <dd> | definition description |
| <del> | deleted text |
| <div> | generic language/style container |
| <dl> | definition list |
| <dt> | definition term |
| <fieldset> | form control group |
| <form> | interactive form |
| <h1> | heading |
| <h2> | heading |
| <h3> | heading |
| <h4> | heading |
| <h5> | heading |
| <h6> | heading |
| <hr> | horizontal rule |
| <iframe> | inline subwindow |
| <ins> | inserted text |
| <legend> | fieldset legend |
| <li> | list item |
| <map> | client-side image map |
| <noframes> | alternate content container for non frame-based rendering |
| <noscript> | alternate content container for non script-based rendering |
| <object> | generic embedded object |
| <ol> | ordered list |
| <p> | paragraph |
| <pre> | preformatted text |
| <table> | table |
| <tbody> | table body |
| <td> | table data cell |
| <tfoot> | table footer |
| <th> | table header cell |
| <thead> | table header |
| <tr> | table row |
| <ul> | unordered list |
行级标签
| <a> | anchor |
| <abbr> | abbreviated form |
| <acronym> | acronym |
| <b> | bold text style |
| <bdo> | I18N BiDi over-ride |
| <big> | large text style |
| <br> | forced line break |
| <button> | push button |
| <cite> | citation |
| <code> | computer code fragment |
| <del> | deleted text |
| <dfn> | instance definition |
| <em> | emphasis |
| <i> | italic text style |
| <iframe> | inline subwindow |
| <img> | Embedded image |
| <input> | form control |
| <ins> | inserted text |
| <kbd> | text to be entered by the user |
| <label> | form field label text |
| <map> | client-side image map |
| <object> | generic embedded object |
| <q> | short inline quotation |
| <samp> | sample program output, scripts, etc. |
| <select> | option selector |
| <small> | small text style |
| <span> | generic language/style container |
| <strong> | strong emphasis |
| <sub> | subscript |
| <sup> | superscript |
| <textarea> | multi-line text field |
| <tt> | teletype or monospaced text style |
| <var> | instance of a variable or program argument |
