• (1)HTML5的常用新特性你必须知道


    HTML5的常用新特性你必须知道

    1 新的<!DOCTYPE> 声明

    HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

    1.1 常用的声明

    HTML5

    <!DOCTYPE html>
    

    HTML 4.01 混杂模式(该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    

    HTML 4.01 严格模式(该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    2 Figure元素

    figure 标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    <figure>
      <p>黄浦江上的的卢浦大桥</p>
      <p>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</p>
      <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
    

    3 重新定义的small

    small 标签呈现小号字体效果。
    small 标签和它所对应的 big 标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么 small 标签将不起任何作用。
    与 big 标签类似,small 标签也可以嵌套,从而连续地把文字缩小。每个 small 标签都把文本的字体变小一号,直到达到下限的一号字。

    4 Local Storage

    使用Local Storage可以永久存储大的数据片段在客户端(除非主动删除),目前大部分浏览器已经支持,在使用之前可以检测一下window.localStorage是否存在

    5 html5表单新特性

    5.1 autofocus 属性

    autofocus 属性规定在页面加载时,域自动地获得焦点。
    注释:autofocus 属性适用于所有 input 标签的类型。

    User name: <input type="text" name="user_name"  autofocus="autofocus" />
    

    5.2 form 属性

    form 属性规定输入域所属的一个或多个表单。
    注释:form 属性适用于所有 input 标签的类型。
    form 属性必须引用所属表单的 id:

    <form action="demo_form.asp" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" />
    </form>
    Last name: <input type="text" name="lname" form="user_form" />
    

    5.3 height 和 width 属性

    height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
    注释:height 和 width 属性只适用于 image 类型的 input 标签。

    <input type="image" src="img_submit.gif" width="99" height="99" />
    

    5.4 placeholder 属性

    placeholder 属性提供一种提示(hint),描述输入域所期待的值。
    注释:placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password。
    提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

    <input type="search" name="user_search"  placeholder="Search W3School" />
    

    6 Audio支持

    HTML5提供了audio 标签,你不需要再按照第三方插件来渲染音频,大多数现代浏览器提供了对于HTML5 Audio的支持,不过目前仍旧需要提供一些兼容处理,如

    <audio autoplay=”autoplay” controls=”controls”> 
    <source src=”file.ogg” /><!–FF–> 
    <source src=”file.mp3″ /><!–Webkit–> 
    <a href=”file.mp3″>Download this file.</a> 
    </audio> 
    

    7 Mark元素

    把 mark 元素看做是高亮的作用,当我选择一段文字的时候,javascript对于HTML的markup效果应该是这样的:

    <h3> Search Results </h3> 
    <p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p> 
    
  • 相关阅读:
    windows常规
    oracle常规操作
    idea使用
    java-maven
    java-rabbimq
    centos7 rabbitMq 安装教程
    Leetcode 332.重新安排行程
    Leetcode 334.递增的三元子序列
    Leetcode 331.验证二叉树的前序序列化
    Leetcode 330.按要求补齐数组
  • 原文地址:https://www.cnblogs.com/hanqingtao/p/8763029.html
Copyright © 2020-2023  润新知