HTML5知识点汇总（1）

HTML5

1、html5是什么

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。-------h5并不是一门新的语言，而是html语言的第五次修订。

2.html5支持的浏览器版本

基本上所有的主流浏览器都支持（Chrome，Firefox，Safari 等）

IE9及IE9以上支持html5，IE8及IE8以下不支持。

3.html5与html4的不同

html5相对于html4抛弃了一些不合理不常用的标记和属性，然后新增了一些标记和属性（表单），可以跨平台使用。

html5的代码更加简洁明了，提高了可用性并且使用户的体验更加友好。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

主要新增元素

 
    <header>头部header>
    
    <nav>导航nav>
    
    <main>
        
        <article>左边article>
        
        <aside>右边aside>
    main>
    
    <footer>底部footer>

主要表单元素

<form action="">
    用户名：<input type="text" name="userName"> <br>
    密码：<input type="password" name="userPwd"> <br>
    
    邮箱：<input type="email"> <br>
    
    电话：<input type="tel"> <br>
    
    网址：<input type="url"> <br>
    
    数量：<input type="number" value="60" max="100" min="0"> <br>
    
    请输入商品名称：<input type="search"> <br>
    
    范围：<input type="range" max="100" min="0" value="50"> <br>
    颜色：<input type="color"> <br>
    
    
    时间：<input type="time"> <br>
    
    日期：<input type="date"> <br>
    
    日期时间：<input type="datetime"><br>
    
    日期时间：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week">
    
    <input type="submit">
form>

<form action="" id="myForm">
    
    
    
    用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
    
    
    
    手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    
    文件：<input type="file" name="photo" multiple> <br>
    
    邮箱：<input type="email" name="email" multiple><br>
    
    
    <input type="submit"> <br>
form>


地址：<input type="text" name="address" form="myForm">

<form action="">
    
    
    专业：<input type="text" list="subjects"> <br>
    
    <datalist id="subjects">
        
        
        <option value="英语" label="不会"/>
        <option value="前端与移动开发" label="前景非常好">option>
        <option value="java" label="使用人数多">option>
        <option value="javascript" label="做特效">option>
        <option value="c" label="不知道">option>
    datalist>

    网址：<input type="url" list="urls">
    <datalist id="urls">
        
        <option value="http://www.baidu.com" label="百度">option>
        <option value="http://www.sohu.com">option>
        <option value="http://www.163.com">option>
    datalist>
form>

新增表单元素事件

 /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
    document.getElementById("userName").oninput=function(){
        console.log("oninput:"+this.value);
    }

    /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/
    document.getElementById("userName").onkeyup=function(){
        console.log("onkeyup:"+this.value);
    }

    /*oninvalid:当验证不通过时触发*/
    document.getElementById("userPhone").oninvalid=function(){
        /*设置默认的提示信息*/
        this.setCustomValidity("请输入合法的11位手机号");
   }

进度条

<progress max="100" value="100">progress>



<meter max="100" min="0" high="80" low="40" value="30">meter>
<meter max="100" min="0" high="80" low="40" value="60">meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level">meter>

 类样式操作

toggle:切换元素样式，如果元素含有指定样式则删除，没有就添加

contains：判断元素是否包含指定名称样式，返回true/false 

---------------------------------------------------------------------------------------------------