H5

1.H5属性双色字

//-------------------------------------------------
 <style>
        .text{
            position: relative;
            display: inline-block;
            font-size: 80px;
            color: deepskyblue;
            overflow: hidden;
            white-space: pre;
        }
        .text:before{
            display: block;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            /*对伪元素才能使用,attr方法实现读取数据*/
            content: attr(data-content);
            overflow: hidden;
            color: lightcoral;
        }
    </style>

//-----------------------------------------------
<span class="text" data-content="厚">厚</span>
<span class="text" data-content="德">德</span>
<span class="text" data-content="载">载</span>
<span class="text" data-content="物">物</span>

2.表单

//------------------------------------------------------
eg:
<fieldset class="chengji">
    <legend class="title">学生档案</legend>
    <label>姓名:<input type="text" required/></label>
    <label>手机号码:<input type="tel" required/></label>
    <label>邮箱地址:<input type="email" required/></label>
    <label>所属学院:<input type="text" value="Android" list="school" /></label>
    <datalist id="school">
        <option value="java">java</option>
        <option value="web">web</option>
        <option value="UI">UI</option>
    </datalist>
    <label>入学成绩:<input type="text" list="chengji" /></label>
    <datalist id="chengji">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </datalist>
    <label>
        基础水平:<meter value="20" max="100" min="0"></meter>
    </label>
    <label>
        <!--date设置value时格式 XXXX-XX-XX-->
        入学时间:<input type="date" value="2016-01-01"/>
    </label>
    <label>
        <!--type=month不包括日,只有年月-->
        毕业时间:<input type="month" value="2016-05-01" />
    </label>
    <label>
        url:<input type="url" name="url" />
    </label>
    <label>
        课程精度<progress value="20" min="0" max="100"></progress>
    </label>
    <label>
        range:<input type="range" name="range" value="0" min="0" max="300" step="20" />
    </label>
    <label>
        color:<input type="color" name="color" />
    </label>
    <label><input type="submit" value="保存"/></label>
</fieldset>
表单事件
//-------------------------------------------------------
    <script type="text/javascript">
        var txt = document.getElementById('txt');
        var tt = document.getElementById("tt");
        var num = 0;
        txt.oninput=function(){/*value值发生改变触发的事件*/
            num++
            tt.value = num;
        }
        txt.oninvalid=function(){/*当input框验证失败执行的事件*/
            this.setCustomValidity('我是框框');/*验证格式出错时的提示框内容*/
        }
    </script>

表单属性
//--------------------------------------------
HTML5 新的表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
A)<form>新属性:

1.autocomplete
提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
----------------------------------
eg:
<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
----------------------------------
2.novalidate
eg:
novalidate 属性是一个 boolean(布尔) 属性.novalidate 属性规定在提交表单时不应该验证 form 或 input 域
eg:
<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

-------------------------------------------
B)<input>新属性:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step
3.音频/视频
//---------------------------------------
eg:
<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>


//----------------------------------------
eg:
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

4519
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

8746
来自专栏九彩拼盘的叨叨叨

学习前端 大纲(Beta)

934
来自专栏一“技”之长

Bootstrap响应式前端框架笔记一——强大的栅格布局

    Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。Boot...

3651
来自专栏刘望舒

探索 Android Design Support Library v28 新增内容

2042
来自专栏Material Design组件

Material Design — 菜单(Menus)

41710
来自专栏林德熙的博客

win10 uwp 右击浮出窗在点击位置

如果需要让 Flyout 显示在指定的位置,那么请看本文。 本文主要让 MenuFlyout 出现在我们右击位置。

1061
来自专栏企鹅号快讯

自动化平台搭建之css样式详解(二)

往往在搭建自动化平台时,我们可能涉及到一些页面,搭建页面对于CSS样式比较头大,那么今天为大家总结一篇文章,希望对大家有帮助,以及页面涉及验证,简单使用vali...

2095
来自专栏令仔很忙

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所...

7301
来自专栏杨龙飞前端

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

3654

扫码关注云+社区

领取腾讯云代金券