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

超文本标记语言(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 的学习是一个不断实践和探索的过程,希望本文能为你的前端之旅提供一些帮助。

相关文章:

  • 基于Python+Flask+MySQL+HTML的B站数据可视化分析系统
  • uniapp使用css实现瀑布流
  • maven部署打包的pom配置
  • 即时聊天系统
  • TCP三次握手的过程
  • Github 2024-06-14 开源项目日报Top10
  • C语言之#define #if 预处理器指令
  • HTML前端
  • 基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[0]-模型、工具、分词器等支持列表
  • VSCode插件开发之初始化项目
  • GPRS与4G网络:技术差异与应用选择
  • PHP入门教程1:PHP的基础概念和基本语法
  • 17个有用的CLI命令
  • 跨文化美学实践:以‘Shockman登峰侠‘为例探析翻译艺术与文化意蕴
  • 回答网友的一个Delphi问题
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • docker容器内的网络抓包
  • Js基础知识(四) - js运行原理与机制
  • php面试题 汇集2
  • Python学习之路16-使用API
  • Tornado学习笔记(1)
  • Transformer-XL: Unleashing the Potential of Attention Models
  • Vim Clutch | 面向脚踏板编程……
  • Vue组件定义
  • 大数据与云计算学习:数据分析(二)
  • 高性能JavaScript阅读简记(三)
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 利用DataURL技术在网页上显示图片
  • 前端代码风格自动化系列(二)之Commitlint
  • 前端面试题总结
  • 如何用vue打造一个移动端音乐播放器
  • 数据仓库的几种建模方法
  • ###STL(标准模板库)
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (代码示例)使用setTimeout来延迟加载JS脚本文件
  • (第27天)Oracle 数据泵转换分区表
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (转) RFS+AutoItLibrary测试web对话框
  • (轉貼)《OOD启思录》:61条面向对象设计的经验原则 (OO)
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .net core 的缓存方案
  • .NET Core引入性能分析引导优化
  • .NET 依赖注入和配置系统
  • .NET正则基础之——正则委托
  • //解决validator验证插件多个name相同只验证第一的问题
  • @configuration注解_2w字长文给你讲透了配置类为什么要添加 @Configuration注解
  • []指针
  • [2019.3.5]BZOJ1934 [Shoi2007]Vote 善意的投票
  • [AutoSAR 存储] 汽车智能座舱的存储需求
  • [delphi]保证程序只运行一个实例
  • [Docker]三.Docker 部署nginx,以及映射端口,挂载数据卷
  • [Editor]Unity Editor类常用方法
  • [JS]JavaScript 注释 输入输出语句
  • [LeetCode] Ransom Note 赎金条