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实现拖拽效果就相对比较简单了，但它也有兼容性的问题，所以我们还是要在合适的场景中去使用它。