Beginning HTML5 and CSS3 读后感1
博客专区 > zmhot88 的博客 > 博客详情
Beginning HTML5 and CSS3 读后感1
zmhot88 发表于3年前
Beginning HTML5 and CSS3 读后感1
  • 发表于 3年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购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/


标签: HTML5
共有 人打赏支持
粉丝 0
博文 8
码字总数 5519
×
zmhot88
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: