CSS 与 HTML5 响应式图片

 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

什么是响应式图片?

响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。

CSS3 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:

.mod .hd h3 {
    background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
}

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
    background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
    background-size: 105px 155px;
}
}

两张图片的对比效果:

在制作@2x图片时需要注意一些问题:

如果类似上图一样是纯文字内容的图片,不要直接从大图片缩放为小图片,这样文字效果会有些失真,这是 Photoshop 渲染的问题。应该调整字号,再重新排版。可以直接看看:一淘首页 的效果。

蓝框内是直接缩放图片大小的效果,红框内是把字号从32号改成16号的效果。

CSS3 Media Queries 中用来定义设备分辨率的是 resolution 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询 Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS image Level 3「image-resolution」属性中定义了一些单位,比如「dppx」,各浏览器支持情况如下:

 

特性 Chrome Firefox (Gecko) IE Opera Safari (WebKit)
基本特性 不支持「1」「4」 3.5 (1.9.1) 「2」 9 9.5 不支持 「1」「4」
dppx 「4」 16.0 未知 12.10「3」 「4」

 

需要注意几点:

  1. 「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章
  2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
  3. 1dppx 相当于 96dpi。

显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。

「image-set」语法:

<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>

那么上面的例子我们可以改为:

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。

以下是一些常见移动设备的「min-device-pixel-ratio」值:

-webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac
  • 所有非 Retina 的 iOS 设备
  • Acer Iconia A500
  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S
  • 其他设备

-webkit-min-device-pixel-ratio: 1.3

  • Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

  • Google Nexus S
  • Samsung Galaxy S II
  • HTC Desire
  • HTC Incredible S
  • HTC Velocity
  • HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

  • iPhone 4
  • iPhone 4S
  • iPhone 5
  • iPad (3rd generation)
  • iPad 4
  • 所有 Retina displays 的 Mac
  • Google Galaxy Nexus
  • Google Nexus 4
  • Google Nexus 10
  • Samsung Galaxy S III
  • Samsung Galaxy Note II
  • Sony Xperia S
  • HTC One X

-webkit-min-device-pixel-ratio: 3.0

  • HTC Butterfly
  • Sony Xperia S

HTML5 响应式图片

CSS「image-set」 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月 @brucel 提出了HTML5 的一个解决草案:

<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的浏览器降级处理 -->
<img src=midres.png alt="">
</picture>

于此同时,其他的一些想法如雨后春笋般涌现出来,于是 W3C 社区讨论组 Responsive Images Community Group  应运而生。最新的规范在这里:http://picture.responsiveimages.org/ (W3C http://www.w3.org/TR/html-picture-element/)。截止本文发布时间,最近一次更新是 2013年4月24日,规范示例:

<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

但是 Apple 的 eoconnor 提出的方案是这样的:

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">

诚然,任何一个新标准的提出,都会存在各种不同的声音,这是好事,作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。

小结

本来想把新年的第一篇文章写的欢乐一些,不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始,但是前景还是很美好的。目前我们能做的就是在CSS 中使用「image-set」属性值,因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的,如果有特殊的需求可以使用 Media Queries。

非常感谢 kenny 对本文排版细节提出的 14 条建议,本文排版遵循:

  • 使用繁体中文引号 「」代替简体中文「“”」引号;
  • 中英文混排时英文首尾各加一个空格。

一丝

2013-1-15

最后更新:2013-4-28

转载请注明原文地址:http://www.iyunlu.com/view/Front-end/70.html

Head中的link、meta、的元素跑到body里面去、页面头部空白行的解决方法

出现的症状:

  1. 页面头部多出10px左右的空白行
  2. 查看元素head中的元素跑到body标签里面去了,查看源代码是正常的。

原因:

  1. 文件编码不一致或utf-8文件包含BOM标记
  2. BOM头:\xEF\xBB\xBF,PHP脚本4、5尚对BOM无视,所以在解析前直接输出。

解决方法:

  1. 用Notepad ++、Notepad2、UltraEdit等将文件全部另存为 utf-8 无BOM 编码格式文档

HTML5标签使用的常见误区

HTML5标签使用的常见误区

最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译,不对的地方还请大家多多指教。

下面附上原文地址:Avoiding common HTML5 mistakes 作者 :,有疑问的地方大家可以核对英文。

