Beginning HTML5 and CSS3 读后感1

时间 2019-12-06

标签 beginning html5 html css3 css 读后感栏目 HTML5 繁體版

原文原文链接

Beginning HTML5 and CSS3javascript

正儿八经想作点网站，哪怕是不成体系的，至少在作iOS /Android作两个后台返回测试得能作吧，部署明后年的跳槽计划，得一步步来，急不得。css

我一项认为，iOS／Android都属于前台的范畴，和网页前台没多少差别，只是基于平台，要比兼容各类浏览器的版本简单些而已，额外扩展一些平台关联性。如今跨平台开发也渐渐兴盛，主要是如今HTML5/css/javascript能让显示效果各类酷炫。加之iOS7的JavaScriptCore.framework，Android的V8/JavaScriptCore, 对JavaScript的支持都是各类好，因此我认为，跨平台方案在以后的简单商业应用中可行性却是有的，听说，咱们公司在今年会部署两个跨平台项目。因此html5这一套东西，如今得开始好好学习练习。html

写到这里，我想到了cocos2dx－javascript,这个应该是引擎绑定的，具体的引擎就须要去参考源码了。html5

废话很少说，仍是来看看这两天HTML5看了些什么玩意。java

HTML5核心就是增长了语义，semantic这个词常常出现，有个例子我记忆深入，<small>表达的意思，是it’s a small print. 不是display in a small size.这就是语义和描述的区别，我认为也是HTML5 和 css的区别。ajax

基于语义，咱们也就知道为何HTML5为何会定义<section>,<nav>,<article>等等，其实这些用<div>就能够所有搞定。就好像我大学时候那时候用table,<frame>来划分空间弱爆了，好了，如今HTML5用单词来表示大概的语义，具体的布局就放给了css，好吧，我影响那时候都没听过css/javascript,那时候ajax仍是很高级的，看了本书，感受云里雾里的。浏览器

简单的描述一些书中涉及到的tag:app

Structural building blocks:<div>,<section>, and <article>ide

<div>: It’s a flow content with no additional semantic meaning.svn

<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">
<h1>Site name</h1>

</header>
<nav>
<ul><li>Main navigation</li></ul>
</nav>
<div id="content"> 
<article> 
<header>
<h1>Article title</h1>
<p>Article metadata</p>
</header>
<p>Article content...</p>
<footer>Article footer</footer>
</article>
<aside id="sidebar"> 
<h3>Sidebar title</h3> 
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer> 
</body>
</html>

主体内容基本如是，其余必须提到的一些内容以下：

HTML5 validator: https://validator.whatwg.org/

HTML5 Lint:网页打不开，仍是从新搜一个吧。

这两个均可以让你的HTML5 网页更符合规范，借助工具，提升规范性。

3. HTML5 polyfills:

相似以下的语法：

<!--[if lt IE 9]>

<![endif]-->

你能够在博客在线中看到相似的语法，用于兼容IE老版本，我忽然想起Bsie这个库，^_^.

4. outlining algorithm：https://gsnedders.html5.org/outliner/

这个比较高大上了，能够看到你整个文档的结构，固然得是设计好的，随意输入一个URL，你能够看到有的页面设计的并非那么好。虽然看起来不错。

至于兼容性的写法，我我的就不是很关注了，我相信，IE6这种玩意是应该被摒弃的，咱们也应该全面进入HTML5时代，老的就无论了。

这个基本是前三章的内容了，我也就记得这么多了，读读英文书，总感受焕然一心，难道是心理做用。

最后还得推荐一个网址：https://html.spec.whatwg.org/