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

HTML——1.简介、基础、元素

news 2026/2/7 17:32:20

一、简介

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它使用标记（tag）来描述网页的结构和内容。HTML被用于定义网页中的文本、图像、链接、多媒体以及其他元素的排列和呈现方式。

HTML文档是由一系列的HTML元素（elements）组成的。每个元素通过标记（tag）来定义，标记通常是成对出现的，分为开标签和闭标签，中间包裹着元素的内容。HTML文档的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个HTML注释，可以用于注释代码 -->
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片描述">
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

简要解释上面的HTML代码结构：

  • <!DOCTYPE html>：声明文档类型，指示当前文档使用HTML5规范。
  • <html>：HTML文档的根元素，包含了整个HTML文档的内容。
  • <head>：头部元素，通常包含了文档的元数据，如字符编码、页面标题、引入的样式表和脚本等。
  • <meta>：元数据元素，用于设置文档的元数据，如字符编码、视口设置等。
  • <title>：标题元素，用于定义网页的标题，显示在浏览器的标题栏或标签页上。
  • <body>：主体元素，包含了网页的主要内容，如文本、图像、链接等。
  • <h1>、<p>、<img>、<a>：分别是标题、段落、图片和链接等常用的HTML元素，用于构建网页的结构和内容。

二、基础

常用元素

  • 标题元素 <h1> 到 <h6>：用于定义标题，级别从1到6逐渐减小。
  • 段落元素 <p>：用于定义段落。
  • 图像元素 <img>：用于插入图片。
  • 超链接元素 <a>：用于创建链接。
  • 列表元素 <ul>、<ol> 和 <li>：分别用于创建无序列表和有序列表。
  • 表格元素 <table>、<tr>、<th> 和 <td>：用于创建表格。
  • 表单元素 <form>、<input>、<textarea> 和 <button>：用于创建表单。

HTML注释

<!-- 这是一个注释 -->
 

 注释用于在HTML代码中添加注解或说明，浏览器会忽略注释内容。

属性

HTML元素可以具有属性，属性提供了关于元素的额外信息。常见的属性有：

  • id：用于给元素指定唯一的标识符。
  • class：用于给元素指定一个或多个类名，用于样式和脚本操作。
  • src：用于指定图像、音频、视频等资源的路径。
  • href：用于指定超链接的目标地址。
  • alt：用于指定图像元素的替代文本，当图像无法显示时显示该文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础</title>
</head>
<body>
    <h1>欢迎学习HTML基础</h1>
    <p>这是一个段落。</p>
    <img src="example.jpg" alt="示例图片">
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

三、元素

HTML由一系列的元素（elements）组成，每个元素都可以包含文本内容、其他元素或者是空的。HTML元素通常由开始标签（opening tag）、结束标签（closing tag）、内容和属性组成。

元素的基本结构：

<element attribute="value">content</element>
 

  • <element>：元素名称，表示该元素的类型或者标签名称，比如 <p> 表示段落元素，<img> 表示图像元素。
  • attribute="value"：元素的属性，用于提供额外的信息，比如 src 属性用于指定图像的路径，href 属性用于指定链接的目标地址等。
  • content：元素的内容，即元素包裹的文本或者其他元素。
  • 开始标签：由元素名称和属性组成，以尖括号 < 和 > 包围，用于表示元素的开始。
  • 结束标签：与开始标签类似，但在元素名称前加上了斜杠 /，表示元素的结束。

常见的HTML元素示例：

段落元素（<p>）：用于定义一个段落。

<p>This is a paragraph.</p>
 

标题元素（<h1> 到 <h6>）：用于定义标题，级别从1到6逐渐减小。

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
 

 图像元素（<img>）：用于在网页中嵌入图像。

<img src="image.jpg" alt="Image description">
 

超链接元素（<a>）：用于创建链接。

<a href="https://www.example.com">This is a link</a>
 

列表元素（<ul>、<ol> 和 <li>）：用于创建无序列表和有序列表。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
 

表格元素（<table>、<tr>、<th> 和 <td>）：用于创建表格。

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
</table>
 

