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

HTML（超文本标记语言）

news 2026/4/1 8:22:26

HTML（超文本标记语言 - HyperText Markup Language）是一种用于创建网页的标准标记语言。

HTML 最初是由蒂姆・伯纳斯 - 李（Tim Berners - Lee）在 1990 年左右开发的。当时的目的是为了让世界各地的科学家能够方便地共享和交流信息。随着互联网的飞速发展，HTML 也经历了多个版本的更新，从 HTML 1.0 到 HTML 4.01，再到现在广泛使用的 HTML5。每一次版本更新都带来了新的功能和特性，以适应日益复杂的网页设计需求。

一、HTML基本结构概述

HTML网页由个标准的结构，主要由以下几个关键部分组成：

  • 文档类型声明
  • HTML
  • 根元素
  • 头部（head）
  • 主体（body）

这些结构为浏览器解析和显示提供了清晰的框架。

二、文档类型声明（DOCTYPE）

  • 这是 HTML 文档的第一行，用于告诉浏览器文档的类型。例如，在 HTML5 中，文档类型声明是<!DOCTYPE html>。它的作用是让浏览器按照正确的 HTML 标准来解析页面内容。

三、HTML根元素<html>

<html>作为HTML文档的根标签，所有其他的HTML元素都被包括里面。根元素只有开始标签<html>和结束标签</html>。这个标签界定了整个html文档的范围，浏览器只会识别其中的内容为有效的HTML代码

四、头部部分 <head>

<head>部分包含了网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。

<title>用于界定网页的标题，标题内容会显示浏览器的标题栏或标签页上。

<meta>用于提供多种类型的元数据，常见的有编码设置，例如<meta charset="UTF-8">。它确保浏览器能够正确的解析和显示网页中的各种字符，支持多种语言字符，也可也设置页面描述，关键词等信息。如<meta name="keywords" content="网页，趣味"> 可设置关键词帮助搜索引擎索引网页。

 <link> 主要连接外部资源，最常见的是连接CSS样式表。例如<link rel=“stylesheet” href=“styles.css”> 其中rel=“stylesheet”表明这是一个样式表链接，href属性指明了CSS文件路径。这样链接可以将网页内容和样式进行分离，方便网页设计和维护。

<script> 用于在HTML文档中嵌入JavaScript代码或引用外部的脚本文件。如果是嵌入代码，可以直接写入代码，如<script>alert("欢迎来到网页")</script> 若是引用外部脚本，则是<script src="script.js"></script> 这里面src属性指定了JavaScript文件的路径。脚本可以为网页添加交互功能。

五、<body>主体部分

<body>标签是 HTML 文档的核心部分，它位于<html>标签内，紧跟在<head>标签之后

  • 内容呈现
    • 所有用户在浏览器中直接看到和交互的内容都放置在<body>标签中。这包括文本、图像、链接、列表、表格、按钮等多种元素。例如，你可以使用<p>标签在<body>中添加段落文本，如<p>这是一段展示在网页主体部分的文字。</p>。用户打开网页时，就可以看到这段文字内容。
  • 页面布局基础
    • 它为网页的布局提供了基础框架。虽然 CSS（层叠样式表）主要负责精确的页面布局和样式控制，但<body>标签内元素的排列顺序和结构对整体布局有重要影响。例如，你可以通过在<body>中放置多个<div>标签（一种通用的容器标签）来划分页面的不同区域，如头部区域、内容区域、侧边栏区域和底部区域等，然后通过 CSS 来进一步定义这些区域的大小、位置和外观。
  • 支持交互元素
    • 包含各种可以与用户进行交互的元素。例如，<form>标签用于创建表单，如登录表单、注册表单、调查问卷等，都放置在<body>。
  • 多媒体内容展示
  •         可以展示多媒体内容，如通过<img>标签展示图像，像<img src="image.jpg" alt="一幅美丽的画">可以在网页主体部分显示一张名为image.jpg的图片。如果图片无法加载，浏览器会显示alt属性中的替代文本 “一幅美丽的画”。
  •         还可以通过<video>和<audio>标签分别展示视频和音频内容。

     <table>表格，<tr>表示行，<td>表示单元格。

     表单元素。<form>标签包含表单内容，<input>标签用于创建各种输入框，如<input type="text" placeholder="请输入用户名"> 用于创建一个文本输入框，type指定输入类型，placeholder属性提示文本。

声明！

