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

一、简介

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>

相关推荐
MarkHD18 小时前
智能体在车联网中的应用:第51天 模仿学习与离线强化学习:破解数据效率与安全困局的双刃剑
学习·安全
wearegogog12320 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
molaifeng21 小时前
Go 语言如何实现高性能网络 I/O:Netpoller 模型揭秘
开发语言·网络·golang
Drawing stars21 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
崇山峻岭之间21 小时前
Matlab学习记录33
开发语言·学习·matlab
品克缤21 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
Evand J21 小时前
【2026课题推荐】DOA定位——MUSIC算法进行多传感器协同目标定位。附MATLAB例程运行结果
开发语言·算法·matlab
小二·21 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°21 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
jllllyuz21 小时前
基于MATLAB的二维波场模拟程序(含PML边界条件)
开发语言·matlab