1、HTML 简介
W3C（World Wide Web Consortium），W3C 组织，万维网联盟，这个组织制订网页标准。W3C 标准不是一个标准，而是一系列的标准的集合，包含三部分的标准：结构标准，表现标准和动作标准，与结构标准对应的是 HTML，与表现标准对应的是 CSS，与动作标准对应的是 JavaScript。
HTML 是一种在 Web 上使用的通用标记语言，允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 的关键是标签，其作用是呈现内容。浏览器用于读取 HTML 文件，并将其作为网页显示，他并不是直接显示的 HTML 标签，但是可以使用标签来决定如何展现 HTML 页面的内容给用户。
HTML 指的是超文本标记语言：Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 （markup tag）。HTML 使用标记标签来描述网页。HTML 文档包含了 HTML 标签及文本内容，HTML文档也叫做 web 页面。
HTML 标记标签通常被称为 HTML 标签 （HTML tag）。HTML 标签通常是成对出现的，比如 <p> 和 </p>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。
HTML标签 和 HTML元素 通常都是描述同样的意思，但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如：<p> 我是一个段落。</p> 。
2、HTML 标签
HTML 文档由 HTML 元素定义。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容，空元素在开始标签中进行关闭，以开始标签的结束而结束，大多数 HTML 元素可拥有属性。
HTML 文档由嵌套的 HTML 元素构成：<html><head><body><p>我是一个段落。</p></body></head></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<p style="color:red">我是一个段落。</p>
</body>
</html>
HTML 元素可以设置属性，属性是 HTML 元素提供的附加信息，属性一般描述于开始标签，属性总是以名称/值对的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号。
适用于大多数 HTML 元素的属性：
①：id 定义元素的唯一 id
②：class 为 html 元素定义一个或多个类名（classname）
③：style 规定元素的行内样式（inline style 内联样式）
④：title 描述了元素的额外信息 （作为工具条使用）
（1）、基础标签
HTML5 声明：<!DOCTYPE html> 声明有助于浏览器正确显示网页，也是在告诉浏览器这是一个 HTML5 的网页。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，<!DOCTYPE> 标签没有结束标签，声明不区分大小写。
<html> 标签告知浏览器这是一个 HTML 文档。<html> 标签是 HTML 文档中最外层的元素，也是文档的根元素，但是不包含 doctype 元素，也就是声明 <!DOCTYPE html>，doctype 元素必须位于 html 元素之前，<html> 标签是所有其他 HTML 元素的容器。HTML5 中增加了一个新属性：manifest，值为 URL 用于定义一个 URL，在这个 URL 上描述了文档的缓存信息。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts），样式文件（CSS），及各种 meta 信息。可以添加在头部区域的元素标签有 7 个：<title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。
<meta>标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。注意：<meta> 通常位于 <head> 区域内，在 HTML 中 <meta> 标签没有结束标签。
元数据（Metadata）是数据的数据信息，<meta> 标签提供了 HTML 文档的元数据。注意：元数据通常以 名称/值 对出现。注意：如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：HTML4： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，HTML5： <meta charset="UTF-8">。
<meta> 标签使用实例：
定义编码格式：<meta charset="UTF-8">
为搜索引擎定义关键词：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容：<meta name="description" content="HTML基础">
定义网页作者：<meta name="author" content="Mr mo"> 每30秒中刷新当前页面：<meta http-equiv="refresh" content="30">
常用的针对移动网页优化过 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
上面实例最后一项代码解析：
width：控制 viewport（可视区） 的大小，可以是指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度，单位为缩放为 100% 时的 CSS 的像素。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale/minimum-scale：允许用户缩放到的最大/最小比例。
user-scalable：用户是否可以手动缩放。
<title> 标签定义HTML文档的标题。使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
<title> 标签在所有 HTML 文档中是必需的。<title>元素：
①：定义浏览器工具栏中的标题。
②：提供页面被添加到收藏夹时的标题。
③：显示在搜索引擎结果中的页面标题。
注意：一个 HTML 文档中不能有一个以上的 <title> 元素。如果你遗漏了 <title> 标签，文档作为 HTML 是无效的。<title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时，显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候，一定要简短，有说明性，采用关键词，与页面内容相关。
<style> 标签定义了 HTML 文档的样式信息。在 <style> 元素中，你可以规定在浏览器中如何呈现 HTML 文档，每个 HTML 文档能包含多个 <style> 标签。注意：如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。"scoped" 属性是 HTML5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。 如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。在 HTML5 中可以不定义类型（type）属性，默认值为 "text/css"。如需链接外部样式表，就使用 <link> 标签。<style>定义文本样式，<link> 定义资源引用地址。
<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。
JavaScript 使 HTML 页面具有更强的动态和交互性。HTML 脚本标签 <script> 用于定义客户端脚本。<noscript> 标签定义了不支持脚本浏览器输出的文本，对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。
<script> 标签定义客户端脚本，比如 JavaScript。<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更改。注意：如果使用 "src" 属性，则 <script> 元素必须是空的。
有多种执行外部脚本的方法：
①：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）。
② ：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行。
③：如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。
在 HTML5 中 "type" 属性是可以省略的。src 属性规定外部脚本的 URL。defer 属性用于规定当页面已完成解析后，执行脚本，仅适用于外部脚本。charset 属性用于规定在脚本中使用的字符编码，仅适用于外部脚本。"async" 属性是 HTML5 中的新属性，用于规定异步执行脚本，仅适用于外部脚本。
引用外部脚本的语法：<script src="URL"></script> 其中 src="RUL" 中填写同级目录下的外部脚本文件名。
注意：
①：外部脚本文件可以是任意扩展名，通常开发者会将 JavaScript 外部脚本的扩展名写为 script.js。
②：在外部脚本文件中，只能包含脚本语言代码，不能包含其他代码，如HTML代码等，也不能包含 <script> 标签，因为 <script>元素属于 HTML 语言中的元素。
③：在引用外部脚本文件时，<script> 标签与 </script> 标签之间不能有其他代码，包括脚本语言代码。
④：虽然在引用外部脚本文件时，<script> 标签与 </script>标签之间不能有其他代码，但 </script> 标签也不能被省略。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<noscript> 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。<noscript> 标签用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器，如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。在 HTML4 中，<noscript> 标签只允许插入到 <body> 元素中，而在 HTML5 中，<noscript> 标签可以插入到 <head> 和 <body> 区域中。
<body> 标签定义文档的主体。<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。在 HTML4 中，所有 body 元素的"呈现属性" 已废弃。在 HTML 5 中，删除了所有 body 元素的"呈现属性"，可以使用样式定义。
HTML 标题是通过 <h1> - <h6> 标签来定义的。<h1> 定义最大的标题标签，<h6> 定义最小的标题。要确保将 HTML 标题标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
HTML 段落是通过 <p> 标签来定义的，HTML 可以将文档分割为若干段落，浏览器会自动地在段落的前后添加空行。<p> 元素是块级元素，该元素会自动在其前后创建一些空白。如果希望在不产生一个新段落的情况下进行换行，就使用 <br/> 标签。我们无法确定 HTML 被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的结果，对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。每个段落前空 2 个字，可用 CSS 样式定义：<p style="text-indent:2em"></p>
<br/> 标签插入一个简单的换行符。没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，<br/> 就是一个空元素，所有空元素都必须被关闭 <br/>。在写地址信息或者写诗词时 <br> 标签非常有用。注意： 请使用 <br/> 标签来输入空行，而不是分割段落。
<hr/> 标签在 HTML 页面中创建水平线，用于分隔内容。<hr/> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线，该元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。在 HTML5 中，<hr/> 定义内容中的主题变化，并显示为一条水平线，而在 HTML4 中，<hr/> 标签仅仅显示为一条水平线。可使用 CSS 来为 <hr/> 元素定义样式。
HTML 注释 <!-- 注释内容 --> 。 注释标签用来在源文档中插入注释，注释不会在浏览器中显示。可以使用注释对你的代码进行解释，这样做有助于在以后的时间对代码的编辑，特别是代码量很大的情况下很有用，也可以在注释内容存储针对程序所定制的信息，在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作，这些动作可能是简单的包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。
（2）、样式标签
<article> （H5） 标签定义一个文章区域。<article> 标签定义独立的内容，他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论。
<aside> （H5） 标签定义页面的侧边栏内容。<aside> 标签定义 <article> 标签外的内容，<aside> 的内容应该与附近的内容相关。<aside> 的的内容可用作文章的侧栏。
<section> （H5） 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<header> （H5） 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，你可以定义多个 <header> 元素。注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
<footer> （H5） 标签定义 <section> 或 document 的页脚，也就是用于定义文档或者文档的一部分区域的页脚。<footer> 元素应该包含它所包含的元素的信息，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个 <footer> 元素。假如你使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address> 标签。
<hgroup> （H5） 标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
<details> （H5） 标签规定了用户可见的或者隐藏的需求的补充细节。<details> 标签用来供用户开启关闭的交互式控件，任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的，除非设置了 open 属性。该标签与 <summary> 标签配合使用可以为 details 定义标题，标题是可见的，用户点击标题时，会显示出 details。属性 open 用于规定 details 是否可见。
<summary> （H5） 标签为 <details> 元素定义一个可见的标题，当用户点击标题时会显示出详细信息。注意：<summary> 元素应该是 <details> 元素的第一个子元素。
<dialog> （H5） 标签定义一个对话框、确认框或窗口。open 属性规定 dialog 元素是有效的，用户可以与它进行交互。
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分，该元素没有特定的含义，他是可用于组合其他 HTML 元素的容器，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。<div> 元素是块级元素，所以浏览器会默认在他前后添加一个换行符，如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性，常被用来布局网页。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法，该元素的作用就是用于显示表格化的数据。
<span> 标签用于对文档中的行内元素进行组合，该标签没有固定的格式表现，也没有特定的含义，当对它应用样式时，它才会产生视觉上的变化，如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61695.shtml
