[前端面试基础]HTML+CSS

HTML

HTML的src和href属性有什么区别？

HTML中src（source）和href（hypertext reference）是两个常见的属性，用于引用外部资源，它们的主要区别如下：

  1. 用途：src用于嵌入到文档中的资源，如图像、音频、视频或JavaScript文件；href用于链接到HTML文档之外的资源，如CSS样式表、字体文件或其他网页。
  2. 引用方式：src引用的资源是必需的，并且将在文档中占据一定的空间，直接影响文档的渲染；href引用的资源是可选的，并且不会占据文档的空间，仅用于指定链接到文档之外的资源。
  3. 对文档的影响：src会直接影响文档的加载和显示，如果src属性引用的资源无法加载或错误，将会导致嵌入的内容无法显示或运行；href不会直接影响文档的加载和呈现，而是通过链接到外部资源来影响文档的样式和行为，如果href属性引用的资源无法加载或错误，只会影响到该资源的使用，而不会影响到整个文档的显示。
  4. 适用范围：src适用于图片、音频、视频和脚本等资源的引用；href适用于CSS样式表、字体文件和其他网页的链接。

什么是HTML语义化？

HTML语义化是指根据内容的结构和含义（内容语义化），选择合适的HTML标签（代码语义化），以更好地表达内容的意义和层次。用正确的标签做正确的事情，这有助于搜索引擎优化（SEO）、提高网页的可访问性、内容组织、代码可读性，以及团队协作和项目维护。

DOCTYPE（文档类型）的作用是什么？

DOCTYPE是HTML中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样的文档类型定义来解析文档。DOCTYPE声明位于HTML文档的最顶部，是文档的第一行，具体作用如下：

  1. 启用浏览器的标准模式（Standards mode）或怪异模式（Quirks mode）。
  2. 用于告知浏览器应使用哪种HTML版本来解析文档。

正确的DOCTYPE声明对于确保网页在不同浏览器中的正确显示和行为具有至关重要的作用。

HTML的script标签中defer和async有什么区别？

defer和async属性都用于控制脚本的加载和执行，它们都是异步加载外部的JS脚本文件，且都不会阻塞HTML的解析，但两者在执行顺序和适用场景上有区别：

  1. 执行顺序：defer保证脚本按照在HTML中出现的顺序执行，一般是在HTML解析完成后才执行；而async则是谁先下载完成谁先执行，async可能会阻断解析以执行脚本。
  2. 适用场景：async适合不依赖于其他脚本且不被其他脚本依赖的独立模块，例如计数器或广告加载；而defer适用于需要在HTML完全解析后才能运行的JS脚本，尤其是依赖于DOM的JS脚本，它保证了脚本执行的顺序性和依赖关系，适合用于包含多个脚本的页面。

常用的HTML meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性。常用的meta标签包括：

  1. charset：用来描述HTML文档的编码类型，例如<meta charset="UTF-8">。
  2. keywords：页面关键词，例如<meta name="keywords" content="页面关键词">。
  3. description：页面描述内容，例如<meta name="description" content="页面描述内容">。
  4. refresh：页面重定向和刷新，例如<meta http-equiv="refresh" content="0;url=">。
  5. viewport：适配移动端，可以控制视口的大小和比例，例如<meta name="viewport" content="width=device-width, initial-scale=1.0">。
  6. 搜索引擎索引方式：例如<meta name="robots" content="index,follow">，其中content参数包括all、none、index、follow、noindex、nofollow等。

HTML5相比于HTML有哪些更新？

HTML5是HTML的第五个版本，也是最新版本，相比于之前的HTML版本，HTML5增加了很多新的特性和功能，具体如下：

  1. 播放视频和音频：HTML5支持直接在浏览器中播放视频和音频，而之前的HTML版本需要使用Flash等插件才能实现。
  2. 语义化标签：HTML5增加了很多语义化标签，如header、footer、nav等，可以更清晰地表示网页的内容结构。
  3. Canvas绘图功能：HTML5中增加了Canvas元素，可以使用JavaScript在页面上进行绘图。
  4. 表单控件：HTML5中增加了很多新的表单控件，如日期选择器、颜色选择器等，可以使表单更加灵活。
  5. 移动设备支持：HTML5针对移动设备进行了优化，可以更好地支持触摸事件、屏幕适配等。

