HTML及CSS面试题3

1、文档声明

1. 什么是<!DOCTYPE>？

• 它是HTML的文档声明，通过它告诉浏览器，使用哪一个HTML版本标准解析文档

2、是否需要在HTML5中使用？

• 如果不书写文档声明，浏览器就不知道文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，也就是：怪异模式。
• 这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的

3、什么是严格模式与混杂模式？

补充解释：

1. 很早之前每个浏览器都有不同的渲染模式，W3C出来后，渲染页面有了统一的标准
2. 但是，为了保证旧版浏览器正常使用，浏览器都保留了旧的渲染方法
3. 这样浏览器渲染上就产生了怪异/混杂模式和标准模式，两种渲染方法共存在一个浏览器上。
4. 混杂模式服务于旧式规则，而严格模式服务于标准规则。

1. 浏览器渲染模式分为3种：
   • 怪癖模式(混杂模式)：又称怪异模式/兼容模式，是指浏览器用自己的方式解析代码
   • 严格模式(标准模式)：是指浏览器按照W3C标准解析代码
   • 几乎标准模式
2. 列举几条怪异/混杂模式中的怪癖行为？
   • 宽、高的算法与W3C盒模型不同
     • 严格模式(标准模式)：宽/高仅仅包含元素自身的宽/高
     • 怪癖模式(混杂模式)：宽/高还包含padding和border
   • 在表格中的字体样式不会继承
     • 怪异模式下，Table中的字体属性不能继承上层的设置
   • 怪异模式下可以设置行内元素宽/高
   • 怪异模式下，white-space:pre会失效

2、谈谈对html语义化的理解

补充语义化的目的：

1. 去掉/丢失样式时，能让页面呈现出清晰的结构—页面没有css的情况下，也能呈现出很好的内容结构
2. 有利于SEO：有助于爬虫抓取更多的有效信息，因此，可以和搜索引擎建立良好的沟通
3. 便于团队开发和维护：语义化使得代码更具有可读性
4. 方便其他设备解析，如：屏幕阅读器、盲人阅读器等，可以用更有意义的方式来渲染网页

1. HTML语义化是指：使用具有明确含义的HTML标签来构建网页结构，使网页内容更具可读性和可维护性
2. 语义化标签，如：<header>、<nav>等，能够清晰地描述页面的各个部分，有助于搜索引擎更好地理解和索引页面内容，同时也提高了网页在不同设备和屏幕阅读器上的可访问性
3. 通过语义化HTML，开发者可以创建结构清晰、易于理解和维护的网页，提高用户体验和SEO效果

3、对于WEB标准以及W3C的理解与认识

1. W3C的理解与认识
   ○ W3C就是一个推出标准的组织，被称为：万维网联盟，W3C最重要的工作是：发展Web规范
2. WEB标准的理解与认识
   • 任何东西都需要标准，有了标准才能更好的使用和推广，不同的标准，得出结果也不一样，因此，制定和确立什么样的标准，至关重要。
   • 正因为有了网页的标准，才能降低开发难度及成本，减少BUG及安全问题，提高网站易用性。
   • HTML在W3C组织推出标准前，不同的浏览器厂商都有一套自己的标准，这对于开发人员来讲是痛苦的，所以才会留下浏览器的标准模式和怪异模式这个历史问题。

4、描述SEO(针对搜索引擎优化)中的TDK

解释：

1. 优化SEO其实就是在搜索网页时，页面中的TDK越好，搜索排名越靠前，权重越高，自然流量越好
2. 在SEO中，所谓的TDK其实就是：title、description、keywords

1. title：网页标题
   • 浏览器显示的内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。
   • title一般不超过 80 个字符，而且词语间要用英文-破折号隔开，因为计算机只对英语的敏感性较高
2. description：内容摘要
   • 内容摘要是对于一个网页的简要内容概况
   • description一般不超过 150个字符，描述内容要和页面内容相关
3. keywords：关键词
   • 用于告诉搜索引擎本页内容是围绕哪些词展开的。
   • keywords中的每个词都要能在内容中找到相应匹配，才有利于排名。
   • keywords一般不超过3个，每个词不宜过长，且词语间要用英文,逗号隔开，将重要的关键字靠前放

