zoukankan      html  css  js  c++  java
  • 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一、html5新增标签

    1.结构性标签

    header 定义网页的头部

    nav 定义网页的导航

    footer 定义网页的底部

    section 定义网页的某个区域

    article 定义网页中的一篇文章

    aside 定义网页的侧边栏

    hgroup 将网页某个区域的标题进行组合

    figure 将网页中的元素进行组合

    figcaption 定义figure的标题

    dialog 定义一个对话框

    2.定义带有记号的文本语法: <mark>带有记号的文本</mark>

    3.定义一定范围内的标量或测量语法:<meter min="0" max="100" value="10"></meter>

    4.定义一定范围内的进度或进程语法:<progress min="0" max="100" value="1"></progress>

    5.音频语法:

    <audio controls autoplay loop>
    <source src="1.mp3" type="audio/mp3"/>
    ...
    Your browser does not support the element
    </audio>

    注:

    a)controls 添加一个音频控制条

    b) autoplay 设置自动播放

    c) loop 设置循环播放

    d) src 引入音频文件

    注:常见的音频格式:mp3,wav,ogg

    6.视频语法:

    <video controls width="500" height="300" autoplay loop poster="1.jpg">
    <source src="1.mp4" type="video/mp4"/>
    ...
    Your browser does not support the element
    </video>

    注:

    a) width 定义视频区域的宽度

    b) height 定义视频区域的高度

    c) poster 在播放前或快进时显示的一张图片

    d) controls,autoplay,loop,src同audio中的这些属性

    注:常见的视频格式:mp4,webm,ogg


     

    二、h5表单新增type属性值

    1.type="email"  限制用户输入必须为邮箱(必须含有@,并且@前后内容不能为空)

    2.type="url"    限制用户输入必须为网址(必须含有http:)

    3.type="number" 限制用户输入必须为数字

    eg: <input type="number" value="1" min="1" max="10" step="2"/>

    注:step用来设置每次递增和递减的数量,默认为1

    4.type="range"  产生一个滑动条的效果

    5.type="color"  产生一个颜色选择面板

    6.type="date"  产生一个选择日期的面板(年/月/日)

    7.type="time"  选择时间(时:分)

    8.type="month"  选择年月

    9.type="week"  选择某一日期是这一年的第几周


     

    三、h5新增表单新属性

    1.required限制用户输入不能为空,必填

    eg: <input type="text" required/>

    2.placeholder给input控件添加一个默认提示信息

    3.autofocus页面加载完成后自动聚焦到某一个input控件

    4.pattern限制用户输入的内容要匹配相应的正则表达式

    eg: <input type="text" pattern="[a-zA-Z0-9]{6,16}"/>

    5.min/max 限制输入的最大,最小值

    eg: <input type="number" min="1" max="10"/>

    6.step设置number类型和range类型每次递增递减的值

    7.产生一个具有搜索意义的表单

    a) type="search" 具有搜索意义的input控件

    b) list 关联一个datalist的下拉提示单

    c) datalist 数据列表下拉菜单

    eg: <input type="search" list="data"/>

    <datalist id="data">
    <option>aaa</option>
    <option>bbb</option>
    ...
    </datalist>

    注:type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能

    8.novalidate取消表单验证

    eg: <form novalidate="novalidate">...</form>

    Get busy living or get busy dying
  • 相关阅读:
    每天一道leetcode 搜索旋转排序数组(二分法)
    每天一道leetcode 统计重复个数(循环节)
    python3 简单web目录扫描脚本(后续更新完整)
    每天一道leetcode 盛最多水的容器 (双指针)
    python3 语法学习 类和继承
    python3 语法学习 文件操作及os方法
    python3 语法学习 输入输出美观
    TCP/IP 协议:IP 协议
    TCP/IP 协议:链路层概述
    Http权威指南(二)---读书笔记
  • 原文地址:https://www.cnblogs.com/witkeydu/p/8197489.html
Copyright © 2011-2022 走看看