HTML中，img标签srcset属性的作用是什么？

img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源，实现分辨率自适应。属性格式包括图片地址、宽度描述w、像素密度描述x，多个资源之间用逗号分隔。例如，可以设置浏览器宽度达到800px时加载middle.jpg，达到1400px时加载big.jpg。像素密度描述只对固定宽度图片有效。

HTML行内元素、块级元素、空（void）元素有哪些？

  1. 行内元素：行内元素不会独占一行，只占据其对应的标签的宽度。常见的行内元素有<a>、<span>、<br>、<i>、<em>、<strong>、<img>等。
  2. 块级元素：块级元素会独占一行，并尽可能地撑满其父元素的宽度。常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<table>等。
  3. 空（void）元素：也称为自闭合元素或空元素，它们没有闭合标签。常见的空元素有<br>、<hr>、<img>、<input>、<meta>、<link>等。

HTML5的离线储存怎么使用？它的工作原理是什么？

HTML5的离线存储主要通过Web Storage和Web SQL Database实现。

  1. Web Storage：Web Storage包括sessionStorage和localStorage两种，它们提供了一种在客户端存储数据的方式。sessionStorage用于存储针对一个会话的数据，数据在页面会话结束时被清除；localStorage用于持久化存储数据，数据存储在浏览器中，没有过期时间，直到用户手动清除或浏览器卸载。
  2. Web SQL Database：Web SQL Database是一种在浏览器中使用的轻量级关系型数据库，它允许开发者使用SQL语句来操作数据。不过需要注意的是，由于Web SQL Database的规范已经被废弃，因此在实际开发中应尽量避免使用。

浏览器是如何对HTML5的离线储存资源进行管理和加载的？

浏览器对HTML5的离线存储资源的管理和加载主要依赖于Web Storage和IndexedDB等API。

  1. 存储管理：浏览器会为每个源（origin）分配独立的存储空间，并根据API的类型（如sessionStorage、localStorage或IndexedDB）来组织数据。对于sessionStorage，数据在页面会话结束时被清除；对于localStorage和IndexedDB，数据会持久化存储，直到用户手动清除或浏览器卸载。
  2. 加载机制：当浏览器加载页面时，它会检查是否存在与该页面关联的离线存储资源。如果存在，浏览器会根据需要加载这些资源。例如，对于存储在localStorage中的数据，开发者可以在页面加载时通过JavaScript访问这些数据，并根据需要使用它们。

HTML中，title与h1标签的区别是什么？

  1. title标签：位于HTML文档的<head>部分，用于定义文档的标题。这个标题会显示在浏览器的标签栏或标题栏上，也是搜索引擎在搜索结果中显示的页面标题。
  2. h1标签：位于HTML文档的<body>部分，用于定义文档或文档部分的主要标题。h1标签是HTML中的最高级标题标签，通常用于页面的主标题。

HTML中，b与strong标签的区别是什么？

  1. b标签：b标签（bold）用于定义粗体文本，它仅从视觉上强调文本，没有传递额外的语义信息。
  2. strong标签：strong标签（strong emphasis）用于定义语气上更重要的文本，它除了从视觉上强调文本外，还传递了额外的语义信息，表示这些文本在内容上具有更强的重要性。

HTML中，i与em标签的区别是什么？

  1. i标签：i标签（italic）用于定义斜体文本，它仅从视觉上改变文本的样式，没有传递额外的语义信息。
  2. em标签：em标签（emphasis）用于定义语气上有所强调的文本，它除了从视觉上改变文本的样式外，还传递了额外的语义信息，表示这些文本在内容上具有某种程度的强调。

