其他分享
首页 > 其他分享> > 重温HTML5

重温HTML5

作者：互联网

Html5语义化标签

作用：

  1. 用正确的标签做正确的事情
  2. 有利于SEO，也就是说有利于搜索引擎搜索
  3. 在没有css的情况下，以一种文档格式显示，并且是容易阅读的
  4. 让页面结构化，使喜欢阅读源码的人能够快速定位每个模块相对应的代码

常用的Html5布局元素：

元素作用
header用于定义文档的页眉
nav导航栏部分
main表示页面主要区域，一个页面一般有一个main标签
article文章内容部分
section包裹在article里面，把article分为多个部分
aside附加区域，用于附加与该网站内容无关的部分，比如广告栏
footer页脚部分，一般用于标注版权信息以及作者信息

这些元素在网页中的布局大概如下：
在这里插入图片描述

input标签新增

新增输入类型

在这里插入图片描述
在这里插入图片描述
新增了13种表单输入类型，每一种类型都跟他的属性值对应。像color，它会提供一个选色版供我们去选择颜色，并且我们可以通过这个表单的value属性获得它的16进制颜色，date故名思意就是选择日期，其他的，如果读者想具体知道是用来做什么的，都可以自己去尝试一下，毕竟编程还是实践为王。

新增常用属性

html5中input标签新增了许多属性，下面我们主要介绍一些我们常用的属性。

属性属性值作用
placeholder字符串类型，表示提供的文本当表单未输入任何值时显示提示词
disableddisabled 属性不需要值。它等同于 disabled=“disabled”禁用表单输入值
required布尔类型，当为true时，开启该功能，反之则不开启强制该表单必须输入值
multiple布尔类型，当为true时，开启该功能，反之则不开启如果设置，则规定允许用户在 元素中输入一个以上的值，一般用于file类型的表单用来上传多个文件
min,max字符串类型，表示input能够输入的最小值和最大值强制该表单输入的最小值和最大值
maxlength字符串类型，表示input能够的最大长度强制该表单输入的最大长度
autofocus布尔类型，当为true时，开启该功能，反之则不开启该打开网页时，自动获取该表单的焦点
autocomplete字符串类型，当为on时，开启该功能，反之则不开启属性规定表单或输入字段是否应该自动完成，当自动完成开启，浏览器会基于用户之前的输入值自动填写值,简单来说就是提示我们前面几次都输入什么值。

以上这些属性就是我们常用的input属性，读者要注意区别max和maxlength，一个表示最大值，一个表示最大长度，这些我们就不做过多的展示了，如果有感兴趣的朋友，可以上w3c去浏览并且看看其效果如何，下面附上链接
https://www.w3school.com.cn/html/html_form_attributes.asp

Html5拖放（drap）

1.要拖动元素的draggable属性设置为true。

2.与拖拽有关的事件代码：

事件产生事件的元素描述
dragstart被拖放的元素开始拖放操作
drag被拖放的元素拖放过程中
dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内
dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素的范围内移动
dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围
drop拖放的目标元素其他元素被拖放到了本元素中
dragend拖放的对象元素拖放操作结束

3.demo

需要使用的事件ondragstart，ondrop，ondragover三个事件即可实现拖拽效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		#div1{
			width: 400px;
			height: 200px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
    <div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    <img src="./1.jpg" alt="" draggable="true" ondragstart="drag(event)" id="drag1" height="200px" width="400px">
    <script>
        //ondragstart事件 监听图片开始拖动时要做什么
        function drag(ev){
            //设置操作的数据类型和值  也就是设置要操作哪个元素
            ev.dataTransfer.setData("text",ev.target.id);
        }
        
        //利用ondragover事件规定被拖动的数据能够被放置到何处
        function allowDrop(ev){
            //默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
            ev.preventDefault();
        }
        //利用事件ondrop进行放置
        function drop(ev){
            ev.preventDefault();
            //得到拖放的元素
            var data=ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>
</html>

拖拽前
在这里插入图片描述
拖拽后
在这里插入图片描述

我们可以清楚得看到，html5未出现之前，我们实现拖拽效果非常地麻烦，html5实现拖拽效果就相对比较简单了，但它也有兼容性的问题，所以我们还是要在合适的场景中去使用它。

4.常用浏览器的支持版本

在这里插入图片描述

标签：元素,重温,表单,HTML5,输入,ev,拖放,属性
来源： https://blog.csdn.net/weixin_45805570/article/details/118633615