1. <output id="wnoop"><sup id="wnoop"></sup></output>
    2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>

      45fan.com - 路饭网

      搜索: 您的位置£º主页 > 网络频道 > 阅读资讯£ºhtml5新增的标签和属性有什么£¿

      html5新增的标签和属性有什么£¿

      2018-07-28 19:27:16 来源:www.5810432.com ¡¾ ¡¿

      html5新增的标签和属性有什么£¿

      收集总结的HTML5的新特性£¬基本除了IE9以下都可以使用¡£

      HTML5语法

      大部分?#26377;?#20102;html的语法不同之处£º开头的 <!DOCTYPE html>

      <html lang="zh-CN">
      <meta charset="utf-8">

      字符编码变得简洁£¬

      不区分大小写£¬

      添加了布尔值£¬类似checked£¬selected

      引号可以省略£¬但是编码规范来说£¬不建议£¬

      有可以省略结束符的标签£¬和完全省略的标签应用¡£

      增加标签£º

      1¡¢结构标签

      2¡¢表单标签

      £¨1£©email£º必须输入邮件£»£¨2£©url£º必须输入url地址£»£¨3£©number£º必须输入数值£»£¨4£©range£º必须输入一定范围内的数值£»£¨5£©Date Pickers£º日期选择器£»

      a.date£º选取日¡¢月¡¢年 b.month£º选取月¡¢年 c.week£º选取周和年 d.time£º选取时间£¨小时和分钟£© e.datetime£º选取时间¡¢日¡¢月¡¢年£¨UTC时间£© f.datetime-local£º选取时间¡¢日¡¢月¡¢年£¨本地时间£©

      £¨6£©search£º搜索常规的文本域£»

      £¨7£©color£º颜色

      3¡¢媒体标签

      £¨1£©video£º视频£¨2£©audio£º音频£¨3£©embed£º嵌入内容£¨包括各?#32622;?#20307;£©£¬Midi¡¢Wav¡¢AU¡¢MP3¡¢Flash¡¢AIFF?#21462;?/p>

      4¡¢其他功能标签

      £¨1£©mark£º标注£¨像荧光?#39318;?#31508;记£©£¨2£©progress£º进度条£»<progress max="最大进度条的值" value="当前进度条的值"> £¨3£©time£º数据标签£¬给搜索引擎使用£»发布日期<time datetime="2014-12-25T09:00">9£º00</time>更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time> £¨4£©ruby和rt£º?#38405;?#19968;个字进行注释£»<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby> £¨5£©wbr£º软换行£¬页面宽度到需要换行时换行£»£¨6£©canvas£º使用JS代码做内容进行图像绘制£»£¨7£©command£º按钮£»£¨8£©deteils £º展开?#35828;¥£»£?£©dateilst£º文本域下拉提示£»£¨10£©keygen:?#29992;Ü£?/p>

      新增的属性£º

      对于js进行添加的属性¡£

      <script defer src=".....js" onload="alert('a')"></script>
      <script async src=".....js" onload="alert('b')"></script>

      如果没有以上两个属性的话£¬执行顺序为先加载£¨下载£©第一个src£¬然后在执行其onload£¬然后在向下?#26469;?#21516;步执行defer属性在h5之前就已经有了£¬输入延迟加载£¨推迟执行£©£¬它会先加载£¨下载£©src中文件内容£¬然后等页面全部加载完成后£¬再加载onload中js.async属性属于异步加载£¬它会在加载src后£¬立即执行onload,同时还会继续加载页面以上执行顺序£¬alert显示会先显示b然后再显示a

      网页中标签中加入小图标的样式代码

      <link rel="icon" href="url..." type="图片名称" sizes="16*16">

      有序列表ol:新增start£¨列表起始值£©£¬reversed£¨是否倒置£©menu?#35828;¥type属性£¨3个?#35828;?#31867;型£©内嵌css样式£º在标签内部来定义一个样式区块£¨scoped£©,只对样式标签内部才有效内嵌框架£ºiframe元素£¬新增了seamless无边距无边框£¬srcdoc定义了内嵌框架的内容

      <iframe>新增属性£º
      <!--seamless定义框架无边框 无边距-->
      <!--srcdoc的显示级别比sandbox高-->
      <!--sandbox用来规定一个内嵌框架的安全级别-->
      <!--sandbox="allow-forms:允许提交表单"-->
      <!--sandbox="allow-origin:允许是相同的源"-->
      <!--sandbox="allow-scripts£º允许执行脚本"-->
      <!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->

      manifest属性£º

      定义页面需要用到的离线应用文件£¬一般放在<html>标签里

      charset属性£º

      meta属性之一,定义页面的字符集

      sizes属性£º

      <link>新增属性£¬当link的rel="icon"时£¬用以设置图标大小

      base属性:

      defer属性£º

      script标签属性£¬表示脚本加载完毕后£¬只有当页面也加载完毕才执行£¨推迟执行£©

      async属性£º

      script标签属性£¬脚本加载完毕后马上执行£¨运行过程中浏览器会解析下面的内容£©£¬即使页面还没有加载完毕£¨异步执行£©

      media属性£º

      <a>元素属性£º表示对何种设备进行优化

      hreflang属性£º

      <a>的属性£¬表示超链接指向的网址使用的语言

      ref属性£º

      <a>的属性,定义超链接是否是外部链接

      reversed属性:

      <ol>的属性£¬定义序号是否倒叙

      start属性£º

      <ol>的属性£¬定义序号的起始值

      scoped属性£º

      内嵌CSS样式的属性£¬定义该样式只局限于拥有该内嵌样式的元素£¬适用于单页开发

      HTML5全局属性£º对任意标签都可以使用的£¬以下6个

      data-yourvalue ¡¢hidden¡¢Spenllecheck¡¢tabindex¡¢contenteditable¡¢desginMode£»

      全局属性£º

      1.可直接在标签里插入的£ºdata-自定义属性名字£» hidden£¨直接放上去就是隐藏£©£» spellcheck="true"£¨语法?#26469;í£©£?tabindex="1"£¨Tab跳转顺序£©£» contenteditable="true"(可编辑状态£¬单击内容£¬可修改)£» 2.在JavaScript里插入的window.document.designMode = 'on'£¨JavaScript的全局属性£¬整个页面的文本都可以编辑了£©£»

      总结

      以上所述是小编给大家介绍的HTML5新增的标签和属性归纳总结£¬希望对大家有所帮助£¬如果大家有任何疑问请给我留言£¬小编会及时回复大家的¡£在此也非常?#34892;?#22823;家对路饭网站的支持£¡

       

      本文地址£º
      Tags£º 标签 HTML5 新增
      编辑£º路饭网
    3. 上一篇£º通过indesign使用色板面板调色的方法
    4. 下一篇£º没有了
    5. 关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
      ×´ÔªºìÐÄË®ÂÛ̳

        1. <output id="wnoop"><sup id="wnoop"></sup></output>
        2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>

            1. <output id="wnoop"><sup id="wnoop"></sup></output>
            2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>