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

【前端基础】1、HTML概述（HTML基本结构）

news 2026/5/20 1:35:06

一、网页组成

  1. HTML：网页的内容
  2. CSS：网页的样式
  3. JavaScript：网页的功能

二、HTML概述

HTML：全称为超文本标记语言，是一种标记语言。

  • 超文本：文本、声音、图片、视频、表格、链接
  • 标记：由许许多多的标签组成

三、HTML组成

由“标签”构成的。
它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

四、HTML文件结构特点

  • 百度
    在这里插入图片描述
  • CSDN
    在这里插入图片描述
  • 微软
    在这里插入图片描述

总结：

<!DOCTYPE html>
<html><head></head><body></body>
</html>
  • 第一行<!DOCTYPE html>：是文档声明，声明是HTML。浏览器就会以HTML规范进行编译。
  • <html>标签和最后一行</html>：定义html文档的整体。
  • <head>到</head>：定义页面的属性。存放一些元数据，比如页面的标题。
  • <body>到</body>：定义页面显示的内容。

一个标签 = 一个对象：
程序员拿到这些对象，可以对这些对象进行增删改查，定义属性等等操作。

五、HTML标签结构关系

<!DOCTYPE html>
<html><head><title> Test Title </title></head><body><p> Test </p></body>
</html>
  1. <head> 和 <body> 是 <html> 的子标签。<html> 是 <head> 和 <body> 的父标签。
  2. <title> 是 <head> 的子标签。<head> 是 <title> 的父标签。
  3. <p> 是 <body> 的子标签。<body> 是 <p> 的父标签。
  4. <head> 和 <body> 是兄弟关系。

六、HTML的注释

HTML注释以<!--开始，以-->结束。
在这两个标记之间的任何内容都会被浏览器忽略，不会显示在页面上，但会保留在HTML源代码中。‌

  • 单行注释
    <!-- 这是一个HTML注释 -->
  • 多行注释
    <!--  这是一个多行HTML注释  可以跨越多行  并包含任何文本  -->

相关文章：

【前端基础】1、HTML概述（HTML基本结构）

一、网页组成 HTML&#xff1a;网页的内容CSS&#xff1a;网页的样式JavaScript&#xff1a;网页的功能 二、HTML概述 HTML&#xff1a;全称为超文本标记语言&#xff0c;是一种标记语言。 超文本&#xff1a;文本、声音、图片、视频、表格、链接标记&#xff1a;由许许多多…...

编程日记 2025/3/6 1:40:28

小程序性能优化-预加载

在微信小程序中&#xff0c;数据预加载是提升用户体验的重要优化手段。以下是处理数据预加载的完整方案&#xff1a; 一、预加载的适用场景 跳转页面前的数据准备 如从列表页进入详情页前&#xff0c;提前加载详情数据首屏加载后的空闲时间 在首页加载完成后&#xff0c;预加载…...

编程日记 2025/3/6 1:39:27

（1）udp双向通信（2）udp实现文件复制（3）udp实现聊天室

一.udp双向通信 1.fork进程实现双向通信 【1】head.h 【2】client客户端 &#xff08;1&#xff09;父进程从键盘获取字符串 &#xff08;2&#xff09;输入quit&#xff0c;发送结束子进程信号 &#xff08;3&#xff09;exit退出父进程 &#xff08;1&#xff09;子进程接受…...

编程日记 2025/3/6 1:35:21

el-table 手动选择展示列

需求&#xff1a; 由于表格的列过多,用滚动条进行滚动对比数据不方便&#xff0c;所以提出&#xff0c;手动选择展示列 实现思路&#xff1a; 表格默认展示所有字段&#xff0c;每个字段通过 v-if 属性来进行判断是否显示&#xff1b;点击设置按钮图标(表格右上角&#xff0…...

编程日记 2025/3/6 1:34:20

零基础学习之——深度学习算法介绍01

第一节.基础骨干网络 物体分类是计算机视觉&#xff08;computer vision&#xff0c;CV&#xff09;中最经典的、也是目前研究得最为透彻的一 个领域&#xff0c;该领域的开创者也是深度学习领域的“名人”级别的人物&#xff0c;例如 Geoffrey Hinton、Yoshua Bengio 等。物…...

编程日记 2025/3/6 1:31:16

【开源项目】好用的开源项目记录（持续更新）

注意&#xff1a;在使用开源软件的时候&#xff0c;一定要注意代码中是否含有可疑代码&#xff0c;黑客代码&#xff0c;后门漏洞 1、爬虫工具 https://gitee.com/ssssssss-team/spider-flow 参考使用方式&#xff1a;https://blog.csdn.net/qq_42640067/article/details/12059…...

编程日记 2025/3/6 1:29:13

Django：文件上传时报错in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.

即&#xff1a;使用Content-Security-Policy 1.安装Django CSP中间件&#xff1a; pip install django-csp 2.更改项目配置&#xff1a; # settings.py MIDDLEWARE [...csp.middleware.CSPMiddleware,... ]CSP_DEFAULT_SRC ("self",) CSP_FRAME_ANCESTORS (&q…...

