zoukankan      html  css  js  c++  java
  • HTML5标签

    概述

      HTML5标签加强了结构化;减少与表现(CSS)的耦合;简化了标签、属性的写法。
    另外为提升Web网页的性能,还推出了集成javascript、html、css的标签控件。

    标签介绍

      删除属性列表(引自@洞庭夕照

      

    在HTML 4中使用的属性 使用该属性的元素 在HTML 5中的替代方案
    rev link、a rel
    charset link、a 在被链接的资源的中使用HTTP Content-type头元素
    shape、coords a 使用area元素代替a元素
    longdesc img、iframe 使用a元素链接到校长描述
    target link 多余属性,被省略
    nohref area 多余属性,被省略
    profile head 多余属性,被省略
    version html 多余属性,被省略
    name img id
    scheme meta 只为某个表单域使用scheme
    archive、chlassid、codebose、codetype、declare、standby object 使用data与typc属性类调用插件。需要使用这些属性来设置参数时,使用param属性
    valuetype、type param 使用name与value属性,不声明之的MIME类型
    axis、abbr td、th 使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性,来使单元格的内容变得简短
    scope td 在被链接的资源的中使用HTTP Content-type头元素
    align caption、input、legend、div、h1、h2、h3、h4、h5、h6、p 使用CSS样式表替代
    alink、link、text、vlink、background、bgcolor body 使用CSS样式表替代
    align、bgcolor、border、cellpadding、cellspacing、frame、rules、width table 使用CSS样式表替代
    align、char、charoff、height、nowrap、valign tbody、thead、tfoot 使用CSS样式表替代
    align、bgcolor、char、charoff、height、nowrap、valign、width td、th 使用CSS样式表替代
    align、bgcolor、char、charoff、valign tr 使用CSS样式表替代
    align、char、charoff、valign、width col、colgroup 使用CSS样式表替代
    align、border、hspace、vspace object 使用CSS样式表替代
    clear br 使用CSS样式表替代
    compace、type ol、ul、li 使用CSS样式表替代
    compace dl 使用CSS样式表替代
    compace menu 使用CSS样式表替代
    width pre 使用CSS样式表替代
    align、hspace、vspace img 使用CSS样式表替代
    align、noshade、size、width hr 使用CSS样式表替代
    align、frameborder、scrolling、marginheight、marginwidth iframe 使用CSS样式表替代
    autosubmit menu  

    控件标签使用

      以progress进度条控件为例(仅chrome浏览器)

      代码 

    <progress value="30" max="100"></progress>
    <progress></progress>

      效果

      

      更改控件的默认样式

     

    progress {
        display:block;
        margin:20px;
         150px;
        border: 1px solid red;  
        background-color:#000;
    }
    
    //对浏览器的伪类进行设置,对标签直接设置的background,会被浏览器伪元素样式所覆盖
    progress::-webkit-progress-bar { background: #000; }
    progress::-webkit-progress-value  { background: red; }

      效果

      其他控件不一一举例。若直接设置样式无用,找到浏览器默认样式重设。   

    参考资料

  • 相关阅读:
    浏览器输入一个url到整个页面显示出来经历了哪些过程?
    ajax
    为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?
    jQuery中ready方法的实现
    this+call、apply、bind的区别与使用
    内存泄漏、垃圾回收机制、哪些情况会导致内存泄漏
    浏览器同源策略和跨域方法
    node.js
    JS原型、原型链、构造函数、实例与继承
    JS常用操作节点的方法
  • 原文地址:https://www.cnblogs.com/mominger/p/4344877.html
Copyright © 2011-2022 走看看