HTML[5]超文本标记语言介绍及版本具体新增项全览

HTML，全称Hyper Text Markup Language。

介绍

HTML5的小伙伴们一定遇到一种问题，自己也可能会不解“HTML5不就是HTML吗?”其实，HTML与HTML5最大的区别就是版本的问题。HTML泛指HTML5及以下的版本，也就是说你叫HTML5为HTML也是没有问题的，但是遇到比较严谨的场合时例如报告会，还是使用HTML5这个名词比较好(有一部分人说HTML4就是HTML，不包含HTML5，但这样说也是可以的)。HTML5与HTML[4▽]完全搭不上边的区别就是在文档类型声明、结构语义、绘图、音频和视频支持以及语法处理等方面有明显的改进与大量新增的功能上。👣

你可以理解为，HTML[4▽]是一位老人，而HTML5是一位年轻人，一个老人与一个年轻人，年轻人就业选择范围广，反之年龄大的老人就业机会就少。事实也是这样的，采用HTML[4▽]编写超文本的程序员已经越来越少了，也有一部分原因是关于上面提到的文档类型声明，结构语义类似的相关问题，HTML5的编写简洁性是要比以前版本要好的多的。👏

只是了解简单想了解一下HTML5技术的现在可以划走了，下方都是满满的干货，拿起小笔开始记吧~✍️

新增项全览

一、语义元素😇

• <article>：表示文档、页面、应用或 syndicated 内容中的一个独立的内容项目，比如论坛帖子、新闻文章、博客文章、用户评论等。
• <aside>：表示与周围内容相关的一块辅助信息，比如侧边栏或页脚中的广告、导航信息等。
• <nav>：表示页面或应用的主导航栏，包含导航链接。
• <header>：表示文档或节的头部，比如页眉或文章头部。
• <footer>：表示文档或节的页脚，通常包含版权信息、法律声明和链接等。
• <main>：表示文档或应用的主要内容区。
• <section>：表示文档中的节，比如文章中的章节或页面的不同部分。
• <figure>和<figcaption>：表示图像或图表以及其标题或说明。
• <mark>：表示需要突出显示或高亮的文本。
• <time>：表示日期或时间，可以包含更复杂的时间格式，比如日期和时间的组合、时区等。

二、表单控件😜

[格式:<input type="名称">]

• date，用于选择日期
• datetime-local，用于选择日期和时间，没有时区。
• month，用于选择月份和年份。
• week，用于选择周和年份。
• time，用于选择时间
• email，用于输入电子邮箱地址
• url，用于输入URL
• number，用于输入数字
• range，用于选择一定范围内的数字。
• search，用于输入搜索查询。
• tel，用于输入电话号码。
• color，用于选择颜色。

三、表单属性😉

• placeholder：提供了一个默认的输入提示，当输入框为空时显示，用户输入时消失。
• autofocus：在页面加载完成后自动获取焦点。
• autocomplete：用于开启或关闭浏览器对表单的自动完成功能。
• required：表示该输入框必须要填写。
• pattern：用于定义输入字段的模式，必须与正则表达式匹配。
• min和max：用于限制输入字段的最小值和最大值。
• step：用于规定输入字段的合法数字间隔。
• multiple：允许选择多个值。
• list：与datalist元素配合使用，提供一个选项列表供用户选择。
• formaction：重载表单元素的action属性。
• formmethod：重载表单元素的method属性。
• formenctype：重载表单元素的enctype属性。
• formnovalidate：取消提交时进行的有关检查。
• formtarget：规定在何处显示表单响应。

三、其它新增🤔

        1.多媒体支持——HTML5引入了<audio>和<video>标签，使得在不使用插件的情况下直接在网页上嵌入音频和视频内容。

        2.图形绘制——HTML5引入了<canvas>元素，可以通过JavaScript绘制图形，包括圆形、矩形、多边形、曲线等。

        3.地理位置定位——HTML5提供了获取用户地理位置的API，使得网站可以根据用户的地理位置提供更个性化的内容。

        4.本地存储——HTML5引入了LocalStorage和SessionStorage，可以实现在浏览器端存储数据，以减少对服务器端的请求。

        5.应用缓存——HTML5引入了Application Cache机制，使得Web应用程序可以在离线状态下仍然能够运行。

        6.拖放API：HTML5提供了原生的拖放API，可以方便地实现拖放功能。

以上就是对于HTML5新增项的详细解毒了，各位有什么问题可以私信哟~🥰

---

后记

HTML(超文本标记语言)，麻雀虽小，五脏俱全。编写逻辑也相对别的编写显得就比较简单了(毕竟就像说话一样)。不要忘了HTML5还有JS与Div的扩展😆本期只是对于初来乍到的小白了解一下关于HTML5的一些“小”知识与需要知道的历史缘由，下一期将会带你做出你人生第一个html文件，也是每个程序员入一行第一个要写出的——输出文本“Hello world!”🥳