当前位置： 首页 > news >正文

HTML优化方法

news 2026/3/29 22:45:03

HTML编码规范

代码格式化与缩进

1.缩进规则

​ 推荐使用空格缩进而不是Tab，因为不同环境下空格的效果更加一致。常见缩进量为2个或4个空格

2.标签对齐

​ 在嵌套的HTML结构中，子标签应当缩进，以清晰地展示层级关系。

3.属性的排列

​ 对于较短的标签，将属性放在同一行中。

​ 如果标签属性较多，可以分行排列，属性对齐以提高可读性。

4.标签的关闭

自闭合标签：自闭合的HTML标签（如<img>、<br>、<hr>等）在HTML5中不需要强制加上斜杠，但为了兼容性或规范，可以加上。

示例：

<img src="image.jpg" alt="描述文字" />
5.换行与空行

换行：在不同的块级元素之间（如<div>、<section>、<header>），添加换行符以保持代码清晰。

空行：在逻辑上相关但不同的代码块之间可以使用空行，以提高可读性。

文件命名规则

统一格式

小写字母（确保跨平台兼容性）

连字符-（而不是使用下划线_)

语义化命名

提升HTML性能

优化图片和媒体资源

使用现代图片格式

响应式图片

延迟加载图片和媒体

压缩和优化图片

音视频优化：选择合适的格式、自适应流媒体、延迟加载视频

相关文章：

HTML优化方法

HTML编码规范 代码格式化与缩进 1.缩进规则 ​ 推荐使用空格缩进而不是Tab&#xff0c;因为不同环境下空格的效果更加一致。常见缩进量为2个或4个空格 2.标签对齐 ​ 在嵌套的HTML结构中&#xff0c;子标签应当缩进&#xff0c;以清晰地展示层级关系。 3.属性的排列 ​ …...

编程日记 2024/8/21 21:56:13

Codeforces Round 961 D. Cases 【SOS DP、思维】

D. Cases 题意 有一个长度为 n n n 且仅由前 c c c 个大写字母组成的字符串&#xff0c;问最少选取多少种字母为每个单词的结尾&#xff0c;使得每个单词长度不超过 k k k 思路 首先注意到最后一个字母一定要选择&#xff0c;接下来我们给出一个断言&#xff1a;如果一个…...

编程日记 2024/8/21 21:53:09

VirtualBox上的Oracle Linux虚拟机安装Docker全流程

1.安装docker依赖 yum install -y yum-utils device-mapper-persistent-data lvm2 2.安装docker仓库 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 生成docker的yum源配置到在 /etc/yum.repos.d/docker-ce.repo 3.安装D…...

编程日记 2024/8/21 21:52:08

LNMP安装部署

目录 一、Nginx安装部署 1.安装包下载 2.下载相关依赖工具 3. 创建运行用户 4.编译安装 5.优化路径 6.将nginx添加至系统服务 7.文件赋权 二、MySQL部署安装 1.解压 2.安装相关工具 3.创建运行用户 4.编译安装 5.修改配置文件 6.更改mysql安装目录和配置文件的属…...

编程日记 2024/8/21 21:51:07

django之自定义序列化器用法

在Django中&#xff0c;自定义序列化器方法通常用于处理复杂的数据转换逻辑&#xff0c;特别是在使用Django REST framework&#xff08;DRF&#xff09;时。自定义序列化器方法可以帮助你在序列化和反序列化过程中执行特定的逻辑&#xff0c;比如格式化日期、计算字段值、或者…...

编程日记 2024/8/21 21:50:05

20240821给飞凌OK3588-C的核心板刷Rockchip原厂的Buildroot并挂载1TB的exFAT格式的TF卡

fdisk -l df -h df -t df -T mount 20240821给飞凌OK3588-C的核心板刷Rockchip原厂的Buildroot并挂载1TB的exFAT格式的TF卡 2024/8/21 18:06 【切记&#xff0c;对于Rockchip原厂的Buildroot&#xff0c;如果你没有针对性的适配DTS&#xff1a;修改其中的GPIO口供电&#xff0c…...

编程日记 2024/8/21 21:49:04

多模态学习Multimodal Learning：人工智能中的多模态原理与技术介绍初步了解

多模态学习&#xff08;Multimodal Learning&#xff09;是机器学习中的一个前沿领域&#xff0c;旨在综合处理和理解来自不同模态的数据。模态可以包括文本、图像、音频、视频等。随着数据多样性和复杂性增加&#xff0c;多模态学习在自然语言处理、计算机视觉、语音识别等领域…...

编程日记 2024/8/21 21:47:01

外部环境连接kafka

修改配置文件外部环境连接kafka 1、kafka的docker官方镜像地址2、kafka官方介绍的三种连接方式3、方式一&#xff1a;Default configs默认配置4、方式二&#xff1a;File input&#xff08;文件输入&#xff1a;外部配置文件替换docker容器内的配置文件&#xff09;4.1、首先查…...

