超文本标记语言(HTML)简介

HTML 基础

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 HTML 及其功能做一个基本介绍。

HTML 是什么?

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。例如:

<p>My cat is very grumpy</p>

HTML 元素详解

HTML 元素由以下主要部分组成:

  • 开始标签(Opening tag):例如 <p>,表示元素的开始。
  • 结束标签(Closing tag):例如 </p>,表示元素的结束。
  • 内容(Content):元素的实际内容,如文本或图片。
  • 属性(Attribute):提供关于元素的额外信息,如 class="editor-note"

属性应该包含:

  • 属性名称后跟等号和属性值,通常用引号包围。

嵌套元素

可以将一个元素置于其他元素之中,称作嵌套。例如:

<p>My cat is <strong>very</strong> grumpy.</p>

空元素

不包含任何内容的元素称为空元素,例如 <img>

<img src="images/firefox-icon.png" alt="My test image" />

HTML 文档详解

单个元素如何构成一个完整的 HTML 页面:

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My test page</title></head><body><img src="images/firefox-icon.png" alt="My test image" /></body>
</html>

重要元素解释:

  • <!DOCTYPE html>:文档类型声明。
  • <html>:根元素,包含整个页面内容。
  • <head>:包含不展示给用户的内容,如CSS和元数据。
  • <meta>:字符集和视口设置。
  • <title>:页面标题。
  • <body>:用户可以看到的所有内容。

图像

图像通过 <img> 元素嵌入,包括 srcalt 属性:

<img src="images/firefox-icon.png" alt="My test image" />

alt 属性重要性:

  • 为视觉障碍用户提供图像描述。
  • 当图像无法显示时提供文本信息。

标记文本

标题(Heading)

HTML 提供六个级别的标题,从 <h1><h6>

<h1>主标题</h1>
<h2>顶层标题</h2>

段落(Paragraph)

<p>这是一个段落</p>

列表(List)

  • 无序列表(Unordered List):<ul><li>
  • 有序列表(Ordered List):<ol><li>
<ul><li>列表项1</li><li>列表项2</li>
</ul>

链接

链接使用 <a> 元素创建,通过 href 属性指定链接地址:

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

结语

HTML 是构建网页的基础,通过本篇文章,我们对 HTML 的基本元素和结构有了初步了解。HTML 的学习是一个不断实践和探索的过程,希望本文能为你的前端之旅提供一些帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一年又一年志愿

--第一篇 20220624十年苦读&#xff0c;青春飞扬&#xff0c;其道大光&#xff0c;来日方长。又是一年高考时&#xff0c;高考改变命运&#xff0c;但是后面还有更关键几步&#xff0c;跟大家一起聊聊。之前写我考状元的经历&#xff0c;堂弟考省前十的经历&#xff0c;有不少…

Centos7防火墙firewal常用命令介绍

前言 在CentOS 7中&#xff0c;firewalld是默认的防火墙管理工具&#xff0c;它提供了一种简化和易于使用的方法来配置和管理防火墙规则。 firewalld简介 引入&#xff1a;从CentOS 7开始&#xff0c;默认使用firewalld来配置防火墙&#xff0c;而不是传统的iptables。配置文…

java基于ssm+jsp 母婴用品网站

1管理员功能模块 管理员登录&#xff0c;管理员通过输入用户名、密码等信息进行系统登录&#xff0c;如图1所示。 图1管理员登录界面图 管理员登录进入母婴用品网站可以查看主页、个人中心、用户管理、商品分类管理、商品信息管理、留言板管理、成长交流、系统管理、订单管理、…

上手微服务框架go-zero

文章目录 微服务框架与web框架的区别点在哪儿&#xff1f;为什么还要有微服务框架微服务框架与web框架的对比小结 为什么选go-zero&#xff1f;框架对比 下载并认识go-zero认识go-zero环境要求组成下载 实践go-zero基础功能案例apirpc服务功能说明准备构建rpc服务构建api服务服…

Oracle共享内存不释放

Oracle数据库使用共享内存来管理其系统全局区&#xff08;SGA&#xff09;和程序全局区&#xff08;PGA&#xff09;。当Oracle数据库的共享内存没有正确释放时&#xff0c;可能会导致数据库启动失败或性能问题。以下是一些可能的原因和解决方法&#xff1a; /dev/shm空间不足&…

LeetCode 179. 最大数

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 179. 最大数&#xff0c;难度中等。 排序 解题思路&#xff1a;现将 int 类型转成 str 类型&#xff0c;然后进行字符串比较&#xff0c…

选择徐州视频服务器的主要作用

视频服务器是一种对视频音频数据进行压缩、存储和处理的专用嵌入式设备&#xff0c;以此满足了存储和传输的要求&#xff0c;会在远程控制与视频方面会得到广泛的应用&#xff0c;主要是由网络接口、视音频接口、协议接口和软件接口等构成的&#xff0c;可以实现远程监控的功能…

【GD32F303红枫派使用手册】第二十一节 I2C-EEPROM读写实验

