欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5知识点汇总(1)

程序员文章站 2022-07-05 14:56:32
HTML5 1、html5是什么 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。 h5并不是一门新的语言,而是html语言的第五次修订。 2.html5支持的浏览器版本 基本上所有的主流浏览器都支持(Chrome,Firefox,Safari 等) IE9 ......

html5

1、html5是什么

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

2.html5支持的浏览器版本

基本上所有的主流浏览器都支持(chrome,firefox,safari 等)

ie9及ie9以上支持html5,ie8及ie8以下不支持。

3.html5与html4的不同

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

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

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

主要新增元素

 <!-- <div class="header"></div> -->
    <header>头部</header>
    <!-- <div class="nav"></div> -->
    <nav>导航</nav>
    <!-- <div class="maincontent"></div> -->
    <main>
        <!-- <div class="left"></div> -->
        <article>左边</article>
        <!-- <div class="right"></div> -->
        <aside>右边</aside>
    </main>
    <!-- <div class="footer"></div> -->
    <footer>底部</footer>

主要表单元素

<form action="">
    用户名:<input type="text" name="username"> <br>
    密码:<input type="password" name="userpwd"> <br>
    <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
    邮箱:<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话:<input type="tel"> <br>
    <!--验证只能输入合法的网址:必须包含http://-->
    网址:<input type="url"> <br>
    <!--number:只能输入数字(包含小数点),不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量:<input type="number" value="60" max="100" min="0"> <br>
    <!--search:可以提供更人性化的输入体验-->
    请输入商品名称:<input type="search"> <br>
    <!--range:范围-->
    范围:<input type="range" max="100" min="0" value="50"> <br>
    颜色:<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间:时分秒-->
    时间:<input type="time"> <br>
    <!--date:日期:年月日-->
    日期:<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间:<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间:<input type="datetime-local"> <br>
    月份:<input type="month"> <br>
    星期:<input type="week">
    <!--提交-->
    <input type="submit">
</form>
<form action="" id="myform">
    <!--placeholder:提示文本,提示占位-->
    <!--autofocus:自动获取焦点-->
    <!--autocomplete:自动完成:on:打开  off:关闭
    1.必须成功提交过:提交过才会记录
    2.当前添加autocomplete的元素必须有name属性-->
    用户名:<input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
    <!--tel并不会实现验证,仅仅是在移动端能够弹出数字键盘-->
    <!--required:必须输入,如果没有输入则会阻止当前数据提交-->
    <!--pattern:正则表达式验证
    *:代表任意个
    ?:代表0个或1个
    +:代表1个或多个-->
    手机号:<input type="tel" name="userphone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple:可以选择多个文件-->
    文件:<input type="file" name="photo" multiple> <br>
    <!--email:有默认验证  在email中,multiple允许输入多个邮箱地址,以逗号分隔-->
    邮箱:<input type="email" name="email" multiple><br>
    
    <!--提交:-->
    <input type="submit"> <br>
</form>
<!--下面这个表单元素并没有包含在form中:默认情况下面表单元素的数据不会进行提交-->
<!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据一起提交-->
地址:<input type="text" name="address" form="myform">
<form action="">
    <!--不仅可以选择,还应该可以输入-->
    <!--建立输入框与datalist的关联  list="datalist的id号"-->
    专业:<input type="text" list="subjects"> <br>
    <!--通过datalist创建选择列表-->
    <datalist id="subjects">
        <!--创建选项值:value:具体的值 label:提示信息,辅助值-->
        <!--option可以是单标签也可以是双标签-->
        <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">
        <!--如果input输入框的type类型是url,那么value值必须添加http://-->
        <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位手机号");
   }

进度条

<!--max:最大值
value:当前进度值-->
<progress max="100" value="100"></progress>

<!--度量器:衡量当前进度值-->
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
<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 
---------------------------------------------------------------------------------------------------