学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec](https://space.bilibili.com/350329294)

相关文章：

HTML（超文本标记语言）

HTML&#xff08;超文本标记语言 - HyperText Markup Language&#xff09;是一种用于创建网页的标准标记语言。 HTML 最初是由蒂姆・伯纳斯 - 李&#xff08;Tim Berners - Lee&#xff09;在 1990 年左右开发的。当时的目的是为了让世界各地的科学家能够方便地共享和交流信息…...

编程日记 2024/11/14 3:28:29

CatBoost中目标变量统计

CatBoost中的目标变量统计&#xff08;Target Statistics&#xff09;是其处理分类特征&#xff08;Categorical Features&#xff09;的核心技术之一。目标变量统计是一种特殊的编码方法&#xff0c;通过利用目标值信息生成数值特征&#xff0c;从而替代传统的独热编码或其他处…...

编程日记 2024/11/14 3:27:27

WSL与Ubuntu系统--使用Linux

WSL与Ubuntu系统--使用Linux 前言基础教学视频卸载链接网络配置方法1方法2 正式安装步骤步骤1 基本命令修改网络配置Ubuntu系统的导出与导入文件操作给Ubuntu创造界面--也就是在装一个有界面的UbuntuHyper-v与windows主机文件共享 前言 需要链接梯子&#xff0c;并且梯子十分稳…...

编程日记 2024/11/14 3:24:25

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表&#xff0c;内存访问时间为2ns&#xff0c;检索快表时间为0.5ns&#xff0c;快表命中率为80%&#xff0c;求有效访问时间 -分析&#xff1a;首先访问缓存&#xff08;快表&#xff09;&#xff0c;如果没有找到访问内存&#xff08;页表&…...

编程日记 2024/11/14 3:23:24

性能高于Transformer模型1.7-2倍，彩云科技发布基于DCFormer架构通用大模型云锦天章

2017年&#xff0c;谷歌发布《Attention Is All You Need》论文&#xff0c;首次提出Transformer架构&#xff0c;掀开了人工智能自然语言处理&#xff08;NLP&#xff09;领域发展的全新篇章。Transformer架构作为神经网络学习中最重要的架构&#xff0c;成为后来席卷全球的一…...

编程日记 2024/11/14 3:22:22

PHP反序列化_3-漏洞利用

1. 信息收集与分析 确定目标应用程序&#xff1a;首先需要找到存在反序列化漏洞的 PHP 应用程序。这可能是一个网站、Web 服务、内部系统等。可以通过网络扫描、漏洞报告、安全评估等方式来发现潜在的目标。分析应用程序逻辑&#xff1a;了解目标应用程序的功能和业务逻辑&…...

编程日记 2024/11/14 3:19:17

2.初始sui move

vscode安装move插件 查看sui 客户端版本号 sui client --version 创建新项目 sui move new <项目名> sui move new hello_world 项目目录结构&#xff1a; hello_world ├── Move.toml ├── sources │ └── hello_world.move └── tests└── hello_world…...

编程日记 2024/11/14 3:18:16

数据结构--排序算法

目录 一.排序相关概念二.常见排序算法1.堆排序2.插入排序3.希尔排序4.选择排序5.冒泡排序6.快速排序1.快速排序--递归(未优化)2.快速排序--递归(优化)3.快速排序--非递归 7.归并排序1.归并排序--递归2.归并排序--非递归 一.排序相关概念 排序&#xff1a;使一串记录按照某个关…...

编程日记 2024/11/14 3:17:15

day60 图论章节刷题Part10（Floyd 算法、A * 算法）

Floyd 算法 思路&#xff1a;本题是多源最短路问题&#xff0c;使用Floyd算法求解。Floyd 算法对边的权值正负没有要求&#xff0c;核心思想是动态规划。 我们使用动规五部曲来理解和应用Floyd算法&#xff1a; 1、确定dp数组&#xff08;dp table&#xff09;以及下标的含义…...

编程日记 2024/11/14 3:14:13

UI架构解说

UI&#xff08;用户界面&#xff0c;User Interface&#xff09; 是指用户与软件或硬件系统进行交互的界面。 它是用户与系统之间的桥梁&#xff0c;允许用户通过视觉元素、交互组件和反馈机制来操作和控制应用程序或设备。 UI 设计的目标是提供直观、易用和愉悦的用户体验&a…...

编程日记 2024/11/14 3:13:12

车机安装第三方软件实现打开软件全屏教程

简介 越来越多的车友实现安装第三方软件了&#xff0c;但是有的车机的状态栏或者导航栏会遮挡安装的第三方软件。这样的话&#xff0c;第三方软件就会显示不全&#xff0c;体验感非常不好。所以&#xff0c;下面我教一下大家如何使用东君应用管家来实现打开第三方软件全屏。 全…...

编程日记 2024/11/14 3:11:09

八大技术架构与演进2

垂直分库架构 当数据量不断增大&#xff0c;大量的数据都存储在一个库中就已经不太够用了&#xff0c;这时候就可以讲不同的数据分类别存储Mycat也支持在大表拆分为小标的情况下进行访问 但是这种做法其实是增加了数据库的运维难度&#xff0c;这种其实也就叫做分布式数据库&…...

编程日记 2024/11/14 3:09:06

ReactPress技术揭秘

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 一、引言 ReactPress是一个基于React构建的开源发布平台&#xff0c;它不仅可以帮助用户在支持React和MySQL数据库的服务器上快速搭建自己的博客或网站&#xff0c;还能作为一个…...

编程日记 2024/11/14 3:08:05

Javascript高级—如何实现一个类型判断函数？

实现一个类型判断函数 判断null判断基础类型使用Object.prototype.toString.call(target)来判断引用类型 [!NOTE] 注意&#xff1a; 一定是使用call来调用&#xff0c;不然是判断的Object.prototype的类型 之所以要先判断是否为基本类型是因为&#xff1a;虽然Object.prototyp…...

编程日记 2024/11/14 3:07:03

asitop macOS 终端 性能监控

macOS 终端 性能监控 安装 pip python3 -m ensurepip# pip3 --version pip 21.2.4安装 asitop pip3 install asitop运行 sudo asitop参考 asitopgithub asitopHow to Install pip on Mac...

编程日记 2024/11/14 3:05:01

Unity学习笔记(4):人物和基本组件

文章目录 前言开发环境新增角色添加组件RigidBody 2D全局项目设置Edit 给地图添加碰撞体 总结 前言 今天不加班&#xff0c;有空闲时间。争取一天学一课&#xff0c;养成习惯 开发环境 Unity 6windows 11vs studio 2022Unity2022.2 最新教程《勇士传说》入门到进阶&#xff…...

编程日记 2024/11/14 3:04:00

【深圳大学/大学物理实验2】弗兰克-赫兹实验预习题参考

一、单选题 共 13 小题 共 78 分 1. (6分)第一栅极电压UG1、第二栅极电压UG2和减速电压UP的作用分别是&#xff08; &#xff09; 学生答案&#xff1a;C √ A. 使电子加速&#xff0c;消除阴极电子散射&#xff0c;使电子减速 B. 产生并加速电子&#xff0c;使电子加速&…...

编程日记 2024/11/14 3:02:58

vue2.7.14 + vant + vue cli脚手架转vite启动运行问题记录

文章目录 前言方案一&#xff08;借用插件转换&#xff09;启动命令&#xff0c;转换方案一转换遇到的问题 方案二&#xff08;手动调整&#xff09;方案两者对比小结 前言 vue cli 脚手架转成vite启动 简单说说这个项目的一些底层基本结构哈&#xff0c;以及写这篇博客的目的…...

编程日记 2024/11/14 3:01:55

Java基础-内部类与异常处理

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 一、Java 内部类 什么是内部类&#xff1f; 使用内部类的优点 访问局部变量的限制 内部类和继承 内部…...

编程日记 2024/11/14 3:00:54

vue2或vue3的name属性有什么作用？

在 Vue.js&#xff08;无论是 Vue 2 还是 Vue 3&#xff09;中&#xff0c;组件的 name 属性有几个重要的用途。虽然它不是必须的&#xff0c;但在某些情况下非常有用。以下是 name 属性的一些主要作用&#xff1a; 1. 调试工具 Vue Devtools 和其他调试工具会使用组件的 nam…...

编程日记 2024/11/14 2:57:50

何时DCDC预降压+LDO二次线性稳压？

LDO 核心选型分界结论及优化要点核心选型分界结论以LDO输入输出压差ΔV为核心判断指标&#xff0c;结合输出功率、场景约束&#xff0c;通用选型规则如下&#xff1a;通用强制分界点&#xff1a;当ΔV≥2V&#xff0c;且输出功率≥100mW&#xff08;对应你之前的5V转3V70mA工况…...

编程新知 2026/4/1 7:12:48

告别底噪和电流声：DIY蓝牙音箱的音频电路避坑指南（从TPA2019布线到电源滤波）

蓝牙音箱DIY进阶指南&#xff1a;从电路设计到音质优化的全流程解析 在电子DIY领域&#xff0c;蓝牙音箱制作看似简单&#xff0c;但要实现专业级的音质表现却需要跨越诸多技术门槛。许多爱好者完成基础组装后&#xff0c;常会遇到底噪明显、高频失真或低频浑浊等问题——这往往…...

编程新知 2026/4/1 6:46:00

腾讯VersaViT：多模态视觉理解新标杆

腾讯VersaViT&#xff1a;多模态视觉理解新标杆 【免费下载链接】VersaViT 项目地址: https://ai.gitcode.com/tencent_hunyuan/VersaViT 导语&#xff1a;腾讯最新发布的多模态视觉编码器VersaViT&#xff0c;通过创新的多任务协同训练策略&#xff0c;同时强化语言介…...

编程新知 2026/4/1 6:33:47

LFM2.5-1.2B-Thinking-GGUF部署教程：Ubuntu/CentOS/Debian三平台通用安装步骤

LFM2.5-1.2B-Thinking-GGUF部署教程&#xff1a;Ubuntu/CentOS/Debian三平台通用安装步骤 1. 平台简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署。该镜像内置了GGUF模型文件和llama.cpp运行时&#xff…...

编程新知 2026/4/1 6:25:38

Chandra OCR多平台部署指南：Windows WSL2/Mac Metal/Linux Docker全搞定

Chandra OCR多平台部署指南&#xff1a;Windows WSL2/Mac Metal/Linux Docker全搞定 1. Chandra OCR核心能力解析 Chandra是Datalab.to在2025年10月开源的布局感知OCR模型&#xff0c;与传统OCR工具最大的区别在于它能完整保留文档的排版结构信息。想象一下&#xff1a;当你扫…...

编程新知 2026/4/1 6:25:37

Qwen2.5-7B入门实战：从Docker到网页服务的全流程解析

Qwen2.5-7B入门实战&#xff1a;从Docker到网页服务的全流程解析 1. 引言&#xff1a;为什么选择Qwen2.5-7B Qwen2.5-7B是阿里最新开源的大语言模型&#xff0c;相比前代版本在知识量、编程能力和数学能力上有显著提升。对于想要快速体验大模型能力的开发者来说&#xff0c;通…...

编程新知 2026/4/1 6:13:23

计算机毕业设计：Python汽车销售数据可视化与分析系统 Flask框架 requests爬虫 可视化 数据分析 大数据 机器学习 大模型（建议收藏）✅

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

编程新知 2026/4/1 5:16:55

PyTorch 2.8镜像高算力适配：10核CPU调度策略优化，避免I/O瓶颈拖慢训练

PyTorch 2.8镜像高算力适配&#xff1a;10核CPU调度策略优化&#xff0c;避免I/O瓶颈拖慢训练 1. 镜像核心优势与硬件适配 PyTorch 2.8深度学习镜像经过深度优化&#xff0c;专为高性能计算场景设计。这个环境最显著的特点是完美适配了10核CPU与RTX 4090D显卡的协同工作&…...

编程新知 2026/4/1 5:04:47

**发散创新：基于微应用架构的轻量级权限控制实战设计**在现代前端开

发散创新&#xff1a;基于微应用架构的轻量级权限控制实战设计 在现代前端开发中&#xff0c;**微应用&#xff08;Micro Frontend&#xff09;*8 已成为构建复杂单页应用&#xff08;SPA&#xff09;的标准方案之一。它允许团队独立开发、部署和维护各自的功能模块&#xff0c…...

编程新知 2026/4/1 4:40:13

Phi-4-mini-reasoning案例分享：用逻辑题测试模型对‘必要条件’的理解深度

Phi-4-mini-reasoning案例分享&#xff1a;用逻辑题测试模型对必要条件的理解深度 1. 模型能力定位 Phi-4-mini-reasoning是专为推理任务优化的文本生成模型&#xff0c;其核心优势在于处理需要多步逻辑推导的问题。与通用对话模型不同&#xff0c;它更擅长处理以下类型任务&…...

编程新知 2026/4/1 4:03:42