HTML5学习笔记

该文章为 菜鸟教程(runoob.com) 中关于HTML5部分的学习笔记。

HTML5简介

HTML5是下一代HTML标准,HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体

  • HTML5总览介绍、HTML5新元素
  • HTML5标签列表(功能排序)

HTML5绘制图形

HTML5 Canvas

HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript) 来完成。

HTML5 内联 SVG

SVG:可伸缩矢量图形(Scalable Vector Graphics),在放大或改变尺寸的情况下其图像质量不会有损失。是万维网联盟的标准。使用 XML 格式定义图形。

HTML5学习笔记_第1张图片

HTML5多媒体

HTML5 Video(视频)

  • 元素提供了 播放、暂停和音量控件来控制视频。

  • 提供了 width 和 height 属性控制视频的尺寸。如果没有设置这些属性,页面就会根据原始视频的大小而改变。

  • 使用 DOM 进行控制: 元素的方法、属性和事件可以使用JavaScript进行控制。

  • control 属性供添加播放、暂停等控件。

  • 视频格式:MP4,WebM, Ogg。

    
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    video>
    

HTML5 Audio(音频)

和 video 大致相同。音频格式:MP3, Ogg, Wav。

HTML5表单

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

新的输入类型(type):color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week。

HTML5 新的表单元素

  • :规定输入域的选项列表。使用 元素的列表属性与 元素绑定。
    <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    datalist>
    
  • :提供一种验证用户的可靠方法,用于表单的密钥对生成器字段。
    当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key) 存储于客户端,公钥(public key) 则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)
  • :用于不同类型的输出,比如计算或脚本输出。

HTML5表单属性

可能常用的属性如下:

  • / autocomplete 属性:自动完成功能。
  • novalidate 属性:一个 boolean(布尔) 属性,规定在提交表单时不应该验证 form 或 input 域。
  • formaction 属性:用于描述表单提交的URL地址,会覆盖 元素中的action属性。用于 type=“submit” 和 type=“image”。
  • list 属性:list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
  • min, max和step 属性:min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
  • multiple 属性:一个 boolean 属性,规定元素中可选择多个值。适用于 email 和 file 类型。
  • pattern 属性:描述一个正则表达式用于验证元素的值。适用的标签:text, search, url, tel, email, 和 password。
  • placeholder 属性:提供一种提示(hint),描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。
  • required 属性:一个 boolean 属性,规定必须在提交之前填写输入域(不能为空)。

HTML5语义元素

语义= 意义,语义元素 = 有意义的元素

  • 无语义 元素实例:
    —— 无需考虑内容。
  • 语义元素实例: , , and —— 清楚的定义了它的内容。
    HTML5学习笔记_第2张图片

    HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式。
    数据以 键/值 对存在,web网页的数据只允许该网页访问使用。

    客户端存储数据的两个对象为:

    • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
    • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
      HTML5学习笔记_第3张图片

    HTML5 Web SQL 数据库

    HTML5学习笔记_第4张图片
    插入INSERT,读取SELECT,删除DELETE,更新UPDATE等等。

    HTML5其他新特性

    • MathML:HTML5 可以在文档中使用 MathML 元素(数学标记语言),对应的标签是
    • 拖放(Drag 和 Drop)
    • HTML5 Geolocation(地理定位)。(获取当前位置、地图、用于GPS等等功能)
    • HTML5 Web Workers
    • HTML5 服务器发送事件(Server-Sent Events)
    • HTML5 WebSocket

    具体功能的熟悉还需要相关的练习来掌握。

    你可能感兴趣的:(#,HTML,html5,html)