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

HTML 基础

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

HTML 是什么?

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

html 复制代码
<p>My cat is very grumpy</p>

HTML 元素详解

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

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

属性应该包含:

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

嵌套元素

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

html 复制代码
<p>My cat is <strong>very</strong> grumpy.</p>

空元素

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

html 复制代码
<img src="images/firefox-icon.png" alt="My test image" />

HTML 文档详解

单个元素如何构成一个完整的 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 属性:

html 复制代码
<img src="images/firefox-icon.png" alt="My test image" />

alt 属性重要性:

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

标记文本

标题(Heading)

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

html 复制代码
<h1>主标题</h1>
<h2>顶层标题</h2>

段落(Paragraph)

html 复制代码
<p>这是一个段落</p>

列表(List)

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

链接

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

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

结语

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

相关推荐
Moment7 分钟前
面试官:一个接口使用postman这些测试很快,但是页面加载很慢怎么回事 😤😤😤
前端·后端·面试
诗书画唱10 分钟前
【前端面试题】JavaScript 核心知识点解析(第二十二题到第六十一题)
开发语言·前端·javascript
excel17 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子24 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构30 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep32 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss36 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风36 分钟前
html二次作业
前端·html
江城开朗的豌豆40 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵40 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae