转载： HTML 简介
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="/images/logo.png" width="258" height="39" />
<h1>标题1</h1>
<p>这是一个段落。</p>
<h1>标题1</h1>
<p>这是一个段落。</p>
<h2>标题1</h2>
<p>这是一个段落。</p>
<a href = "http://www.runob.com">runoob</a>
</body>
</html>
- 标题（Heading）是通过
<h1> - <h6>标签来定义的 - 段落是通过标签
<p>来定义的 - 链接是通过标签 来定义的.
- 图像是通过标签
来定义的
<img scr = " *.png" width = " *" height = " *" />
元素
- <起始标签（+属性）>+元素内容+</ 闭合标签>
<p>****</p><a href = "default.htm">***</a><br>换行
属性
- 元素可以设置属性
- 属性一般属于开始标签
e.g.
<a href = "http://www.runoob.com">这是一个链接</a>
- 要求：使用小写和""双引号，不过单引号也可以。
- HTML属性列表
HTML 标签参考手册 - 主要属性：
class: 为html元素定义一个或多个类名名（classname）
id：定义元素的唯一ID
style：规定元素的行内样式
title：描述了元素的额外信息
标题（heading）
<h1>-<h6>- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
水平线
<hr>
注释
<! -- 这是一个注释 -->
如何查看源代码
- 单机网页右键
- 查看源文件（IE）或者查看页面源代码（firefox）
段落
<p>这是一个段落</p>
换行
<p>这个<br>段落<br>演示了分行的效果</p>
输出-使用提醒
- 多余的空格和空行，都会被显示为一个空格
<DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>runoob.com</title>
<head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
文本格式化
- 加粗
<b></b> - 斜体
<i></i> - 下标*(subscript)
<sub></sub> - 上标( superscript)
<sup></sup> - 缩小
<small></ small> - 插入字
<ins></ ins> - 删除字
<del></ del>
- 电脑自动输出
<code></code>
引用，引文及标签定义 - 短引用
<q></q> - 长引用
<blockquote></ blockquote> - 定义项目
<dfn></dfn> - 定义缩写
<abbr></ abbr>
<p>The <abbr title = "World Health Organization">WHO </abbr> was found in 1948.</p>
- 定义地址
<address></ address>
链接
- HTML 使用
<a>设置超文本链接 - 链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。 - 点击链接时，链接显示为红色并带有下划线。
- 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
<a href = "url">链接文本</ a>- “链接文本” 不必一定是文本。还可以是图片或其他 HTML 元素。
- 使用 target 属性，你可以定义被链接的文档在何处显示:
<a href = "https://blog.csdn.net/baby_superman" target = "_blank">链接名称</ a>
- id属性
- id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
<!--在HTML文档中插入ID:-->
<a id="tips">有用的提示部分</a>
<!--在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：-->
<a href="#tips">访问有用的提示部分</a>
<!--或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：-->
<a href="https://blog.csdn.net/baby_superman#tips">
<!--访问有用的提示部分</a>-->