【图文】3-土地利用变化的遥感监测_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
3-土地利用变化的遥感监测
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢五个圈_不止是点评！新型综合性企业、产品、作品及服务点评网络平台。为广大企业商家提供企业服务及产品的实用真实性反馈信息！
这个时代变化有多快？当你还在惊叹手机支付带来的改变时，马云、马化腾却...
订餐电话： 2579
地址：上海市浦东新区世博大道1368号世博源1区1LM01
电话：027-
地址：武汉市硚口区中山大道131号
产品规格型号：可定制
销售热线：400-930-1986
厂家黄页：暂未添加
北京爱奇艺科技有限公司
http://www.iqiyi.com/
广东省|中山
投资金额：5-10万
招商热线：9
东湖生态风景旅游区位于“九省通衢”的武汉市东部，水域面积33平方公里，浩渺、明净；港汊交错，岸线曲折，有九十九弯之称。是武汉市最...
所在区域：北京市八五五农场吧-百度贴吧
感谢你与本吧的一同成长
签到排名：今日本吧第个签到，
本吧因你更精彩，明天继续来努力！
本吧排名：
本吧签到人数：0
可签7级以上的吧50个
本月漏签0次！
成为超级会员，赠送8张补签卡
连续签到：天&&累计签到：天
超级会员单次开通12个月以上，赠送连续签到卡3张
当年的知青朋友欢迎大家前来登录知青论坛，望请互相转告。
过完正月十五。寻伙伴结伴出去打工！！！小伙伴有要去的在这里报名！！！
厂里换了机器人干活，开我是迟早的事，每天我都在考虑失业的问题，听亲戚说过他是干室内装修瓦工的
八五五农场中学蔺洪岩 有没有能联系上的
水田发包地里有长流水，有井一包三年。汗改水两年，黑土地有劲，可租借大棚两千一年，有为喷，有电
象宝宝：妈妈，这里的水深吗？ 象妈妈：不深，刚过膝盖。 象宝宝：妈妈，我要不是鼻子长点，今天可能
今年八五五农场的地是被水淹过吗
八五五农场学校以雷锋纪念日为契机，通过一系列丰富多彩的主题实践活动，深入持久地开展学雷锋活动
今年过年回了一次855，虽然只带了9天，不过感觉还是家乡好 一碗南方没有的咸豆腐脑 一课寒冬中伫立的
本人想在八五五租一套楼房，拎包就住条件好点的，有意的请联系vx
1.855农场学校沈姓历史老师为13年的毕业生，让他来做初三年组毕业班的班主任实属不妥，沈某某没有做班主任的经验，也没有教过初三学年，这关乎一个班
5月25日，记者从总局农业局获悉，截至昨天，垦区2200多万亩水稻插秧和2000多万亩旱田播种全面告捷，标志
生活报5月22日讯 记者21日从省民政厅获悉，近日我省启动全省社会救助宣传月活动，此次宣传月活动面向
　　18日，省公安厅组织召开了全省公安机关在农村地区开展“打黑除恶、治安扶贫”专项行动电视电话会
求教兄弟姐妹们，去宝清怎么走方便？ 外地人想从七台河到宝清，奈何s308到北兴农场这段太难走了。从855
为积极打造平安校园，切实提高学生的消防安全意识，提高学生的安全自救能力，当遇到火灾等特殊情况
推荐个讨债公司 要狠的....看我头像
先是农场的建筑
　　仙本那是马来西亚知名的旅游胜地，每年吸引数以万计的游客前来这里度假旅行。然而在仙本那附近
　　自古历来有“天下山水在于蜀”之说，四川风光秀丽，自古以来就有着天府之国的美誉，对的时间要
　　这个世界有太多值得去的地方，譬如世界上几个最小的国家之一，马耳他。 　　 　　虽然面积不及上
说到樱花不得不提到樱花之国日本，每年日本追寻着樱花前线的人们，在樱花树下度过春日最美好的时光
你可能感兴趣的吧...
发贴红色标题
签到六倍经验
兑换本吧会员
赠送补签卡1张，获得
助攻总额: 43W
贴吧热议榜
发表后自动分享本贴
使用签名档&当前位置： >>
一.HTML5 百科 (1).HTML5 中对 id 属性的定义与规定 需要注意的地方： id 是一个元素的唯一标识，需确保每个元素的 id 的独一性。 id 至少由一个字符组成，且不能包含空字符。 具有不为空 id 属性的元素，可以在 css 或 DOM 的 getElementById() 方法中方便调用。 不排除一个元素有多个 id 的可能。 id 属性值必须反映该元素的内容。 The id attribute specifies its element?s unique identifier (ID). The value must be unique amongst all the IDs in the element?s home subtree and must contain at least one character. The value must not contain any space characters. An element?s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the element?s home subtree (e.g. for selectors in CSS or for the getElementById() method in the DOM). Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute. This specification doesn?t preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element?s ID in a way that doesn?t conflict with the id attribute. The id IDL attribute must reflect the id content attribute.(2).HTML5 中对 HTML 标签的定义与规定 html 标签是一个 html 文档的根标签。 可以为 html 标签设置 manifest 属性， 来控制页面的缓存，manifest 属性值应该是一个有效的 URL 地址。 manifest 属性只对之前载入的页面有效，以后再动态修改该值时，就不会有任何效果了。The html element represents the root of an HTML document. The manifest attribute gives the address of the document?s application cache manifest, if there is one. If the attribute is present, the attribute?s value must be a valid non-empty URL potentially surrounded by spaces.The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute). For the purposes of application cache selection, later base elements cannot affect the resolving of relative URLs in manifest attributes, as the attributes are processed before those elements are seen. The window.applicationCache IDL attribute provides scripted access to the offline application cache mechanism. The html element in the following example declares that the document?s language is English. &!DOCTYPE html& &html lang=”en”& &head& &title&Swapping Songs&/title& &/head& &body& &h1&Swapping Songs&/h1& &p&Tonight I swapped some of the songs I wrote with some friends, who gave me some of the songs they wrote. I love sharing my music.&/p& &/body& &/html&(3).必须知道的 22 个学习 HTML5 的技巧(一) 互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。 HTML5 的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的 HTML 技巧。 1. 新的文档类型（Doctype） XML/HTML Code 复制内容到剪贴板 &!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”& 你还在使用上面这个既麻烦又难记的 XHTML 文档类型吗？ 如果还是这样的话，现在该切 换到新的 HTML5 文档类型了。 XML/HTML Code 复制内容到剪贴板 &!DOCTYPE html& 只要这么简单的 15 个字符就可以了。 （注意： 你的 doctype 的申明需要出现在你 html 文件的 第一行。 ）2. 图形（Figure）元素考虑用下面的代码来标记图片？ XML/HTML Code 复制内容到剪贴板 &mg src=”path/to/image” alt=”About image” /& &p&Image of Mars. &/p& 很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记 以 及 图 片 元 素 包 裹 着 ， 而 HTML5 通 过 引 进 &figure& 元 素 ， 改 进 了 这 一 点 。 当 结 合 &figcaption& 元素使用时，我们就可以将图形标题与图形配对起来。代码如下： XML/HTML Code 复制内容到剪贴板 &figure& &img src=”path/to/image” alt=”About image” /& &figcaption& &p&This is an image of something interesting. &/p& &/figcaption& &/figure& 3. 重新定义&small&原来你可以利用&small&元素来创建与 logo 密切相关的副标题。不过，现在 HTML5 修改了 这个用法，&small&元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注 （如，网站底部的版权声明） 。 4. 不再需要脚本、链接类型很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。 XML/HTML Code 复制内容到剪贴板 &link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” /& &script type=”text/javascript” src=”path/to/script.js”&&/script& 在 HTML5 中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此， 我们可以将它们的类型属性都删除掉。代码如下： XML/HTML Code 复制内容到剪贴板 &link rel=”stylesheet” href=”path/to/stylesheet.css” /& &script src=”path/to/script.js”&&/script& 5. 使用还是不使用引号记住，HTML5 与 XHTML 不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。 XML/HTML Code 复制内容到剪贴板 &p class=myClass id=someId& Start the reactor. 6. 使你的内容可编辑HTML5 其中一个非常强大的功能就是“contenteditable” ，顾名思义它将允许用户编辑元素 （包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基 于 wiki 的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。 XML/HTML Code 复制内容到剪贴板 &!DOCTYPE html& &html lang=”en”& &head& &meta charset=”utf-8″& &title&untitled&/title& &/head& &body& &h2& To-Do List &/h2& &ul contenteditable=”true”& &li& Break mechanical cab driver. &/li& &li& Drive to abandoned factory &li& Watch video of self &/li& &/ul& &/body& &/html& 或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号） ： XML/HTML Code 复制内容到剪贴板 &ul contenteditable=true& 7. 电子邮件输入如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电 子邮件地址结构的字符串输入。 虽然说内置的表单验证很快就会到来， 但是我们也不能完全 依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文 本框。 XML/HTML Code 复制内容到剪贴板 &!DOCTYPE html& &html lang=”en”& &head& &meta charset=”utf-8″&&title&untitled&/title& &/head& &body& &form action=”& method=”get”& &label for=”email”&Email:&/label& &input id=”email” name=”email” type=”email” /& &button type=”submit”& Submit Form &/button& &/form& &/body& &/html& 在说到浏览器所支持和不支持的元素以及属性时， 你必需知道当前所有浏览器都不是那么可 靠。例如，Opera 只有在你指定 name 属性时才支持电子邮件验证。不过，它不支持占位符 属性（下面即将要讲到的） 。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。(4).必须知道的 22 个学习 HTML5 的技巧(二) 8. 占位符 此前，我们需要使用 JavaScript 来创建文本框的占位符。你可以初步设定值属性来看是否合 适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了 这一点。 XML/HTML Code 复制内容到剪贴板 &input name=”email” type=”email” placeholder=”” /& 9. 本地存储 多亏了 HTML5 的 local storage ，我们可以让高级浏览器“记住”我们输入的内容，就算后 来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。 10. 语义性的 Header 和 Footer XML/HTML Code 复制内容到剪贴板 &div id=”header”& ? &/div& &div id=”footer”& ? &/div& 上面的代码一去不复返。Divs 从根本上来说并没有任何语义结构，即使应用上了 ID 还是如 此。而在 HTML5 中，我们可以使用&header&和&footer&元素，上面的代码就可以替换为：XML/HTML Code 复制内容到剪贴板 &header& ? &/header& &footer& ? &/footer& 不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。 11. IE 和 HTML5 IE 理解新的 HTML5 元素需要费一定的神， 为了确保新的 HTML5 元素能够以块级元素正确 显示，有必要将它们用下面的代码定义风格： XML/HTML Code 复制内容到剪贴板 header, footer, article, section, nav, menu, hgroup { display: } 就算如此，IE 还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的 代码来解决这个问题： XML/HTML Code 复制内容到剪贴板 document.createElement(“article”); document.createElement(“footer”); document.createElement(“header”); document.createElement(“hgroup”); document.createElement(“nav”); document.createElement(“menu”); 12. 群组标题（hgroup） 假设一个网站有名称、副标题分别用&h1&、&h2&标签来标记，在 HTML4 中还没有一种能 够将两者之间的关系用很好的语义关系来描述的方法，此外，当使用 h2 在页面中显示其它 标题时，在层级方面问题就更多。而使用群组标题 hgroup 元素，我们可以将这些标题聚集 在一起，而不影响文档的整个纲要。 XML/HTML Code 复制内容到剪贴板 &header& &hgroup& &h1& Recall Fan Page &/h1& &h2& Only for people who want the memory of a lifetime. &/h2&&/hgroup& &/header& 13.必要（Required）属性 表单允许新的必要属性， 规定是否某个特定的输入是必要的。 你可以依据自己写代码的偏好， 用下面两种不同方式来声明这个属性： XML/HTML Code 复制内容到剪贴板 &input type=”text” name=”someInput” required& 或者，更严谨： XML/HTML Code 复制内容到剪贴板 &input type=”text” name=”someInput” required=”required”& 上面两行代码都行得通。用了这行代码之后，并且浏览器支持 required 属性的话， 输入空 白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性： XML/HTML Code 复制内容到剪贴板 &form method=”post” action=”&& &label for=”someInput”& Your Name: &/label& &input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required& &button type=”submit”&Go&/button& &/form& 如果输入是空的，表单将无法提交，突出显示文本框。 14. 自动对焦（Autofocus）属性 同样地，有了 HTML5 就不再需要用 JavaScript 方案来解决自动对焦的问题。如果某个输入 应该被”选择“或被聚焦，我们现在可以使用 HTML 的自动对焦 autofocus 属性。 XML/HTML Code 复制内容到剪贴板 &input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus& 15. 音频支持 我们再也不需要依靠第三方插件来提供音频了。HTML5 提供了音频元素&audio&。目前，只 有最新的浏览器支持 HTML5 音频。 此时，最好还是提供一些向后兼容性。 XML/HTML Code 复制内容到剪贴板 &audio autoplay=”autoplay” controls=”controls”& &source src=”file.ogg” /& &source src=”file.mp3″ /& &a href=”file.mp3″&Download this file.&/a& &/audio& 说道音频格式， Mozilla 和 Webkit 都还没有完全支持。 Firefox 希望看到一个 .ogg 文件， Webkit 浏览器只支持最常见的.mp3 扩展名。这意味着说，至少目前为止，你应该创建两个版本的 音频。当 Safari 加载页面时，它认不出.ogg 格式的文件，将会跳过并移到 mp3 版本上。请注意，IE 并不支持它，Opera 10 或更低的版本只支持 .wav 文件。(5).必须知道的 22 个学习 HTML5 的技巧(三 16. 视频支持 音频元素 &audio&非常像， 在新的浏览器上也支持 HTML5 视频。 事实上， 就在最近 YouTube 宣布了一项新的 HTML5 视频嵌入。 可惜的是，由于 HTML5 说明文件并没有为视频指出某 个特定的编码器， 所以都主要取决于浏览器来决定了。 尽管 Safari 和 IE9 可以支持 H.264 格 式的视频，Firefox 和 Opera 却仍然坚持 Theora 和 Vorbis 格式。因此，显示 HTML5 视频的 时候，你必须提供两种格式。 17. 视频预先加载 你首先需要决定是否需要浏览器来预先加载视频。 是否有需要？假设， 一个访客进入某个专 门用来显示视频的页面， 那么就非常有必要预先加载这个页面节省一点等待的时间。 你可以 通过设置 preload=”preload”来预先加载视频，或者之间添加 preload 也可以。 XML/HTML Code 复制内容到剪贴板 &video preload& ? &/video & 18. 显示控件 你可能已经注意到，用上面的代码的话，视频将只会显示成一个图片，而没有任何可控制的 元件。为了获取这些播放控件，我们必需在视频元素里指定这些控件属性。 XML/HTML Code 复制内容到剪贴板 &video preload controls& ? &/video & 19. 正则表达式 对亏了新模式的属性，我们可以直接在代码中插入一个正则表达式。 XML/HTML Code 复制内容到剪贴板 &form method=post action=”&& &label for=”username”&create a username: &/label& &input id=” username” type=” text” name=” username” placeholder=” && 10″ required=” 4 required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”& &button type=”submit”&Go &/button&&/form& 如果你比较熟悉正则表达式的话就会注意到这个新模式: [A-Za-z]{4,10}只接受大小写字母。 这个字符串最少必需有四个字符，最多是十个字符。 20. 检测浏览器对属性的支持 前面提到过并非所有的浏览器都支持这些属性， 那是否有什么方法能够判断浏览器是否能够 识别它们呢？这个问题问得非常好， 这里给大家介绍两种方式， 第一个选择是使用 Modernizr 来检测，或者你也可以创建并剖析这些元素来看看浏览器都有什么能力。例如，在前面的例 子里，如果我们要确定浏览器是否能够执行 pattern 属性，就可以在页面上添加 JavaScript: JavaScript Code 复制内容到剪贴板 alert( ?pattern? in document.createElement(?input?) ) // 实际上，这是确定浏览器兼容性的一种非常常用的方法。jQuery 库利用了这个技巧。上面的 代码里，我们创建了一个新的输入元素，并确认 pattern 属性是否能够被识别。如果能够识 别的话，浏览器就支持这个功能，否则就不支持。 JavaScript Code 复制内容到剪贴板 &script& if (!?pattern? in document.createElement(?input?) ) { // do client/server side validation } &/script& 记住，这将需要依靠 JavaScript 来实现！ 21. Mark 元素 &mark& 元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的 文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜 索“Open your Mind” ，我可以使用在&mark&标签里使用 JavaScript 来包裹每一次动作。 XML/HTML Code 复制内容到剪贴板 &h3& search results &/h3& &h6& They were interrupted, just after Quato said, &mark&”Open your Mind”&/mark&. &/h6& 22. 何时使用&div& 是否还需要使用&div&标签呢？当然需要。例如，如果你想在一个元素里将一段代码包裹住， 特别是为了内容的定位，&div& 将会是非常理想的选择。不过，如果不是上述情况而是要包 裹博客文章、或者页脚的链接列表，建议你分别使用 &article&和&nav&元素。分享 |(6)你必须知道的 28 个 HTML5 特征、窍门和技术前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被 HTML5 的改变/ 更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。一、新的 Doctype//zxx:‖doctype‖中文意思指D文档类型‖ 仍在使用麻烦的，不可能记得住的 XHTML 文档类型？&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&如果是，为什么还在用呢？使用新的 HTML5 文档类型代替吧。你会活得更久的――正如 Douglas Quaid 说的&!DOCTYPE html&我就琢磨着，为了 HTML5 搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今 这是可行的，只有老的浏览器需要一个特定的 doctype（文档类型）。浏览器如果不知道 doctype，就会 很简单的以标准模式对包含的标签进行渲染。所以，妹妹你大胆的向前冲，把小心谨慎都抛到九霄云外， 去拥抱新的 HTML5 文档类型吧。二、图形元素(The Figure Element )看看下面给图片添加的标示：&img src=&path/to/image& alt=&About image& /& &p&Image of Mars. &/p&文字裹在 p 标签里，与 img 标签各行其道，很难让人联想到这就是标题。HTML5 通过采用&figure& 元素对此进行了改正。当合&figcaption&元素组合使用时，我们就可以语义化地联想到这就是图片相 对应的标题&figure& &img src=&path/to/image& alt=&About image& /& &figcaption& &p&This is an image of something interesting. &/p& &/figcaption& &/figure&三、&small&重新定义还在不久前，&small&元素被用来创建靠近 logo 且相关的副标题。这是个很有用的表现元素，但是，现 在，这种用法可能就不正确了。&small&元素已经被重新定义了，指小字，因而更具可用性。试想下你 网站底部的版权状态，根据对此元素新的 HTML5 定义，&small&可以正确地包裹这些信息。 small 元素专指D小字‖。四、脚本(scripts)和链接(links)无需 type您可能现在仍在给 link 和 script 标签增加 type 属性。&link rel=&stylesheet& href=&path/to/stylesheet.css& type=&text/css& /& &script type=&text/javascript& src=&path/to/script.js&&&/script&这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把 type 属性一起干掉。&link rel=&stylesheet& href=&path/to/stylesheet.css& /& &script src=&path/to/script.js&&&/script&五、引号还是不要引号…这确实是个问题。记住，HTML5 不是 XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属 性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就 是如此。&p id=someId& Start the reactor.对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。六、内容可编辑最新的浏览器有个很赞的新属性可以应用到元素上，叫做 contenteditable。顾名思意，就是允许用 户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序， 可大大利用其本地存储的优势。&ul contenteditable=&true&& &li&悼念遇难香港同胞 &/li& &li&深圳特区 30 周年&/li& &li&伊春空难&/li& &/ul&或者，根据前面所学到的一些技巧，我们可以把它写成：&ul contenteditable=true&您可以狠狠地点击这里：HTML5 内容可编辑 demo七、Email 输入(Inputs)如果我们给表单输入框应用名为‖email‖的 type 属性，我们可以命令浏览器只允许符合有效的电子邮件地 址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能 100%依赖内置 验证，较旧的浏览器不认识这个‖email‖型，它们会简单地退回到普通文本框。&form action=&& method=&get&& &label for=&email&&邮箱:&/label&&input id=&email& name=&email& type=&email& /& &button type=&submit&&确定&/button& &/form&您可以狠狠地点击这里：HTML5 邮箱内置验证 demo //zxx:经我小测了下，貌似仅在 Chrome 浏览器下有效果(xp 系统)，当输入内容不是合法邮箱格式，点 击D确定‖按钮是没有反应的；当输入为合法邮箱，点击D确定‖按钮才会提交刷新页面。目前而言，我们不能依赖浏览器验证，客户端/服务器验证还是必须的。 还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如，Opera 似乎支持电子邮件验证，但仅在 name 属性被指定的时候。而且，它不支持占位符属性，这个我们将会在 后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！八、占位符(Placeholders)//zxx:此处内容非直译，有删改 Placeholders 什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失； 失去焦点时如果内容为空，提示文字又出现。如下图所示：这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点 JavaScript 代码实现占位符效果，例如我之前的D文本框/域文字提示自动显示隐藏 jQuery 小插件‖一文所展示的。当 然，你需要设定一个初始的默认的 value 值，然后根据输入内容进行判断，从而决定文本框值的改变与否。 如果您使用占位符(placeholders)属性，一切就轻松了。&label for=&email&&邮箱:&/label& &input id=&email& type=&email& placeholder=&& size=&26& /&根据我的测试，目前仅 webkit 核心的浏览器支持 placeholders 属性，像是 Chrome5，Safari4，结果 如下所示：您可以狠狠地点击这里：HTML5 占位符 Demo九、本地存储(Local Storage)多亏了本地存储(非正式的 HTML5， 本着方便归纳的目的)， 我们可以让高级浏览器记住我们的编辑后的内 容，即使浏览器被关掉或是页面刷新。 //zxx:原视频默认展示的是 YouTube 视频，不翻墙看不了，所以，这里展示来自另外一个网站的 video。 建议全屏观看，以看清其中的 HTML 与 JavaScript 代码//zxx:根据视频内容，我自己做了个 demo，关于本地存储的。 您可以狠狠地点击这里：HTML5 本地存储 Demo IE8 浏览器已经支持了本地存储，如下截图所示：尽管显然不支持所有的浏览器，我们可以在 Internet Explorer8 时，Safari 4 和 Firefox 3.5 下期待此 工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定 window.localStorage 是否存在。十、语义的 Header 和 Footer那些过往的日子：&div id=&header&& ... &/div&&div id=&footer&& ... &/div&div 嘛， 很自然的， 没有语义化的结构――即使在应用了 id 后。 现在， 通过 HTML5， 我们可以使用&header& 和&footer&元素。以上的代码可以替换成：&header& ... &/header&&footer& ... &/footer&它完全适合您有多个页眉和页脚的项目。尽量不要混淆‖header‖和‖footer‖这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信 息放在 footer 元素内部是说得通的。这同样也适用于 header。十一、更多 HTML5 表单特征(More HTML5 Form Features )通过下面视频学习更多有用的 HTML5 表单特征：//zxx:TouTuBe 视频，需要翻墙十二、IE 和 HTML5(Internet Explorer and HTML5)不幸的是，讨厌的 IE 浏览器需要动点小手术才能理解新的 HTML5 元素。 所有元素，默认的，都有个 inline 的 display 为了确保所有新的 HTML5 元素能以 block 水平的元素正确地渲染，有必要对其做如下定义：header, footer, article, section, nav, menu, hgroup { display: }不幸的是，IE 仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是 header 元素。幸运的是， 有一个简单的解决办法：document.createElement(&article&); document.createElement(&footer&); document.createElement(&header&); document.createElement(&hgroup&); document.createElement(&nav&); document.createElement(&menu&);奇怪的是，这段代码似乎触发 IE 浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为 HTML5 shiv。该脚本同样修复了些显示问题。&!--[if IE]& &script src=&http://html5shim.googlecode.com/svn/trunk/html5.js&&&/script& &![endif]--&十三、文档某一部分的信息(hgroup)想象一下， 在我的网站的标题， 我有我的站点的名称， 随后立即由一个副标题。 虽然我们可以使用一个&h1& 和&h2&标签，为其分别创造标记，但是依旧没有（因为 HTML4）一个简单的方法来语义上说明了两者之 间的关系。此外，一个 h2 标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标 题时。通过使用不影响文档的大纲流 hgroup 元素，我们可以将这些标题组合在一起。&header& &hgroup& &h1& Recall Fan Page &/h1& &h2& Only for people who want the memory of a lifetime. &/h2& &/hgroup& &/header&十四、必要的属性(Required Attribute )表单允许新的必要属性，用来指定是否需要特殊的 input。这取决于你的代码偏好，你可以以下面两种方 式之一申明此属性。&input type=&text& name=&someInput& required&或者，使用更结构化的方法：&input type=&text& name=&someInput& required=&required&&两种方法都行。有了这个代码，并且浏览器支持此属性，如果DsomeInput‖文本框是空白，则表单不会被 提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。&form action=&& method=&get&& &label for=&name&&姓名:&/label& &input id=&name& name=&name& type=&text& placeholder=&zhangxinxu& required=&required& /& &button type=&submit&&提交&/button& &/form&您可以狠狠地点击这里：HTML5 必要属性 Demo 如果 input 里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在 Chrome 浏览器下 有点小效果十五、Autofocus 属性同样， HTML5 的解决方案消除了对 JavaScript 的需要。 如果一个特定的输入应该是D选择‖，或有重点的， 默认情况下，我们现在可以利用自动获取焦点属性。&input type=&text& name=&someInput& placeholder=&zhangxinxu& required autofocus&有趣的是，虽然我个人更倾向于喜欢 XHTML 的方法（用引号，等等），写作Dautofocus=autofocus‖ 让人感到有点怪。因此，我们将坚持使用单一关键字的方法。十六、Audio 支持我们无需再依赖第三方插件区渲染音频。HTML5 提供了&audio&元素，嗯，至少，最终，我们将不必担 心这些插件。就目前，只有最近期的的浏览器提供 HTML5 音频支持。在这个时候，它仍然是一个很好的 做法提供一些向后兼容的形式。&audio autoplay=&autoplay& controls=&controls&& &source src=&file.ogg& /& &source src=&file.mp3& /& &a href=&file.mp3&&Download this file.&/a& &/audio&Mozilla 和 WebKit 的还没有完全相处， 当涉及到音频格式，Firefox 会希望看到一个.ogg 文件， WebKit 而 的浏览器支持.mp3 扩展。这意味着，至少在现在，你应该创建两个版本的音频。 当 Safari 加载页面时，它不会承认.ogg 格式，会跳过它并移动到的 MP3 版本，因此。请注意 IE，每往 常一样，不支持这些格式，Opera 10 和以及以下版本只能使用.wav 文件。十七、Video 支持与&audio&元素很类似， 在新的浏览器中也存在 Video！ 事实上， 就在最近， YouTube 宣告了新的 HTML5 视频嵌入，当然，是为支持此功能浏览器。因为 HTML5 的规范没有指定特定的视频编解码器，它留给了 浏览器来决定。虽然 Safari 和 Internet Explorer9 可以预期支持 H.264 格式的视频（其中 Flash 播放器可以播放），Firefox 和 Opera 是坚持开源 Theora 和 Vorbis 格式。因此，当显示 HTML5 的视频， 您必须提供这两种格式。&video controls preload& &source src=&cohagenPhoneCall.ogv& type=&video/ codecs='vorbis, theora'& /& &source src=&cohagenPhoneCall.mp4& type=&video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'& /& &p& Your browser is old. &a href=&cohagenPhoneCall.mp4&&Download this video instead.&/a& &/p& &/video&无论是‖ogg‖格式还是‖mp4″格式的视频 Chrome 浏览器都能正确编码 还有一个值得注意的一些事情：1. 我们技术上不需要来设置 type 属性，但是，如果我们不这样做，浏览器不得不自己 去寻找类型。节省一些带宽，还是你自己声明下吧。 2. 不是所有的浏览器理解 HTML5 视频。在资源元素的下面，我们可以提供一个下载链 接，或嵌入视频的 Flash 版本代替。这取决于你。 3. controls 和 preload 属性就会在下面提及。 4. 有方法可以让所有的浏览器支持 video 标签，具体参见我前面的D让所有浏览器支持 HTML5 video 视频标签‖一文。十八、视频预载(Preload Videos)预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许 吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时 间。影片可以通过设置 preload=‖preload‖或是简单地添加 preload 进行预载。我更喜欢后者的解决方 案，它少了一点多余的东西。&video preload&十九、显示控制条如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图 片，没有控制条。为了渲染出播放控制条，我们必须在 video 元素内指定 controls 属性。&video preload controls&请注意，不同浏览器渲染出来的进度条的模样都是不一样的。二十、正则表达式你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的 pattern 属性，我们可以在标 签处直接插入一个正则表达式。&form action=&& method=&get&& &label for=&username&&姓名:&/label& &input id=&username& name=&username& type=&text& placeholder=&4-10 个 英文字母& pattern=&[A-Za-z]{4,10}& required=&required& autofocus /& &button type=&submit&&提交&/button& &/form&如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受 4-10 位不区分大小写的英文字母。 如果浏览器支持 pattern 属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮 显示。如下图所示。您可以狠狠地点击这里：HTML5 正则表达式 Demo //zxx:我自己小测了下，貌似目前只在 Chrome 下有效(win 系统)注意到，我们已经开始组合使用这些很棒的属性。如果您对正则表达式概念模糊了，可以参见这里。二十一、属性支持检测如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上 我们是有几种方法的，这里我们讨论 2 个。第一个是利用优秀的 Modernizr 库，或者，我们可以创建和分 析这些元素， 以确定浏览器的能力。例如， 在我们前面的例子， 如果我们要确定浏览器是否能使用 pattern 的属性，我们可以添加一小段 JavaScript 到我们的页面上：alert( 'pattern' in document.createElement('input') ); // boolean事实上，这是一种确定浏览器兼容的常用方法。jQuery 库了利用这种伎俩。在上面，我们创建了一个新的 input 元素，并确定了里面的 pattern 属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然 就不支持了。&script& if (!'pattern' in document.createElement('input') ) { // do client/server side validation } &/script&谨记此方法依赖于 JavaScript。二十二、mark 元素(Mark Element )试想&mark&元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上 搜索D北川景子‖，我就可以使用一些 JavaScript 将当前的每个结果字符串用 mark 标签包裹。&h3& 搜索结果 &/h3& &p& 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 &mark&北川 景子&/mark&。 &/p&二十三、什么时候使用 div我们有些人开始质问到底何时该使用 div。现在我们可以使用 header, article, section, 和 footer，还有 机会使用 div…吗？当然可以。 div 应该用在没有更好的元素的时候。 例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文 章，或者，可能是，底部的链接列表，则需考虑分别使用&article&和&nav&元素，因为其更具语义。二十四、什么可以开始立即使用 一直谈论到现在的 HTML5 要到 2022 年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上， 有少量的 HTML5 的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在 今天的视频快速展示的技巧中，我将告诉你一些可用的选项。//zxx:YouTuBe 视频，需要翻墙。二十五、哪些不是 HTML5(What is Not HTML5)那些仅凭自己的假设形象将 JavaScript 变少的过渡被全部归为 HTML5 的人是可以理解的， 嘿， 甚至苹果 无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过， 对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是 HTML5。1. SVG:不是 HTML5，至少 5 岁了。 2. CSS3:不是 HTML5，它是…CSS。 3. Geolocation:不是 HTML5.//zxx:Geolocation（地理位置）：通过 HTML 5，您 应该能够使 Web 应用程序可确定您的位置，并为您提供更多的相关信息。 4. Client Storage(客户端存储):非 HTML5， 虽说有一点切合， 但被排除在规范之外， 原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。 5. Web Sockets:不是 HTML5，同样的，有着自己的一套准则。不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还 是同一人。二十六、data 属性(The Data Attribute)我们现在可以很正式地让所有的 HTML 元素支持自定义属性。然而，以前，我们可能会这样：&h1 id=someId customAttribute=value& 小样，胆儿挺肥的呢 &/h1&…校验器会小题大做！但是现在，只要我们以‖data‖为前缀定义我们的自定义属性，盗版属性立马变成正 牌的了。如果你发现你曾经把一个重要的数据附加在诸如 class 的属性上，可能为了 JavaScript 之用，那 么，本属性将大有帮助啊。 HTML 片段&div id=&myDiv& data-custom-attr=&My Value&& 巴拉巴拉，lady 嘎嘎 &/div&检索自定义属性的价值var theDiv = document.getElementById('myDiv'); var attr = theDiv.getAttribute('data-custom-attr'); alert(attr); // My Value此属性还可以用在 CSS 中，例如下面这个有些傻里傻气的 CSS 文字改变的例子：CSS 代码：.data_custom { display:inline- position: } .data_custom:hover { color: } .data_custom:hover:after { content: attr(data-hover-response); color: position: left: 0; } HTML 代码：&a data-hover-response=&我说过不要碰我！& href=&#&&不要碰我， 雅蠛蝶~~&/a&如果你的浏览器支持 after 伪类，以及 content 的 attr 属性，则可以看到类似下面的效果(IE8 不一样)：要查看上图所示的效果，您可以狠狠地点击这里：CSS 与 HTML5 自定义属性 demo 还有，content 属性其实是一个非常强大的属性，由于低版本的 IE 不支持，所以此属性尚未流行，关于 content 内容生成技术，可以参见我之前的DCSS content 内容生成技术以及应用‖这篇文章。二十七、Output 元素正如你可能预料到的，output 元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一 系列数字的总和坐标，这个数据应被插入到 output 元素中。 举个简单的例子，当提交按钮被按下，我们用 JavaScript 将两个数字相加值插入到空的 output 中。&form action=&& method=&get&& &p& 10 + 5 = &output name=&sum&&&/output& &/p& &button type=&submit&&计算&/button& &/form& (function() { var f = document.forms[0]; if ( typeof f['sum'] !== 'undefined' ) { f.addEventListener('submit', function(e) { f['sum'].value = 15; e.preventDefault(); }, false); } else { alert('你的浏览器尚未准备好！ '); } })();自己测试了下，貌似现在只有在 Opera 浏览器下有上佳的效果：如果您现在使用的是较新版本的 Opera 浏览器，您可以狠狠地点击这里：HTML5 结果输出框 demo 此元素也可以接受一个属性，它反映了输出相关元素的名称，类似 label 工作原理。二十八、使用区域 input 创建滑块(Create Sliders with the Range Input)HTML5 引进了 range 类型的 input。&input type=&range&&最值得注意的是，它可以接收 min, max, step, 和 value 属性，等等。虽然现在似乎只有 Opera 浏览 器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！参见下面的快速演示：第一步：标签首先，创建标签&form method=&post&& &h4&音量控制&/h4& &input type=&range& name=&range& min=&0& max=&10& step=&1& value=&& /& &output name=&result&& &/form&第二步：CSS 下面，我们要使用一点点的样式。我们将使用:before 和:after 去告知用户我们制定的最大值和最小值。&/output&input { font-size: 14 font-weight: } input[type=range]:before { content: attr(min); padding-right: 5 } input[type=range]:after { content: attr(max); padding-left: 5} output { display: font-size: 5.5 font-weight: }第三步：JavaScript 最后，我们? 检测我们的浏览器是否认识 range input，如果不，显示提示。 ? 当用户移动滑块的时候，动态改变 output 的值。 ? 监听，当用户离开滑块，插入值，同时本地存储。 ? 然后， 下次用户刷新页面的时候， 选择的区域和值会自动地设置成他们最后一次选择。(function() { var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // 检测浏览器是否是足够酷 // 识别 range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的 Opera 浏览器吧。'); // 设置初始值 // 无论是否本地存储了，都设置值为 5 range.value = cachedRangeV result.value = cachedRangeV // 当 用户选择了个值，更新本地存储 range.addEventListener(&mouseup&, function() { alert(&你选择的值是：& + range.value + &. 我现在正在用本 地存储保存此值。在现代浏览器上刷新并检测。&); localStorage ? (localStorage.rangeValue = range.value) : alert(&数据保存到了数据库或 是其他什么地方。&); }, false); // 滑动时显示选择的值 range.addEventListener(&change&, function() { result.value = range. }, false); })();您可以狠狠地点击这里：HTML5 range input 炫酷效果 demo 我的电脑是 xp 系统，默认主题，在滑块松开后 Opera 下的效果如下图所示，酷吧：感谢您的阅读！我们已经讨论了很多，但可能只是触及到 HTML5 的皮毛，全当抛砖引玉，希望能对您的 学习有所帮助！(7).HTML5 中对 header 标签的定义与解释&header& 标签定义文档的页面组合，通常是一些引导和导航信息（DOM 接口、可设置属性）。英文原文 Categories Flow content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model:Flow content, but with no header or footer element descendants. Content attributes: Global attributes DOM interface: Uses HTMLElement. The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section‘s heading (an h1Ch6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section‘s table of contents, a search form, or any relevant logos. Here are some sample headers. This first one is for a game: &header& &p&Welcome to…&/p& &h1&Voidwars!&/h1& &/header& The following snippet shows how the element can be used to mark up a specification‘s header: &header& &hgroup& &h1&Scalable Vector Graphics (SVG) 1.2&/h1& &h2&W3C Working Draft 27 October 2004&/h2& &/hgroup& &dl& &dt&This version:&/dt& &dd&&a href=‖http://www.w3.org/TR/2004/WD-SVG12-/‖&http://www.w3.org/TR/2004/ WD-SVG12-/&/a&&/dd&&dt&Previous version:&/dt& &dd&&a href=‖http://www.w3.org/TR/2004/WD-SVG12-/‖&http://www.w3.org/TR/2004/ WD-SVG12-/&/a&&/dd& &dt&Latest version of SVG 1.2:&/dt& &dd&&a href=‖http://www.w3.org/TR/SVG12/‖&http://www.w3.org/TR/SVG12/&/a&&/dd& &dt&Latest SVG Recommendation:&/dt& &dd&&a href=‖http://www.w3.org/TR/SVG/‖&http://www.w3.org/TR/SVG/&/a&&/dd& &dt&Editor:&/dt& &dd&Dean Jackson, W3C, &a href=‖mailto:dean@w3.org‖&dean@w3.org&/a&&/dd& &dt&Authors:&/dt& &dd&See &a href=‖#authors‖&Author List&/a&&/dd& &/dl& &p&&a href=‖http://www.w3.org/Consortium/Legal/ipr-notic … &/header& The header element is no it doesn‘t introduce a new section. In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn‘t take part in the outline algorithm. &body& &header& &h1&Little Green Guys With Guns&/h1& &nav& &ul& &li&&a href=‖/games‖&Games&/a&&li&&a href=‖/forum‖&Forum&/a& &li&&a href=‖/download‖&Download&/a& &/ul& &/nav& &h2&Important News&/h2& &!C this starts a second subsection C& &!C this is part of the subsection entitled DImportant News‖ C& &p&To play today‘s games you will need to update your client.&/p& &h2&Games&/h2& &!C this starts a third subsection C& &/header& &p&You have three active games:&/p& &!C this is still part of the subsection entitled DGames‖ C&(8).HTML5 中对 hgroup 标签的定义与解释&hgroup& 标签用于对网页或区段的标题元素（h1-h6）进行组合（DOM 接口、可设置属性）。 例如，在一个区段中你有连续的 h 系列的标签元素，则可以用 hgroup 将他们括起来。 英文原文：代码: 全选 运行Categories Flow content. Heading content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model: One or more h1, h2, h3, h4, h5, and/or h6 elements.Content attributes: Global attributes DOM interface: Uses HTMLElement. The hgroup element represents the heading of a section. The element is used to group a set of h1Ch6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1Ch6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string. Other elements of heading content in the hgroup element indicate subheadings or subtitles. The rank of an hgroup element is the rank of the highest-ranked h1Ch6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).The section on headings and sections defines how hgroup elements are assigned to individual sections. Here are some examples of valid headings. In each case, the emphasized text represents the text that would be used as the heading in an application extracting heading data and ignoring subheadings. &hgroup& &h1&The reality dysfunction&/h1& &h2&Space is not the only void&/h2& &/hgroup& &hgroup& &h1&Dr. Strangelove&/h1& &h2&Or: How I Learned to Stop Worrying and Love the Bomb&/h2& &/hgroup& The point of using hgroup in these examples is to mask the h2 element (which acts as a secondary title) from the outline algorithm.(9).HTML5 中对 h1,h2,h3,h4,h5,h6 标签的定义与解释&h1& C &h6& 标签可定义一些片段的标题。&h1& 定义最大的标题。&h6& 定义最小的标题（DOM 接口、可设置属性）。 注意，因为 h 系列标签是有这样特殊含义的，不应该单是因为格式需求滥用。 英文原文： The h1, h2, h3, h4, h5, and h6 elements Categories Flow content. Heading content. formatBlock candidate. Contexts in which this element can be used: As a child of an hgroup element. Where flow content is expected. Content model: Phrasing content. Content attributes: Global attributes DOM interface: interface HTMLHeadingElement : HTMLElement {}; These elements represent headings for their sections. The semantics and meaning of these elements are defined in the section on headings and sections. These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.These two snippets are equivalent: &body& &h1&Let‘s call it a draw(ing surface)&/h1& &h2&Diving in&/h2& &h2&Simple shapes&/h2& &h2&Canvas coordinates&/h2& &h3&Canvas coordinates diagram&/h3& &h2&Paths&/h2& &/body& &body& &h1&Let‘s call it a draw(ing surface)&/h1& &section& &h1&Diving in&/h1& &/section& &section& &h1&Simple shapes&/h1& &/section& &section& &h1&Canvas coordinates&/h1& &section& &h1&Canvas coordinates diagram&/h1& &/section& &/section& &section& &h1&Paths&/h1& &/section& &/body&(10)HTML5 中对 aside 标签的规定与解释&aside& 用来装载非正文类的内容。（DOM 接口、可设置属性）。 例如广告，成组的链接，侧边栏等等。 示例代码：代码: 全选 运行&!DOCTYPE html& &html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&HTML5 论坛 www.htmlv.cn aside 标签示例&/title& &/head& &body& &aside& 热门文章 &/aside& &aside& 广告 &/aside& &article& &h1&文章标题&/h1& 这是一篇文章 &article&评论 1...&/article& &article&评论 2...&/article&&/article& &/body& &/html&英文原文： Categories Flow content. Sectioning content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Content attributes: Global attributes DOM interface: Uses HTMLElement. The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. It‘s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document. The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.&aside& &h1&Switzerland&/h1& &p&Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.&/p& &/aside& The following example shows how an aside is used to mark up a pull quote in a longer article. … &p&He later joined a large company, continuing on the same work. &q&I love my job. People ask me what I do for fun when I‘m not at work. But I‘m paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn‘t have to work… but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.&/q&&/p& &aside& &q& People ask me what I do for fun when I‘m not at work. But I‘m paid to do my hobby, so I never know what to answer. &/q& &/aside& &p&Of course his work ― or should that be hobby? ― isn‘t his only passion. He also enjoys other pleasures.&/p& … The following extract shows how aside can be used for blogrolls and other side content on a blog: &body& &header&&h1&My wonderful blog&/h1& &p&My tagline&/p& &/header& &aside& &!C this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog C& &nav& &h1&My blogroll&/h1& &ul& &li&&a href=‖http://blog.example.com/‖&Example Blog&/a& &/ul& &/nav& &nav& &h1&Archives&/h1& &ol reversed& &li&&a href=‖/last-post‖&My last post&/a& &li&&a href=‖/first-post‖&My first post&/a& &/ol& &/nav& &/aside& &aside& &!C this aside is tangentially related to the page also, it contains twitter messages from the blog author C& &h1&Twitter Feed&/h1& &blockquote cite=‖http://twitter.example.net/t″& I‘m on vacation, writing my blog. &/blockquote&&blockquote cite=‖http://twitter.example.net/t″& I‘m going to go on vacation soon. &/blockquote& &/aside& &article& &!C this is a blog post C& &h1&My last post&/h1& &p&This is my last post.&/p& &footer& &p&&a href=‖/last-post‖ rel=bookmark&Permalink&/a& &/footer& &/article& &article& &!C this is also a blog post C& &h1&My first post&/h1& &p&This is my first post.&/p& &aside& &!C this aside is about the blog post, since it‘s inside the &article& it would be wrong, for instance, to put the blogroll here, since the blogroll isn‘t really related to this post specifically, only to the page as a whole C& &h1&Posting&/h1& &p&While I‘m thinking about it, I wanted to say something about posting. Posting is fun!&/p& &/aside& &footer& &p&&a href=‖/first-post‖ rel=bookmark&Permalink&/a& &/footer&&/article& &footer& &nav& &a href=‖/archives‖&Archives&/a& ― &a href=‖/about‖&About me&/a& ― &a href=‖/copyright‖&Copyright&/a& &/nav& &/footer& &/body&(11).HTML5 中对 article 标签的规定与解释&article& 标签装载显示一个独立的文章内容（DOM 接口、可设置属性）。 例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce 可以嵌套，则内层的 artilce 对外层的 article 标签有隶属的关系。 例如，一个博客文章，可以用 article 显示，然后一些评论可以以 article 的形式嵌入其中。 示例代码：代码: 全选 运行&!DOCTYPE html& &html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&HTML5 论坛 www.htmlv.cn article 标签示例&/title& &/head& &body&&article& &h1&文章标题&/h1& 这是一篇文章 &article&评论 1...&/article& &article&评论 2...&/article& &/article& &/body& &/html&Categories Flow content. Sectioning content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Content attributes: Global attributes DOM interface: Uses HTMLElement. The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site thataccepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry. Author information associated with an article element (q.v. the address element) does not apply to nested article elements. When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM] The time element‘s pubdate attribute can be used to provide the publication date for an article element. This example shows a blog post using the article element: &article& &header& &h1&The Very First Rule of Life&/h1& &p&&time pubdate datetime=‖T14:28-08:00″&&/time&&/p& &/header& &p&If there‘s a microphone anywhere near you, assume it‘s hot and sending whatever you‘re saying to the world. Seriously.&/p& &p&…&/p& &footer& &a href=‖?comments=1″&Show comments…&/a& &/footer& &/article& Here is that same blog post, but showing some of the comments: &article& &header& &h1&The Very First Rule of Life&/h1& &p&&time pubdate datetime=‖T14:28-08:00″&&/time&&/p&&/header& &p&If there‘s a microphone anywhere near you, assume it‘s hot and sending whatever you‘re saying to the world. Seriously.&/p& &p&…&/p& &section& &h1&Comments&/h1& &article& &footer& &p&Posted by: George Washington&/p& &p&&time pubdate datetime=‖T19:10-08:00″&&/time&&/p& &/footer& &p&Yeah! Especially when talking about your lobbyist friends!&/p& &/article& &article& &footer& &p&Posted by: George Hammond&/p& &p&&time pubdate datetime=‖T19:15-08:00″&&/time&&/p& &/footer& &p&Hey, you have the same first name as me.&/p& &/article& &/section& &/article& Notice the use of footer to give the information for each comment (such as who wrote it and when): the footer element can appear at the start of its section when appropriate, such as in this case. (Using header in this case wouldn‘ it‘s mostly a matter of authoring preference.)(12).HTML5 中对 nav 标签的规定与解释&nav& 标签定义显示导航链接（DOM 接口、可设置属性） 不是所有的成组的超级链接都需要放在 nav 标签里。nav 标签里应该放入一些当前页面的主要导航链接。 例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用 nav 标 签，当然，这不是必须的。 英文原文： Categories Flow content. Sectioning content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Content attributes: Global attributes DOM interface: Uses HTMLElement. 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. Not all groups of links on a page need to be in a nav element ― only sections that consist of major navigation blocks are appropriate for the nav element. 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, without a nav element.User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request. In the following example, the page has several places where links are present, but only one of those places is considered a navigation section. &body& &header& &h1&Wake up sheeple!&/h1& &p&&a href=‖news.html‖&News&/a& &a href=‖blog.html‖&Blog&/a& &a href=‖forums.html‖&Forums&/a&&/p& &p&Last Modified: &time&&/time&&/p& &nav& &h1&Navigation&/h1& &ul& &li&&a href=‖articles.html‖&Index of all articles&/a&&/li& &li&&a href=‖today.html‖&Things sheeple need to wake up for today&/a&&/li& &li&&a href=‖successes.html‖&Sheeple we have managed to wake&/a&&/li& &/ul& &/nav& &/header& &div& &article& &header& &h1&My Day at the Beach&/h1& &/header&&div& &p&Today I went to the beach and had a lot of fun.&/p& …more content… &/div& &footer& &p&Posted &time pubdate=‖& datetime=‖T14:36-08:00″&Thursday&/time&.&/p& &/footer& &/article& …more blog posts… &/div& &footer& &p&Copyright ? 2006 The Example Company&/p& &p&&a href=‖about.html‖&About&/a& &a href=‖policy.html‖&Privacy Policy&/a& &a href=‖contact.html‖&Contact Us&/a&&/p& &/footer& &/body& Notice the div elements being used to wrap all the contents of the page other than the header and footer, and all the contents of the blog entry other than its header and footer. In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself. &body& &h1&The Wiki Center Of Exampland&/h1& &nav& &ul& &li&&a href=‖/‖&Home&/a&&/li&&li&&a href=‖/events‖&Current Events&/a&&/li& …more… &/ul& &/nav& &article& &header& &h1&Demos in Exampland&/h1& &p&Written by A. N. Other.&/p& &/header& &nav& &ul& &li&&a href=‖#public‖&Public demonstrations&/a&&/li& &li&&a href=‖#destroy‖&Demolitions&/a&&/li& …more… &/ul& &/nav& &div& &section id=‖public‖& &h1&Public demonstrations&/h1& &p&…more…&/p& &/section& &section id=‖destroy‖& &h1&Demolitions&/h1& &p&…more…&/p& &/section& …more… &/div& &footer&&p&&a href=‖?edit‖&Edit&/a& | &a href=‖?delete‖&Delete&/a& | &a href=‖?Rename‖&Rename&/a&&/p& &/footer& &/article& &footer& &p&&small&? copyright 1998 Exampland Emperor&/small&&/p& &/footer& &/body&(13).HTML5 中对 section 标签的规定与解释代码示例代码: 全选 运行&!DOCTYPE html& &html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&HTML5 中文论坛 www.htmlv.cn&/title& &/head& &body& &section& &h1&章节一&/h1& &p&详细内容...&/p& &/section&&section& &h1&章节二&/h1& &p&详细内容...&/p& &/section& &/body& &/html&英文原文： Categories Flow content. Sectioning content. formatBlock candidate. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content. Content attributes: Global attributes DOM interface: Uses HTMLElement. The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site‘s home page could be split into sections for an introduction, news items, and contact information. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element‘s contents would be listed explicitly in the document‘s outline. In the following example, we see an article (part of a larger Web page) about apples, containing two short sections. &article& &hgroup& &h1&Apples&/h1& &h2&Tasty, delicious fruit!&/h2& &/hgroup& &p&The apple is the pomaceous fruit of the apple tree.&/p& &section& &h1&Red Delicious&/h1& &p&These bright red apples are the most common found in many supermarkets.&/p& &/section& &section& &h1&Granny Smith&/h1& &p&These juicy, green apples make a great filling for apple pies.&/p& &/section& &/article& Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony. &!DOCTYPE Html& &Html& &Head& &Title&Graduation Ceremony Summer 2022&/Title& &/Head& &Body& &H1&Graduation&/H1& &Section& &H1&Ceremony&/H1& &P&Opening Procession&/P& &P&Speech by Validactorian&/P& &P&Speech by Class President&/P& &P&Presentation of Diplomas&/P& &P&Closing Speech by Headmaster&/P& &/Section& &Section& &H1&Graduates&/H1& &Ul& &Li&Molly Carpenter&/Li& &Li&Anastasia Luccio&/Li& &Li&Ebenezar McCoy&/Li& &Li&Karrin Murphy&/Li& &Li&Thomas Raith&/Li& &Li&Susan Rodriguez&/Li& &/Ul&&/Section& &/Body& &/Html&(15).HTML5 中对 body 标签的规定与解释body 元素就是就是 html 文档的主内容标签。 可设置属性 onafterprint 在打印文档之后运行脚本 onbeforeprint 在文档打印之前运行脚本 onbeforeonload 在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 onerror 当错误发生时运行脚本 onfocus 当窗口获得焦点时运行脚本 onhaschange 当文档改变时运行脚本 onload 当文档加载时运行脚本 onmessage 当触发消息时运行脚本 onoffline 当文档离线时运行脚本 ononline 当文档上线时运行脚本 onpagehide 当窗口隐藏时运行脚本 onpageshow 当窗口可见时运行脚本 onpopstate 当窗口历史记录改变时运行脚本 onredo 当文档执行再执行操作（redo）时运行脚本 onresize 当调整窗口大小时运行脚本 onstorage 当文档加载加载时运行脚本 onundo 当文档执行撤销操作时运行脚本 onunload 当用户离开文档时运行脚本DOM 接口 代码: 全选 运行interface HTMLBodyElement : HTMLElement { attribute F attribute Fu attribute Fun attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute Fattribute F };BitPart 论坛勤杂工 帖子: 68 注册:
18:01 页首Re: HTML5 中对 body 标签的规定与解释由 BitPart ? 18:03 英文原文： Categories Sectioning root. Contexts in which this element can be used: As the second element in an html element. Content model: Flow content. Content attributes: Global attributes onafterprint onbeforeprint onbeforeunload onbluronerror onfocus onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onredo onresize onscroll onstorage onundo onunload DOM interface: interface HTMLBodyElement : HTMLElement { attribute F attribute Fu attribute Fun attribute F attribute F attribute F attribute F attribute F attribute F attribute Fattribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F attribute F }; The body element represents the main content of the document. In conforming documents, there is only one body element. The document.body IDL attribute provides scripts with easy access to a document‘s body element. Some DOM operations (for example, parts of the drag and drop model) are defined in terms of Dthe body element‖. This refers to a particular element in the DOM, as per the definition of the term, and not any arbitrary body element. The body element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes. The onblur, onerror, onfocus, onload, and onscroll event handlers of the Window object, exposed on the body element, shadow the generic event handlers with the same names normally supported by HTML elements. Thus, for example, a bubbling error event fired on a child of the body element of a Document would first trigger the onerror event handler content attributes of that element, then that of the root html element, and only then would it trigger the onerror event handler content attribute on the body element. This is because the event would bubble from the target, to thebody, to the html, to the Document, to the Window, and the event handler on the body is watching the Window not the body. A regular event listener attached to the body using addEventListener(), however, would fire when the event bubbled through the body and not when it reaches the Window object. This page updates an indicator to show whether or not the user is online: &!DOCTYPE HTML& &html& &head& &title&Online or offline?&/title& &script& function update(online) { document.getElementById(?status‘).textContent = online ? ?Online‘ : ?Offline‘; } &/script& &/head& &body ononline=‖update(true)‖ onoffline=‖update(false)‖ onload=‖update(navigator.onLine)‖& &p&You are: &span id=‖status‖&(Unknown)&/span&&/p& &/body& &/html&(16).HTML5 中对 noscript 标签的规定与解释如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。 无法识别 &script& 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释 标签中隐藏脚本。老式的（无法识别 &script& 标签的）浏览器会忽略注释，这样就不会把标签的内容写 到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！ 实例代码代码: 全选 运行&body& &script type=&text/javascript&& &!-alert(&欢迎来到 www.htmlv.cn!&); //--& &/script&&noscript&如果你看到这些文字，说明您的浏览器不支持 javascript&/noscript& &/body&(17).HTML5 中对 script 标签的规定与解释script 标签用于定义客户端脚本，比如 JavaScript。 除全局属性之外有如下属性src 定义指向包含脚本的文件的 URL（这样您就可以引用某个包含脚本的文件， 而不是直接把脚本插入您的 HTML 文档中） async 定义脚本是否异步执行。 defer 指示脚本不会生成任何文档内容。浏览器可继续解析并绘制页面。 type 指定 MIME 类型 默认 text/javascript charset 定义脚本中使用的字符编码。 如果 async 属性为 true，则脚本会相对于文档的其余部分异步执行，这样脚本会在页面继续解析的过程 中执行。 如果 async 属性为 false，而 defer 属性为 true，则脚本会在页面完成解析后执行。 如果 async 和 defer 属性均为 false，那么脚本会立即执行，页面会在脚本执行完毕后继续解析。 提示：如果存在 src 属性，则 &script& 标签必须是空的。 Dom 接口 代码: 全选 运行interface HTMLScriptElement : HTMLElement { attribute DOMS att att attribute DOMS attribute DOMS attribute DOMS };英文原文（部分） Categories Metadata content. Flow content. Phrasing content. Contexts in which this element can be used:Where metadata content is expected. Where phrasing content is expected. Content model: If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions. If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions. Content attributes: Global attributes src async defer type charset DOM interface: interface HTMLScriptElement : HTMLElement { attribute DOMS att att attribute DOMS attribute DOMS attribute DOMS }; The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.When used to include dynamic scripts, the scripts may either be embedded inline or may be imported from an external file using the src attribute. If the language is not that described by Dtext/javascript‖, then the type attribute must be present, as described below. When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, and the src attribute must not be specified. The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is Dtext/javascript‖. The src attribute, if specified, gives the address of the external script resource to use. The value of the attribute must be a valid non-empty URL potentially surrounded by spaces identifying a script resource of the type given by the type attribute, if the attribute is present, or of the type Dtext/javascript‖, if the attribute is absent. A resource is a script resource of a given type if that type identifies a scripting language and the resource conforms with the requirements of that language‘s specification. The charset attribute gives the character encoding of the external script resource. The attribute must not be specified if the src attribute is not present. If the attribute is set, its value must be a valid character encoding name, must be an ASCII case-insensitive match for the preferred MIME name for that encoding, and must match the encoding given in the charset parameter of the Content-Type metadata of the external file, if any. [IANACHARSET] The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present. There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script isexecuted when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page. The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms below (in this section) describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc. The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default. Changing the src, type, charset, async, and defer attributes dynamically
these attribute are only used at specific times described below.(18).HTML5 对 style 标签的规定和设置梗概： style 标签用来定义网站的样式。 可设置属性 media ：screen tty tv projection handheld print braille aural all type：text/css scoped：true 或者 false title:有不同的含义type 属性用于设置样式语言的种类，一般情况，也是默认值是 text/css。 media 属性用于设置该元素适用于哪种媒体，默认为 all，即在适合任何媒体。 scoped 用于定义该元素的适用范围，如果设置了该属性则意味着元素的作用效果只适用于其父级元素及 下属子元素。 title 如果有多个 style 元素设置 title 属性，那么只有其中一个生效。 Dom 接口 代码: 全选 运行interface HTMLStyleElement : HTMLElement { attrib attribute DOMS attribute DOMS attr }; HTMLStyleElement implements LinkS代码实例代码: 全选 运行&!DOCTYPE html& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& &title&HTML5 style 标签使用实例&/title& &style title=&c1& id=&c1&& body {color:#00F; font-size:20px} &/style& &style title=&c2& id=&c2&& body {color:#F00; font-size:20px}&/style& &script language=&javascript&& function changeColor(){ if(document.getElementById(&c1&).disabled){ documen