Web前端面试题

最新推荐文章于 2024-09-30 15:42:36 发布

Asia20010701

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量57

点赞数

文章标签： HTML语义化 DOCTYPE HTML5新特性 meta标签浏览器模式

本文链接：https://blog.csdn.net/m0_46349460/article/details/125688547

版权

HTML5/CSS高频经典面试题学习笔记

HTML/HTML5标签

1、说说你对 HTML 语义化的理解？（字节、百度，阿里，腾讯、京东，小米）

答案解析:
HTML 语义化是指我们在写 HTML 结构时用有英文语义的标签，使 HTML 更易于开发人员和机器的阅读和理解。
非语义元素的例子：<div>和<span> 是没有语义的标签
语义元素示例： <form>、<table>、<nav>和<header> 有明确定义其内容
为什么要语义化？

为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构，易于阅读；
提升用户体验：如 title、alt 属性用于名词解释或图片内容说明，以及 label 标签的灵活运用等；
有利于 SEO 优化：与搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
可访问性：帮助辅助技术（如视障用户的屏幕阅读器、屏幕阅读器）更好的阅读和转译你的网页，利于无障碍阅读；
国际化：全球只有 13%的人口是英语母语使用者，因此遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
可维护性：语义化更具可读性，减少网页间的差异性，方便后期开发和维护；

在写HTML 代码时，语义化实践中应该注意什么

尽可能少的使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u 等，改用 css 设置；
需要强调的文本，可以包含在 strong 或 em 标签中，strong 默认样式是加粗（不要用 b），em 是斜体（不要用 i 标签）；
使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td；
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。（HTML4）
不仅写 html 结构时，要用语义化标签，给元素写 css 类名时，JS 类名、方法名、变量命名等也要遵循语义化原则。不随意取名，不利于后期的代码重构和维护。同时，也最好不要用汉语拼音命名。

2、HTML5 新增了哪些语义化标签

答案解析：

标签描述
<header> 定义文档的头部区域
<nav> 定义导航链接的部分
<main> 定义文档的主体内容
<section> 定义文档中的节（section、区段
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<details> 用于描述文档或文档某个部分的细节
<figcaption> 定义 <figure> 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）
<mark> 定义带有记号的文本
<summary> 标签包含 details 元素的标题
<time> 定义日期或时间
<footer> 定义 section 或 document 的页脚

标签	描述
`<header>`	定义文档的头部区域
`<nav>`	定义导航链接的部分
`<main>`	定义文档的主体内容
`<section>`	定义文档中的节（section、区段
`<article>`	定义页面独立的内容区域
`<aside>`	定义页面的侧边栏内容
`<details>`	用于描述文档或文档某个部分的细节
`<figcaption>`	定义 `<figure>` 元素的标题
`<figure>`	规定独立的流内容（图像、图表、照片、代码等等）
`<mark>`	定义带有记号的文本
`<summary>`	标签包含 details 元素的标题
`<time>`	定义日期或时间
`<footer>`	定义 section 或 document 的页脚

3、DOCTYPE是干嘛的，都有哪些属性（字节）

答案解析：
DOCTYPE 是 document type (文档类型) 的缩写。
<!DOCTYPE>声明位于文档的最前面，处于标签之前，它不是 html 标签。主要作用是告诉浏览器的解析器使用哪种 HTML 规范或者 XHTML 规范来解析页面。
DOCTYPE 声明的目的是:防止浏览器在渲染文档时，进入“怪异模式”渲染。“<!DOCTYPE html>" 确保浏览器按照标准模式进行渲染，而不是使用一个不符合规范的渲染模式。
在 HTML 中<!DOCTYPE>常见声明类型共有 8 种，其中 HTML5 有 1 种，HTML 4.01 和 XHTML 1.0 都有 3 种，XHTML 1.1 有 1 种。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD（w3c 官方规范 (opens new window)），因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容；
HTML5 不基于 SGML，所以不需要引用 DTD。
当前，HTML5 已经一统江湖了，早期的 HTML4 及以前的版本都已不用，只做 HTML 发展历史了解就好；

HTML4.01 为例，有 3 种 <!DOCTYPE> 声明（严格版、过渡版、框架版）
Strict Doctype （严格版文档类型）
		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">```
Transitional Doctype（过渡版文档类型）
		<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">```