相关文章：

HTML——1.简介、基础、元素

一、简介 HTML&#xff08;HyperText Markup Language&#xff09;是一种用于创建网页的标记语言。它使用标记&#xff08;tag&#xff09;来描述网页的结构和内容。HTML被用于定义网页中的文本、图像、链接、多媒体以及其他元素的排列和呈现方式。 HTML文档是由一系列的HTML…...

编程日记 2024/4/2 0:20:24

Rust 标准库：std::env::args() 函数简介

std::env::args() 是 Rust 标准库中的一个函数&#xff0c;它属于 std::env 模块。这个函数用于获取并返回一个迭代器&#xff0c;该迭代器包含了程序运行时从命令行传入的所有参数。 当你运行一个 Rust 程序并从命令行传递参数时&#xff0c;例如&#xff1a; my_rust_progr…...

编程日记 2024/4/2 0:17:12

【Blockchain】GameFi | NFT

Blockchain GameFiGameFi顶级项目TheSandbox&#xff1a;Decentraland&#xff1a;Axie Infinity&#xff1a; NFTNFT是如何工作的同质化和非同质化区块链协议NFT铸币 GameFi GameFi是游戏和金融的组合&#xff0c;它涉及区块链游戏&#xff0c;对玩家提供经济激励&#xff0c…...

编程日记 2024/4/2 0:15:11

【Docker】搭建安全可控的自定义通知推送服务 - Bark

【Docker】搭建安全可控的自定义通知推送服务 - Bark 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建。 简介 Bark是一款为Apple设备用户设计的开源推送服务应用&#xff0c;它允许开发者、程序员以及一般用户将信息快速推送到他们自己的iPhone、iPad等设备上…...

编程日记 2024/4/2 0:13:09

国内IP代理软件电脑版：深入解析与应用指南

随着互联网技术的快速发展&#xff0c;网络活动日益丰富多样&#xff0c;IP代理软件也因其独特的功能和优势&#xff0c;成为许多电脑用户不可或缺的工具。在国内&#xff0c;由于网络环境的复杂性和特殊性&#xff0c;选择一款稳定、高效的IP代理软件电脑版尤为重要。虎观代理…...

编程日记 2024/4/2 0:12:07

面向对象设计之开闭原则

设计模式专栏&#xff1a; http://t.csdnimg.cn/4Mt4u 目录 1.引言 2.如何理解“对扩展开放、对修改关闭” 3.修改代码就意味着违反开闭原则吗 4.如何做到“对扩展开放、对修改关闭” 5.如何在项目中灵活应用开闭原则 6.总结 1.引言 开闭原则(Open Closed Principle&…...

编程日记 2024/4/2 0:11:07

【项目技术介绍篇】若依项目代码文件结构介绍

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…...

编程日记 2024/4/2 0:10:05

实现DevOps需要什么？

实现DevOps需要什么&#xff1f; 硬性要求&#xff1a;工具上的准备 上文提到了工具链的打通&#xff0c;那么工具自然就需要做好准备。现将工具类型及对应的不完全列举整理如下&#xff1a; 代码管理&#xff08;SCM&#xff09;&#xff1a;GitHub、GitLab、BitBucket、SubV…...

编程日记 2024/4/2 0:07:58

Linux小程序： 手写自己的shell

注意&#xff1a; 本文章只是为了理解shell内部的工作原理&#xff0c; 所以并没有完成shell的所有工作&#xff0c; 只是完成了shell里的一小部分工作 #include <stdio.h> #include <unistd.h> #include <string.h> #include <stdlib.h> #include &l…...

编程日记 2024/4/2 0:06:57

javaSwing租户管理系统

简介 欢迎阅读本篇博客&#xff0c;今天我将为大家介绍一个基于Java Swing开发的租户管理系统。该系统具有登录、注册、添加租户、查询租户信息、修改租户信息、删除租户、修改密码、退出登录等功能模块&#xff0c;旨在提供一个便捷的租户管理解决方案。 一、项目介绍 该租…...

编程日记 2024/4/2 0:03:55

cesium实现竖立的圆

