HTML5的入门教程

在学习HTML 5之前，我们首先要知道这是什么？能实现什么作用？下面我们开始了解什么是HTML 5

1. 什么是HTML 5？

HTML 5是HTML的最新版本，目标是更好地开发网络应用程序。HTML 5比HTML 4拥有更简洁的语法并且提供了更多新的特性。Html 5自推出以来，依托的强大功能特性，天生跨平台开发的优势，受到更多互联网从业者喜爱。它还有以下几点强大功能，让零基础的学员想学习;有基础的人员想继续深造，其他行业人员看好Html 5前景，想转行学习。
1.离线存储
HTML 5可以让你的WEB应用程序离线也能运行，它提供了一个称作“应用程序缓存”的离线存储功能，因此即使当用户离线,浏览器仍然能够访问到它所需的文件。这些文件可以是HM, CSS， Javascript或者其它任何网页运行所需要的文件。
2.拖拽功能
HTML 5提供了可以用来设计交互应用程序的本地拖拽功能，通过这个特性你可以拖动任何元素然后把它放到你想放到地方。
3.地理位置定位技术
HTML 5的地理位置定位API可以让你与所信任的网站分享你当前的位置信息,当然,隐私问题是这- -特性所主要考虑的，W3. org声明:浏览器在没有用户许可的情况下不允许私自向网站发送用户的地理位置信息。比如一位用户使用Firefox浏览器访问了一个实现地理位置定位技术的网页，浏览器会向用户询问是否共享他的地理位置信息，如果用户同意，Firefox 会收集附近无线接入点和访问者IP地址信息，并把这些信息发送到默认设定的Google地理位置服务，处理之后的位置信息将会发送给用户访问的这个网站。
4.音频和视频.
当前的HML缺少在页面中嵌入多媒体文件的特性，因此多媒体文件的嵌入需要使用各种的插件。比如FLASH被广泛地用来嵌入音频和视频文件。现在可以非常方便地使用HTML5提供的audio和video标签，而不用任何插件。
5.表单输入
HTML5提供了几个新的表单input 类型，像弹出日历，调色板，数字输入框等等。这些可以创建拥有更好的输入控制和验证的高效表单。

2. HTML 5的组成

HTML5(WEB前端)由HTML（结构）、CSS（样式）、JavaScript（行为）组成。
什么是结构、样式与行为
结构实现的是网页中的标题、列表、图片等标签。
样式处理的是标题文字的字体大小、颜色，图片尺寸，某个标签的背景等。
行为可以实现网页中的时间，电商网站当中的倒计时效果，在注册表单时用户名是否重复的检测，网站当中顶部图片的切换特效等等。
简单的理解结构样式和行为：将网页看做一个装修好的功能完备的房子，那么结构实现的是房间以及家具的位置布局，样式则是针对房间进行装饰，行为是为房间添加“开门”等功能。
想了解更多，可查看文章《HTML5(WEB前端)是什么？

3.HTML 5可以实现的事情

HTML 5作为新宠，在越来越多的领域得到了应用，特别是咋移动端，不管是大公司还是小公司都特别的重视。而随着HTML 5的的不断更新，相信在很多新的领域会得到推广。那下面就简单的为大家介绍一下可以运用HTML 5做的几件很棒的事情。
1.可以制作出想要的时尚表单
表单在HTML中的运用是很常见的，不管是注册表单、联系人、信息反馈等等，他不仅美观而且用户体验度很高，为大家在编程的工作中提供了很多的便利。
2. 构建实用的HTML 5框架
框架在HTML中的运用是很多的，他可以帮我们实现想要的功能，让你更加的重点。也可以让用户更直观的找到重点、发现重点。
3.开发丰富多彩的游戏
游戏其实是我们在日常生活中必不可少的休闲娱乐方式，而HTML 5页可以帮我们得到想要的游戏，这当然是专业的程序员才能完成的事情。但不管怎么说他还是让我们感受到了乐趣
4.以更直观的方式让数据可视化呈现
有的时候，你需要在网站中以更直观的可视化方式呈现大量的数据或者信息，这个时候就需要图表解决方法帮助你实现。
5.HTML 5的未来 惊艳的HTML 5示例和实验
HTML 5不仅仅是用来表示网页内容的，它的使命是将 Web 带入一个成熟的应用平台，尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。是不是感觉HTML 5很神奇呢？一种简单的标记语言就可以实现这么多的功能，那就快点动手动脑去学习吧。

