HTML(超文本标记语言)

news/2024/11/16 22:17:42/
htmledit_views">

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)


http://www.ppmy.cn/news/1547553.html

相关文章

深度学习每周学习总结J5(DenseNet-121 +SE 算法实战与解析 - 猴痘识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 0. 总结 数据导入及处理部分&#xff1a;本次数据导入没有使用torchvision自带的数据集&#xff0c;需要将原始数据进行处理包括数据导入…

CentOS 修改服务器登录密码的完整指南

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

stm32 spi读写W25Q128实例

文章目录 一、W25Q128芯片简介二、SPI初始化与配置三、W25Q128命令帧格式与操作写使能&#xff08;0x06&#xff09;&#xff1a;读取状态寄存器&#xff08;0x05&#xff09;&#xff1a;读取数据&#xff08;0x03&#xff09;&#xff1a;页编程&#xff08;0x02&#xff09;…

面试:TCP、UDP如何解决丢包问题

文章目录 一、TCP丢包原因、解决办法1.1 TCP为什么会丢包1.2 TCP传输协议如何解决丢包问题1.3 其他丢包情况&#xff08;拓展&#xff09;1.4 补充1.4.1 TCP端口号1.4.2 多个TCP请求的逻辑1.4.3 处理大量TCP连接请求的方法1.4.4 总结 二、UDP丢包2.1 UDP协议2.1.1 UDP简介2.1.2…

使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat,.ply,.ksplat文件

前言 假设您正在现有项目中集成这些包&#xff0c;而该项目的构建工具为 Webpack 或 Vite。同时&#xff0c;您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法&#xff0c;请随时留言。 安装 npm install three types/three react-three/fiber rea…

Django数据写入MySQL数据库

将 Django 模型写入 MySQL 数据库的步骤与写入其他数据库类型基本相同。以下是详细的步骤和示例&#xff0c;帮助你在 Django 项目中配置 MySQL 数据库并写入数据。 1. 安装 MySQL 和相关依赖 首先&#xff0c;确保你已经安装了 MySQL 数据库服务器和 mysqlclient 包。mysqlc…

python实战(八)——情感识别(多分类)

一、任务目标 本文使用的是来自Kaggle的一个情感识别数据集&#xff0c;这个数据集的总数据量是5934条&#xff0c;标签为anger、fear、joy三种情感的其中一种&#xff0c;很明显是一个多分类任务。这里&#xff0c;我们将使用微调技巧进行深度学习建模&#xff0c;同时我们会比…

【C++学习(35)】在Linux中基于ucontext实现C++实现协程(Coroutine),基于C++20的co_await 协程的关键字实现协程

文章目录 为什么使用协程协程的理解协程优势协程的原语操作yield 与 resume 是一个switch操作&#xff08;三种实现方式&#xff09;&#xff1a; 基于 ucontext 的协程基于 XFiber 库的操作1 包装上下文2 XFiber 上下文调度器2.1 CreateFiber2.2 Dispatch 基于C20的co_return …