HTML5新元素、新属性

2020-08-18 06:31:45 阅读：261 来源： 互联网

标签：right color 100px height video HTML5 新元素属性

1、calc（100% - 像素）：计算一行另外一个盒子的宽度。

  <style>
    .left {
        width: calc(100% - 100px);
        height: 100px;
        background-color: darkmagenta;
        float: right;
    }

    .right {
        width: 100px;
        height: 100px;
        float: right;
        background-color: darkorange;
    }
</style>

2、消除浮动，给影响到的元素加clear：both.

3、新增元素以及属性：

  1、datalist 相当于之前的select 其id跟input输入框的list的值一样，才能进行使用。
  2、placeholder  占位符——输入框一开始灰色的提示
  3、autofocus    获取焦点
  4、autocomplete 自动完成，有两个值：on和off
<form action="" method="GET">
    <input list="browsers" placeholder="Chrome" autofocus>
    <datalist id="browsers">
        <option value="Internet Explorer" ></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>
    <input type="submit">
</form>

  5、required 必填项
  6、novalidate 关闭验证

  7、表单input输入类型
        1、email  只能检测是否有@和@后面有没有内容，邮箱具体对不对不检测
        2、url   协议域名 都要写
        3、number  只能输入数字
        4、search  搜索框
        5、color 拾色器
        6、time 时间
        7、date 年月日
        8、week   第几周
        9、month  几月
 `<form action="" method="get" novalidate>
    <!-- 时间 -->
    <input type="time">
    <!-- 拾色器 -->
    <input type="color" name="" id="">
    <!-- 年月日 -->
    <input type="date">
    <!-- 第几周 -->
    <input type="week">111
    <!-- 几月 -->
    <input type="month">
    <!-- 数字 -->
    <input type="number">
    <!-- 普通输入框 -->
    <input type="text">
    <!-- 搜索框 -->
    <input type="search">
</form>`  

  8、视频video、音频audio

  两者都有的属性：controls、loop、autoplay、muted。
  有paused属性，但是没有play属性。
  有pause和play方法
  video还有width和height属性，可以进行设置。本身的元素属性不需要加px。
  source的引入防止浏览器不认识该格式。

  video 支持的格式：MP4、ogg、webm
  audio支持的格式：MP3、ogg、amr、wav、wma

标签：right,color,100px,height,video,HTML5,新元素,属性
来源： https://www.cnblogs.com/qianqiang0703/p/13515824.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5新元素、新属性