HTML5新增标记

avatar 2017年02月21日13:38:18 1 3235 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此

HTML5简介


HTML5是新一代的HTML。 HTML5目前主要应用在手机端，在PC端最新浏览器已经开始支持了，但还不全面。 HTML5是由W3C和WHATWG合作的结果。 W3C是万维网联盟，主要制作各种互联网标准的国际组织。如：XHTML、CSS、JavaScript、XML、AJAX等。 主要想发展XHTML2.0。 WHATWG应用程序工作组，是由Firefox、Chrome、苹果、safari、IE等浏览器公司成立了一个机构。主要面向应用程序的完善和开发、表单的扩展和完善。如：在HTML5中使用<video>标记，直接可以播放视频。 <input type = “email” name = “email” /> 邮箱验证 <input type = “color” name = “color” /> <input type = “date” name = “date” />

HTML5支持度测试


http://chrome.360.cn/test/html5/index.html

浏览器市场份额统计


http://tongji.baidu.com/data/browser

文档类型定义


XHTML1.0中的文档类型定义有三种：过渡型、严格型、框架型。 HTML5中的文档类型定义：<!DOCTYPE html> 就连IE6最不兼容的浏览器，也支持这个类型定义。

网页字符集设置


<meta charset= “utf-8”>

页面结构标记


  • <header></header>网页头部
  • <nav></nav>导航栏、菜单栏
  • <footer></footer>页脚



文章相关标记


  • <article>：代表一篇文章。
  • <aside>：侧边栏
  • <section>：区块。主要用于排版网页，功能与<div>一样。
  • <details>：一个标题的简介。
  • <summary>标题的内容，与<details>配合使用。



其它标记


  • <mark>：重点标注。
  • <progress>：进度条
    • max：最大值
    • value：当前值



  1. <progress id="pro" style="width:500px;" max="100" value="0"></progress>
  2. <script type="text/javascript">
  3. //获取id=pro对象
  4. var pro = document.getElementById("pro");
  5. var i = 0;
  6. window.setInterval("start2()",40);
  7. function start2()
  8. {
  9.        pro.value = i;
  10.        i++;
  11.        if(pro.value==pro.max)
  12.        {
  13.               i = 0;
  14.        }
  15. }
  16. </script>


音频标记<audio>属性


  • 语法格式：<audio>对不起，你浏览器不支持audio元素。</audio>
  • 常用属性
    • Controls：是否显示控制面板
    • Autoplay：是否自动开始
    • Src：播放文件路径。支持的文件格式有：mp3、ogg、wav
    • Loop：是否循环




<audio controls="controls" autoplay="autoplay" src="images/hudie.mp3">对不起，你的浏览器不支持audio元素！</audio>

视频标记<vedio>属性


  • 语法格式：<vedio>对不起，你的浏览器不支持vedio！</vedio>
  • 常用属性
    • Controls：是否显示控制面板
    • Autoplay：是否自动开始
    • Src：视频路径。支持的文件格式：ogg、mp4
    • Loop：是否循环
    • Width：宽度
    • Height：高度
    • Poster：第一帧的画面。默认是视频的第一帧。




<video src="images/mov_bbb.ogg" poster="images/baobao.jpg" controls="controls" width="400" height="300"></video>

表单中新增的属性


  • Autocomplete：自动完成，取值：on、off
  • Autofocus：自动获得焦点


表单input元素type属性的值


  • tel：电话验证
  • Email：邮箱验证
  • url：网址验证
  • color：颜色拾色器
  • date：日历
  • month：选择月份
  • time：时间
  • datetime：日期时间

历史上的今天
二月
21日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0