在这篇文章中,我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

不要把 <Section> 当成简单的容器来定义样式

我们经常看到的一个错误,就是武断的将<div>标签用<section>标签来替代,特别是将作为包围容器的<div>用<section>来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

现在我看到了下面的代码样子:

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

直观的看,上面的例子是错误的:<section> 并不是一个容器.<section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。

记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)

<body>
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

只在需要的时候使用 <hgroup>和<header>标签

使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用<header>和<hgroup>标签。你可以跟进我们关于<header>和<hgroup>的最新进展,下面是我的简单归纳:

  • <header>元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
  • <hgroup>元素会将当有副标题\子标题,各类标识文字时,对<h1>到<h6>标题进行群组,将其作为section的标题.

过度使用的<header>

你肯定知道,在一个文档中,可以使用多次<header>标签,下面就是一种很受大家欢迎的模式:

<!-- Don’t copy this code! No need for header here -->
<article>
  <header>
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

如果你的<header>标签只包含一个标题元素时,就不要使用<header>标签了.<article>标签肯定会让你的标题在文档大纲中显现出来,而且因为<header>并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:

<article>
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<hgroup>不合理使用

在标题的这个主题上,经常看到使用<hgroup>的错误案例.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

  • 这里只有一个标题,
  • 或者<hgroup>本身就够了(比如:不需要<hgroup>)

第一种情形看上去是下面的样子:

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

这种情况下,将<hgroup>移除,只保留标题就好.

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第二种情况也是包含了他们并不需要的标签.

<!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>

当<header>标签的子元素只有<hgroup>的时候,为什么我们还需要一个额外的<header>?如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素),我们直接将<header>元素去掉就好.

<hgroup>
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

WHATWG HTML spec

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

  • 主要导航
  • 网站搜索
  • 二级导航(这个能是有争议的)
  • 页面内链接(比如一篇很长的文章)

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

  • 翻页
  • 社交类的链接(虽然有些社交类的链接也是主要的链接,比如关于我About me和品味Flavours
  • 博客文章的标签
  • 博客文章的分类列表
  • 第三级导航
  • 大页脚

如果你不能确定是否使用<nav>,那就先对你问一下下面的几个问题:“者是否是一个主要链接?”,你可以根据下面的几个因素来回答你刚才的问题:

  • 如果用<section>和标题标签能够解决你的问题,那就不要去使用<nav>–Hixie on IRC
  • 你是不是为了增加可访问性而增加的一个快捷跳转链接呢?

如果上面的回答都是“不”,那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>,是很难掌握的标签,下面是经常看到的一些小错误。

并不是所有的图片都是figure(注:比较难理解阿,image=图片,figure=图形)

之前,我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处,并且还增加了你自己的工作强度和让自己的内容变得更难理解。

在规范中关于<figure>的解释如下:“某些流内容,可以有标题,自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述,就是它可以被从主内容中移除–比如放到边拦,而对文档流没有影响。

如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗?”,如果答案是”否”,那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗?”,如果这两个问题的答案都是”是”,那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来,对你的logo也是这样。下面是两组我找到的有规律的代码片断:

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>
<!-- Don’t copy this code! It’s wrong! -->
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。

<header>
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。

这里有一篇更深入讲解 <figure>的文章I wrote about <figure>,很值得阅读的。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。

在HTML5中,我们并不需要给<script>和<script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<css>标签是CSS,你不再需要那个type属性了:

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

现在我们可以写成下面的样子:

<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>

你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

不要包含错误的表单属性

你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:

  • autofocus
  • autocomplete
  • required

坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="true" />
<!-- Another bad example -->
<input type="email" name="email" required="1" />

基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="false" />

解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。

这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)

我们上面的例子可以写成下面的样子:

<input type="email" name="email" required />

总结

对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。

5款在线PS、GIF动画、在线制作图片及图片处理工具

5款在线PS、GIF动画、在线制作图片及图片处理工具

一、美图秀秀

地址:http://xiuxiu.web.meitu.com/main.html?source=pengyou

二、GIF动画工具

地址:http://gif.55.la/gif_app.php

三、图丫丫

地址:http://tuyaya.com/

四、在线PS

地址:http://pixlr.com/editor/

网上许多在线PS都是通过这个pixlr修改过来的。

