• HTML5系列:HTML5与HTML4的区别


    1. 语法的改变

    1.1 DOCTYPE声明

      DOCTYPE声明在HTML文件中必不可少,位于文件第一行。

      HTML4中声明方法:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      HTML5中声明方法:

    <!DOCTYPE html>

    1.2 字符编码

      HTML4指定方式:

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

      HTML5指定方式: 

    <meta charset="utf-8" />

    1.3 元素标记

      不允许写结束标记的元素:br、embed、hr、img、input、link、meta、param。

      不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式,只允许使用<元素/>。

      示例:

      错误方式:<br></br>    正确方式:<br/>

    1.4 具有boolean值的属性

    <!--只写属性不写属性值,属性为true-->
    <input type="checkbox" checked />
    <!--不写属性,属性为false-->
    <input type="checkbox" />
    <!--属性值=属性名,属性为true-->
    <input type="checkbox" checked="checked" />
    <!--属性值=空字符串,属性为true-->
    <input type="checkbox" checked="" />

    2. HTML5新增元素

    2.1 HTML5新增结构元素

      在HTML5中新增的结构元素:

      section元素

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

    <section></section>

      article元素

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

    <article></article>

      aside元素

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

    <aside></aside>

      header元素

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

    <header></header>

      hgroup元素

      hgroup元素用于对整个页面中一个内容区块的标题进行组合。

    <hgroup></hgroup>

      footer元素 

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

    <footer></footer>

      section、article、aside、header、hgroup、footer都对应于HTML4中的div元素。

      nav元素

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

      HTML5示例:

    <nav></nav>

      HTML4示例:

    <ul></ul>

      figure元素

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

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

    2.2 HTML5新增的其他元素

      video元素

      video元素定义视频。

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

      audio元素 

      audio元素定义音频

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

       embed元素

      embed元素用于插入各种多媒体,格式可以是Midi、wav、MP3等。

    <embed src="" />

      mark元素

      mark元素主要用来在视觉上向用户呈现需要突出或高亮显示是文字。mark元素的一个比较经典的应用是在搜索结果中向用户高亮显示搜索关键词,与HTML4中span使用方式相同。

    <mark></mark>

      time元素

      time元素表示日期、时间或同时表示日期时间。与HTML4中span使用方式相同。

    <time></time>

      canvas元素

      canvas元素表示图形,如图表或图像。这个元素本身没有行为,仅提供一块画布,它把一个绘制API展现给JavaScript,以使JavaScript能够进行绘制。

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

      details元素

      details元素表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用。summary元素提供标题或图例。summary元素是details元素的第一个子元素。

    <details>
        <summary>HTML5</summary>
        Content
    </details>

      datalist元素

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

    <datalist></datalist>

      datagrid元素

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

    <datagrid></datagrid>

      menu元素

      menu元素表示菜单列表。

    <menu>
        <li></li>
        <li></li>
    </menu>

    2.3 新增input元素的类型

      email

      email类型表示必须输入Email的文本输入框。

    <input type="email" />

      url

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

      number

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

      range

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

      Date Pickers

      date 选取日、月、年

      month 选取月、年

      week 选取周、年

      time 选取时间(小时、分钟)

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

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

    3. HTML5新增属性

    3.1 新增表单属性

       autofocus属性

      对input(type=text)、select、textarea元素设置autofocus属性,让元素在页面打开时自动获得焦点。

    <input type="text" autofocus />

      placeholder属性

      对input(type=text)、textarea元素设置placeholder属性,提示用户可以输入的内容。

    <input type="text" placeholder="请输入" />

      required属性

      对input(type=text)、textarea元素设置required属性,检查必须输入。

    <input type="text" required="required" />
  • 相关阅读:
    XMLHttpRequest 跨域问题
    jQuery+AJAX实现纯js分页功能
    PHP验证码
    PHP基础
    UIView易忽略点
    UITableView  优化
    SpringBoard界面层级结构分析
    给App在“设置”中添加选项(类似招行App)
    通过USB线SSH登陆到越狱手机上(命令行模式的),不通过wifi
    在IOS项目中使用Lua
  • 原文地址:https://www.cnblogs.com/libingql/p/4394272.html
Copyright © 2020-2023  润新知