ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5新特性

2021-01-13 23:59:33  阅读:14  来源: 互联网

标签:控件 浏览器 标签 特性 表单 HTML5 播放 属性


HTML5新特性

文章内容输出来源:拉勾教育大前端就业急训营

HTML5优势

  1. 提高可用性和用户体验
  2. 更好的语义化标签
  3. 更多的多媒体元素
  4. 替代flash、SilverLight
  5. 对于搜索引擎优化SEO友好
  6. 多应用于移动应用程序和游戏
  7. 可移植性好

新增语义化标签

标签名称
<header>头部标签
<nav>导航标签
<main>主体部分标签
<article>独立的内容标签
<section>区域标签,与div类似,但section语义化
<aside>侧边栏标签
<footer>脚部标签

多媒体音频标签<audio>

属性名属性值作用
srcrul音频文件的路径
controlscontrols显示控件,即播放条
autoplayautoplay自动播放(在Chrome中无效)
looploop循环播放
preloadpreload自动预加载,若设置了autoplay,那么preload无效

因为<audio>标签中音频文件的三种格式(mp3、ogg、wav)并不是每个浏览器都支持的,所以需要使浏览器兼容,方法如下:

	<audio controls="controls">
        <source src="audio1.mp3" type="audio/mpeg">
        <source src="audio1.ogg" type="audio/ogg">
        <!-- 当用户的浏览器两个格式的文件都不支持时,需要作出提示 -->
        您浏览器版本过低,不支持音频播放
    </audio>

多媒体视频标签<video>

属性名属性值作用
srcrul视频文件的路径
controlscontrols显示控件,即播放条
autoplayautoplay自动播放(Chrome在muted的情况下支持自动播放)
looploop循环播放
preloadauto/none自动预加载,若设置了autoplay,那么preload无效
mutedmuted静音播放
posterImgurl视频加载时显示的图片
widthpx值视频窗口的宽度
heightpx值视频窗口的高度

因为<video>标签中音频文件的三种格式(mp4、ogg、webm)并不是每个浏览器都支持的,所以需要使浏览器兼容,方法如下:

	<video controls="controls">
        <source src="video.mp4" type="audio/mp4">
        <source src="video.ogg" type="audio/ogg">
        <!-- 当用户的浏览器两个格式的文件都不支持时,需要作出提示 -->
        您浏览器版本过低,不支持视频播放
    </video>

新增表单标签

  • 新增的 <input> type属性值
    type属性值作用
    email输入邮箱类型
    url输入url类型
    date输入年月日
    time输入时间类型
    month输入年月
    week输入年周
    number输入数字类型(可设最大值max="",最小值min="")
    range滑动条
    tel手机号码
    search搜索框
    color颜色选择表单
  • <datalist>标签
    • 规定了<input>元素可能的选项列表
    • 语法规则:需要给datalist标签添加id属性,给关联的input标签添加属性值为datalist的id属性值的list属性
        <input type="text" list="city-list">
        <datalist id="city-list">
            <option value="广州"></option>
            <option value="深圳"></option>
            <option value="上海"></option>
        </datalist>
    
  • 新增的表单控件属性
    属性名属性值作用
    requiredrequired将表单控件设置为必填项
    placeholder提示文本表单的提示信息,存在value时,placeholder的文本不显示
    autofocusautofocus自动聚焦
    autocompleteoff/on控件需要有name属性且之前提交过数据,autocomplete才能起作用
    multiplemultiple可多选文件提交

标签:控件,浏览器,标签,特性,表单,HTML5,播放,属性
来源: https://blog.csdn.net/m0_44994424/article/details/112585359

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有