什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML实例
实例解析
<!DOCTYPE html> 声明为 HTML5 文档,doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种HTML版本。
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8,否则有可能会出现中文乱码。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题,<h1>-<h6>表明标题的层级关系,最大的是<h1>
<p> 元素定义一个段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个HTML实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
关于.html文件的运行,编写好之后直接用主流浏览器打开即可,部分浏览器不支持!
HTML标签最好使用小写
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML编辑器
推荐使用Notepad++和sublime（我的博客内都有具体的安装详解）还有Linux下可以直接使用vi和vim来编辑html文件。
Notepad++：新建一个.html文件
sublime编辑器
在浏览器运行即可
HTML基础语法
HTML间的段落关系是通过<p>标签来定义的
HTML链接
href指定链接的地址,点击之后会完成跳转.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>链接实例</title>
</head>
<body>
<a href="http://www.baidu.com">百度网址</a>
</body>
</html>
HTML图像
建议新手不管你的html文件和图片的路径是否一直,还是写绝对路径.熟悉了之后可以写相对路径.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>图片实例</title>
</head>
<body>
<img src="/home/mi/Pictures/Wallpapers/bizhi.jpeg" width="300" height="200" />
</body>
</html>
HTML 中的 href 和 src 有什么区别
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
HTML属性
class:为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id:定义元素的唯一id
style:规定元素的行内样式（inline style）
title:描述了元素的额外信息 (作为工具条使用)
HTML标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的.
<h1> 定义最大的标题。 <h6> 定义最小的标题。
确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推.
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
<body>
<p>段落标签</p>
<hr />
<p>段落标签</p>
</body>
HTML注释标签
<!-- 这是一个注释 -->注释标签增加代码的可读性
br标签用于换行
HTML输出注意事项
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格.
HTML文本格式化
HTML 文本格式化标签
标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML "计算机输出" 标签
标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
实例:将上述标签进行实例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>加粗文本</b><br>
<i>斜体文本</i><br>
<code>电脑自动输出</code><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<pre>此例演示如何使用 pre 标签对空行和 空格进行控制</pre>
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
</address>
<br />
<abbr title="etcetera">etc.</abbr>
<br />
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
</body>
</html>
HTML超链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
href 属性描述了链接的目标。.
HTML 链接target属性
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.baidu.com/" target="_blank">访问百度!</a>
HTML 链接id属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
图片链接(标签的嵌套)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>链接实例</title>
</head>
<body>
<a href="http://www.baidu.com">
<img border="0" src="1.png" alt="百度" width="500" heught="200"></a>
</body>
</html>
HTML中head元素
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<head>
<base href="www.baidu.com" target="_blank">
</head>
<link> 定义了一个文档和外部资源之间的关系,通常链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
HTML样式-CSS
如何使用CSS:
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
内部引用
设定颜色和左外边距:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
实例01
背景色属性（background-color）定义一个元素的背景颜色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<h1 style="text-align:center;">居中对齐的标题</h1>
内部样式表
在head部分通过
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML图像</title>
</head>
<body>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
</html>
HTML图像-Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的
图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML图像中的map和area
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>map属性</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<!--shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）-->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
点击之后会发生跳转
