HTML5的学习总结

HTML5的学习总结

一、什么是HTML5?

1.支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器搜狗浏览器QQ浏览器猎豹浏览器等国产浏览器同样具备支持HTML5的能力

2.HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式

(1) 回顾一下以前学过的知识:

1.1 块级元素:

​ 块级元素独占一行,从页面布局和外观显示来看,块级元素所处行的后面无法再放任何的内容,(也就是说一行里面最多只可能存在一个“块级元素”
一个网页的布局就类似于一篇报纸的排版。首先将网页分成大的模块。然后在模块里面再分成小的模块。所以块级元素多用于布局。

1.2 行级元素:

只占一小块空间,在后面可以继续放内容行级元素也称为行内标签,内联标签(也就是说一行里面可以存在多个行级元素),使用块级元素将网页结构搭建好了后,使用行级元素来排版。

1.3 行级元素和块级元素的区别:

块级元素独占一行,比较霸道。而行级元素却可以多个元素共享一行。
块级元素支持高和宽,行级不支持高和宽。行级元素的高和宽由内容来决定。
块级元素常常作为容器,可以容纳其他的行级元素和块级元素。行级元素一般用来组织内容。即容纳文字、图片、超链接。

1.4 块级元素有哪些?

div、p、h、hr、table 、ul、ol、form…

1.5 行级元素有哪些?

a、span、label、input、textarea、br、img…

怎么将行级元素转换为块级元素呢?

**解答:**下面的main标签是行级元素(也许你会有疑问:既然main是行级元素,那为什么下面的代码里面还写width,height属性呢?那是因为里面加了display:block,已经变成块级元素了,所以可以加宽高属性),只需要在里面加上display: block;即可转换成块级元素

main{
           /*将行级元素转换为块级元素*/
            display: block;
            width: 100%;
            height: 500px;
            background-color: #ccc;
        }

(2)如何处理兼容性问题呢?

html5shiv.min.js:在默认情况下,IE8及以下的IE版本不支持HTML5,引入这个文件就可以做到兼容

二、HTML新增input标签的 type类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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,所以一般用下面datetime-local那个.用于屏幕阅读器-->
    日期时间:<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间:<input type="datetime-local"> <br>
    月份:<input type="month"> <br>
    星期:<input type="week">
    <!--提交-->
    <input type="submit">
</form>
</body>
</html>

看运行效果截图如下

在这里插入图片描述

三、HTML5表单新增的其他属性

属性:placeholder,autofocus,autocomplete,required,pattern,multiple,form,具体应用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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:指定表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据一起提交-->
地址:<input type="text" name="address" form="myForm">
</body>
</html>

对上面autocomplete属性的解释:就相当于有如下图所示的提示功能
在这里插入图片描述

整个网页的显示如下:
在这里插入图片描述

四、表单新增元素dataList的讲解

<datalist标签不仅可以选择,还应该可以输入,类似于下图所示:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <!--专业:
    <select name="" id="">
        <option value="1">前端与移动开发</option>
        <option value="2">java</option>
        <option value="3">javascript</option>
        <option value="4">c++</option>
    </select>-->
    <!--不仅可以选择,还应该可以输入-->
    <!--建立输入框与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>
</body>
</html>

运行结果截图如下:
在这里插入图片描述

五、HTML5新增的表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">     
    用户名:<input type="text" name="userName" id="userName"><br>   //type="tel",以pattern                                                                //上文第四点已 经讲过              电话:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
    <input type="submit">
</form>
<script>
    /*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位手机号");
   }
</script>
</body>
</html>

运行效果截图如下:

在这里插入图片描述

总结: oninput是,只要内容变了就会触发。 而onkeyup只当键盘弹起才触发

六、HTML5的进度条

<progress标签的作用就是进度条 ,不过感觉meter度量器好像和progress进度条没什么区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--max:最大值
value:当前进度值-->
<progress max="100" value="50"></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>
</body>
</html>

运行效果截图:
在这里插入图片描述

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java全栈研发大联盟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值