4. HTML 5的开发工具

HTML 5的开发工具非常之多，就不一一列举了，举几个比较好用的软件
1.hbuilder
hbuilder是国产的一款前端开发I具而且是免费的,对于英语不好的前端工程师是一个不错的消息。hbuilder的官方大 致是这么解释为什么要开发hbuilder的: HTML 最开始实不是一-个编程语言，确实用不着什么ide。但是发展到现在，7w多个语法，js越来越庞大，真开发一个达到原生水准的App,不是用以前的文本编辑器能搞定的。
2.sublime tex
sublime text是一个轻 量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。该软件的优点的轻量级但是功能强大，缺点是对于项目的管理等不是很方便，代码提示不如hubuilder强大。
3.Dreamwave
Dreamwave是使用较为广泛的编辑如软件，这是一款很经典的前端开发工具期， 以前人们使用的是它的可视化开发工具，但是现在它只能是作为一一个代码编辑器来使用的,当然一些可视化的功能现在也是用的上,如要插入Flash视频等还是使用可视化简单一些，镜不是所有人都能纯手写哪些意义不大的代码,优点是人们熟悉稳定，支持些可视化的插入操作，缺点是代码提示不好，不能进行快速的开发只能是作为学习使用。
4.WebStorm
WebStorm支持最新的ECMAScript版本，你可以尝试新的功能，每个javascript引擎的实现增加了别人所不具备的一些不错的功能，当您使用的目前选定的javascript版本不支持，WebStorm将通知您,并建议速战速决。
5.notepad+ +
notepad+ +软件小巧高效，支持27种编程语言，通吃C,C++ Java ,C#, XML, HTML,PHP,JS等，Notepad++ 内置支持多达27种语法高亮度显示。是一款小巧而功能强大的软件。
6.editplus
editplus是一套功能非常强大的文字编辑器， 拥有无限制的Undo/Redo (撤销)、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。除了支持HTML, CSS, PHP, ASP, Perl, C/C+ +, Java, JavaScript, VBScript的代码高亮外,还内建完整的HTML和CSS指令功能。是许多前端人员比较喜欢的一款编辑软件。本篇文章将会使用editplus软件举例子，大家还需要其他开发工具简介的话，我也找到了一些，大家喜欢的话，有时间可以看一下，链接如下：https://zhinan.sogou.com/guide/detail/?id=316513287659
各软件下载链接的话，我也找了一些，需要的话点击下方链接自行选择下载，
下载链接：http://www.pc6.com/pc/html5kfgj/
后面我将使用editplus进行一些简单操作的学习。为什么下载这个？因为有些软件虽然挺实用并且功能比较多，但是需要电脑配置好的，运行起来才不卡。editplus占内存比较小而且用起来也挺方便的，推荐使用。

5.editplus的安装简单介绍

点击下载，然后在桌面上找到那个软件进行安装就好了，最后安装好了会新增四个文件，这个就是应用程序了

打开EditPlus 5点击文件直接新建.HTML后缀的文档就完成了

新建项目就已经帮我们填充好一些代码，我们只需要输入网页内容，非常人性化

6.EditPlus 5的一些简单操作

声明必须是 HTML 文档的第一行，位于 标签之前，浏览器就可以知道要处理的内容，可以注释掉或者删除也是不影响的

注释的快捷键是:ctrl+/,不运行这行代码，在按一次: ctrl+/ 的话又会返回原来的样子或者
<!-- 注释内容-->也是可以的

文件中html部分的开始，成对出现，lang是language的简称，会自动翻译这个语言，en是English的简称，自动翻译成英语。zh表示简体中文

提供有关文档内容和标注信息的，也是成对出现的

UTF-8是编码方式，记住就好

这个是网页的标题，直接在中间填充内容就可以完成网页标题的填写


body里面所填写的内容都可以在网页输出，里面可以嵌入各种类型的内容

