HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖

酉鬼女又兒2026-03-16 14:37

HTML 基础

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的

HTML 段落

HTML 段落是通过标签 <p> 来定义的

HTML 链接

HTML 链接是通过标签 <a> 来定义的

**提示:**在 href 属性中指定链接的地址

HTML 图像

HTML 图像是通过标签 <img> 来定义的

注意： 图像的名称和尺寸是以属性的形式提供的

实例

HTML 元素

HTML 文档由 HTML 元素定义

开始标签 * 元素内容 结束标签 *
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行

开始标签常被称为起始标签（opening tag） ，结束标签常称为闭合标签（closing tag）

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 实例解析

<p> 元素:

复制代码 
<p>这是第一个段落。</p>
  • 这个 <p> 元素定义了 HTML 文档中的一个段落。
  • 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
  • 元素内容是: 这是第一个段落。

<body> 元素:

复制代码 
<body>
<p>这是第一个段落。</p>
</body>
  • <body> 元素定义了 HTML 文档的主体。
  • 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
  • 元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

复制代码 
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
  • <html> 元素定义了整个 HTML 文档。
  • 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
  • 元素内容是另一个 HTML 元素（body 元素）

不要忘记结束标签

即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

复制代码 
<p>这是一个段落
<p>这是一个段落
  • 以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
  • 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误

HTML 空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
  • 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
  • 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
  • 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签

HTML 属性

  • 属性是 HTML 元素提供的附加信息。
  • 属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。
  • 属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值
  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。
属性名 适用元素 说明
id 所有元素 为元素指定唯一的标识符。
class 所有元素 为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
style 所有元素 直接在元素上应用 CSS 样式。
title 所有元素 为元素提供额外的提示信息，通常在鼠标悬停时显示。
data-* 所有元素 用于存储自定义数据，通常通过 JavaScript 访问。
href <a>, <link> 指定链接的目标 URL。
src <img>, <script>, <iframe> 指定外部资源（如图片、脚本、框架）的 URL。
alt <img> 为图像提供替代文本，当图像无法显示时显示。
type <input>, <button> 指定输入控件的类型（如 text, password, checkbox 等）。
value <input>, <button>, <option> 指定元素的初始值。
disabled 表单元素 禁用元素，使其不可交互。
checked <input type="checkbox">, <input type="radio"> 指定复选框或单选按钮是否被选中。
placeholder <input>, <textarea> 在输入框中显示提示文本。
target <a>, <form> 指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。
readonly 表单元素 使输入框只读。
required 表单元素 指定输入字段为必填项。
autoplay <audio>, <video> 自动播放媒体。
onclick 所有元素 当用户点击元素时触发 JavaScript 事件。
onmouseover 所有元素 当用户将鼠标悬停在元素上时触发 JavaScript 事件。
onchange 表单元素 当元素的值发生变化时触发 JavaScript 事件

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解

复制代码 
<!-- 这是一个注释 -->
标签 描述
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释

HTML 标签参考手册

标签 描述
<p> 定义一个段落
<br> 插入单个折行（换行）

HTML 文本格式化标签

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

HTML "计算机输出" 标签

标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

HTML 引文, 引用, 及标签定义

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

HTML 链接

复制代码 
<a href="URL">链接文本</a>

  • <a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。

  • href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL

    本文本 是一个指向本网站中的一个页面的链接。

    本文本 是一个指向万维网上的页面的链接。

1、href：定义链接目标。

这是超链接最重要的属性，用来指定链接的目的地，可以是另一个网页、文件、邮件、电话号码或 JavaScript

复制代码 
<a href="https://www.example.com">访问 Example</a>

2、target：定义链接的打开方式。

  • _blank: 在新窗口或新标签页中打开链接。

  • _self: 在当前窗口或标签页中打开链接（默认）。

  • _parent: 在父框架中打开链接。

  • _top: 在整个窗口中打开链接，取消任何框架

    新窗口打开 Example

3、rel：定义链接与目标页面的关系。

nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。

noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target="_blank" 时。

  • noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。

  • noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。

  • noopener noreferrer: 同时使用noopener和noreferrer。例子: <a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

    安全链接

4、download：提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名，浏览器会提示下载并保存为指定文件名

复制代码 
<a href="file.pdf" download="example.pdf">下载文件</a>

5、title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示

复制代码 
<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>

6、id：用于链接锚点，通常在同一页面中跳转到某个特定位置

复制代码 
<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>

7、hreflang: 指定链接的目标URL的语言

复制代码 
<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

8、type: 指定链接资源的MIME类型

复制代码 
<a href="style.css" type="text/css">样式表</a>

9、class: 用于指定元素的类名（CSS中定义）

复制代码 
<a href="https://www.example.com" class="external-link">外部链接</a>

10、style: 直接在元素上定义CSS样式

复制代码 
<a href="https://www.example.com" style="color: red;">红色链接</a>

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

复制代码 
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

复制代码 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

复制代码 
<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

HTML head 元素

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

HTML 样式- CSS

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距

复制代码 
<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

复制代码 
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色 ，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

复制代码 
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

复制代码 
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

复制代码 
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

复制代码 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址
相关推荐
Watermelo6172 小时前
【前端实战】构建 Vue 全局错误处理体系，实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
A923A2 小时前
【Vue3大事件 | 项目笔记】第二天
前端·vue.js·笔记·前端框架·前端项目
万码社2 小时前
小程序开发实战：我手写日历组件踩过的那些坑
前端
工藤新一¹2 小时前
《操作系统》第一章(1)
java·服务器·前端
进击的尘埃2 小时前
Vue 3 编译器宏的编译时魔法：defineModel、defineSlots 与 AST 转换的真相
javascript
用户9714171814272 小时前
Flex 和 Grid 详细使用指南：从入门到实战避坑
前端·css
不会敲代码12 小时前
使用 Mock.js 模拟 API 数据，实现前后端并行开发
前端·javascript
琛説2 小时前
Web-Rooter：一种 IR + Lint 模式的 AI Agent 创新尝试【或许是下一个 AI 爆火方向】
前端·人工智能
向上的车轮2 小时前
TypeScript 一日速通指南：数据类型全解析与转换指南
javascript·typescript
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04本地部署 OpenClaw + DeepSeek-R1 完全指南05UV安装并设置国内源06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07OpenClaw Control UI安全上下文访问配置08Openclow安装保姆级教程09在 Windows 上配置 Claude Code从安装到解决网络问题10OpenClaw 飞书机器人不回复消息？3 小时踩坑总结