「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
今天我们来聊聊H5新增了哪些元素，以及聊聊盒模型
新元素
html5为了更好的实践 web语义化，增加了 header，footer，nav,aside,section 等语义化标签，在表单方面，为了增强表单，为input增加了 color，emial,data ,range等类型，在存储方面，提供了 sessionStorage，localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和 websocket 协议
每个元素使用会有点不同，例如
header标签
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
nav标签
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
后面很多强大的标签如，audio那些
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
使用起来都比较简单，只是最复杂的东西人家已经帮我弄好了
盒模型
这里说的盒子本质就是用于装页面上元素的矩形区域；CSS中的盒子模型有两种，包括 IE盒模型和 W3C标准盒模型
两种盒模型最主要的区别就是width 的包含范围，在标准模型中，width 指 content部分的宽度，在IE盒模型中，width 表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
- 标准盒模型的盒子宽度：左右
border+左右padding+width IE盒模型的盒子宽度：width
在 CSS3中引入了box-sizing属性，box-sizing:content-box表示标准盒模型；box-sizing:border-box表示的是 IE盒模型；而box-sizing:padding-box这个属性值的宽度包含了左右padding+width
最后
上面就是关于H5新增了哪些元素以及盒模型的相关内容，如果觉得不错，欢迎点赞、收藏支持我，谢谢大家，你的每一次鼓励都对我非常的重要
再次感谢
