zoukankan      html  css  js  c++  java
  • 第1章 —— HTML 5 与 HTML 4的区别

    一、语法的改变

    (1) HTML 5中的标记方法

    1.  内容类型

    HTML 5的文件扩展符不变,仍旧是.html或者.htm。

    2. DOCTYPE声明

    在HTML 5中,刻意的不使用版本号,一份文档将会适用所有版本的HTML。HTML 5中的声明方式(不区分大小写):

    <!DOCTYPE html>

    3. 指定字符编码

    <meta charset="UTF-8">

    这种编码书写不可与之前的HTML 4书写同时使用,从HTML 5开始,对于文件的字符编码推荐使用UTF-8。

    (2) HTML 5保证兼容性

    HTML 5语法是为了保证与之前的HTML语法能够达到最大限度的兼容而设计的。

    (3) 新增的元素和废除的元素

    ① 新增的结构元素

    1. section元素

    section元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。

    <section>...</section>

    2. article元素

    article元素表示页面中的一块与上下文不相关的独立内容,譬如引入博客中的一篇文章或报纸中的一篇文章。

    <article>...</article>

    3. aside元素

    aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。

    <aside>...</aside>

    4. header元素

    header元素表示页面中一个内容区块或整个页面的标题。

    <header>...</header>

    5. footer元素

    footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。

    <footer>...</footer>

    6. nav元素

    nav表示页面中导航链接的部分。

    <nav>...</nav>

    7. figure元素

    figure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

    <figure>
      <figcaption>...</figcaption>
      <p>...</p>
    </figure>

    8. main元素

    main元素表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

    <main>...</main>

     ② 新增的其他元素

    1. video元素

    video元素用于定义视频,比如电影片段或其他视频流。

    <video src="" controls="controls">video元素</video>

    2. audio元素

    audio元素用于定义音频,比如音乐或其他音频流。

    <audio src="">audio元素</audio>

    3. embed元素

    embed元素用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。

    <embed src="" type="">

    4. mark元素

    mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词。

    <mark></mark>

    5. progress元素

    progress元素表示运行中的进程,可以使用progress元素来显示JavaScript中耗费时间的函数的进程。

    <progress></progress>

    6. meter元素

    meter元素代表度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在min/max属性中定义。

    <meter></meter>

    7. time元素

    time元素用于表示日期或时间

    <time></time>

    8. ruby元素

    ruby元素表示ruby注释。

    9. rt元素

    rt元素表示字符(中文注音或字符)的解释或发音。

    10. rp元素

    rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

    11. wbr元素

    wbr元素表示软换行。wbr和br的区别在于:br元素是此处必须换行,而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时,不进行换行,而当宽度不够时,主动在此处换行。但是对于中文,貌没有多大的用处。

    12. canvas元素

    canvas元素表示图形,比如图表和其他图像。这个元素本身没有什么行为,但是会提供一块画布,把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。

    <canvas id="myCanvas" width="200" height="200"></canvas>

    13. command元素

    command元素表示命令按钮,比如单选按钮、复选按钮或按钮。

    14. details

    details元素表示用户要求得到并且可以得到的细节信息。可以和summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。

    <details>
        <summary>HTML5</summary>
        I have a pen.
    </details>

    15. datalist元素

    datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

    <datalist></datalist>

    16. datagrid元素

    datagrid元素表示可选数据的列表,它以树形列表的形式显示。

    17. keygen元素

    keygen元素表示生成密钥。

    18. output元素

    output元素表示不同类型的输出。

    19. source元素

    source为媒介元素,定义媒介资源。

    20. menu元素

    menu元素表示菜单列表。当希望列出表单控件时使用该标签。

    21. dialog元素

    dialog元素表示对话框。

    ③ 新增的input元素类型

    email: email类型表示必须输入e-mail地址的文本输入框。

    url: url类型表示必须输入URL地址的文本输入框。

    number: number类型表示必须输入数值的文本输入框。

    range: range类型表示必须输入一定范围内数字值的文本输入框。

    date: 选取日、月、年。

    month: 选取月、年。

    week: 选取周、年。

    time: 选取时间(小时和分钟)。

    datetime: 选取时间、日、月、年(UTC时间)。

    datetime-local: 选取时间、日、月、年(本地时间)。

  • 相关阅读:
    OpenStack--Rabbitmq组件消息队列
    Redis-主从
    haproxy mycat mysql 读写分离MHA高可用
    mysql小白系列_14 线上故障分析与排错
    mysql小白系列_13 Online DDL
    mysql小白系列_12 sysbench
    mysql小白系列_11 MHA补充
    mysql小白系列_11 MHA
    mysql小白系列_10 mysql主从复制原理
    mysql小白系列_09 mysql性能优化关键点
  • 原文地址:https://www.cnblogs.com/luohaoran/p/6003687.html
Copyright © 2011-2022 走看看