首页 >web前端 >html教程 >关于HTML5和CSS替换使用

关于HTML5和CSS替换使用

迷茫
迷茫原创
2017-01-17 09:38:592277浏览

听到HTML5的都知道它的强大,如更多的描述性标记、较少依赖于插件的多媒体支持、跨文档消息通信、Web Sockets、客户端存储、更强大的表单、提升可访问性、先进的选择器、强大的视觉效果。费话不多说,细细说来

被废弃的标签和属性

废弃的标签

因可用CSS替换而废弃的

basefont

big

center

font

strike

tt

u

s

因破坏可使用性和可访问性而废弃的

frame

frameset

noframes

因引起混乱、不经常使用而废弃的

acronym被废弃是因为它经常使页面错乱,可以使用abbr代替

applet被废弃是因为可以使用object代替

isindex被废弃是因为使用表单控件代替

dir被废弃是因为使用ul代替

noscript元素只能在HTML里使用,而不能在XML里使用。

废弃的属性  

align

body标签上的link,vlink,alink和text属性

bgcolor

height和width

iframe元素上的scrolling属性

valign

hspace和vspace

table标签上的cellpadding、cellspacing和border属性

上述元素实现的视觉效果可用css来实现,所以被废弃了

另外target属性在规范中被废弃了

head标签上的profile属性将不再受到支持

img和iframe元素的longdesc属性也被移除了

HTML5的规范里有对这些属性的代替方案,可以查看 HTML Standard

新的结构标签和属性

文档类型声明

<!doctype html><html>
  <head>
    <meta charset="UTF-8">
    <title>文章标题</title>
  </head>
  <body>

    文章正文部分  36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

大家都知道在html5中只要使用 aba7b36f87decd50b18c7e3e3c150106就可以声明文档的类型了,这一句话有两个显著的作用

验证器依据它来判断应该采用何种验证规则去验证代码

文档类型声明能够强制IE6、IE7和IE8以标准模块渲染页面

hgroup对网页或区段的标题进行组合

d8eccd9ed644b68a6460a2bb84548c82

  4a249f0d628e2318394fd9b75b4636b1希望大家没空有空来看看我的博客473f0a7621bec819994bb5020d29372a

  c1a436a314ed609750bd7c7d319db4da附加标题信息:哈哈2e9b454fa8428549ca2e64dfac4625cdd7fb206ed7081b134e1edd3f2b3137f0

header页面或区段的头部

header元素是一种具有引导和导航作用的元素。头部可能包含从公司LOGO到搜索框在内的各种各样的内容,所以不要把header与h1等标签混为一谈。同一个页面中可以包含多个header元素,每个独立的区段或文章段都可以拥有自己的头部。

1aa9e5d373740b65a0cc8f0a02150c53

  4a249f0d628e2318394fd9b75b4636b1页面中重要的信息,标题等473f0a7621bec819994bb5020d29372aab946e7546ab66a280dd9c9f9310ecd523c3de37f2f9ebcb477c4a90aac6fffd

  1aa9e5d373740b65a0cc8f0a02150c53   

    4a249f0d628e2318394fd9b75b4636b1文章区域内的标题信息,事实上也挺重要的,起突出效果473f0a7621bec819994bb5020d29372a

  ab946e7546ab66a280dd9c9f9310ecd5

  e388a4556c0f65e1904146cc1a846bee文章正文......94b3e26ee717c64999d7867364b1b4a37618f95bdc39e398f223d37049478af1

footer页面或区段的尾部

footer元素用来为文档或相邻区段定义尾部信息。HTML5规范中允许在同一个页面中出现多个footer元素,也就是说在section或者article中也可以使用footer,footer与header类似通常也包含其它元素。footer通常包括其相关区块的附加信息,如作者、相关阅读链接以及版权信息等。

以下都是本人确切的精髓来的,绝对没有介绍错

我联合互联网上的一群大牛,组建了一个编程的免费学习群,你只需要来我们这个群里听就行,前面一部分数字为思其一,中间一些数字是零儿七,后段一数字是一武4, 这里有免费的学习资源,每天直播课程,不需要你付出什么,只需要有一颗学习的心就可以了。 不是想要学习的就不要加了。

c37f8231a37e88427e62669260f0074d

  ff6d136ddc5fdfeffaf53ff6ee95f185    25edfb22a4f469ecb59f1190150159c6版权信息bed06894275b65c1ab86501b08a632eb    25edfb22a4f469ecb59f1190150159c6网站地图bed06894275b65c1ab86501b08a632eb    25edfb22a4f469ecb59f1190150159c6相关链接bed06894275b65c1ab86501b08a632eb    25edfb22a4f469ecb59f1190150159c6回顶部等bed06894275b65c1ab86501b08a632eb

  929d1f5ca49e04fdcb27f9465b94468984122da5b51c58ef54d7045814144010

nav页面或区段的导航区域

页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来。nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。

<nav>
  <ul>
    <li><a href="/home/">首页</a></li>
    <li><a href="/newBlog/">新随笔</a></li>
    <li><a href="/link/">联系</a></li>
    <li><a href="/manage/">管理</a></li>
  </ul>
</nav>

section页面的逻辑区域或内容组合

section区段是页面上的逻辑区域,在描述页面逻辑区域时,我们可以使用section元素来代替之前被随意滥用的div标签,section可以表示成一个小节。事实上我们就是利用section元素将内容合理归类。一般来说一个section包含一个head和一个content内容块。

section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

article正文或一篇完整的内部

最适合描述网页实际内容的元素非article标签莫属。section标签视为对文档逻辑部分的描述,而将article标签视为对具体内容的描述。区段可以包含多篇文章,文章内容又可以划分若干区段。section元素是更通用的元素,可以用来从逻辑上对其他元素进行分组。 如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素。

我们可以在article元素内部使用header元素和footer元素,以更方便的描述具体的逻辑区域,也可以使用section元素将文档分为多个部分。

article代表了一个文档内容的独立片段, article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。 当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。

aside补充或相关内容

有时候我们需要为主要内容添加一些附加信息,如引言、图表、相关链接等,这时候就可以使用aside标签来标识。

自定义数据属性

开发人员可以在任何元素上定义他们想要的任何属性,只要他们在其之前加上 data- 的前缀,以此避免与未来的HTML版本的冲突,asp.net MVC下的jQuery验证就是采用这种方式。使用自定义数据属性为客户端脚本提供了额外的信息。自定义数据属性不会使浏览器出错 ,同时HTML5文档类型声明可保证文档是有效的。因为所有自定义数据属性都是以data-前缀开头,HTML5文档的验证器会在验证时忽略它。几乎在所有的浏览器中你都能够使用自定义属性,所以我们就可以用JavaScript中轻易获取它们。

最后看一个小demo:

(this.href,'winName','width=500,height=500')">我的博客5db79b134e9f6b82c0b36e0489ee08ed

大家知道这段代码有什么好处吗?答案是提高了可访问性。

构造可访问的页面,第一步就是确保禁用JavaScript的情况下,所有功能仍然能够正常运转。顺便说一句在HTML5中,废弃了onclick等,这是因为像onclick属性它让行为和内容太紧密耦合了。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn