zoukankan      html  css  js  c++  java

  • HTML5笔记（一）

    一.HTML5 简介

    HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

    HTML5的设计目的是为了在移动设备上支持多媒体。

    HTML5 是下一代 HTML 标准。

    1.HTML5 <!DOCTYPE>

    <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

    <!DOCTYPE html>

    2.最小的HTML5文档

     
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>文档标题</title>
    6. </head>
    8. <body>
    9. 文档内容......
    10. </body>
    12. </html>
    注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

    二.HTML5已移除元素

    以下的 HTML 4.01 元素在HTML5中已经被删除:

    • <acronym>
    • <applet>
    • <basefont>
    • <big>
    • <center>
    • <dir>
    • <font>
    • <frame>
    • <frameset>
    • <noframes>
    • <strike>
    • tt

    三.HTML5 浏览器支持

    最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

    IE9 以下版本浏览器兼容HTML5的方法，使用菜鸟教程的静态资源的html5shiv包：

     
    1. <!--[if lt IE 9]>
    2.     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    3. <![endif]-->
    以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。（不要用国外的shiv,Google 资源库在国内不稳定）.
    针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
    html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。


    载入后，初始化新标签的CSS：

     
    1. /*html5*/
    2. article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

    四.HTML5新增语义元素

    1.新多媒体元素

    • <audio>定义音频内容
    • <video>定义视频（video 或者 movie）
    • <source>定义多媒体资源 <video> 和 <audio>
    • <embed>定义嵌入的内容，比如插件。
    • <track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

    2.新表单元素

    • <datalist>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
    • <keygen>规定用于表单的密钥对生成器字段。
    • <output>定义不同类型的输出，比如脚本的输出。

    3.<canvas> 新元素

    • <canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

    4.新的语义和结构元素

    • <article>定义页面独立的内容区域。
    • <aside>定义页面的侧边栏内容。
    • <bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。
    • <command>定义命令按钮，比如单选按钮、复选框或按钮
    • <details>用于描述文档或文档某个部分的细节
    • <dialog>定义对话框，比如提示框
    • <summary>标签包含 details 元素的标题
    • <figure>规定独立的流内容（图像、图表、照片、代码等等）。
    • <figcaption>定义 <figure> 元素的标题
    • <footer>定义 section 或 document 的页脚。
    • <header>定义了文档的头部区域
    • <mark>定义带有记号的文本。
    • <meter>定义度量衡。仅用于已知最大和最小值的度量。
    • <nav>定义导航链接的部分。
    • <progress>定义任何类型的任务的进度。
    • <ruby>定义 ruby 注释（中文注音或字符）。
    • <rt>定义字符（中文注音或字符）的解释或发音。
    • <rp>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
    • <section>定义文档中的节（section、区段）。
    • <time>定义日期或时间。
    • <wbr>规定在文本中的何处适合添加换行符。
  • 相关阅读:
    为什么和什么是 DevOps？
    使用jmeter 上传文件
    jmeter 获取执行脚本的路径
    随笔（九）
    随笔（八）
    随笔（七）
    随笔（六）
    随笔（五）
    随笔（四）
    随笔（三）
  • 原文地址：https://www.cnblogs.com/zhaowy/p/8400278.html
Copyright © 2011-2022 走看看