HTML---html面试题

1.src与href的区别

1使用元素不同src表示源地址,用在img、script、iframe等元素上。href表示超文本引用,用在link和a等元素上。

2src的内容是页面必不可少的一部分,表示引入。href的内容与该页面有关联,表示引用。简单来说,区别就是引入和引用href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

2.静态网页和动态网页

静态网页是指没有数据交互(没有数据库参与,没有服务器数据的加载)的网页,

动态网页指有后台数据参与的网页,比如JSP、ASP页面等

3.DOCTYPE有什么作用

<!DOCTYPE>声明位于文档中的最前面,位于<html>标签之前,即告知浏览器的解析器,用什么文档类型规范来解析这个文档。DOCTYPE不存在或格式不正确都会导致文档以混杂模式呈现。​​​​​​​

4.HTML语义化的理解

主要目的用正确的标签做正确的事,语义化标签如<header><section><footer>等。

  • 页面结构化,使阅读网站源代码的人能够快速理清HTML文档的结构,便于学习和后期维护
  • 可读性好,即使在没有样式的情况下也以一种文档的格式在用户面前展示,用户容易理解阅读
  • 有利于SEO,因为搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重

5.锚点的作用及如何创建锚点

锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义锚点后,可以创建直接跳转至该锚点的链接,这样无须通过滚动页面来寻找

<a name="info">个人信息</a>

<a href="#info">跳转个人信息</a>

<h1 id="info">个人信息</h1>

<a href="#info">跳转个人信息</a>

6.html5新特性

HTML5 现在已经不是 SGML 的子集,主要是关于图像画布,音频视频,存储,语义化标签,表单控件,多任务,位置等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素,比如 article、footer、header、nav、section;

(6)表单控件,calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

7.如何处理HTML5新标签的浏览器兼容问题?

IE6/IE7/IE8支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

也可以直接使用成熟的框架、比如html5 shim;

< !--[if lt IE 9]> < script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> < ![endif]-->

8.如何区分 HTML 和 HTML5?

在文档声明上,HTML代码很长,而HTML5只有简简单单的声明。

HTML4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5.0

<!DOCTYPE html>

在结构语义上,HTML4.0:没有体现结构语义化的标签,HTML5:在语义上却有很大的优势。提供了一些新的HTML5标签比如:<header> 、<nav>、<article>、<aside>、<footer>等

9.对SSR有了解吗,它主要解决什么问题?

Server-Side Rendering 我们称其为SSR,意为服务端渲染指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程;解决了以下两个问题:

seo:搜索引擎优先爬取页面HTML结构,使用ssr时,服务端已经生成了和业务想关联的HTML,有利于seo

首屏呈现渲染:用户无需等待页面所有js加载完成就可以看到页面视图(压力来到了服务器,所以需要权衡哪些用服务端渲染,哪些交给客户端)

10.服务端和客户端渲染的区别

  • 二者本质的区别:是谁来完成了html的完整拼接,服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。
  • 响应速度:服务端渲染会加快页面的响应速度,首屏渲染快,客户端渲染页面的响应速度慢。
  • SEO优化:服务端渲染因为是多个页面,更有利于爬虫爬取信息,客户端渲染不利于SEO优化。
  • 开发效率:服务端渲染逻辑分离的不好,不利于前后端分离,开发效率低,客户端渲染是采用前后端分离的方式开发,效率更高,也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染:

源码里如果能找到前端页面中的内容文字,那就是在服务端构建的DOM,就是服务端渲染,反之是客户端渲染。

应该使用服务端渲染还是客户端渲染:

我们要根据业务场景去选择渲染的方式。

如果是企业级网站,主要功能是页面展示,它没有复杂的交互,并且需要良好的SEO,那我们应该使用服务端渲染。

如果是后台管理页面,交互性很强,它不需要考虑到SEO,那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的,现在很多网站使用服务端渲染和客户端渲染结合的方式:首屏使用服务端渲染,其他页面使用客户端渲染。这样可以保证首屏的加载速度,也完成了前后端分离。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyTorch深度学习实战(37)——CycleGAN详解与实现

