文档章节

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/


© 著作权归作者所有

共有 人打赏支持
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
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java Lock接口分析之ReentantReadWriteLock

ReentantReadWriteLock读写锁,在读线程多余写线程的并发环境中能体现出优异的性能,相比于synchronized与ReentrantLock这种独占式锁的模型,ReentantReadWriteLock采用独占式写锁与共享式读...

我爱春天的毛毛雨
32分钟前
1
0
EFK (Fluentd ElasticSearch Kibana) 采集nginx日志

本文描述如何通过FEK组合集中化nginx的访问日志。本人更喜欢按顺序来命名,所以使用FEK而不是EFK. 首先在nginx服务器上执行以下操作. 安装ruby http://blog.csdn.net/chenhaifeng2016/artic...

xiaomin0322
33分钟前
1
0
一键下载:将知乎专栏导出成电子书

老是有同学问,学了 Python 基础后不知道可以做点什么来提高。今天就再用个小例子,给大家讲讲,通过 Python 和爬虫,可以完成怎样的小工具。 在知乎上,你一定关注了一些不错的专栏(比如 ...

crossin
42分钟前
2
0
synchronized 之 对象锁 和 类锁

一、synchronized(object) 如果object没有被加锁,则获取object的锁;如果object已经被加锁则等待object的锁被释放。 二、需要加锁的情景 多线程共享同一资源会引起线程安全的情况下,才需要...

MyOldTime
44分钟前
7
0
tomcat 单机/多机 部署多应用

一.单机部署多应用: 1.在 linux 下解压安装两个 tomcat:tomcat1, tomcat2; 2.修改 /etc/profile, 增加 tomcat 环境变量: path 中加上 重新加载配置文件 source /etc/profile 3.修改 tomc...

imbiao
55分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部