文档章节

Beginning HTML5 and CSS3 读后感1

zmhot88
 zmhot88
发布于 2015/03/30 23:08
字数 1198
阅读 13
收藏 0
点赞 0
评论 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
南京
程序员
超级绚丽,20款前端动画特效,轰炸你的眼睛

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

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/23 ⋅ 0

2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

HTML5 进阶系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。localStorag...

林鑫 ⋅ 2017/04/26 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

localStorage使用总结

一、什么是localStorage、sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空...

ywppengpeng ⋅ 2016/11/21 ⋅ 0

WEB前端学习面试常见问题系列:H5有哪些新标签?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/13 ⋅ 0

WEB前端学习常见面试题:浏览器本地存储和服务端存储的区别是什么?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 57分钟前 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部