文档章节

Beginning HTML5 and CSS3 读后感1

zmhot88
 zmhot88
发布于 2015/03/30 23:08
字数 1198
阅读 13
收藏 0

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/


© 著作权归作者所有

共有 人打赏支持
上一篇: git 从无到有
下一篇: Android 依赖注入
zmhot88
粉丝 0
博文 8
码字总数 5519
作品 0
南京
程序员
私信 提问
html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对。。。想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效...

phala
2015/08/06
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
再来 35 个响应式 HTML5 和 CSS3 模版

免费响应式模版 FlexApp Demo || Download zGallering – Free Responsive Html5 Theme Demo || Download Responsive HTML5/CSS3 template Demo || Download VividPhoto HTML5 and CSS3 Tem......

oschina
2013/07/09
5.9K
7
30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河
2011/07/29
15.9K
7
精挑细选 8款HTML5/jQuery应用助网站走向高上大

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少...

yykj
2014/04/03
954
1

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
10
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
16
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
15
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部