编程日记 2025/3/6 1:26:10

Linux常用指令学习笔记

文章目录 前言一、文件和目录操作指令1. 文件操作2. 目录操作 二、文件权限管理三、网络相关指令四、系统管理指令五、文本编辑器基本操作 六、压缩和解压指令七、总结 前言 在当今的IT领域&#xff0c;Linux系统因其开源、稳定、安全等特性&#xff0c;广泛应用于服务器、个人…...

编程日记 2025/3/6 1:25:09

FastGPT 引申：基于 Python 版本实现 Java 版本 RRF

文章目录 FastGPT 引申&#xff1a;基于 Python 版本实现 Java 版本 RRF函数定义使用示例 FastGPT 引申&#xff1a;基于 Python 版本实现 Java 版本 RRF 函数定义 使用 Java 实现 RRF 相关的两个函数&#xff1a;合并结果、过滤结果 import java.util.*;// 搜索结果类型定义…...

编程日记 2025/3/6 1:24:08

面试八股文--数据库基础知识总结(3)MySQL优化

目录 1、慢查询 Q1&#xff1a;在mysql中如何定位慢查询&#xff1f; Q2&#xff1a;SQL语句执行很慢&#xff0c;如何分析&#xff1f; 2、索引 Q3&#xff1a;什么是索引&#xff1f; Q4&#xff1a;什么是聚簇索引和非聚簇索引&#xff1f; Q5&#xff1a;什么是回表查…...

编程日记 2025/3/6 1:23:07

汇编前置知识学习 第11-13天

今天要做什么&#xff1f; 1:虚拟机准备环境 2:virtualBox 创建虚拟硬盘&#xff0c;配置bochs文件启动 一&#xff1a; VMDK&#xff08;VMWare 虚拟机&#xff09; VDI&#xff08;VirtualBox虚拟机&#xff09; VHD&#xff08;virtual-PC/Hyper-V 虚拟机&#xff09;…...

编程日记 2025/3/6 1:22:05

springboot在业务层校验对象/集合中字段是否符合要求

springboot在业务层校验对象参数是否必填 1.场景说明2.代码实现 1.场景说明 为什么不在控制层使用Validated或者Valid注解直接进行校验呢&#xff1f;例如通过excel导入数据&#xff0c;将excel数据转为实体类集合后&#xff0c;校验集合中属性是否符合要求。 2.代码实现 定义…...

编程日记 2025/3/6 1:18:01

python二级考试中会考到的第三方库

在 Python 二级考试中，可能会涉及一些常用的第三方库。这些库可以帮助考生更好地理解和应用 Python 编程。以下是一些在 Python 二级考试中可能会用到的第三方库及其简要介绍：1. requests 用途：用于发送 HTTP 请求。安装：pip install requests示例代码：import requestsres…...

编程日记 2025/3/6 1:09:52

Linux中死锁问题的探讨

在 Linux 中&#xff0c;死锁&#xff08;Deadlock&#xff09; 是指多个进程或线程因为竞争资源而相互等待&#xff0c;导致所有相关进程或线程都无法继续执行的状态。死锁是一种严重的系统问题&#xff0c;会导致系统资源浪费&#xff0c;甚至系统崩溃。 死锁的定义 死锁是指…...

编程日记 2025/3/6 1:08:51

【实战 ES】实战 Elasticsearch：快速上手与深度实践-2.3.1 避免频繁更新（Update by Query的代价）

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 Elasticsearch数据更新与删除深度解析&#xff1a;2.3.1 避免频繁更新&#xff08;Update by Query的代价&#xff09;案例背景1. Update by Query的内部机制解析1.1 文档更…...

编程日记 2025/3/6 0:57:40

【Python项目】基于Python的书籍售卖系统

【Python项目】基于Python的书籍售卖系统 技术简介&#xff1a;采用Python技术、MYSQL数据库等实现。 系统简介&#xff1a;书籍售卖系统是一个基于B/S结构的在线图书销售平台&#xff0c;主要分为前台和后台两部分。前台系统功能模块分为&#xff08;1&#xff09;用户中心模…...

编程日记 2025/3/6 0:55:38

spring boot + vue 搭建环境

参考文档&#xff1a;https://blog.csdn.net/weixin_44215249/article/details/117376417?fromshareblogdetail&sharetypeblogdetail&sharerId117376417&sharereferPC&sharesourceqxpapt&sharefromfrom_link. spring boot vue 搭建环境 一、浏览器二、jd…...

编程日记 2025/3/6 0:54:37

Linux下的shell指令（一）

作业 1> 在终端提示输入一个成绩&#xff0c;通过shell判断该成绩的等级 [90,100] : A [80, 90) : B [70, 80) : C [60, 70) : D [0, 60) : 不及格 #!/bin/bash read -p "请输入学生成绩:" score if [ "$score" -ge 90 ] && [ "$scor…...

编程日记 2025/3/6 0:50:32

JS禁止web页面调试