编程日记 2024/8/21 21:44:59

结合了MySQL数据库、Elasticsearch和Redis，构建一个产品搜索和推荐系统

1. 数据库设置&#xff08;MySQL&#xff09; 首先&#xff0c;我们需要创建两个表来存储产品信息和产品类别信息。 CREATE DATABASE product_system;USE product_system;CREATE TABLE categories (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL,created_at…...

编程日记 2024/8/21 21:43:58

白酒与素食：健康与美味的双重享受

在美食的世界里&#xff0c;白酒与素食的搭配仿佛是一场跨界的盛宴。豪迈白酒&#xff08;HOMANLISM&#xff09;的醇香与精致素食的清新&#xff0c;在不经意间交织出了一幅美妙的画卷&#xff0c;让人在品味中感受到健康与美味的双重享受。 素食&#xff0c;以其清淡、自然的…...

编程日记 2024/8/21 21:42:57

工厂现场多功能帮手，三防平板改善管理体验

随着制造业的智能化变革&#xff0c;信息化、自动化和智能化逐渐成为工厂管理的新常态。在这一波技术浪潮中&#xff0c;三防平板作为一种多功能的工作工具&#xff0c;正在逐步改善工厂现场的管理体验。 一、三防平板的定义与特点 三防平板&#xff0c;顾名思义&#xff0c;是…...

编程日记 2024/8/21 21:41:56

【git】问题解决---Failed to connect to github.com

场景 最近运行命令git push,git pull或者git clone的时候总会报如下错误 fatal: unable to access https://github.com/xxxxx/xxxxxx.git/: **Failed to connect to github.com** port 443 after 21052 ms: Couldnt connect to server原因 一般是网络配置原因造成的, 如果能…...

编程日记 2024/8/21 21:39:54

Java 中 String 类型的特点

在 Java 中&#xff0c;String 是一种常用且重要的数据类型&#xff0c;用于表示和处理字符序列。它有一些独特的特性和用法&#xff0c;使得它在开发中非常灵活和高效。以下是关于 String 类型的一些特点、特殊性、使用技巧以及注意事项。 1. String 的特点 1.1 不可变性 定…...

编程日记 2024/8/21 21:38:52

AddressUtils 、RegionUtils IP地址工具类

一、类展示 AddressUtils &#xff1a; /*** 获取地址类**/ Slf4j NoArgsConstructor(access AccessLevel.PRIVATE) public class AddressUtils {// 未知地址public static final String UNKNOWN "XX XX";public static String getRealAddressByIP(String ip) {i…...

编程日记 2024/8/21 21:36:50

牛客网SQL进阶134： 满足条件的用户的试卷总完成次数和题目总练习次数

满足条件的用户的试卷完成数和题目练习数_牛客题霸_牛客网 0 问题描述 基于用户信息表user_info、试卷信息表examination_info、试卷作答记录表exam_record、题目练习记录表practice_record&#xff0c;筛选出 高难度SQL试卷得分平均值大于80并且是7级的用户&#xff0c;统计他…...

编程日记 2024/8/21 21:35:49

机器学习：逻辑回归处理手写数字的识别

1、获取数据, 图像分割该数据有50行100列&#xff0c;每个数字占据20*20个像素点&#xff0c;可以进行切分,划分出训练集和测试集。 import numpy as np import pandas as pd import cv2 imgcv2.imread("digits.png")#读取文件 graycv2.cvtColor(img,cv2.COLOR_BGR2G…...

编程日记 2024/8/21 21:34:48

文件上传真hard

