HTML知识点复习

1.src 和 href 的区别

src:表示对资源的引用, src指向的内容会嵌入到其标签里。

当浏览器解析到该元素时候,会暂停其他资源的下载和处理, 直到将该资源加载、编译、执行完毕,所以js脚本一般会放在页面底部

href:表示超文本引用, 它指向一些网络资源。

当浏览器识别到href指向的文件时, 会并行下载资源, 不会停止对当前文档的处理。

常用在a、link等标签上

2.对HTML语义化的理解

语义化是根据内容的语义化,选择合适的标签(代码语义化)。

通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下:

~对机器友好, 更适合搜索引擎爬虫爬取有效信息;

语义类还支持读屏软件,根据文章可以自动生成目录

~对开发者友好,语义类标签增强了可读性,结构更加清晰

便于开发者清晰地看出网页的结构,便于团队开发和维护

3.DOCTYPE(文档类型)的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,

目的是告诉浏览器应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对css代码甚至JavaScript脚本的解析。DOCTYPE必须声明在html文档的第一行。

浏览器渲染页面的两种模式可以通过document.compatMode获取。如语雀官网的文档类型是 CSS1Compat

~CSS1Compat:标准模式(Strict Mode),默认模式,浏览器使用W3C标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。

~BackCompat:怪异模式(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中, 页面以一种比较宽松的向后兼容的方式显示。

4.script标签中defer和async的区别

如果没有defer或者async属性,浏览器会立即加载并执行相应的脚本。

不会等待后续加载的文档元素,读取到就会开始加载和执行,这样会阻塞后续文档的加载。

直观看三者之间的区别:

蓝色:js脚本网络加载时间;

红色:js脚本执行时间;

绿色:html解析

defer和async都是一部加载外部的js脚本文件,都不会阻塞页面的解析,其区别如下:

~执行顺序:多个带async属性的标签不能保证加载的顺序;多个defer属性的标签按照加载顺序执行

~脚本是否并行执行:

async属性,表示后续文档的加载和执行与js脚本的加载和执行时并行进行的,即异步执行;

defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的,

js脚本需要等到文档所有元素解析完成之后才执行

5.常用的meta标签有哪些,作用分别是什么

meta标签由 name 和 content 属性定义,用来描述网页文档的属性, 比如网页的作者,网页描述,关键词等,

除了http标准固定了一些name作为大家使用的共识,开发者还可以自定义name。

常用的meta标签:

6.img的srcset属性的作用:

响应式页面中经常用到根据屏幕密度设置不同的图片。这是就用到了 img 标签的 srcset 属性。

srcset 属性用于设置不同屏幕密度下,img自动加载不同的图片,用法如下:

使用上面的代码,就能实现在屏幕密度为1x的情况下加载image - 128.png,屏幕密度为2x时加载image-256.png

按照上面的实现, 不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果灭一个图片都设置4张图片,

加载就会很慢。所以就有了新的srcset标准。代码如下:

其中srcset指定图片的地址和对应的质量。sizes用来设置图片尺寸零界点

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

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

相关文章

Windows11电脑总是一闪一闪的,黑一下亮一些怎么解决

Windows11电脑总是一闪一闪的,黑一下亮一些怎么解决 1. 打开设备管理器2. 点击显示适配器3. 更新下方两个选项的驱动3.1 更新驱动Inter(R) UHD Graphixs3.2 更新驱动NVIDIA GeForce RTX 4060 Laptop GPU 4. 其他文章快来试试吧🥰 1. 打开设备管理器 在电…

WPS计算机二级•高效操作技巧

听说这里是目录哦 斜线表头 展示项目名称🍋‍🟩横排转竖排🍐批量删除表格空白行🍈方法一方法二建辅助列找空值 能量站😚 斜线表头 展示项目名称🍋‍🟩 选中单元格,单击右键➡️“设…

使用Torchvision框架实现对象检测:从Faster-RCNN模型到自定义数据集,训练模型,完成目标检测任务。

引言 对象检测是一项计算机视觉中的核心任务,其目标是识别图像中的目标并标记它们的位置和类别。在Pytorch生态系统中,Torchvision提供了多种预训练的对象检测模型(如Faster-RCNN、Mask-RCNN等),为开发者快速构建应用…

SSM课设-学生管理系统

【课设者】SSM课设-学生管理系统 技术栈: 后端: SpringSpringMVCMybatisMySQLJSP 前端: HtmlCssJavaScriptEasyUIAjax 功能: 学生端: 登陆 学生信息管理 个人信息管理 老师端: 多了教师信息管理 管理员端: 多了班级信息管理 多了年级信息管理 多了系统用户管理

C语言之装甲车库车辆动态监控辅助记录系统

🌟 嗨,我是LucianaiB! 🌍 总有人间一两风,填我十万八千梦。 🚀 路漫漫其修远兮,吾将上下而求索。 C语言之装甲车库车辆动态监控辅助记录系统 目录 一、前言 1.1 (一)…

【STM32-学习笔记-4-】PWM、输入捕获(PWMI)

文章目录 1、PWMPWM配置 2、输入捕获配置3、编码器 1、PWM PWM配置 配置时基单元配置输出比较单元配置输出PWM波的端口 #include "stm32f10x.h" // Device headervoid PWM_Init(void) { //**配置输出PWM波的端口**********************************…

Kinova仿生机械臂Gen3搭载BOTA 力矩传感器SeneOne:彰显机器人触觉 AI 与六维力传感的融合力量

随着工业4.0时代的到来,自动化和智能化成为制造业的趋势。机器人作为实现这一趋势的重要工具,其性能和智能水平直接影响到生产效率和产品质量。然而,传统的机器人系统在应对复杂任务时往往缺乏足够的灵活性和适应性。为了解决这一问题&#x…

有限元分析学习——Anasys Workbanch第一阶段笔记(13)网格单元分类、物理场与自由度概念

目录 0 序言 1 网格单元分类 2 各类单元的应用 3 massage与帮助和查看 4 物理场和自由度 4.1 各种单元自由度 4.2 结构自由度 0 序言 本章主要讲解网格单元的分类及物理场和自由度的相关概念。 1 网格单元分类 按单元的形状分类:实体单元、壳单元和杆梁单元…

python3GUI--仿崩坏三二次元登录页面(附下载地址) By:PyQt5

文章目录 一.前言二.预览三.实现方案1.实现原理1.PyQt52. 具体实现 2.UI设计1.UI组件化、模块化2.UI设计风格思路 3.项目代码结构4.使用方法3.代码分享1.支持跳转网页的QLabel组件2.三角形ICON按钮 四.总结 大小:33.3 …

Pytorch使用教程(12)-如何进行并行训练?

在使用GPU训练大模型时,往往会面临单卡显存不足的情况。这时,通过多卡并行的形式来扩大显存是一个有效的解决方案。PyTorch主要提供了两个类来实现多卡并行:数据并行torch.nn.DataParallel(DP)和模型并行torch.nn.Dist…

电脑换固态硬盘

参考: https://baijiahao.baidu.com/s?id1724377623311611247 一、根据尺寸和缺口可以分为以下几种: 1、M.2 NVME协议的固态 大部分笔记本是22x42MM和22x80MM nvme固态。 在京东直接搜: M.2 2242 M.2 2280 2、msata接口固态 3、NGFF M.…

利用免费GIS工具箱实现高斯泼溅切片,将 PLY 格式转换为 3dtiles

在地理信息系统(GIS)和三维数据处理领域,不同数据格式有其独特应用场景与优势。PLY(Polygon File Format)格式常用于存储多边形网格数据,而 3DTiles 格式在 Web 端三维场景展示等方面表现出色。将 PLY 格式…

【华为路由/交换机的ftp文件操作】

华为路由/交换机的ftp文件操作 PC:10.0.1.1 R1:10.0.1.254 / 10.0.2.254 FTP:10.0.2.1 S1:无配置 在桌面创建FTP-Huawei文件夹,里面创建config/test.txt。 点击上图中的“启动”按钮。 然后ftp到server,…

基于微信小程序的安心陪诊管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

利用rsync备份全网服务器数据

一、项目描述 某公司里有一台Web服务器,里面的数据很重要,但是如果硬盘坏了数据就会丢失,现在领导要求把数据做备份,这样Web服务器数据丢失在可以进行恢复,要求如下: 1、备份要求 每天晚上00点整在Web服…

Mysql 主从复制原理及其工作过程,配置一主两从实验

主从原理:MySQL 主从同步是一种数据库复制技术,它通过将主服务器上的数据更改复制到一个或多个从服务器,实现数据的自动同步。 主从同步的核心原理是将主服务器上的二进制日志复制到从服务器,并在从服务器上执行这些日志中的操作…

Ubuntu 24.04 LTS 空闲硬盘挂载到 文件管理器的 other locations

Ubuntu 24.04 LTS 确认硬盘是否被识别 使用 lsblk 查看信息,其中sda这个盘是我找不到的,途中是挂在好的。 分区和格式化硬盘 如果新硬盘没有分区,你需要先分区并格式化它。假设新硬盘为 /dev/sdb,使用 fdisk 或 parted 对硬盘…

调试Hadoop源代码

个人博客地址:调试Hadoop源代码 | 一张假钞的真实世界 Hadoop版本 Hadoop 2.7.3 调试模式下启动Hadoop NameNode 在${HADOOP_HOME}/etc/hadoop/hadoop-env.sh中设置NameNode启动的JVM参数,如下: export HADOOP_NAMENODE_OPTS"-Xdeb…

JSON-stringify和parse

目录 JSON序列化 JSON反序列化 序列化和反序列化转换 深拷贝 JSON.parse接受参数类型错误导致抛出异常 当有子元素的时候,设置父元素样式的方式 防抖问题 JSON序列化 const obj {name: "John",age: 30,city: "New York",};// 基本用法&…

3 前端(中):JavaScript

文章目录 前言:JavaScript简介一、ECMAscript(JavaScript基本语法)1 JavaScript与html结合方式(快速入门)2 基本知识(1)JavaScript注释(和Java注释一样)(2&am…