PyTorch深度学习实战&#xff08;37&#xff09;——CycleGAN详解与实现 0. 前言1. CycleGAN 基本原理2. CycleGAN 模型分析3. 实现 CycleGAN小结系列链接 0. 前言 CycleGAN 是一种用于图像转换的生成对抗网络(Generative Adversarial Network, GAN)&#xff0c;可以在不需要配…

docker 安装Oracle19c

一、下载镜像 docker pull registry.cn-hangzhou.aliyuncs.com/zhuyijun/oracle:19c通过docker images 命令查看 如下图&#xff1a;已经有oracle 19c镜像。 二、创建挂载文件 # 创建文件 mkdir -p /home/data/oracle/oradata# 授权&#xff0c;不授权会导致后面安装失败 c…

六西格玛培训揭秘:线上与线下费用差异背后的原因

在当今知识经济的时代&#xff0c;六西格玛作为一种先进的质量管理方法&#xff0c;受到越来越多企业和个人的青睐。然而&#xff0c;当我们在选择六西格玛培训时&#xff0c;不难发现线上和线下的培训费用存在明显的差异。那么&#xff0c;究竟是什么原因导致了这种差异呢&…

NDK的log.h使用__android_log_print报错app:buildCMakeDebug[x86_64]

org.gradle.api.tasks.TaskExecutionException: Execution failed for task :app:buildCMakeDebug[x86_64] 重点是 Execution failed for task :app:buildCMakeDebug[x86_64]. 我的代码&#xff1a; #include <android/log.h> #define LOG_TAG "MyJNI" #d…

【0261】pg内核 raw parsetree 深入分析(一)