一、SpringMVC实现文件上传 1.1.项目结构 1.1.2 控制器方法 RequestMapping("/upload1.do")public ModelAndView upload1(RequestParam("file1") MultipartFile f1) throws IOException {//获取文件名称String originalFilename f1.getOriginalFilename(…...

编程日记 2024/8/21 21:33:47

精益管理｜介绍一本专门研究防错法(Poka-Yoke)的书

在现代制造业中&#xff0c;如何确保产品在每个生产环节中不出现错误是企业追求的目标之一。而实现这一目标的关键技术之一就是防错法&#xff08;Poka-Yoke&#xff09;。作为一种简单而有效的精益管理、六西格玛管理工具&#xff0c;防错法帮助企业避免因人为错误或工艺不当导…...

编程日记 2024/8/21 21:32:46

面试题目：(4)给表达式添加运算符

目录 题目 代码 思路解析 例子 题目 题目 给定一个仅包含数字 0-9 的字符串 num 和一个目标值整数 target &#xff0c;在 num 的数字之间添加 二元 运算符&#xff08;不是一元&#xff09;、- 或 * &#xff0c;返回 所有能够得到 target 的表达式。1 < num.length &…...

编程日记 2024/8/21 21:28:43

[C#]将opencvsharp的Mat对象转成onnxruntime的inputtensor的3种方法

第一种方法&#xff1a;在创建tensor时候直接赋值改变每个tensor的值&#xff0c;以下是伪代码&#xff1a; var image new Mat(image_path);inpWidth image.Width;inpHeight image.Height;//将图片转为RGB通道Mat image_rgb new Mat();Cv2.CvtColor(image, image_rgb, Col…...

编程日记 2024/8/21 21:23:38

微信数据库密钥自动获取：从手动繁琐到一键提取的技术革新

微信数据库密钥自动获取&#xff1a;从手动繁琐到一键提取的技术革新 【免费下载链接】PyWxDump 获取微信账号信息(昵称/账号/手机/邮箱/数据库密钥/wxid)&#xff1b;PC微信数据库读取、解密脚本&#xff1b;聊天记录查看工具&#xff1b;聊天记录导出为html(包含语音图片)。支…...

编程新知 2026/3/29 21:22:20

LibreTranslate模型部署优化指南：从技术痛点到落地实践

LibreTranslate模型部署优化指南&#xff1a;从技术痛点到落地实践 【免费下载链接】LibreTranslate Free and Open Source Machine Translation API. Self-hosted, offline capable and easy to setup. 项目地址: https://gitcode.com/GitHub_Trending/li/LibreTranslate …...

编程新知 2026/3/29 21:10:15

OptiScaler终极指南：打破DLSS垄断，让所有显卡都能享受AI超分辨率

OptiScaler终极指南&#xff1a;打破DLSS垄断&#xff0c;让所有显卡都能享受AI超分辨率 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler…...

编程新知 2026/3/29 20:38:09

dry插件系统解析：如何扩展自定义Docker管理功能

dry插件系统解析&#xff1a;如何扩展自定义Docker管理功能 【免费下载链接】dry moncho/dry: dry&#xff08;Docker Run Commands&#xff09;是一款命令行工具&#xff0c;旨在简化对Docker容器的操作管理&#xff0c;提供了一种简洁的方式创建、启动、停止和删除Docker容器…...

编程新知 2026/3/29 20:34:09

Qwen3-ASR-1.7B问题解决：服务重启、音频格式兼容全攻略

Qwen3-ASR-1.7B问题解决&#xff1a;服务重启、音频格式兼容全攻略 1. 引言&#xff1a;语音识别服务的稳定性挑战 语音识别技术正在改变我们处理音频内容的方式&#xff0c;但在实际部署中&#xff0c;服务稳定性和格式兼容性常常成为绊脚石。Qwen3-ASR-1.7B作为阿里云通义千…...

编程新知 2026/3/29 20:34:09

Network Connection Class深度优化：10个提升网络检测精度的技巧

Network Connection Class深度优化&#xff1a;10个提升网络检测精度的技巧 【免费下载链接】network-connection-class Listen to current network traffic in the app and categorize the quality of the network. 项目地址: https://gitcode.com/gh_mirrors/ne/network-co…...

编程新知 2026/3/29 20:32:08

倩女幽魂易语言源码｜支持编译运行，适合易语言开发者学习研究

温馨提示&#xff1a;文末有联系方式【标一】可编译倩女幽魂易语言源码开放 本套源码基于易语言开发&#xff0c;已完成基础环境配置与编译测试&#xff0c;生成的程序可正常启动并执行核心逻辑。 适用于熟悉易语言语法、掌握API调用与内存读写技术的开发者。【标二】仅面向具备…...

编程新知 2026/3/29 19:41:43

5个技巧让CUDA应用在非NVIDIA显卡发挥最大价值——ZLUDA完全指南

5个技巧让CUDA应用在非NVIDIA显卡发挥最大价值——ZLUDA完全指南 【免费下载链接】ZLUDA CUDA on Intel GPUs 项目地址: https://gitcode.com/GitHub_Trending/zl/ZLUDA 在AI与高性能计算领域&#xff0c;CUDA生态的垄断地位让许多开发者和企业面临硬件选择困境。跨平台…...

编程新知 2026/3/29 19:13:35

3个ONNX运行时故障的系统性修复方案：ComfyUI DWPose预处理器实战指南

3个ONNX运行时故障的系统性修复方案&#xff1a;ComfyUI DWPose预处理器实战指南 【免费下载链接】comfyui_controlnet_aux 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux 在ComfyUI工作流中&#xff0c;DWPose预处理器作为姿态估计的核心组件&…...

编程新知 2026/3/29 18:05:17

别再死记硬背了！用PR关键帧做这个动态信息图，5分钟让你的视频告别枯燥

5分钟玩转PR关键帧&#xff1a;让静态信息「活」起来的动态设计指南 每次看到那些枯燥的PPT数据展示或静态信息图&#xff0c;你是否想过——如果能像专业视频一样让它们动起来该多好&#xff1f;但一打开After Effects就被复杂的界面劝退&#xff1f;其实&#xff0c;Premiere…...

编程新知 2026/3/29 17:57:11