• 第十课html5 新增标签及属性 html5学习5


    一、常用新增标签

    1、header:定义页面的页眉头部

    2、nav:定义导航栏

    3、footer:定义页面底部,页脚

    4、article:定义文章

    5、section:定义区域

    6、aside:定义侧边

    7、datalist: 定义选项列表 与input搭配使用

    <input type="text" value="请输入明星" list="star"/> input里面用list

    <datalist id="star"> datalist 里面用id 来实现和input连接

      <option>刘德华</option>

      <option>刘青云</option>

      <option>刘亦菲</option>

      <option>张学友</option>

    </datalist>

    8、fieldset: 将表单内的相关元素分组打包 与legend搭配使用

    <fieldset>

      <legend>用户登陆</legend>

      用户名:<input type="text"/>

    </fieldset>

    二、新增的input type属性值

    1、email:邮箱 <input type="email" />

    2、tel:手机

    3、number:数字

    4、url:网址格式

    5、search:搜索框

    6、range: 区域 滑块 滑动条

    7、time:小时分钟

    8、date:年月日

    9、dtaetime:时间

    10、month:月年

    11、week:星期

    12、color:颜色

    三、input 新增属性

    1、placeholder:占位符 提示文本

    2、autofocus:自动获得焦点

    3、multiple:多文件上传 <input type="file" multiple />

    4、autocomplete:自动记录 on开启 off关闭 注:首先需要提交按钮 还需要设置input的name值

    5、required:内容不能为空 必填项

    6、accesskey:规定激活(使元素获得焦点)元素快捷键 采用alt+字母的形式

    如:accesskey="s"

    四、多媒体标签

    embed:标签定义嵌入内容

    audio:音频

    video:视频

    1、<audio src=""></audio>

    属性: autoplay 自动播放

    controls 显示控件

    loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

    为了浏览器兼容,需要准备3种格式的音频文件

    <audio controls autoplay>

      <source src="music.mp3" />

      <source src="music.ogg" />

      <source src="music.wav" />

      您的浏览器不支持音频播放

    </audio>

    2、video

    支持三种视频格式:ogg,mp4,WebM

    <video src=""></video>

    属性: autolay 自动播放

    controls 显示控件

    loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

    width

    height

    为了浏览器兼容,需要准备3种格式的视频文件

    <video controls autoplay>

      <source src="movie.mp4" />

      <source src="movie.ogg" />

      <source src="music.webm" />

      您的浏览器不支持音频播放

    </video>

  • 相关阅读:
    Babel:JavaScript编译器
    Webpack:前端资源模块化管理和打包工具
    springboot之RocketMq实现
    spingboot之Java邮件发送
    第一模块总结
    嵌入式面试题(一)
    C/C++练习题(三)
    ToolTip特效 JavaScript 盗取厦门人才网的特效
    C#后台无刷新页面弹出alert方法
    复制表及其只复制表数据的区别
  • 原文地址:https://www.cnblogs.com/Liuxingtao/p/10416412.html
Copyright © 2020-2023  润新知