5、谈谈微格式，以及在前端构建中应该考虑微格式吗？

具体表现：

1. 具体表现是：把语义嵌入到HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML文档的人/机可读性，相当于对Web网页进行了语义注解(和语义化标签是不一样的)
2. 采用微格式的Web页面，在HTML文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理HTML文档的软件，更好的理解该HTML文档

1. 什么是微格式？
   • 所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
   • 在现有的HTML标准基础上，使用简单的格式，把特定信息嵌入网页，使搜索引擎和应用程序更容易识别和使用这些信息
2. 在前端构建中应该考虑微格式吗？
   • 微格式可以对网站进行SEO优化，如果需要可以考虑。

6、可替换元素和非可替换元素是什么，以及它们各自有什么特点?

1. 可替换元素：该元素在页面中的大部分展现效果不由CSS决定
   • 如：img，它在页面中显示出的效果，取决于连接的是什么图片，图片是什么它就是什么，CSS只能控制图片的尺寸位置，但永远无法控制图片本身。
   • img、video、audio、大部分表单元素都属于可替换元素
2. 非可替换元素：指的是普通元素，它具体在页面上呈现什么，完全由CSS来决定

7、px和em的区别？

解释单位

1. px：
   a. 即pixel像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。
   b. 同一设备上，每个设备像素所代表的物理长度是固定不变的(绝对性)，但在不同设备间每个设备像素所代表的物理长度是可以变化的(相对性)
2. em：
   a. 它是相对长度单位，具体的大小要相对于父元素来计算
   b. 例如：父元素的字体大小为40px，那么子元素1em就代表字体大小和父元素一样为40px，0.5em 就代表字体大小为父元素的一半即20px

1. 具体区别：
   • px： 它是固定单位， 不受父元素/浏览器设置的影响，适用于需要精确控制元素大小的场景
   • em`： 它是相对单位，相对更灵活，它具体的大小由父元素来实现，可以根据父元素大小来进行缩放
2. 补充：em和rem的区别
   • rem是根据根元素来显示大小的
   • em是根据父元素的字体大小来显示具体元素大小的

8、浮动

• 以下选项中，不能清除浮动的是：B
• A. 空div
• B. hover伪选择器 => 用于：在用户将鼠标悬停在元素上时应用样式
• C. clear属性
• D. overflow 属性

9、定位

定位与布局的区别

1. 布局是针对整个页面来讲的，采用什么布局，比如：两栏布局、三栏布局，目标是整个页面。
2. 定位是针对某一个元素来讲的，把这个元素定位到什么位置。

1、介绍下position属性

position属性用于：指定元素在文档中的定位方式，目前在CSS中，有5种定位方案，分别是：

1. static(静态定位，默认值)
2. relative(相对定位)
3. absolute(绝对定位)
4. fixed(固定定位)
5. sticky(粘性定位)

2、position属性有哪些值，分别介绍

1. static(静态定位，默认值)：
   • 所谓静态定位，就是标准流，在标准流中，块级元素独占一行，内嵌元素共享一行
   • 静态定位是HTML元素的默认值，静态定位的元素不会受到top/bottom/left/right的影响
2. relative(相对定位)：
   • 相对定位就是：相对自己原来的位置进行定位，并执行设置的偏移量，最大特点是：不脱离标准流，
3. absolute(绝对定位)：
   • 元素会脱离文档流，margin也会失效，并会让元素变成块级元素，且绝对定位元素不占据空间
   • 绝对定位元素相对于最近的非static祖先元素定位
4. fixed(固定定位)：
   • 固定定位与绝对定位相似，也会脱离文档流，但元素的包含块为viewport视口(浏览器窗口)
   • 该定位方式常用于：创建在滚动屏幕时仍固定在相同位置的元素。
5. sticky(粘性定位)：
   • 粘性定位可以被认为是相对定位和固定定位的混合。
   • 元素在跨越特定阈值前为相对定位，之后为固定定位。

3、相对定位、绝对定位、固定定位的区别

1. 相对定位：元素相对于其正常位置偏移，占据原空间
2. 绝对定位：元素相对于最近的已定位祖先元素定位，脱离文档流，不占原空间。
3. 固定定位：元素相对于视口定位，脱离文档流，不占原空间。