zoukankan      html  css  js  c++  java
  • HTML5基础-标签和表单

    html5基础

    Html基础

    1、什么是HTML5

      HTML5是新一代HTML标准。

    2HTML,HTML4.01的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。

    3HTML5HTML最新的修订版本,201410月由万维网联盟(W3C)完成标准制定。

    4HTML5的设计目的是为了在移动设备上支持多媒体。

    5HTML5简单易学。

    (2)HTML5的改进

    1、新元素2、新属性3、完全支持CSS34VideoAudio52D/3D制图6、本地存储7Web应用

    (3)HTML5的优点

    1、提高可用性和改进用户的友好体验。

    2、有几个新的标签,这将有助于开发人员定义重要的内容。

    3、可以给站点带来更多的多媒体元素(视频和音频)

    4、可以很好的替代FLASHSilverlight

    5、将被大量应用于移动应用程序和游戏。

    6、可移植性好。

    HTML5中新增的元素

    (1)<canvas>新元素

    <canvas>标签定义图形,比如图表和其他图像。该标签基于JavaScript的绘图API

    (2)、新多媒体元素

    <audio>定义音频内容

    <video>定义视频(video或者movie

    <source>定义多媒体资源<video><audio>

    (3)、新表单元素

    <datalist>定义选项列表。请与input元素配合使用该元素,来定义input可能的值。

    <output>定义不同类型的输出,比如脚本的输出。

    (4)、新的语义和结构元素

    HTML5提供了新的元素来创建更好的页面结构:

    <article>定义页面独立的内容区域。

    <aside>定义页面的侧边栏内容。

    <command>定义命令按钮,比如单选按钮、复选框或按钮

    <details>用于描述文档或文档某个部分的细节

    <dialog>定义对话框,比如提示框

    <summary>标签包含details元素的标题

    <footer>定义sectiondocument的页脚。

    <header>定义了文档的头部区域

    <nav>定义导航链接的部分。

    <progress>定义任何类型的任务的进度。

    <section>定义文档中的节(section、区段)。

    .HTML5中移出的标签

    美元符号定义jQuery

    以下的HTML4.01元素在HTML5中已经被删除:

    <acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>

    <datalist>元素

    <datalist>元素规定输入域的选项列表,<datalist>属性规定forminput

    应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中

    显示填写的选项:使用<input>元素的列表属性与<datalist>元素绑定。

    <input list="browsers">

      <datalist id="browsers">

        <option value="InternetExplorer">

        <option value="Firefox">

        <option value="Chrome">

        <option value="Opera">

        <option value="Safari">

      </datalist>

    Output 输出结果 name 你要操作的表单元素的变量,for:定义一个或多个元素的输出域的元素。

    新的表单属性

    (1)placeholder占位符

    (2)autofocus获取焦点

    autofocus属性是一个boolean属性.

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

    (3)autocomplete自动完成,用于表单元素,也可用于表单自身

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

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

    提示:autocomplete属性有可能在form元素中是开启的,而在input元素中是关闭的。

    注意:autocomplete适用于<form>标签,以及以下类型的<input>标签:text,search,url,

    telephone,email,password,datepickers,range以及color

    (4)name指定表单项属于哪个form,处理复杂表单时会需要

    (5)novalidate关闭验证,可用于<form>标签

    novalidate属性是一个boolean(布尔)属性.

    novalidate属性规定在提交表单时不应该验证forminput域。

    (6)required验证条件,(必填项)

    required属性是一个boolean属性.

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

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

    datepickers,number,checkbox,radio以及file

    (7)pattern正则表达式验证表单

    pattern属性描述了一个正则表达式用于验证<input>元素的值。

    注意:pattern属性适用于以下类型的<input>标签:text,search,url,tel,email,password.

    提示:是用来全局title属性描述了模式.

    提示:您可以在我们的JavaScript教程中学习到有关正则表达式的内容

    (8)maxlength最大长度minlength最小长度   一般用于text文本属性

    Onkeydown onkeypress区别

    Keydown按键的范围大

     .表单新增的事件

    oninput用户输入内容时触发,可用于移动端输入字数统计

    document.getElementById("name").oninput=function(){

    console.log(this.value);

    }

    document.getElementById("name").onkeyup=function(){

    console.log("---"+this.value);

    }

    Paused 暂停 video mp4

    多媒体

    (1)Audio(音频)

    controls如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。

    loop如果出现该属性,则每当音频结束时重新开始播放。

    muted如果出现该属性,则音频输出为静音。

    Paused 暂停

    (2)Video(视频)

    controls如果出现该属性,则向用户显示控件,比如播放按钮。

    height设置视频播放器的高度。

    loop如果出现该属性,则当媒介文件完成播放后再次开始播

    放。
    muted如果出现该属性,视频的音频输出为静音。
    width设置视频播放器的宽度。

    Paused 暂停

  • 相关阅读:
    java实现httpclient 访问
    推荐博文
    Running With xpi
    1 Spring MVC 原理
    windows服务相关
    求职面试三部曲
    使用mvn插件执行工程单元测试OOM的解决办法
    maven-surefire插件问题
    小问题
    NFA到DFA实例
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13520584.html
Copyright © 2011-2022 走看看