HTML5结构上的修改

1、新增的主体结构元素:

  1.1:article元素

    article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部应用的内容。它可以是一片博客或杂志中的文章、一片论坛帖子、一段用户评论胡一个独立的插    件,或者其他任何独立的内容。除了内容部分,一个artcle元素通常有它自己的标,一般放在一个header元素里面,有时还有自己的脚注。

  1.2:section元素

    section用来对网站或者应用程序中页面上的内容进行分块,一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。可以这样理解:section元素中的内容可以单独存储到数据库中或输出到Word文档中。

  1.3:nav元素

    nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。例如,在页脚中通常会有一组链接,包括服务条款,首页,版权声明等,这时使用footer元素是最恰当的。一个页面中可以拥有多个nav元素,作为整体或不同部分的导航。

    具体来说,nav元素可以用以一下场合:

    1)传统导航条

      现在主流的网站上都有不同层级的导航条,用来将当前页面跳转到网站的其他主要页面。可以用nav元素实现导航条。

    2)侧边导航条

      现在主流博客网站及商品网站上都有侧边导航,用来将页面从当前文章或当前商品跳转到其他文章或商品页面。可以用nav元素实现侧栏导航。

    3)页内导航

      可以用nav元素实现页内导航,用来在页面几个重要组成部分之间跳转。

    4)翻页操作

      nav元素可以用在多个页面前后页或博客网站的前后篇文章的滚动中。

  1.4:aside元素

    aside元素用来表示当前页面或文章的附属信息部分,他可以包含以当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。主要有两种使用方法:

    1)包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的参考资料、名词解释等。

    2)在article之外元素使用,作为页面或站点全局的附属信息部分。最经典的形式是侧边栏,其中的内容可以使友情链接、博客中其他文章列表或广告单元等。

  1.5:time元素与微格式

    微格式:一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间、个人电话号码、企业邮箱之类的附加信息的方法。

    time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差。它可以定义很多格式的日期和时间。

时间: 2024-10-07 05:40:18

HTML5结构上的修改的相关文章

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示

poj 3666 Making the Grade (线性结构上的DP )

题意: 给定n个数,问你将他们修改成非增或非减序列的最小花费.最小花费的定义是 假设原数组为 a[1] a[2] a[3] .... a[n] 修改后数组为 b[1] b[2] b[3] .... b[n] 那么最小花费为|a[1]-b[1]|+|a[2]-b[2]|+| a[3] - b[3] |+.....| a[n] - b[n] |. 思路: 线性结构上的动态规划 定义状态d[i][j] 表示 前i-1个数字已经是最小花费 现在把第i个数修改成b[j] 修改完成后前i个数总共最少需要的花

File控件选择图片的时候在Html5下马上预览

页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;height:200px;" /> <form id="form_photo" method="post" action="/N/SavePhoto?id=1"> <input style=" display:no

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

HTML5关于上传API的一些使用(上)

HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest2.0出来之后,完全可以使用HTML5的上传解决方案,能够非常方便的进行二进制上传进度的显示,上传图片的本地预览,甚至可以做到断点续传,分片上传,多文件上传等各种复杂的底层功能. 首先回顾一下XMLHttpRequest1.0的传输过程 关于XMLHttpRequest 初始化XMLHttpRequ

HTML5 文件上传

HTML5 文件上传 1 filelist对象与file对象: 1 <input type="file" id="file" multiple> //multiple可上传多个文件 2 <input type="button" onclick="showFileName()" value="文件上传"> 3 <script> 4 function showFileName

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

HTML5 结构之美(2) - 新增的非主体结构标签

接上文<HTML5 结构之美(1) - 新增的主体结构标签>,HTML5 还新增了一些表示逻辑结构或附加信息的非主体结构标签. header标签 header 标签是一种具有引导和导航作用的结构标签,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格.搜索表单或相关的 logo 图片. 很明显,整个页面的标题应该放在页面的开头,我们可以用如下所示的形式书写页面的标题: <header><h1>页面标题</h1></he