html常见问题

HTML中<!DOCTYPE>标签的作用是什么呢？

声明位于文档中的最前面的位置，处于html标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML元素分类?
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

块级元素 内联元素 内联块元素
div,p,h1~h6,ul,ol,dl,table,address,form,blockqoute,section,article,section,aside,nav,header,footer a,span,br,i,em,strong,label,q,var,cite,code img,input
什么是HTML5？
HTML5 是对 HTML 标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

html存储方式以及它们的区别?
储存方式 常见操作
cookie document.cookie = ‘string’
sessionStorage sessionStorage.setItem(‘key’/string/, ‘value’/string/) // 设置数据 sessionStorage.getItem(‘key’/string/) // 获取数据 sessionStorage.removeItem(‘key’/string/) // 删除数据 sessionStorage.clear() // 清空数据
localStorage localStorage.setItem(‘key’/string/, ‘value’/string/) // 设置数据 localStorage.getItem(‘key’/string/) // 获取数据 localStorage.removeItem(‘key’/string/) // 删除数据 localStorage.clear() // 清空数据
相同点 都用于存储在客户端
不同点
1.存储大小
cookie数据大小不能超过4k。sessionStorage不超过5M。localStorage不超过20M。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3.数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
HTML5新特性？
语意特性，添加header,nav等标签
多媒体， 用于媒介回放的 video 和 audio 元素
图像效果，用于绘画的 canvas 元素，svg元素等
离线存储，对本地离线存储的更好的支持,localStorage,sessionStorage,Cookies等
设备兼容特性 ，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连
连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作
HTML5有哪些新增标签?
多媒体:audio,video,source(定义多个数据源很有用),embed(标签定义嵌入的内容，比如插件),track(诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。)
新表单元素:datalist,output,keygen
新文档节段和纲要:header,section,aside,footer,article
html常用的meta标签

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

如何理解HTML语义化
在没有样式的情况下，依然可以让页面呈现清晰的结构
html本身是没有样式的，浏览器所呈现的样式是浏览器的默认样式。单独的HTML语义化是没有意义的，所以只用html语义化与设备的默认样式结合，才有意义。
HTML语义化利于在各种设备上显示清晰的结构，尽管表现的效果不一致（例如kiddle和电脑浏览器，尽管是同一个标签，但是前者可能只是字体放大，但是后者字体放大并加粗），但是层次依然分明。
便于搜索引擎的查找，搜索引擎不仅通过meta标签中的关键字，还会分析页面标签，然后根据标签（例如h1~h6，p，img等）的语义进行抓取
便于团队的合作开发，减少工作交替时的分歧。
html中的空元素有哪些？
没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。常见的标签是br,hr,img,link,meta,input，少见的标签是area,base,col,command,embed,source,track