Joomla控，Drupal粉 - 开源建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

应用程序安全砖家表示，HTML5给开发人员带来了新的安全挑战。

苹果公司与Adobe公司之间的口水战带来对HTML5命运的诸多猜测，尽管HTML5的实现还有很长的路要走，但可以肯定的一点是，运用 HTML5的开发人员将需要为应用程序安全开发生命周期部署新的安全功能以应对HTML5带来的安全挑战。

那么HTML5将会对我们需要覆盖的攻击面带来怎样的影响？本文将探讨关于HTML5几个重要安全问题。

本站原创编译，转载请给面子，尊重劳动果实，欢迎交流指正。

几乎做了有始无终的表率，想起了小盆友们熟悉的白头翁的故事；其实白头翁也够冤枉的；凭什么整天拿一堆无辜的小动物说事呢我就不明白了。正事是3月开始弄的小连载“CSS3实战学习-创建漂亮的表单”在做了基础样式和阴影之后就再没碰过了；今天争取结束掉吧，只剩下背景渐变的实现这么一部分了。

首先我们回顾一下当时的目标范例，简洁雅致的小表单一个。

另外也可以先围观下mozilla.org的这篇css gradients in Firefox 3.6，从单向渐变到形变彩虹渐变...看看CSS3为我们带来了多少好东东=)

前面一篇CSS3实战学习中，我们了解了这次的目标及表单代码；今天继续，来看下表单元素基本的样式设置以及CSS3阴影样式方面的应用。

基础样式设置包括表单元素的呈现、文字样式等方面，比较常规；代码见全文。做好这一步其实已经是个中规中距的常规表单的模样了；沿袭了近年来的风格习俗；样式截图见全文。

基础样式搞定，接下来进入正题，我们将使用以小撮CSS3来实现目标范例中的阴影样式部分。用来设置阴影的代码通常是这样的形式：

还上瘾了；继续coder人格的业务知识学习与交流。之前集中做过的两个小连载分别是HTML5+CSS3实战和他们说这叫“面向对象CSS”；今天开始的小系列主要集中看下CSS3在表单方面的应用，其实作者重点是要演示一下阴影和背景渐变的使用。

究竟搞什么飞机呢，我们首先来看下目标范例；朦朦胧胧的蛮好看哦，不过我个人觉得用表单元素演示CSS3外部阴影的效果不是很合适，感觉输入框都凸出来了，好像摆着几块瓷砖一样。

其实是another HTML5+CSS3实战教程。之前的一篇中，我们学习了页面侧边栏的样式定义，整个目标范例的首页基本搞定；今天来看看内页方面的东东。

复制之前的首页文件，并重命名为“post.htm”。内页的整体结构与首页基本相同，头部与侧边栏保持不变，主要内容部分由文章列表变成单篇文章，并且增加了评论列表及评论表单等元素。

复制以下代码，将当前post.htm中的<header>及主要内容部分的<section>容器整体替换掉：

其实是another HTML5+CSS3实战教程。昨天开始了样式方面的话题，围观了主要内容部分的样式设定，主样式表styles.css也开始有些样子了。今天继续，来看侧边栏。

再次参考一下目标范例页面，我们可以观测到侧边栏主要由两部分组成：

• 按发布时间归档的文章列表
• 近期评论列表，包括评论内容及内容信息等

首先，我们可以把它们同等的作为侧边栏内容容器，定义一个名为.side-box的class，并设置样式：

其实是another HTML5+CSS3实战教程。之前一篇里面，我们了解了这轮学习的目标页面范例以及相应的页面代码，对整体布局的HTML5用法也做了简要的解释；今天开始进入样式方面的话题。

在之前一篇的页面代码范例中，我们可以看到该页面一共调用了3个样式表：reset.css、text.css和styles.css；其中reset.css就是Eric Meyer的样式重置方案；text.css用来定义一些文本元素的基本样式，我们来看下它的代码：

其实是another HTML5+CSS3实战教程。昨天我们起了个头，看了作者对他所定义的“面向对象CSS”的概述；天上一句地上一句的且不管他，今天来实际看看究竟要搞怎样的飞机。

这个“Object Oriented CSS”页面是最终成品图，也就是我们的目标范例。和之前一档HTML5+CSS3实战类似，都是用这样的Blog文章列表形式的页面来做示范，比较典型；如果慢慢的看到这样的页面时脑海里能用新的HTML5元素标签建立起一套轮廓来，那是很好的事情来；这也是反复用小实战演示的方法来学习的一个目的之一。

推荐到目标页面中使用firebug一类对应实际样式查看代码；我拿来放在下面先：

时隔半月，我的coder人格继续来学习业务知识；这次来翻一翻学一学的是来自nettuts+的“Object-Oriented CSS: What, How, and Why”；可以看到，作者标题到一定程度了，不过仍是值得学习参考的HTML5+CSS3实战性质的流程范例。他们说这叫“面向对象CSS”，我姑且就这么翻着了；开搞。

