Beginning HTML5 and CSS3 读后感1
Beginning HTML5 and CSS3
正儿八经想做点网站，哪怕是不成体系的，至少在做iOS /Android做两个后台返回测试得能做吧，部署明后年的跳槽计划，得一步步来，急不得。
我一项认为，iOS／Android都属于前台的范畴，和网页前台没多少差异，只是基于平台，要比兼容各种浏览器的版本简单些而已，额外扩展一些平台关联性。现在跨平台开发也渐渐兴盛，主要是现在HTML5/css/javascript能让显示效果各种酷炫。加之iOS7的JavaScriptCore.framework，Android的V8/JavaScriptCore, 对JavaScript的支持都是各种好，所以我认为，跨平台方案在之后的简单商业应用中可行性倒是有的，据说，我们公司在今年会部署两个跨平台项目。所以html5这一套东西，现在得开始好好学习练习。
写到这里，我想到了cocos2dx－javascript,这个应该是引擎绑定的，具体的引擎就需要去参考源码了。
废话不多说，还是来看看这两天HTML5看了些什么玩意。
HTML5核心就是增加了语义，semantic这个词经常出现，有个例子我记忆深刻，<small>表达的意思，是it’s a small print. 不是display in a small size.这就是语义和描述的区别，我认为也是HTML5 和 css的区别。
基于语义，我们也就知道为什么HTML5为什么会定义<section>,<nav>,<article>等等，其实这些用<div>就可以全部搞定。就好像我大学时候那时候用table,<frame>来划分空间弱爆了，好了，现在HTML5用单词来表示大概的语义，具体的布局就放给了css，好吧，我影响那时候都没听过css/javascript,那时候ajax还是很高级的，看了本书，感觉云里雾里的。
简单的描述一些书中涉及到的tag:
Structural building blocks:<div>,<section>, and <article>
<div>: It’s a flow content with no additional semantic meaning.
<section>: a generic document or application section. it’s a chunk of related contents.
<article>: An independent section of a document or site.
how to decide which to use:
1. Would the enclosed content make sense on its own in a feed reader? If so, use <article>.
2. Is the enclosed content related? If so, use <section>.
3. If there’s no semantic relationship, use <div>.
Headings: <header>, <hgroup>, and <h1>-<h6>, plus <footer>
<header>: used for introductory and navigational content of a sectioning element.
<footer>: used for additional information about the content.
<hgroup>: A specialized form of <header> the can contain only <h1>-<h6> elements.
<h1>-<h6>:
<nav>: A section of navigational links,either to other pages (generally site navigation) or sections on the same page (such as a table of contents for long article).
<aside>: A section of a page that consists of content that is tangentially related to —but separate from — the surrounding content.
<figure>: For content that is essential to understanding but can be removed from the document’s flow (moved to a different place) without affecting the document’s meaning.
Choose between <aside> or <figure> by asking yourself if the content is essential to the section’s understanding. If the content is just related and not essential, use <aside>. If the content is essential but its position in the flow of content isn’t important (could it be moved to an appendix?), use <figure>.
一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article (HTML5)</title>
</head>
<body>
<header id="branding"><!-- page header (not in section etc) -->
<h1>Site name</h1>
<!-- other page heading content -->
</header>
<nav>
<ul><li>Main navigation</li></ul>
</nav>
<div id="content"> <!-- wrapper for CSS styling and no title so not section -->
<article> <!-- main content (the article) -->
<header>
<h1>Article title</h1>
<p>Article metadata</p>
</header>
<p>Article content...</p>
<footer>Article footer</footer>
</article>
<aside id="sidebar"> <!-- secondary content for page (not related to article) -->
<h3>Sidebar title</h3> <!-- ref: HTML5-style heading element levels -->
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer> <!-- page footer -->
</body>
</html>
主体内容基本如是，其他必须提到的一些内容如下：
HTML5 validator: https://validator.whatwg.org/
HTML5 Lint:网页打不开，还是重新搜一个吧。
这两个都可以让你的HTML5 网页更符合规范，借助工具，提高规范性。
3. HTML5 polyfills:
类似如下的语法：
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
你可以在博客在线中看到类似的语法，用于兼容IE老版本，我突然想起Bsie这个库，^_^.
4. outlining algorithm：https://gsnedders.html5.org/outliner/
这个比较高大上了，可以看到你整个文档的结构，当然得是设计好的，随意输入一个URL，你可以看到有的页面设计的并不是那么好。虽然看起来不错。
至于兼容性的写法，我个人就不是很关注了，我相信，IE6这种玩意是应该被摒弃的，我们也应该全面进入HTML5时代，老的就不管了。
这个基本是前三章的内容了，我也就记得这么多了，读读英文书，总感觉焕然一心，难道是心理作用。
最后还得推荐一个网址：https://html.spec.whatwg.org/