前言：
首先为什么学习HTML，因为我最终的目的是学习并熟练掌握Bootstrap前端技术，而在大学的四年中接触了HTML、CSS、JavaScript和JQuery前端编程技术，但是都不是很熟练。在偶然的一次浏览别人博客的过程中，看见了对我来说比较新颖的Bootstrap前端技术，然后自己也花了一点时间去学习先关的控件和属性，但是最后感觉不太理想。这种效果就像是坐进观天，总是融入不了Bootstrap这个大世界。心里总觉得需要了解它底层封装的CSS和相关的HTML以及JS，然后又想到自己的前端编程技术确实不扎实。所以这次系统的学习下前端的东西。
正文：
HTML（HyperText Markup Language）有很多的版本，学习技术肯定是学习比较新的而且比较稳定的编程技术【不是一种编程语言，而是一种标记语言】。所以这里我们重点学习HTML5。HTML5是由万维网联盟（W3C）于2014年10月完成的HTML最新的标准化，设计的目的是为了在移动设备上支持多媒体。但是由于HTML中很多属性是向后兼容的，所以我们先学习HTML。
1. 文档类型申明
<!DOCTYPE html> //doctype 声明是不区分大小写的
2. 文档编码申明
<meta charset="utf-8"> //需要申明，避免乱码出现
3. 简单的HTML5文档
<!DOCTYPE html> //声明为 HTML5 文档
<html>
<head>
<meta charset="utf-8"> //文档编码
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML 元素：
0. <head>标签中的元素标签
有 <title>, <style>, <meta>, <link>, <script>, <noscript>, 和<base>.
> base 标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> <base href="http://www.weizuled.com/images/" target="_blank"> </head> <body> <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.weizuled.com/images/logo.png" <br><br> <a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。 </body> </html>
理解下并记住用法：
<base href="http://www.weizuled.com/images/" target="_blank">
> <meta> 标签
用来描述HTML文档的描述，关键词，作者，字符集等。
<meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
> <link> 标签通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
> 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
1. 标题标签
<h1>……<h6>来定义
2. 超链接标签
<a href="#" target="_blank">这是一个链接</a> //含有属性target，可以定义被链接的文档在何处显示
> id属性实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="#tips">点击这里跳转</a> <br> //这里省略了一些内容 <br> <p id="tips">ajflajfla</p> <br> </body> </html>
运行结果为书签效果，在点击了超链接后，该网页文件会滚动到指定的id="tips"的位置。常常用作左边导航的设置。
> 跳出框架:
在页面中，我们可能会用到框架页，在通常情况下在框架页中的链接，点击后的效果还是在框架页中显示，但是有时候，我们需要刷新整个浏览器窗口页面，也就是需要跳出框架，代码如下：
<p>跳出框架</p> <a href="www.baidu.com" target="_top">点击这里</a>
> 电子邮件链接：
<p> 这是一个电子邮件链接： <a href="mailto:[email protected]?Subject=Hello%20again" target="_top"> 发送邮件</a> <a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a> </p> <p> <b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。 </p>
3. 图像标签
<img src="/images/logo.png" width="258" height="39" alt="好看的图片" />
src 指 "source"。源属性的值是图像的 URL 地址
alt 是图片加载失败时候显示的图片说明文字
> 创建图片链接:
<p>图片链接: <a href="http://www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p>
> 创建图像映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <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>
shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
4. 水平线
<hr/>来定义 //可以写作<hr>，但是<hr/>有更好的考虑（所有标签均闭合）
5. 注释
<!-- 这是一个注释 -->
6. 段落标签
<p>这是一个段落 </p> //p标签是块级元素，独占内容行（效果和div类似）7. 换行
<br> //同样的，建议采用<br/>
8. 文本格式化相关标签
> 加粗字体
<b>这个文本是加粗的</b> //定义粗体文本 <strong>这个文本是加粗的</strong> //定义着重文字
> 斜体字体
<em>这个文本是斜体的</em> <i>这个文本是斜体的</i>
> 字体的放大与缩小
<big>这个文本字体放大</big> <small>这个文本是缩小的</small>
> 上标与下标
这个文本包含<sub>下标</sub> 这个文本包含<sup>上标</sup>
> 文本排版样式原样输出（预格式文本）
<pre> 此例演示如何使用 pre 标签 对空行和 空 格 进行控制 </pre>
> 地址信息
<address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
> 缩写（鼠标hover时，显示全部文本内容）
<abbr title="etcetera">etc.</abbr><br /> <acronym title="World Wide Web">WWW</acronym> <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p> <p>仅对于 IE 5 中的 acronym 元素有效。</p> <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
> 文本显示的方向
<p>该段落文字从左到右显示。</p> <p><bdo dir="ltr">该段落文字从左到右显示。</bdo></p> <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
> 删除字和添加字
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
-----------------------------------------------------------------------------------------------------------------
免责申明：以上内容来自互联网。
-----2018年6月12日