五、可牛影像

地址:http://yx.keniu.com/online

28个你必须知道的HTML5的新特性,技巧以及提示

1. 新的Doctype

仍在使用,讨厌的,难以记忆的XHTML DOCTYPE?

    

HTML5有了新的Doctype,即使浏览器不能识别也会按照标准模式去渲染

    

2. Figure元素

用<figure>和<figcaption>来语义化地表示带标题的图片

xhtml代码

    About image
    

Image of Mars.

HTML5代码

    
About image

This is an image of something interesting.

3. 重新定义的<small>

<small>已经被重新定义了,现在被用来表示小的排版,如网站底部的版权声明

4. 去掉link和script标签里面的type属性

XHTML代码

    
    

HTML5代码

    
    

5. 加/不加引号

HTML5没有严格的要求属性必须加引号,闭合不闭合,但是建议加上引号和闭合标签

6. 让你的内容可编辑,只需要加一个contenteditable属性

示例:

  • 双击可以编辑内容

7. Email Inputs

如果我们给Input的type设置为email,浏览器就会验证这个输入是否是email类型,当然不能只依赖前端的验证,后台也得有相应的验证

8. Placeholders

这个input属性的意义就是不必通过javascript来做placeholder的效果了

示例:

9. Local Storage

使用Local Storage可以永久存储大的数据片段在客户端(除非主动删除),目前大部分浏览器已经支持,在使用之前可以检测一下window.localStorage是否存在

10. 语义化的header和footer

XHTML代码

    
    

HTML5代码

    
...
...

11. 更多的HTML5表单特性

12. IE和HTML5

默认的,HTML5新元素被以inline的方式渲染,不过可以通过下面这种方式让

其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

display: block;

}

不幸的是IE会忽略这些样式,可以像下面这样fix:

    

13. hgroup

一般在header里面用来将一组标题组合在一起,如

    

Recall Fan Page

Only for people who want the memory of a lifetime.

14. Required属性

required属性定义了一个input是否是必须的,你可以像下面这样声明

<input type=”text” name=”someInput” required>

或者

<input type=”text” name=”someInput” required=”required”>

示例:



15. Autofocus属性

正如它的词义,就是聚焦到输入框里面

<input type=”text” name=”someInput” placeholder=”Douglas Quaid”  required
autofocus>

示例:

16. Audio支持

HTML5提供了<audio>标签,你不需要再按照第三方插件来渲染音频,大多数现代浏览器提供了对于HTML5 Audio的支持,不过目前仍旧需要提供一些兼容处理,如

    

17. Video支持

和Audio很像,<video>标签提供了对于video的支持,由于HTML5文档并没有给video指定一个特定的编码,所以浏览器去决定要支持哪些编码,导致了很多不一致。Safari和IE支持H.264编码的格式,Firefox和Opera支持Theora和Vorbis编码的格式,当使用HTML5
video的时候,你必须都提供:

    

18. 预加载视频

preload属性就像它的字面意思那么简单,你需要决定是否需要在页面加载的时候去预加载视频

<video preload>

19. 显示视频控制

<video preload controls>

20. 正则表达式

由于pattern属性,我们可以在你的markup里面直接使用正则表达式了

示例:



21. 检测属性支持

除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持,如:

    

22. Mark元素

把<mark>元素看做是高亮的作用,当我选择一段文字的时候,javascript对于HTML的markup效果应该是这样的:

<h3> Search Results </h3>

<p> They were interrupted, just after Quato said, <mark>”Open
your Mind”</mark>. </p>

23. 什么时候用<div>

HTML5已经引入了这么多元素,那么div我们还要用吗?div你可以在没有更好的元素的时候去用。

24. 想立即使用HTML5?

不要等2022了,现在就可以使用了,just do it.

25. 哪些不是HTML5技术

1)SVG

2)CSS3

3)Geolocation

4)Client Storage

5)Web Sockets

26. Data属性

<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>

CSS中使用:

    

<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me
 </h1>

27. Output元素

<output>元素用来显示计算结果,也有一个和label一样的for属性

28. 用Range Input来创建滑块

HTML5引用的range类型可以创建滑块,它接受min, max, step和value属性

可以使用css的:before和:after来显示min和max的值

    
    input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after
    { content: attr(max); padding-left: 5px;}