Talk-about-HTML5
此文是往期初次文章,因为之前微信itclan公众号被封,所以重复发下,内容很粗糙,高手可直接忽略....
前言
一直以来，都曾有想写文章的想法，可是一直就是懒啊，只要一提起笔来就不知道从何说起，加上文笔又捉急，都没能落实下来，如今顿悟，希望用文字记录生活的点滴，随着自己的笔“迹”“川”住时间的流逝，自省自知,让自己成长起来....这是第一次写文章，写得不好，水平资质有限，文有不恰之处，还请读者多给些意见，菜鸟在这感激不尽~~~
正文从这里开始~
如今，不论你走到哪里，当你的同学或者朋友同事，问你在干嘛时，总有人回答如是说，我是搞HTML5的，恩，不错，听起来很牛逼哄哄的样子，不妨你说，起初我也是这样，总有把它当作神一样的，高高在上，触之不可及的痛啊，那么今天我就带大家来初识的聊一聊，关于HTML5的那点事儿
HTML5不仅仅就是HTML
在早期的html世界里,说白了html就是一种开发网页的技术，平时打开电脑上淘宝剁手党，左手一边喊着发誓在买就剁手，右手一边在浏览着却在看假肢,手机打开浏览器看新闻，刷视频，聊段子，基于浏览器客户端，绚丽耀眼的效果等能够呈现在我们面前的都应用了htm技术,当然随着各个浏览器chrome,IE Opera和safari等迅速的发展，使HTML5成为了跨平台和跨设备应用的首选客户端技术，它增强了HTML的功能，新增了很多API，使标签更加的语义化，简单的来说，HTML5就是一系列技术标准的集合，规范了开发者的使用，统一了标准，为日益丰富的信息提供更简单更直观更强大的描述能力，并且不断向前发展的技术.
HTML是什么
作为菜码，无码不欢，直接上代码
这是一段简单的html代码，整个文档由声明文档头<!doctype html> html>head>meta>title >body h2 div span a等一些标签构成，有div(容器) 和span(文字标签)这样的无语义标签，也有a链接和i斜体，b加粗，p段落等一些标签，这个代码完成了一件事，就是简要的介绍结构化文本，基本上，HTML能做的就是只有一件事，承载（结构化）的信息，也就是面试中及很多书中所说的，三个层次之一的结构内容html，层叠为样式css(表现层),和行为动作（javascript），HTML并不是一门编程语言，因此它不适合来表达逻辑，但是却是十分适合作为结构化信息的载体，简单点就是用来装内容的，承载了信息资源的载体，例如：京东商城页承载了商品的价格信息，图片文字描述等，百度搜索结果页面承载了和搜索关键词的相关信息
一点点误区
HTML是用浏览器来显示的文件，对于HTML而言，其实没有任何可以显示的东西，它只是承载了一些抽象意义的东西，这些信息如何显示，由谁来显示对HTML本身说不重要，它也不关心，而解读HTML的具体东东就是被称为用户代理，就是人们所说的网页浏览器，chrome,firefox等，这些浏览器决定了HTML该怎么显示，而每个浏览器的所定制的标准又不同，早期的浏览器标准各不尽相同，总之不是我干死你，就是你干死我的，结果就导致了有了同一段代码在不同的浏览器之间显示的效果不同，不同的浏览器对代码的解析不同，这就是所谓浏览器的兼容性问题(css hack)，em标签的文字被显示为斜体，strong标签被显示为黑体等，甚至用户代理并不一样要显示html，对于抽象的信息，用眼睛看只是接受信息的一种方式，对于盲人而言，用耳朵听也是一种方式，浏览器里播放的视频，虽然看不见，但能听得见，HTML本省不具备任何信息，只是一个抽象的信息
div+css就是web标准
web标准精髓：不仅仅在于页面内容结构(html)，表现(css)和行为(javascript)分离，更在于提供接整个互联网信息工具
什么是web标准
写一个事件的点击监听，需要写这么一长串代码，用if语句多个判断来进行浏览器的检测，才能使用它特带有的方法进行操作，来确定我是不是认识你，简直是受罪，和折磨。
而统一了标准之后：
这就是web标准带来的好处，降低了开发的复杂度，统一规范了语言，所以拥抱新技术吧，扔掉万恶的IE678，三个祖宗的，誓死杀死IE，用chrome和firefox吧
如何理解web语义化
HTML5相对于HTML4.0以前，新增了许多语义化的标签，如header,footer section,aside，address等，
逼格高的官方的解释是：通过给万维网上的文档(html)添加能够被计算机所理解的元数据(Meta data)，从而使整个互联网成为一个通用的信息交换媒介
简单通俗讲：我们所使用的元素标签，内容，能够被浏览器机器所理解（逼格高点就是能够利于被搜索引擎优化，抓取），识别，并高效的进行处理，同时也减少了开发成本，时间，对开发的的码农是相当用啊
爬虫程序
何为爬虫程序呢？
是一种自动访问互联网页面并收集信息以供人们检索的程序（比如：神不知鬼不觉隔壁家老宋的信息（包括，隐私，身份，女朋友，小三等_..）被他老婆在他身上安装安装了个监听器，每天自动的获取你的行为信息，然后给暴露出来了的，结果你懂的，把事闹大了，供全名议论，哈哈哈哈哈....）
爬虫算是搜索引擎的基本组成部分，它一般是以一个网页为入口，通过页面上的链接一层一层地爬取所有的子页面，最终获取页面可见的详细信息，爬去的内容，计算机是无法知道的，他只能通过人们给计算机定义好的标签，然后进行分类，以达到信息的分类，查找，进行检索，然后给显示出来，除了爬虫程序，浏览器对于程序的内容理解也是相当有用的，由于文档有了语义，那么浏览器就可以根据不同的语义标签进行选择不同的呈现，比如说：有序列表和无序列表，有序列表就更具有可读性，增加了机器的可读性
HTML5 PK Flash
- 更加开放
- 没有了你flash,我一样可以玩游戏，看岛国大片，打怪升级
- 可靠，安全，高性能，社区活跃
- 电池寿命，Flash是不行的
触摸---flash本身就是使用鼠标的桌面设计，而不是为手指的触摸屏，HTML5+javascript+CSS显然是更牛逼的炫酷的技术
为移动而生
从系统无关到设备无关，跨平台，无论你的电脑是Linux还是window,平台上都能能用chrome,firefox ,通过浏览器，可以在各个平台上运行web程序，你的HTML+css+javascript都能永远的运行
相对于传统的桌面web开发，基于HTML5可以方便的构建类似传统客户端软件的网页APP，可以访问磁盘和摄像头等敏感设备（比如流行的mui框架就是，基于HTML5技术，利用原生的js webview 能够访问硬件设备
你不知道的HTML5
- 语义网：使HTML更好的实现结构化和语义化
- 离线存储:Localhost
- 设备访问：设备感知能力增强使得web也能实现很多的应用程序的功能，在手机上更是如此，orientatin APi 可以访问重力感应，GeolocationAPI 能定位设备，音频方面甚至能访问摄像头麦客风等，而本地数据方面则可以和联系人列表以及日历功能对接，你的应用不受制于权限，而只受制于你的想想力简直太强大了的
- 通信：web socket以及server-Sent Events技术的发展值得自己去学习
- 多媒体(Multimedia):音频audo和视频video,把FLash干得趴下了，滚蛋了的
- 图形和特效（3D）:把Flash干死的有一点就是图形方面的增强，SVG，canvas 和webGL等功能的图形的渲染变得高效，对于生成图表，2D/3D游戏和页面视觉特效是不错的选择
- 性能的集成：让用户等待是很可耻的，web workder的出现使得浏览器可以多线程的处理后台任务而不阻塞用户的界面渲染，这像极了ajax的异步操作，牛逼得不行
- 呈现（css3）:激动的动画效果，写几行css代码就能达到js的效果，大大的减少了开发难度，最重要的一点是，它不会影响页面的语义的性能
以下是本篇提点概要:
- HTML5不仅仅是HTML，而是HTML4.0的升级版，但是有很大的改进，是有卵用的，增加了新的API,和标签，使其更语义化，直观描述能力增强了
- HTML是什么？超文本标记语言，没错，准确的也可以讲是信息内容的载体，三个层次：
内容结构层(html),表现层(css),行为层(javascript),写代码时，尽量的表现与结构，行为进行分离，层次分明 - div+css就是语义标准，web标准的精髓
- 什么是web标准：尊重w3c标准规范，写标准规范的代码，避免和减少兼容性代码的编写，在各个浏览器之间正常友好的显示
- 如何理解web语义化
- 爬虫程序
- HTML5为移动而生
- 你不知道的HTML5
(结)2016/9/10
更多内容尽在微信itclanCoder公众号.jpg
网友评论