HTML 5的基本元素

超链接的实现，下面分别进行三个效果演示和作用(a表示定义超链接)

<a href="HTML5测试.html" target="blank">入口1</a>
  <a href="HTML5测试.html" >入口2</a>
  <a href="HTML5测试.html" target="_self">入口3</a>

点击浏览器阅览，有三个超链接入口，分别对应上面三个代码段程序

点击入口1，会在一个新的窗口重新打开超链接

点击入口2和入口3效果都是一样的，在原来的上面网页上面打开超链接，所以

  <a href="HTML5测试.html" >入口2</a>

默认效果和

  <a href="HTML5测试.html" target="_self">入口3</a>

是一样的

下面介绍换行的实现，就上面那个例子做对比，在程序前面加上换行符就可以换行了

<ol>换行符</ol>

本来没加换行符之前都是在一行的，加了换行符之后就实现换行功能，效果如下

b表示加粗效果，为了和原来进行对比，我们用a进行对比（这个和wps里b的作用效果是一样的，都是用来加粗）

比原来的加粗了

制作表格，代码如下

<table borden="1px" align="center">
	<tr>
	<td>feng</td>
	<td>男</td>
	<td>20</td>
	</tr>
   </table>

完成第一行单元格的创建

再增加几行可以直接在下面重复以上内容，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>标题</title>
</head>
<body>
<table borden="1px" align="center">
<tr>
	<td>feng</td>
	<td>男</td>
	<td>20</td>
</tr>
<tr>
	<td>luo</td>
	<td>男</td>
	<td>21</td>
</tr>
<tr>
	<td>huang</td>
	<td>男</td>
	<td>24</td>
</tr>
</table>
</body>
</html>

结果如图所示。补充一点，每一个单元格会保证容纳最宽的内容，通俗来说就是单元格长度就是最长字符的长度，也是HTML 5的优点

如何增加标题栏？代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>标题</title>注释：网页标题
</head>
<body>
<table borden="1px" align="center">
<tr>
	<th>姓名</th>注释：表的标题栏
	<th>性别</th>
	<th>年龄</th>
</tr>
<tr>
	<td>feng</td>注释：表的内容
	<td>男</td>
	<td>20</td>
</tr>
<tr>
	<td>luo</td>
	<td>男</td>
	<td>21</td>
</tr>
<tr>
	<td>huang</td>
	<td>男</td>
	<td>24</td>
</tr>
</table>
</body>
</html>

标题栏自动黑体加粗居中

有序列标签代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>标题</title>
 </head>
 <body>
	<ol>
	<li>a</li>
	<li>a</li>
	<li>a</li>
	<ol>
 </body>
</html>

效果如下，结果是升序

用a,b,c,d进行排序
代码如下

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>标题</title>
 </head>
 <body>
<ol>
	<li>a</li>
	<li>a</li>
	<li>a</li>
<ol>
	<ol type="a">注释：排序类型
	<li>a</li>
	<li>a</li>
	<li>a</li>
</ol>
 </body>
</html>

type的类型可以修改，包括

<ol type="1">注释：这个是默认的，其他需要自己设置
<ol type="a">
<ol type="A">
<ol type="I">
<ol type="i">

效果如下，需要的小伙伴可以试着改变去尝试其他排序方法

整理的一些快捷方式，因为HTML 5的快捷功能比较多，就不一一列举了

1.<em>斜体</em>
2.<u>下划线</u>
3.<s>中间删除线</s>
4.Html中标题的大小 
<h1>最大字体             <h6>最小字体
5.<p>这是段落（paragraph）标签页面的一个段落，自动换行</p>
6.<a>标签的作用是跳转包括页见跳转
7. href属性指定链接的目标
8.target属性指定打开目标页面的方式，其取值包括
9._self:在当前页面中打开，默认；
10_blank:在新的页面中打开；
11._parent:父子关系，嵌套关系；
12.页内跳转在目标标签处指定id="……"，在链接处指定href="#……"
id属性是页面元素的唯一标识， “锚点”：anchor
 13.图片标签<img>
 14.src属性：source，图片资源的URL地址，可以是本地的，也可以是远程的

HTML 5入门就介绍到这里了。