前端基础自检html&&css🚀🚀🚀上

狂炫一碗大米饭
473 阅读5分钟

前言

在前端面试之中html和css是重点考察对象,面试官通常会通过这些问题来评估我们对前端基础技术的掌握程度、解决问题的能力以及实际开发经验。下面是关于 CSS 和 HTML 的常见面试题及其总结

HTML篇

DOCTYPE 是什么，都有哪些属性？

可能有些友友和我一样，心里在想DOCTYPE是什么？没听说啊！

image.png 欸！是不是想起来了，其实是html的文档类型声明，用于告诉浏览器当前html的版本从而确保文档以正确的模式渲染。它通常出现在 HTML 文档的第一行。 现在一般是使用html5的简单声明：

什么是dom？以及dom相关的考点

什么是dom

dom是文档对象模型，是一个js对象，它将 HTML文档解析为一个树形结构，每个节点都是一个对象，表示文档的一部分。

HTML 到 DOM 的过程：

  • HTML 解析：浏览器解析 HTML 代码，生成 DOM 树。
  • CSSOM 生成：解析 CSS，生成 CSSOM（CSS 对象模型）。
  • 渲染树：结合 DOM 和 CSSOM，生成渲染树。
  • 页面渲染：根据渲染树将内容显示在页面上。

常见的dom节点类型

  • 元素节点：表示 HTML 元素（如 <div>、<p>）。
  • 文本节点：表示元素中的文本内容。
  • 属性节点：表示元素的属性（如 class、id）。
  • 注释节点：表示 HTML 注释。
  • 文档节点：表示整个文档（document）。

dom操作

获取元素：

  • document.getElementById('id')：通过 ID 获取元素。
  • document.querySelectorAll('.class')：通过选择器获取所有匹配的元素
  • document.querySelector('.class')：通过选择器获取第一个匹配的元素

修改元素：

  • element.innerHTML = '<span>新内容</span>'：修改元素的 HTML 内容。
  • element.style.color = 'red'：修改元素的样式。

删除元素

  • parentElement.removeChild(childElement)：从父元素中移除子元素。

dom事件

事件流：描述事件在 DOM 中传播的过程。 其有三个阶段：

  • 捕获阶段：事件从window向下传播目标元素。
  • 目标阶段：事件到达目标元素。
  • 冒泡阶段：事件从目标元素向上冒泡到window

事件委托：将事件处理程序绑定到父元素，利用事件冒泡机制处理子元素的事件。 事件委托其优点就是减少了事件处理的数量，提高了性能。还有就是动态添加子元素时不用重新为其绑定事件。

<ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
      
      <script>
        const list = document.getElementById('list');
      
        list.addEventListener('click', function (event) {
          if (event.target.tagName === 'LI') {
                event.target.innerHTML = '我被点击了';
          }
        });

HTML5语义化标签？以及常见的语义化标签

HTML5 语义化是指通过使用具有明确含义的标签，使网页的结构和内容更加清晰，方便浏览器、开发者以及搜索引擎理解网页内容。在实际开发中这有助于团队中的其他小伙伴对代码的理解和维护。同时搜索引擎更容易识别页面结构。对于一些特殊用户需要屏幕阅读更友好。

**常使用的语义化标签

标签名含义和用途常见使用场景
<header>页眉，通常包含标题、logo、导航等内容网站顶部、文章顶部
<nav>导航栏，表示页面的导航链接部分主导航、侧边栏导航
<main>页面主要内容区域，每页仅有一个包含文章、产品展示、主内容等
<section>页面中的一个独立区块，有自己的主题章节、功能块、分组区域
<article>独立内容块，适合单独分发博文、新闻、论坛帖子
<aside>侧边内容，与主内容相关但不属主内容侧边栏、推荐链接、广告等
<footer>页脚，通常包含版权、联系信息等页面尾部、文章结尾
<figure>插图、表格等内容块图片+描述、图表等
<figcaption><figure> 的说明文字图片下方的描述
<mark>高亮显示内容搜索关键词、重点文字
<time>标记时间或日期发布时间、活动时间
<details>可展开/折叠的内容块FAQ、阅读更多
<summary><details> 的标题，默认显示问题标题、摘要

script 标签放在 head 里，怎么解决加载阻塞的问题

浏览器在执行js代码之前停止解析HTML，所有如果将script放在head中将会阻塞页面的渲染，那么如何解决这个问题呢？

  • 1.使用 defer 属性。defer 属性使得脚本延迟执行。
  • 2.使用 async 属性。当 async 属性添加到 <script> 标签时，脚本会异步加载，并在加载完成后立即执行，不会阻塞页面的渲染。
  • 3.就直接将script 标签放在body后

对盒模型的理解

在css3中盒模型分两种：标准盒模型，IE盒子模型

image.png

image.png 盒模型都是由四个部分组成，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别主要是在设置width和height的范围不同：

  • 标准盒模型的width和height属性的范围只包含了content，
  • IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

  • box-sizing: content-box表示标准盒模型（默认值）
  • box-sizing: border-box表示IE盒模型（怪异盒模型）

CSS3中有哪些新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadoweflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 线性渐变 （gradient）
  • 旋转 （transform）
  • 增加了旋转,缩放,定位,倾斜,动画,多背景

margin 和 padding 的使用场景

  • 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
  • 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

transition和animation的区别

  • transition是过渡属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
  • animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

image.png

avatar
文章
阅读
粉丝