iframe有哪些优点和缺点？

优点：

  1. 嵌入内容：iframe可以嵌入其他网页或资源，如广告、视频、地图等，使得网页内容更加丰富和多样。
  2. 保持独立性：iframe中的内容独立于主页面，不会影响主页面的布局和样式。

缺点：

  1. 安全性问题：iframe可能引入跨站脚本（XSS）等安全风险，因为攻击者可能会利用iframe嵌入恶意内容。
  2. 搜索引擎优化（SEO）问题：搜索引擎可能无法正确索引iframe中的内容，导致这些内容在搜索结果中的排名较低。
  3. 兼容性问题：不同浏览器对iframe的支持程度不同，可能导致在不同浏览器中呈现不同的效果。

HTML 的 head 标签的作用及必不可少的标签

作用：

<head> 标签用于定义文档的头部，是所有头部元素的容器。头部的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，但这些信息通常不会真正作为内容显示给读者。

必不可少的标签：

在 <head> 标签中，<title> 是唯一必需的元素。它定义了文档的标题，该标题会显示在浏览器的标题栏中。

其他常见的标签包括 <meta>（提供额外信息，如字符集、作者、描述等）、<link>（定义文档与外部资源的关系，如链接样式表）、<style>（在文档中声明样式）等。

Canvas 和 SVG 的区别

  1. 绘制的图片格式：

    • Canvas：使用 getContext 方法绘制的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg 格式保存存储图像，是位图。
    • SVG：一种矢量图像格式，图像由数学公式描述，可以无损地放大或缩小。

  2. 事件处理器：

    • Canvas：不支持事件处理器。
    • SVG：支持事件处理器。

  3. 适用范围：

    • Canvas：适合有许多对象要被频繁重绘的图形密集型游戏。
    • SVG：适合带有大型渲染区域的应用程序，如地图。

HTML中，label标签的作用是什么？如何使用？

作用：

<label> 标签是 HTML 中用于创建表单元素标签和关联标签文本的标签。它通常与表单控件（如 <input>、<textarea>、<select> 等）结合使用，主要作用包括：

  1. 明确地将标签文本与相应的表单控件相关联，提高表单的可读性和易用性。
  2. 提高表单的可访问性。当用户点击 <label> 标签时，相关联的表单控件将获得焦点，从而改善用户体验和可用性。

使用方法：

可以通过两种方法来使用 <label> 标签：

HTML4 与 HTML5 的区别

  1. 取消的标签和属性：

    • HTML5 取消了一些过时的 HTML4 标签和属性，如 <font>、<center>、acronym、applet 等。

  2. 新的表单标签和元素：

    • HTML5 引入了更加智能的表单标签（如 date、email、url 等）和更加合理的标签（如 section、video、progress、nav、meter、time、aside、canvas 等）。

  3. 全局属性：

    • HTML5 引入了新的全局属性，如 id、tabindex、repeat 等。

  4. 文档结构标签：

    • HTML5 提供了更加语义化的文档结构标签，如 <article>、<aside>、<header>、<footer>、<hgroup> 等，以更好地描述文档的结构和内容。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/901916.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

力扣刷题（sql）--零散知识点（1）

力扣刷题（sql）--零散知识点（1）

通过一段时间的刷题&#xff0c;感觉自己的sql能力逐渐上去&#xff0c;所以不会像前三道题一样讲那么详细了&#xff0c;这里主要会讲到一些特殊的知识点和方法。另外&#xff0c;我的建议是做完一个题有好的想法赶紧记录下来&#xff0c;不要想着最后汇总&#xff0c;不然会懒…
阅读更多...
基于SSM平面设计课程在线学习系统的设计

基于SSM平面设计课程在线学习系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;课程类型管理&#xff0c;课程学习管理&#xff0c;试题讲解管理&#xff0c;作业信息管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&…
阅读更多...
Vue3实现获取验证码按钮倒计时效果

Vue3实现获取验证码按钮倒计时效果