Frameset Doctype（框架版文档类型）
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">'''
在 HTML5 中，只有一种可用的 DOCTYPE 声明
	<!DOCTYPE html>```

DOCTYPE 与浏览器模式

目前浏览器的排版引擎使用三种模式：

怪异模式（Quirks mode）：排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。在 W3C 标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。（也称之为混杂模式或兼容模式）
接近标准模式（Almost standards mode）：只有少数的怪异行为被实现。
标准模式（Standards mode）：在 W3C 标准出来之后，浏览器对页面的渲染有了统一的标准，行为即按照 W3C 的标准来解析代码渲染页面

DOCTYPE 声明与否的影响

<!DOCTYPE>声明的前面是没有任何内容的
如果有其他内容(空格除外) 或不写文档 DOCTYPE 声明，浏览器将无法获知 HTML 或 XHTML 的文档类型，就会使浏览器进入怪异模式渲染网页，不同浏览器下，显示效果就会不一致；
但是，只要我们对文档 DOCTYPE 做了正确的声明，浏览器就会进入标准模式；浏览器会按照 W3C 的标准来解析渲染页面，那么，在所有的浏览器下，显示的样式效果会保持一致。因此， <!DOCTYPE>声明还是很有必要的。

怪异模式和标准模式
 浏览器如何决定使用哪个模式
 我要如何知道目前是哪个模式
 使用 Doctype 激活浏览器模式

DOCTYPE 对 HTML 标签的影响

TIP

html 版本经过了几次的升级，每次升级都会弃用一些不适用的旧标签，而增加某些新的 html 标签。因此，对于不同 html 版本的 doctype 文档类型声明，能合法使用的 html 标签也是有所不同。比如：

<article>和<aside>标签，能在 html5 中能使用，而在 HTML 4.01 和 XHTML 中就不能使用；

<center>标签（目前 W3C 已废弃），XHTML1.0 版本中是不可用的，而在 HTML4.01 和 XHTML1.1 的<!DOCTYPE>声明中，只有 Transitional 和 Frameset 是可用的

由此可见，<!DOCTYPE>声明的 html 版本，也决定了哪些 html 标签可以合法使用

4、meta 标签干什么的，都有什么属性和作用（字节，58，商汤）

答案解析：

<meta>标签用于描述 HTML 网页的元信息。它不会显示在页面上，但是对于机器是可读的，并告诉机器该如何解析这个页面。
如：浏览器（如何显示内容或重新加载页面），SEO 优化（keywords、description、robots）其他 web 服务等

meta 标签常用的属性有 4 个如下：

meta标签属性作用
charset 规定 HTML 页面的字符编码常用的值：UTF-8(Unicode 字符编码)、 ISO-8859-1(拉 J 字母表的字符编码)
content 当 meta 标签中有http-equiv或name属性的时候，一定要有 content 属性对其进行说明。
http-equiv 添加 http 头部内容对一些自定义的，或者需要额外添加的 http 头部内容，需要发送到浏览器中，我们就可以是使用这个属性
name 元数据的名称name 和 content 属性可以一起使用，以"名 - 值"对的方式给文档提供元数据，content 作为元数据的值

meta标签属性	作用
charset	规定 HTML 页面的字符编码常用的值：UTF-8(Unicode 字符编码)、 ISO-8859-1(拉 J 字母表的字符编码)
content	当 meta 标签中有`http-equiv`或`name`属性的时候，一定要有 content 属性对其进行说明。
http-equiv	添加 http 头部内容对一些自定义的，或者需要额外添加的 http 头部内容，需要发送到浏览器中，我们就可以是使用这个属性
name	元数据的名称`name` 和 `content` 属性可以一起使用，以"名 - 值"对的方式给文档提供元数据，content 作为元数据的值

5、你了解哪些 HTLML5 新特性（快手）

新增的有：

语义化标签（header、nav、main、section、article、aside、details、figcaption、figure、mark、summary、time、footer 等）
Canvas 画布和 SVG 矢量图
拖放（Drag and drop）
音频、视频（audio、video）
地理定位（Geolocation）
本地离线存储（localStorage）长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage）数据在关闭浏览器后自动删除。
表单控件（calendar、date、time、email、url、search）
新技术（Web Worker、Web Socket）
新的文档属性（document.visibilityState）

移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u
对可用性产生负面影响的元素：frame，frameset，noframes