21.1 实验内容 通过本实验主要学习以下内容&#xff1a; AT24C16 EEPROM的工作原理&#xff1b; IIC模块原理以及IIC驱动原理。 21.2 实验原理 21.2.1 AT24C16 EEPROM的工作原理 下图为AT24CXX系列EEPROM相关参数&#xff0c;由该图可知&#xff0c;AT24C16的存储容量为1…

C# 比较基础知识:最佳实践和技巧

以下是一些在 C# 中进行比较的技巧和窍门的概述。 1. 比较原始类型 对于原始类型&#xff08;int、double、char 等&#xff09;&#xff0c;可以使用标准比较运算符。 int a 5; int b 10; bool isEqual (a b); // false bool isGreater (a > b); // false bool is…

PHP——爬虫DOM解析

背景 php在爬取网页信息的时候&#xff0c;有一些函数可以使用。 这里介绍两个 DOMDocumentDOMXPath 代码解析 <?php // 示例HTML $html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>Example</title><…

【D3.js in Action 3 精译】关于本书

文章目录 本书读者本书结构与路线图本书代码liveBook 在线论坛 D3.js 项目的传统开发步骤 本书读者 这本书适用于所有渴望在数据可视化工作中获得完全创意自由的人&#xff0c;从定制化的经典图表到创建独特的数据可视化布局&#xff0c;涵盖内容广泛&#xff0c;应有尽有。您…

c语言移位运算超出类型所能表示的范围告警

错误代码&#xff1a; *(unsigned int *)GPIOC_CRH & ~(0xf << 28); 告警内容&#xff1a; integer operation result is out of range 分析&#xff1a; integer operation result is out of range是因为在尝试对一个32位整型执行移位操作时超出了该类型所能表示…

重学java 80.Junit单元测试

我总是着急的解释我自己&#xff0c;却忘了厚爱无需多言 —— 24.6.21 一、Junit介绍 1.概述 Junit是一个单元测试框架,可以代替main方法去执行其他的方法 2.作用 可以单独执行一个方法,测试该方法是否能跑通 3.注意 Junit是第三方工具,所以使用之前需要导入jar包 二、J…

GraphQL vs REST:API设计的现代选择

随着技术的飞速发展&#xff0c;API&#xff08;应用程序接口&#xff09;设计成为了软件开发中不可或缺的一部分。REST&#xff08;Representational State Transfer&#xff09;和GraphQL作为两种主流的API设计风格&#xff0c;各自具有独特的优势和适用场景。本文将深入探讨…

idea导入项目右侧maven不显示的解决办法

不显示情况&#xff1a; 原因可能是读取项目出错&#xff0c;未正确加载pom文件造成的。 解决方案一&#xff1a; 关闭idea在项目目录中删除.idea文件夹重新打开项目&#xff0c;重新加载。 解决犯案二&#xff1a; 直接在pom文件中右键选择add as maven project。 解决方案三…

嵌入式Linux gcc 编译器使用解析

目录 1.说明 2.分步编译法 3.编译源文件的四个阶段 4.gdb调试及常用命令 5.Makefile 1.说明 源文件 main.c 想生成 source gcc –g –O2 main.c –o source 黄色部分便是控制字 -g用于GDB –O2用于优化编译; 绿色部分表示源,可以由多个组成,用空格隔开; gcc …

PythonWeb前端

摘要 学校的一门选修课&#xff0c;PythonWeb开发从入门到实践&#xff0c;用到的技术有Python,Flask,MySQL,前端三件套等&#xff0c;但因为是选修课&#xff0c;所以都只涉及到了一点点 Web前端基础 1.Web工作原理 概念&#xff1a; Web&#xff0c;万维网&#xff0c;一…

出差:能带的工具都要带上,宁可用不上,不可没有

昨天出差常州&#xff0c;我也是信心满满。就是烧录几个板子&#xff0c;在公司烧了无数次&#xff0c;也反复测试过了。 到了现场&#xff0c;傻眼了&#xff1a; 我以为是来烧云台&#xff0c;连六角螺丝刀都带上了&#xff0c;其他包括串口线、云台电缆。现场是烧板子&…

关于运用人工智能帮助自己实现英语能力的有效提升?

# 实验报告 ## 实验目的 - 描述实验的目标&#xff1a;自己可以知道&#xff0c;自己的ai学习方法是否可以有效帮助自己实现自己的学习提升。 预期结果&#xff1a;在自己利用科技对于自己进行学习的过程中&#xff0c;自己的成长速度应该是一个幂指数的增长 ## 文献回顾 根据…

Docker:centos79-docker-compose安装记录

1.安装环境&#xff1a;centos7.9 x86 2.安装最新版&#xff1a; [rootlocalhost ~]# curl -fsSL get.docker.com -o get-docker.sh [rootlocalhost ~]# sh get-docker.sh # Executing docker install script, commit: e5543d473431b782227f8908005543bb4389b8desh -c yum in…