Vue3实现获取验证码按钮倒计时效果 效果描述&#xff1a;用户点击获取验证码按钮&#xff0c;发送请求给后端&#xff0c;按钮失效&#xff0c;并且开始倒计时60秒&#xff1b;在此期间&#xff0c;用户无法再次点击按钮&#xff0c;即使用户刷新页面&#xff0c;倒计时依然存在…
阅读更多...
Java项目实战II基于微信小程序的马拉松报名系统（开发文档+数据库+源码）

Java项目实战II基于微信小程序的马拉松报名系统（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 马拉松运动…
阅读更多...
XQT_UI 组件｜01｜颜色

XQT_UI 组件｜01｜颜色

介绍 XColor 是一个用于处理颜色的类&#xff0c;提供了获取颜色和样式的方法。它可以与 Qt 的 UI 组件结合使用&#xff0c;以便在应用程序中实现丰富的颜色效果。 安装 确保你已经在项目中包含了 xqt_color_palette.hpp 和相关的头文件。 #include "xqt_color_palet…
阅读更多...
【Go语言】Gin框架的简单基本文档

【Go语言】Gin框架的简单基本文档

思维导图 一、go 原生的http服务 在go中写一个web服务非常方便和快速&#xff1a; package mainimport ("encoding/json""fmt""io""net/http" )type Response struct {Code int json:"code"Data any json:"dat…
阅读更多...
Spring中配置文件方式来配置实现数据源

Spring中配置文件方式来配置实现数据源

我的后端学习大纲 我Spring学习大纲 1.1.数据源&#xff08;连接池&#xff09;的作用&#xff1a; 1.数据源&#xff08;连接池&#xff09;是提高程序性能而出现的2.数据源的使用步骤 &#xff1a; 创建数据源对象&#xff0c;在对象创建的时候会初始化部分连接资源使用连接…
阅读更多...
【jvm】堆的内部结构

【jvm】堆的内部结构

目录 1. 说明2. 年轻代&#xff08;Young Generation&#xff09;2.1 说明2.2 Eden区2.3 Survivor区 3. 老年代&#xff08;Old Generation&#xff09;3.1 说明3.2 对象存放3.3 垃圾回收 4. jdk7及之前5. jdk8及之后 1. 说明 1.JVM堆的内部结构主要包括年轻代&#xff08;You…
阅读更多...
录屏软件推荐，4个工具助你高效录屏。

录屏软件推荐，4个工具助你高效录屏。

不同的录屏软件具有不同的特点和优势&#xff0c;如果只是偶尔需要录制&#xff0c;Win10 自带的录制功能就很方便&#xff1b;如果需要更加专业的录制和编辑功能&#xff0c;我可以推荐几款功能更加多样也效果较好的第三方软件。 1、福昕高清录屏 直达&#xff1a;www.foxits…
阅读更多...
SVM（支持向量机）

SVM（支持向量机）

SVM&#xff08;支持向量机&#xff09; 引言 支持向量机(Support Vector Machine,SVM)&#xff0c;可以用来解答二分类问题。支持向量(Support Vector)&#xff1a;把划分数据的决策边界叫做超平面&#xff0c;点到超平面的距离叫做间隔。在SVM中&#xff0c;距离超平面最近…
阅读更多...
基于neo4j的新冠治疗和新冠患者轨迹的知识图谱问答系统

基于neo4j的新冠治疗和新冠患者轨迹的知识图谱问答系统

毕业设计还在苦恼选题&#xff1f;想做一个兼具前沿性和实用性的技术项目&#xff1f;了解下这款基于Neo4j的新冠治疗和患者轨迹的知识图谱问答系统吧&#xff01; 系统可以实现两大功能模块&#xff1a;新冠医疗信息和患者活动轨迹的展示与问答。通过图谱技术&#xff0c;你可…
阅读更多...
VBA技术资料MF219：创建一个新的类型模块

VBA技术资料MF219：创建一个新的类型模块

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
【方波转正弦波谐波二阶】2022-6-10