1. 前言 pg内核完成原始解析树(raw parsetree)相关功能入口是exec_simple_query()函数中的pg_analyze_and_rewrite(),该函数位于postgres.c(src/backend/cop )。该函数内部有几个非常重要的函数调用处理: (1)pg_parse_query() 对一个或多个查询(原始字符串,如:SELE…

git reset --hard origin/master 文件被删除后的恢复操作

git reset --hard origin/master 是将你当前的工作目录重置为远程仓库&#xff08;origin&#xff09;的 master 分支的最新提交状态&#xff0c; 并且会丢弃所有未提交的修改以及本地的提交历史。这个命令将会强制更新你的工作目录&#xff0c; 使其与远程仓库的状态完全一致…

Spring Cloud Alibaba-04-Sentinel规则持久化Nacos方式-推荐

Lison <dreamlison@163.com>, v1.0.0, 2023.10.03 Spring Cloud Alibaba-04-Sentinel规则持久化全面Nacos方式 文章目录 Spring Cloud Alibaba-04-Sentinel规则持久化全面Nacos方式Sentinel-Dashboard 添加规则Nacos双向绑定实现注释掉test增加 NacosConfig配置加入Rep…

ElasticSearch聚合操作

目录 ElasticSearch聚合操作 基本语法 聚合的分类 后续示例数据 Metric Aggregation Bucket Aggregation ES聚合分析不精准原因分析 提高聚合精确度 ElasticSearch聚合操作 Elasticsearch除搜索以外&#xff0c;提供了针对ES 数据进行统计分析的功能。聚合(aggregation…

压缩感知中常用的稀疏基

稀疏基的基本概念 在压缩感知中&#xff0c;稀疏基是指可以将信号表示为少数几个非零系数的基。信号在这组基下的表示称为稀疏表示。理想情况下&#xff0c;信号在稀疏基下的大部分系数都应该为零&#xff0c;只有少数几个系数是非零的。稀疏基的选择对信号的稀疏表示和压缩感…

第3.4章:StarRocks数据导入-Routine Load

注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的Routine Load导入机制 一、概述 Routine Load&#xff08;例行导入&#xff09;支持用户提交一个常驻的导入任务&#xff0c;可以将消息流存储在 Kafka 的Topic中&#xff0c;通过订阅Topic 中的全部或部分分区的消息&#…

【备忘】云主机环境准备

文章目录 一&#xff0c;基础设置二&#xff0c;scp命令三&#xff0c;nginx相关 一&#xff0c;基础设置 #查看cpu cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c#查看os版本 cat /etc/redhat-release#升级所有包同时也升级软件和系统内核 yum -y updatehostnamect…

AN7525 集成锂电池充电管理和轻触三功能 LED 驱动专用芯片 实现全亮、25%亮、暴闪和灭 三种功能

AN7525是一款单片集成锂电池充电管理和轻触三功能 LED 驱动专用芯片。其内部集成了锂电池充电管理电路&#xff0c;可提供高达 600mA的充电电流:内部集成了高达 800m 的 LED 驱动电路&#xff0c;可驱动单颗 LED 实现全亮25%亮、暴闪和灭循环的轻触三功能切换控制。 AN…

【MySQL】报错 Incorrect string value: ‘\xE5\xA4\xA9\xE5\x96\x9C‘ for column的解决方法

目录 解决方法如下&#xff1a;例如&#xff1a; 在向数据库中插入中文时遇到报错Incorrect string value: \xE5\xA4\xA9\xE5\x96\x9C for column &#xff0c;此时为数据库的编码格式有问题&#xff0c;可以按照如下方法修改 解决方法如下&#xff1a; 使用show create table…

Mysql的SQL调优-面试

面试SQL优化的具体操作&#xff1a; 1、在表中建立索引&#xff0c;优先考虑where、group by使用到的字段。 2、尽量避免使用select *&#xff0c;返回无用的字段会降低查询效率。错误如下&#xff1a; SELECT * FROM table 优化方式&#xff1a;使用具体的字段代替 *&#xf…

Hash 算法详解!

什么是Hash算法 散列算法&#xff08;Hash Algorithm&#xff09;&#xff0c;又称哈希算法&#xff0c;杂凑算法&#xff0c;是一种从任意文件中创造小的数字「指纹」的方法。Hash算法就是一种以较短的信息来保证文件唯一性的标志&#xff0c;这种标志与文件的每一个字节都相…

COMSOL在光电领域应用(常见案例合集)

随着科技的飞速发展&#xff0c;光电领域作为现代科学与技术的交汇点&#xff0c;正受到越来越多的关注。在这一领域中&#xff0c;COMSOL作为一款强大的多物理场仿真软件&#xff0c;正发挥着不可或缺的作用。本文将通过一些常见的案例&#xff0c;探讨COMSOL在光电领域的应用…

学习数仓工具 dbt

DBT 是一个有趣的工具&#xff0c;它通过一种结构化的方式定义了数仓中各种表、视图的构建和填充方式。 dbt 面相的对象是数据开发团队&#xff0c;提供了如下几个最有价值的能力&#xff1a; 支持多种数据库通过 select 来定义数据&#xff0c;无需编写 DML构建数据时&#…

基于EasyCVR视频汇聚系统的公安网视频联网共享视频云平台建设思路分析(一)

随着社会的发展和科技的进步&#xff0c;视频监控系统在各个领域的应用越来越广泛&#xff0c;视频云平台建设已经成为了行业数字化转型的重要一环。公安网视频汇聚联网共享云的建设需要充分考虑技术、架构、安全、存储、计算等多方面因素&#xff0c;以确保平台的稳定性和可用…

openEuler2203 LTS安装VMware WorkStation Pro 17并远程桌面连接Linux服务器

openEuler 2203 LTS默认只有命令行&#xff0c;没有GUI图形界面&#xff0c;在其中安装VMware WorkStation需要有图形界面的支持。这里以安装深度的DDE桌面环境&#xff0c;最后通过VNC远程桌面连接Linux服务器操作VMware WorkStation。 以下操作请保持网络能正常连接 1、安装…

智能搬运机器人|海格里斯将如何持续推进工业和物流的智能化升级与发展?

存取、搬运、分拣是物流行业中的通用功能&#xff0c;但具体到每个行业又十分不同&#xff0c;例如&#xff1a;新能源电池领域&#xff0c;它所搬运的东西是电池&#xff0c;50KG~200KG&#xff1b;快递行业领域&#xff0c;所要处理的物料是那种扁平件和信封等等&#xff0c;…