前言 由于前端在页面渲染的过程中 会调用很多后端的接口&#xff0c;而有些接口是不希望别人看到的&#xff0c;所以前端调用后端接口的行为动作就需要做一个隐藏。 禁用右键菜单 document.oncontextmenu function() {console.log("禁用右键菜单");return false;…...

编程日记 2025/3/6 0:49:31

GIt分支合并

分支 1: C0 → C1 → C2 → C3&#xff08;最新&#xff09; 分支 2: C0 → C4 → C5 → C6&#xff08;最新&#xff09;1. 找到共同父节点 C0 Git 会先找出 branch1 和 branch2 的共同祖先节点 C0。这通常借助 git merge-base 命令达成&#xff0c;虽然在日常使用 git merge…...

编程日记 2025/3/6 0:47:29

芯片时钟树设计实战：平衡性能、功耗与鲁棒性的后端工程指南

1. 项目概述&#xff1a;从“动脉”视角理解时钟树在芯片设计的浩瀚世界里&#xff0c;时钟信号就像是整个系统的“动脉”。它不负责输送数据&#xff0c;但负责为所有逻辑单元提供统一的“心跳”节拍。没有稳定、同步的心跳&#xff0c;再强大的计算单元也会陷入混乱。我们常说…...

编程新知 2026/5/20 0:48:38

大模型小白必看：收藏！揭秘京东面试官如何破解多轮RAG“越聊越蠢”的难题

本文深入剖析多轮RAG在对话场景中容易出现的问题——越聊越“蠢”&#xff0c;即系统无法准确理解用户意图。文章指出&#xff0c;主要原因是历史对话内容污染了当前检索query&#xff0c;导致检索偏离用户真实意图。作者提出了四点判断框架&#xff1a;区分四类对象、检索quer…...

编程新知 2026/5/19 23:56:52

Claude code配置全流程（附带接入模型）

1.安装nodejs (Claudecode 本身是用TypeScript/JavaScript开发的命令行工具&#xff0c;需要通过Node.js运行时来执行&#xff0c;并且node.js天然集成npm,claudecode是作为npm包发布的)&#xff1a; 1.1网址&#xff1a;https://node.org.cn/ 进入后下载自己需要的系统类型就可…...

编程新知 2026/5/19 23:12:21

Kubernetes核心知识点

1.ca-certificates,gnupg,lsb-release三个包的解释. ca-certificates是系统内置的权威根整数数据包&#xff0c;可以让系统正常识别并信任各类网站&#xff0c;避免出现证书异常与访问失败问题。 gnupg是开源的加密与签名校验工具&#xff0c;可用于导入第三方软件源公钥&#…...

编程新知 2026/5/19 23:08:17

法律检索效率暴跌83%？Perplexity法律文献搜索的3大隐藏功能，律所内部培训刚流出

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;法律检索效率暴跌83%&#xff1f;Perplexity法律文献搜索的3大隐藏功能&#xff0c;律所内部培训刚流出 当某红圈所合伙人发现团队平均单案法律检索耗时从2.1小时飙升至11.4小时&#xff0c;真相竟是——传统关…...

编程新知 2026/5/19 22:30:58

技术文档检索总失败？Perplexity的chunking策略、embedding模型选型与rerank阈值调优（附实测Benchmark数据）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;技术文档检索总失败&#xff1f;Perplexity的chunking策略、embedding模型选型与rerank阈值调优&#xff08;附实测Benchmark数据&#xff09; 技术文档检索失败常源于文本切分不合理、语义表征能力不足或重排…...

编程新知 2026/5/19 22:18:56

Linux存储管理：块设备与分区表的本质区别及实践指南

1. 项目概述&#xff1a;一次关于存储本质的深度对话“我不是表&#xff0c;我是块设备”——这个标题乍一看有点哲学意味&#xff0c;像是在为某个被误解的实体正名。在Linux的世界里&#xff0c;这恰恰揭示了存储管理中一个最核心、也最容易被混淆的概念关系&#xff1a;分区…...

编程新知 2026/5/19 21:52:03

如何快速配置PlotSquared：Minecraft领地管理完整教程

如何快速配置PlotSquared&#xff1a;Minecraft领地管理完整教程 【免费下载链接】PlotSquared PlotSquared - Reinventing the plotworld 项目地址: https://gitcode.com/gh_mirrors/pl/PlotSquared 你是否厌倦了Minecraft服务器中混乱的建筑和领地冲突&#xff1f;想要…...

编程新知 2026/5/19 20:53:02

【Python自动化】PyAutoGUI构建游戏稳定性测试守护脚本

1. PyAutoGUI在游戏测试中的核心价值 游戏稳定性测试往往需要长时间运行&#xff0c;人工值守既低效又容易遗漏异常。PyAutoGUI作为Python的GUI自动化利器&#xff0c;能完美模拟鼠标键盘操作&#xff0c;配合进程监控和图像识别&#xff0c;构建724小时无人值守的测试环境。我…...

编程新知 2026/5/19 19:37:02

5步实用指南：永久解锁Cursor Pro高级功能的完整解决方案

5步实用指南&#xff1a;永久解锁Cursor Pro高级功能的完整解决方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

编程新知 2026/5/19 18:11:30