【方波转正弦波谐波二阶】2022-6-10

缘由怎么用555时基电路将方波转换为正弦波&#xff1f;-其他-CSDN问答 可参带通滤波器电路图大全&#xff08;三款带通滤波器电路设计原理图详解&#xff09; - 全文 - 应用电子电路 - 电子发烧友网
阅读更多...
《关于构图问题》

《关于构图问题》

这是一本讲绘画技巧的书&#xff0c;但仔细琢磨体现出不易察觉的东方哲学思想。中国画讲究意境与留白&#xff0c;留白不代表“空”&#xff0c;而是代表对“实”的延伸&#xff0c;留下瞎想空间&#xff0c;实现对“有限&#xff08;实&#xff09;”的超越。 总论 文艺是人们…
阅读更多...
演员王丹妮化身岛屿姐姐 开启少年们的欢乐挑战之旅

演员王丹妮化身岛屿姐姐 开启少年们的欢乐挑战之旅

全民海岛真人秀《岛屿少年》正在持续热播中&#xff0c;少年们迎来了“茶嵛饭后”⻩⻥馆的开业日&#xff0c;知名演员王丹妮以岛屿姐姐的身份&#xff0c;悄然降临此地&#xff0c;为岛屿少年们带来了一场别开生面的考验。 在餐厅正式开业前夕&#xff0c;王丹妮巧妙地伪装成普…
阅读更多...
【Spark+Hive大数据】基于spark抖音数据分析预测舆情系统（完整系统源码+数据库+开发笔记+详细部署教程）✅

【Spark+Hive大数据】基于spark抖音数据分析预测舆情系统（完整系统源码+数据库+开发笔记+详细部署教程）✅

目录 【SparkHive大数据】基于spark抖音数据分析预测舆情系统&#xff08;完整系统源码数据库开发笔记详细部署教程&#xff09;✅ 一、项目背景 二、研究目的 三、项目意义 四、项目功能 五、项目创新点​​​​​​​ 六、算法介绍 七、项目展示 八、启动文档 九、…
阅读更多...
Android Kotlin中协程详解

Android Kotlin中协程详解

博主前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住也分享一下给大家&#xff0c; &#x1f449;点击跳转到教程 前言 Kotlin协程介绍&#xff1a; Kotlin 协程是 Kotlin 语言中的一种用于处理异步编程的机制。它提供了一…
阅读更多...
Chromium127调试指南 Windows篇 - 安装C++扩展与配置(五)

Chromium127调试指南 Windows篇 - 安装C++扩展与配置(五)

前言 在前面的文章中&#xff0c;我们已经安装了Visual Studio Code&#xff08;VS Code&#xff09;并配置了基本的扩展。现在&#xff0c;我们将进一步优化我们的开发环境&#xff0c;重点关注C相关的依赖扩展。这些扩展对于在VS Code中高效开发和调试Chromium项目至关重要。…
阅读更多...
如何在 Linux 中对 USB 驱动器进行分区

如何在 Linux 中对 USB 驱动器进行分区

如何在 Linux 中对 USB 驱动器进行分区 一、说明 为了在 Linux 上访问 USB 驱动器&#xff0c;它需要有一个或多个分区。由于 USB 驱动器通常相对较小&#xff0c;仅用于临时存储或轻松传输文件&#xff0c;因此绝大多数用户会选择只配置一个跨越整个 USB 磁盘的分区。但是&a…
阅读更多...
基于Django+python的车牌识别系统设计与实现（带文档）

基于Django+python的车牌识别系统设计与实现（带文档）

项目运行 需要先安装Python的相关依赖&#xff1a;pymysql&#xff0c;Django3.2.8&#xff0c;pillow 使用pip install 安装 第一步&#xff1a;创建数据库 第二步&#xff1a;执行SQL语句&#xff0c;.sql文件&#xff0c;运行该文件中的SQL语句 第三步&#xff1a;修改源…
阅读更多...
最新文章

Copyright @ 2022~2023