HTML简介
HTML是超文本标记语言，是一套标记标签，用来描述网页。
HTML标签是由尖括号包围的关键词，如：<html>。通常成对存在，分别叫做开始标签（start tag）和结束标签（end tag），也叫做开放标签（opening tag）和闭合标签（closing tag），如：<body>和</body>。也有单独存在的标签，如：折行标签<br/>/。
HTML文档是对网页内容的描述。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落
HTML编译器
可以使用专业的 HTML 编辑器来编辑 HTML：
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不过，也可使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。
使用文本编辑器编写HTML文本后另存为.htm或.html扩展名的文件，在浏览器中打开文件即可。
基本的HTML标签
1.HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading.</h1>
<h2>This is a heading.</h2>
<h3>This is a heading.</h3>
2.HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
3.HTML 链接是通过 <a> 标签进行定义的。
<a href="https://i.cnblogs.com">This is a link.</a>
4.HTML 图像是通过 <img> 标签进行定义的。
<img src="cnblog.jpg" width="104" heigh="104" />
HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML元素可嵌套，HTML文档由嵌套的HTML元素组成，如下：
<html> <body> <p>This is my first program.</p> </body> </html>
以上内容包含三个HTML元素。
HTML元素实例：
<p>元素：
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
<body>元素：
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
<html>元素：
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
空的HTML元素：
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。HTML中最好使用小写标签。
HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
例1：链接的地址在href属性中指定。
<a href="https://i.cnblogs.com">This is a link.</a>
例2：align属性中制定标题的对齐方式
<h1 align="center">This is a heading.</h1>
例3：bgcolor属性中指定背景颜色
<body bgcolor="yellow">This is a HTML body.</body>
例4：table标签中的border附带表格边框的附加条件
<table border="1">
和标签相同，虽然属性值对大小写并不敏感，但属性最好也使用小写。
属性应始终被包含在引号内，一般为双引号，使用单引号也无妨，比如当属性值中已经包含双引号时则要使用单引号：
name='Bill "HelloWorld" Gates'
HTML标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题标签只能用来编写标题，切勿为加大加粗字体而滥用标题标签。因为搜索引擎使用标题为您的网页的结构和内容编制索引。而用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML水平线
hr元素可用来分割内容，使用<hr/>标签在HTML页面中创建水平线。可用<hr/>创建水平线来分隔文章中的小节。
HTML注释
标注注释的方法：
<!--This is a comment.-->
开始括号后边要紧跟一个感叹号。
HTML段落
使用<p>标签定义段落。浏览器会在段落前后自动添加空行，<p>是块级元素。
最好不要用<p></p> 的方法添加空行，可以用<br/>。
不要省略结束标签，即使不会出错。省略结束标签可能会产生意想不到的错误和后果。
HTML折行
使用<br/>产生单个折行（换行）：
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML输出
我们不能通过在HTML中添加空格和空行来改变页面布局。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
HTML样式
style 属性用于改变 HTML 元素的样式。
一些标签和属性将会在未来版本中被遗弃，因此最好使用样式标签来代替。
应该避免使用下面这些标签和属性：
| 标签 | 描述 |
|---|---|
| <center> | 定义居中的内容。 |
| <font> 和 <basefont> | 定义 HTML 字体。 |
| <s> 和 <strike> | 定义删除线文本 |
| <u> | 定义下划线文本 |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
对于以上这些标签和属性：请使用样式代替！
HTML样式实例-背景颜色
background-color属性为元素定义了背景颜色
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading.</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML样式实例-字体、颜色和尺寸
font-family、color和font-size分别指定元素中文本的字体、颜色和字体大小。
<html> <body> <h1 style="font-family:verdana">A heading.</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
HTML 样式实例 - 文本对齐
text-align属性规定了文本的对齐方式。
<html> <body> <h1 style="text-align:center">This is a heading.</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
HTML文本格式化
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
| <s> | 不赞成使用。使用 <del> 代替。 |
| <strike> | 不赞成使用。使用 <del> 代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
预格式文本
pre标签可显示空格和回车的作用。
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码。 |
| <kbd> | 定义键盘码。 |
| <samp> | 定义计算机代码样本。 |
| <tt> | 定义打字机代码。 |
| <var> | 定义变量。 |
| <pre> | 定义预格式文本。 |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
<bdo dir="rtl">Hello!</bdo>
Hello!将从右向左输出。
- 使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现：
这是长的引用：
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是短的引用： 这是短的引用。
- 删除文本和下划线文本：
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
一打有 二十 十二 件。
大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。
HTML引用
<q>用于短的引用，浏览器通常会为<q>元素包围引号：
<p>wwp的目标是：<q>构建人与自然和谐共处的世界。</q></p>
blockquote定义被引用的节：
<p>以下内容引用自网站</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 五十年来，WWF 一直致力于保护自然界的未来。 世界领先的环保组织，WWF 工作于 100 个国家， 并得到美国一百二十万会员及全球近五百万会员的支持。 </blockquote>
HTML缩写或首字母缩略词
<abbr>元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
<p><abbr title="World Health Organization">WTO</abbr>成立于 1948 年。</p>
用于定义的 HTML <dfn>
HTML <dfn> 元素定义项目或缩写的定义。
<p><dfn title="World Health Organization">WTO</dfn>成立于 1948 年。</p>
<p><dfn><abbr title="World Health Organization">WTO</abbr></dfn>成立于1948年。</p>
<p><dfn>WTO</dfn> World Health Organization 成立于 1948 年。</p>
前两种方法显示为：The WHO was founded in 1948.
第三种方法显示为：The WHO World Health Organization was founded in 1948.<dfn> 文本内容即是项目，并且父元素包含定义。
用于联系信息的 HTML <address>
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
<address> Written by Jon Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
用于著作标题的 HTML <cite>
HTML <cite> 元素定义著作的标题。
浏览器通常会以斜体显示 <cite> 元素。
<p><cite>The Scream</cite></p>
用于双向重写的 HTML <bdo>
<bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo dir="rtl">This text will be written from right to left</bdo>
句子将从右到左进行书写，输出为：tfel ot thgir morf nettirw eb lliw txet sihT
HTML 引文、引用和定义元素
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <cite> | 定义著作的标题。 |