什么是面向对象CSS?

所谓面向对象CSS，本质上讲，就是编写更加简洁高效的CSS；代码方面仍是我们熟识和热爱的那个CSS，只是在这里用一种新的说法来代表这类简洁的CSS模式及实践方式。(作者一上来就主动揭露了自己标题的本质，很坦诚也很嚣张；继续看)

好了，“HTML5+CSS3实战”系列的最后一篇；本是Smashing Magazine上面的一整篇教程，每天弄来一点最后搞成了17篇连载。HTML5方面的东西慢慢关注下来发现，国外站点上一些公认不错的教程范例，每一篇几乎都有着不同的路子，比如对新标签的理解，使用的策略等等；想来也不奇怪，W3C的HTML5规范本身还处于草案阶段的样子；我个人目前还不打算用它做新东东；CSS3方面倒是在一点点的用着，不过也要看是什么项目了。

不多说了，可以参考“HTML5教程学习 - HTML5+CSS3 实战(9) 页脚”一文来回顾下之前页脚部分的设计样式和HTML。接下来我们来看看样式；将下面的代码添加到main.css中：

在前面一篇HTML5+CSS3实战里面，我们搞定了范例页面“附加栏目”部分的样式；今天来一起看看正文部分文章列表的样式代码。首先呢，可以参考之前的文章来回顾一下文章列表部分的设计样式及HTML代码。心中有数，下面是文章列表部分的基本样式代码：(见全文)

其中“li:last-child .hentry”的设定去掉了文章列表中最后一篇文章的下边框线及内边距；另外通过“#content > .hentry”，我们可以选取那些作为#content容器直接子元素的.hentry文章段落；如果某.hentry元素嵌套在有序列表中，那么它就不会被选中。这是从文章内页的角度出发进行的考虑(虽然我们的范例里不会涉及到)，因为内页单篇文章是不需要下边框的。

前面一篇HTML5+CSS3实战里面嘀嘀咕咕了很多没用的，最后看了下范例页面里面的特色文章和主要内容部分的样式代码；今天来看看“附加栏目”部分的样式吧，这部分多少有意思了一些。

为了在脑子里有个直观些的概念，可以回顾一下“HTML5 教程学习 - HTML5+CSS3 实战(8) 附加栏目”，参观一下“附加栏目”这部分的设计样式以及HTML代码。在样式方面，左侧的博客链接列表里面包含3列内容，我们可以使用左浮动<li>的方式来做；宽度做做好就OK；右侧是常规的单列无序列表，没什么悬念，容器整体右浮动即可。问题主要出在最后一行的那几个<li>上面；我们先把“附加栏目”这部分的样式代码列出来，然后看下哪里有不爽：

我想起一句话，叫作“天有不测风云”什么的；记得是很小的时候，寒假之前结业会结束之后，学校给每个学生发了一封信；那时使用的还是人力印刷，那种油墨味道很重的印刷机，用滚轮刷啊刷的；那样印出来的东西拿到手里总是先去闻一闻上面的味道，有时会蹭的手上鼻子上都是未干的油迹。那天发的信上面第一句就是“天有不测风云”，后来明白事了就搞不大懂为什么学校要给即将放寒假的孩子们发这样的东东，其实到现在也没懂。当天拿着这信一边在路上走着一边读着，觉得那种天色啊，云的颜色啊，树枝的样子啊，有种特别清净肃杀的感觉；前两天玩Half Life 2的时候发现水障碍区那些关卡简直和小时候记忆里的样子没有差别，我几乎已经忘记游戏，而沉浸在那种感觉里了。

在昨天的教程中，我们在main.css文件中添加了一些新的样式代码，用来搞定HTML5新元素标签的显示问题；今天我们来看看页面头部(header)的样式设定。

这部分的样式代码没什么悬念，基本都是我们平时所能接触到的；也可以参考“HTML5 教程学习 - HTML5+CSS3 实战(5) header”回顾一下之前学习的页面头部HTML代码及局部设计图，做到心中有数。

下面我们来看看样式代码；同样需要添加到main.css当中去：

在昨天的教程中，我们给页面的主样式表main.css起了个头，做了一些基本的CSS样式设定及必要的重置；今天我们来看看页面代码中HTML5元素所需要的样式重置；虽然今天的东东在内容篇幅上相对简短一些，不过在目前这个阶段呢，这个知识点对于HTML5页面的正确实现还是比较重要的样子。

鉴于眼下各浏览器对HTML5的兼容支持程度参差不齐，一些浏览器甚至会完全忽视新的元素标签，或将新标签的display属性默认设置为行内(inline)；所以一个好习惯就是，在样式表中将所有用到的HTML5元素标签的display属性设置为块级(block)；我们将下面这段代码添加到昨天的main.css文件中：