cesium中的圆是平行于地面的&#xff0c;想实现竖起来的圆可以使用ellipsoid&#xff0c;设置其中一个轴的radii值为一个很小的值&#xff0c;比如0.00001&#xff0c;则这个轴上的宽度就会非常小&#xff0c;看起来就是一个圆面。 一、画圆ellipse&#xff0c;此处也把画圆的代…...

编程日记 2024/4/2 0:01:53

汽车电子行业知识：智能汽车电子架构

文章目录 3.智能汽车电子架构3.1.汽车电子概念及发展3.2.汽车电子架构类型3.2.1.博世汽车电子架构3.2.2.联合电子未来汽车电子架构3.2.3.安波福汽车电子架构3.2.4.丰田汽车电子架构3.2.5.华为汽车电子架构 3.智能汽车电子架构 3.1.汽车电子概念及发展 汽车电子是车体汽车电子…...

编程日记 2024/4/1 23:54:27

LeetCode146:LRU缓存

leetCode&#xff1a;146. LRU 缓存 题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#x…...

编程日记 2024/4/1 23:52:25

【Unity音游制作】你玩过节奏大师吗？（Koreographe插件导入游戏主体）【一】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…...

编程日记 2024/4/1 23:51:25

高效解决Ubuntu Server 18.04.1 LTS 64bit更新gdb8.1.1到gdb12.1

文章目录 问题解决步骤 问题 因为需要用到gdb一些指令&#xff0c;但是gdb8.x好像存在普遍的问题&#xff0c;实现不了某些指令&#xff0c;比方说set detach-on-fork on&#xff0c;升级版本也没有比较好的教程 经过我不断的试错&#xff0c;我终于升级成功了&#xff01;&a…...

编程日记 2024/4/1 23:50:24

【公示】2023年度青岛市级科技企业孵化器拟认定名单

根据《青岛市科技企业孵化器管理办法》&#xff08;青科规〔2023〕1号&#xff09;&#xff08;以下简称《管理办法》&#xff09;、《关于开展2023年度市级科技企业孵化器认定申报工作的通知》&#xff0c;经申报受理、区市推荐、形式审查、专家评审及现场核查等程序&#xff…...

编程日记 2024/4/1 23:49:22

【软件安装】（十四）Ubuntu22.04安装Psensor硬件监视器

一个愿意伫立在巨人肩膀上的农民...... Ubuntu系统硬件运行查询输入指令太繁琐&#xff0c;终端展示不直观&#xff0c;因此这款具有可视化监控Ubuntu系统下当前电脑的硬件CPU&#xff08;中央处理器&#xff09;、GPU&#xff08;显卡&#xff09;和硬盘等温度等功能&#xff…...

编程日记 2024/4/1 23:48:22

数组合并小程序

题目&#xff1a; 输入有序数组a, b, 不使用排序算法&#xff0c;及额外数组&#xff0c;按大小顺序合并a, b数组&#xff0c;元素不重复&#xff1b; 思路&#xff1a; 1. 如果比插入的数组大&#xff0c;那么往后插入&#xff0c;如果继续有大的&#xff0c;就移动位置插入…...

编程日记 2024/4/1 23:46:20

python练习二

# Demo85def pai_xu(ls_test):#创建一个列表排序函数命名为pai_xu# 对创建的函数进行注释"""这是一个关于列表正序/倒序排列的函数:param ls_test: 需要排序的列表:return:"""ls1 [int(ls_test[i]) for i in range(len(ls_test))]#对input输入的…...

编程日记 2024/4/1 23:43:13

专升本-数字媒体

数字媒体 概念&#xff1a; 媒体&#xff1a;是信息的载体&#xff0c;传播信息的媒介&#xff0c;能为信息的传播提供平台 数字媒体&#xff1a;多重媒体&#xff0c;使用文字&#xff0c;数据&#xff0c;图像&#xff0c;声音等各种媒体 数字媒体技术&#xff1a;利用计…...

编程日记 2024/4/1 23:41:12

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/1/26 18:15:24

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2026/2/1 15:29:27

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2026/1/20 12:20:43