zoukankan      html  css  js  c++  java
  • HTML5一些总结

    标签描述
    <article> 定义文档内的文章。
    <aside> 定义页面内容之外的内容。
    <bdi> 定义与其他文本不同的文本方向。
    <details> 定义用户可查看或隐藏的额外细节。
    <dialog> 定义对话框或窗口。
    <figcaption> 定义 <figure> 元素的标题。
    <figure> 定义自包含内容,比如图示、图表、照片、代码清单等等。
    <footer> 定义文档或节的页脚。
    <header> 定义文档或节的页眉。
    <main> 定义文档的主内容。
    <mark> 定义重要或强调的内容。
    <menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。
    <meter> 定义已知范围(尺度)内的标量测量。
    <nav> 定义文档内的导航链接。
    <progress> 定义任务进度。
    <rp> 定义在不支持 ruby 注释的浏览器中显示什么。
    <rt> 定义关于字符的解释/发音(用于东亚字体)。
    <ruby> 定义 ruby 注释(用于东亚字体)。
    <section> 定义文档中的节。
    <summary> 定义 <details> 元素的可见标题。
    <time> 定义日期/时间。
    <wbr> 定义可能的折行(line-break)。

    HTML 5 视频

    如需在 HTML5 中显示视频,您所有需要的是:

    <video width="320" height="240" controls="controls">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

    control 属性供添加播放、暂停和音量控件。

    包含宽度和高度属性也是不错的主意。

    使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

    要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。

    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

    Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

    属性描述
    autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    height pixels 设置视频播放器的高度。
    loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放,即是否循环。
    preload preload

    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。

    src url 要播放的视频的 URL。
    width pixels 设置视频播放器的宽度。

    HTML 5 音频

    <audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
    </audio>
    control 属性供添加播放、暂停和音量控件。

    使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

    要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

    audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

    Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
    拖放(Drag 和 drop)是 HTML5 标准的组成部分。

    HTML 5 应用程序缓存

    • 离线浏览 - 用户可在应用离线时使用它们
    • 速度 - 已缓存资源加载得更快
    • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
    • 浏览器支持

      所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。

    • 如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:

      <!DOCTYPE HTML>
      <html manifest="demo.appcache">
      ...
      </html
    • 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

      manifest 文件的建议的文件扩展名是:".appcache"。

      HTML 5 服务器发送事件

    • 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
    • 实例

      var source=new EventSource("demo_sse.php");
      source.onmessage=function(event)
        {
        document.getElementById("result").innerHTML+=event.data + "<br />";
        };
    • 例子解释:

      • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
      • 每接收到一次更新,就会发生 onmessage 事件
      • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中

    HTML5 Input 类型

     1、<input type="email" name="user_email" />

    2、<input type="url" name="user_url" />

    3、<input type="number" name="points" min="1" max="10" />

    请使用下面的属性来规定对数字类型的限定:

    属性描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值


    4、<input type="range" name="points" min="1" max="10" />

    range 类型用于应该包含一定范围内数字值的输入域。

    range 类型显示为滑动条。可添加的属性值和number相同

    5、<input type="date" name="user_date" />

    输入类型 "month"

    输入类型 "week"

    输入类型 "time"

    输入类型 "datetime"

    输入类型 "datetime-local"

    HTML5 表单属性

    1、

    autocomplete 属性

    autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

    注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

    当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

    2、

    autofocus 属性

    autofocus 属性规定在页面加载时,域自动地获得焦点。

    注释:autofocus 属性适用于所有 <input> 标签的类型。

    实例

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

    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" />
    Last name写在表单之外,但仍然是表单的一部分

    height 和 width 属性

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

    注释:height 和 width 属性只适用于 image 类型的 <input> 标签。

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

    min、max 和 step 属性

    min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

    max 属性规定输入域所允许的最大值。

    min 属性规定输入域所允许的最小值。

    step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。

    注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。

    下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):

    实例

    Points: <input type="number" name="points" min="0" max="10" step="3" />

    multiple 属性

    multiple 属性规定输入域中可选择多个值。

    注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。

    实例

    Select images: <input type="file" name="img" multiple="multiple" />

    multiple 属性

    multiple 属性规定输入域中可选择多个值。

    注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。

    实例

    Select images: <input type="file" name="img" multiple="multiple" />

    placeholder 属性

    placeholder 属性提供一种提示(hint),描述输入域所期待的值。

    注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

    提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

    实例

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

    required 属性

    required 属性规定必须在提交之前填写输入域(不能为空)。

    注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

    实例

    Name: <input type="text" name="usr_name" required="required" />
  • 相关阅读:
    KMP
    图论知识,博客
    POJ 2318/2398 叉积性质
    CF821 E. Okabe and El Psy Kongroo 矩阵快速幂
    CF821 D. Okabe and City 图 最短路
    CF821 C. Okabe and Boxes 栈模拟
    CF821 A. Okabe and Future Gadget Laboratory 水
    Atcoder arc077 D
    Atcoder #017 agc017 D.Game on Tree 树上NIM 博弈
    Atcoder #017 agc017 B.Moderate Differences 思维
  • 原文地址:https://www.cnblogs.com/blesstian/p/6486079.html
Copyright © 2011-2022 走看看