html面试题

1、堆html语义化的理解

语义化湿指根据内容的结构话（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利用seo。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能更清晰的看出网页的结构，便于团队的开发与维护 常用的语义化标签：
header，nav，section，main，article，aside，footer Strong标签有语义，是起到加重语气的效果
b标签是没有的，b标签指示一个简单的加粗标签

title属性没有明确意义，指示表示是个标题 h1则表示明确的标题，对页面信息的抓取有很大的影响

i内容展示伪斜体，em表示强调的文本

2、html document

Html即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、设置音乐、程序等非文字元素
由于document对象是window对象的一部分，所以可通过window.document属性对其进行访问

3、doctype

告诉浏览器使用哪个本本的html规范来渲染文档。doctype不存在或形式不正确会导致html文档以混杂模式呈现

4、严格模式与混杂模式

严格模式：是以浏览器支持的最高标准允许 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

5、head标签有什么作用，其中什么标签必不可少？

Head标签用于定义文档的头部，它是所有头部元素的容器。可有引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在head部分：base link meta script，style，title
其中

6、什么事web标准，什么事W3C标准

1、web标准不是某一个标准，而是一系列标准的集合
web标准简单来说，可以分为结构、表现和行为。结构：主要是由html标签组成；表现：即指css样式表；行为：主要是有js、dom组成
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或表现的变化，也就是这三者的界限并不那么清晰
2、W3C对于web标准提出了规范化的要求 标签和属性名字母要要小写 标签要闭合 标签不允许随意嵌套
尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验
样式尽量少用行间样式表，使结构与表现分离 标签的id和class等属性命名要做到见文知义，更利于seo，代码便于维护

7、html注释<— —>

8、src和href

Src和href都是用来引用外部资源的，他们的区别如下：
Src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档中，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、变异、执行完毕，一般js脚本会放在页面底部
Href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源。不会停止对当前文档的处理。常用在a、link等标签上

9、label

Label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到与label标签相关的表单控件上

方法1:<label for=“name”>name:</label><input type=“text” id=“mobile”/>
方法2:<label>name:<input type=“text”/></label>

10、如何合并表格单元格

rowspan=“2”表示从设置的td单元格开始向下合并两个单元格 colspan=“2”表示自左向右合并两个单元格

11、thead 用来放标题之类的东西 tbody 用来数据本体 tfoot放表格的脚注之类

12、Html5 有哪些新特性、移除了哪些元素？
新增元素：

• 绘画 canvas
• 用于媒介回放的video和 audio元素
• 本地离线存储localstorage 长期存储数据，浏览器关闭后数据不丢失
• sessionstorage 的数据在浏览器关闭后自动删除
• 语义化更好的内容元素，比如 article、footer、header、nav、 section
• 表单控件，calendar、 date 、 time s email s url s search
• 新的技术 webworker 、 websocket 、 ceolocation
  移除的元素：
  ?纯表现的元素：basefont、big, center，font，strike tt, u
  ?对可用性产生负面影响的元素：frame frameset noframes
  支持 HTML5 新标签：
  ?IE8/IE7/TE6 支持通过 document.createElement 方法产生的标签
• 可以利用这一特性让这些浏览器支持 HTML5 新标签
• 浏览器支持新标签后，还需要添加标签默认的样式

13、标签上title属性与alt属性的区别是什么？

Alt属性是未来给哪些不能看到你文档中图像的浏览者提供文字说明的，且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等
Title属性为设置该属性的元素提供建议性的信息，使用title属性提供非本质的额外信息

14、标签应该如何合理嵌套

ul>li ol>li
块标签可以嵌套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签（a标签特殊），a标签不允许嵌套a标签和其他有交互作用的标签。块级元素与块级元素并列，内嵌元素与内嵌元素并列

15.png. jpg. gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp?

1.png是便携式网络图片 (Portable Network Graphics) 是一种无损数据压缩位图文件格式 优 点是：压缩比高，色彩好。大多数地方都可以用。
2.jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化 做的不错。在www上，被用来储存和传输照片的格式。
3.gif是一种位图文件格式，以&位色重现真色彩的图像。可以实现动画效果，4.webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

16、表单提交get和post请求

Get请求一般用于从服务器上获取数据，post向服务器传递数据
Get传输的数据是拼接在url之后的，用户是可见的；post的传输数据对用户是不可见的
Get传递的数据量较小，不能大于2KB；post传递的数据量较大，一般默认不受限制 Get安全性非常低，post安全性高
在form提交的时候，如果不指定method，则默认为Get请求

17、meta标签的name属性值

name 属性主要用于描述网页，与之对应的属性值为content， content中的内容主要是便于搜索 引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name="参数"content="具体的参数值"＞。
其中name属性主要有以下几种参数： A、Keywords(关键宇)说明：keywords用来告诉搜素引擎你网页的关键字是什么。
B、description(网站内容描述) 说明：description用来告诉搜素引擎你的网站主要内容
C、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex follow,nofollow,默认是all。 举例：< meta
name=“robots” content=“none”>

18、sass

是css预处理语言，无法直接运行在浏览器，需要其他的编译框架进行二次编译以后才可以在浏览器中运行。sass提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护

19、HTML

(1）HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；
(2) HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。

20、如何区分 HTML和 HTML5?

在文档类型声明上不同： HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。 在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的，这样表示网站的头部。 HTML5：在语义上却有很大的优势。提供了一些新的标签

21、HTML5的离线储存怎么使用，工作原理解释一下？

localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionstorage 数据在浏览器关闭后自动删除。

22、HTML5 Canvas元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作