Html5语义化标签
作用：
- 用正确的标签做正确的事情
- 有利于SEO，也就是说有利于搜索引擎搜索
- 在没有css的情况下，以一种文档格式显示，并且是容易阅读的
- 让页面结构化，使喜欢阅读源码的人能够快速定位每个模块相对应的代码
常用的Html5布局元素：
| 元素 | 作用 |
|---|---|
| header | 用于定义文档的页眉 |
| nav | 导航栏部分 |
| main | 表示页面主要区域，一个页面一般有一个main标签 |
| article | 文章内容部分 |
| section | 包裹在article里面，把article分为多个部分 |
| aside | 附加区域，用于附加与该网站内容无关的部分，比如广告栏 |
| footer | 页脚部分，一般用于标注版权信息以及作者信息 |
这些元素在网页中的布局大概如下：
input标签新增
新增输入类型
新增了13种表单输入类型，每一种类型都跟他的属性值对应。像color，它会提供一个选色版供我们去选择颜色，并且我们可以通过这个表单的value属性获得它的16进制颜色，date故名思意就是选择日期，其他的，如果读者想具体知道是用来做什么的，都可以自己去尝试一下，毕竟编程还是实践为王。
新增常用属性
html5中input标签新增了许多属性，下面我们主要介绍一些我们常用的属性。
| 属性 | 属性值 | 作用 |
|---|---|---|
| placeholder | 字符串类型，表示提供的文本 | 当表单未输入任何值时显示提示词 |
| disabled | disabled 属性不需要值。它等同于 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。