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

前端基础：从0到1实现简单网页效果（一）

news 2025/9/23 7:30:55

目录

1、HTML 概述

2、HTML 的基本结构

3、HTML 常用标签

文本标签

链接与图片

列表

表格

表单

HTML5 新特性

HTML 与 CSS/JavaScript 的协作

HTML 开发工具

学习资源

4、HTML 标签拓展

结构标签

文本标签

链接与媒体标签

列表标签

表格标签

表单标签

元信息标签

语义标签

5、HTML 常用全局属性

表单相关属性

链接与媒体属性

事件处理属性

其他实用属性

6、HTML闭合与非闭合标签

HTML 闭合标签

HTML 非闭合标签

区别与注意事项

特殊情况

7、HTML 特殊字符的写法

常用特殊字符的实体引用

实体引用与数字引用的区别

示例代码

注意事项

8、HTML 注释的作用

基本语法

多行注释

条件注释（已废弃）

注释中的注意事项

实用场景

9、HTML 文档基本结构

文档类型声明

根元素

头部部分

主体部分

常见内容元素

注释

完整示例

1、HTML 概述

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它通过标签（tags）定义网页的结构和内容，浏览器解析这些标签后渲染出可视化的页面。HTML 是 Web 开发的基石，通常与 CSS 和 JavaScript 结合使用。

2、HTML 的基本结构

一个典型的 HTML 文档包含以下基本结构：

<!DOCTYPE html>
<html lang="en"><!--英文-->
<head><meta charset="UTF-8"><!--指定当前文档使用的字符编码为 UTF-8--><!--通用的 Unicode 编码格式，能支持多种语言字符（包括中文、日文、特殊符号等），确保网页内容正确显示而不会出现乱码--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--width=device-width 表示网页宽度与设备屏幕宽度一致。
initial-scale=1.0 表示初始缩放比例为 100%，避免移动端浏览器自动缩放页面。--><title>网页标题</title><!--该标题会显示在浏览器的标签页、搜索引擎结果页面（SERP）以及用户收藏网页时的默认名称中。----->
</head>
<body><!-- 网页内容 -->
</body>
</html>
  • <!DOCTYPE html> 声明文档类型为 HTML5。
  • <html> 是文档的根元素。
  • <head> 包含元数据（如字符集、标题等）。
  • <body> 包含网页的可见内容。

3、HTML 常用标签

文本标签

  • <h1> 到 <h6>：标题标签，<h1> 为最高级。
  • <p>：是 HTML 中定义段落的标签，用于将文本内容分段显示。
  • <span>：行内文本容器，通常用于样式控制。
  • <strong> 或 <b>：加粗文本。
  • <em> 或 <i>：斜体文本。
  • <br>：换行标签。

链接与图片

  • <a href="URL">链接文本</a>：超链接。
  • <img src="image.jpg" alt="描述">：插入图片。

列表

  • <ul>：无序列表。
  • <ol>：有序列表。
  • <li>：列表项。

表格

<table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>
  • <table>：定义表格。
  • <tr>：定义行。
  • <th>：定义表头单元格。
  • <td>：定义数据单元格。

表单

        HTML 表单用于收集用户输入的数据，通常包含输入框、按钮、下拉菜单等交互元素。表单通过 <form> 标签定义，其核心属性包括 action（提交目标 URL）和 method（提交方式，如 GET 或 POST）。

<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><!--name与后端相关--><input type="submit" value="提交">
</form>
  • <form>：定义表单。
  • <input>：输入字段，类型包括 text、password、submit 等。
  • <label>：为输入字段添加标签。

HTML5 新特性

HTML5 引入了许多新元素和 API，例如：

  • 语义化标签：<header>、<footer>、<article>、<section> 等。
  • 多媒体支持：<audio> 和 <video> 标签。
  • 图形绘制：<canvas> 和 SVG。
  • 本地存储：localStorage 和 sessionStorage。
  • 表单增强：<input type="date">、<input type="email"> 等。

HTML 与 CSS/JavaScript 的协作

  • CSS 用于控制网页的样式，通过 <link> 引入或直接在 <style> 标签中定义。
  • JavaScript 用于实现交互功能，通过 <script> 标签引入或直接编写。

HTML 开发工具

  • 文本编辑器：VS Code、Sublime Text、Atom 等。
  • 浏览器开发者工具：Chrome DevTools、Firefox Developer Tools。
  • 在线调试工具：CodePen、JSFiddle。

学习资源

  • MDN Web Docs（Mozilla Developer Network）：权威的 HTML 文档。
  • W3Schools：适合初学者的教程。
  • HTML5 官方规范：深入了解 HTML5 标准。

通过掌握 HTML，可以构建结构化的网页内容，为后续学习 CSS 和 JavaScript 打下基础。

4、HTML 标签拓展

结构标签

  • <html>：定义整个HTML文档的根元素。
  • <head>：包含文档的元信息，如标题、字符集和引用的外部资源。
  • <body>：包含网页的可见内容，如文本、图片和链接。
  • <header>：定义文档或节的页眉。
  • <footer>：定义文档或节的页脚。
  • <nav>：定义导航链接的容器。
  • <section>：定义文档中的一个独立部分。
  • <article>：定义独立的自包含内容，如博客文章或新闻。
  • <div>：通用容器，用于样式化或脚本操作。

文本标签

  • <h1> 到 <h6>：定义标题，<h1> 是最高级标题。
  • <p>：定义段落。
  • <span>：内联容器，用于对文本的一部分进行样式化。
  • <strong>：定义重要文本，通常加粗显示。
  • <em>：定义强调文本，通常斜体显示。
  • <br>：插入换行。
  • <hr>：插入水平线。
  • <i>:  斜体文本。

链接与媒体标签

  • <a>：定义超链接，通过 href 属性指定目标URL。
  • <img>：嵌入图像，通过 src 属性指定图像路径。
  • <video>：嵌入视频内容。
  • <audio>：嵌入音频内容。
  • <iframe>：嵌入另一个网页或文档。

列表标签

  • <ul>：定义无序列表。
  • <ol>：定义有序列表。
  • <li>：定义列表项。
  • <dl>：定义描述列表。
  • <dt>：定义描述列表的术语。
  • <dd>：定义描述列表的描述。

表格标签

  • <table>：定义表格。
  • <tr>：定义表格行。
  • <th>：定义表头单元格。
  • <td>：定义表格数据单元格。
  • <caption>：定义表格标题。

表单标签

  • <form>：定义表单，用于收集用户输入。
  • <input>：定义输入控件，类型由 type 属性决定（如 text、password、submit）。
  • <textarea>：定义多行文本输入。
  • <button>：定义可点击按钮。
  • <select>：定义下拉列表。
  • <option>：定义下拉列表中的选项。
  • <label>：定义表单控件的标签。

元信息标签

  • <meta>：提供文档的元信息，如字符集、视口设置。
  • <link>：链接外部资源，如CSS文件。
  • <script>：嵌入或引用JavaScript代码。
  • <style>：定义内部CSS样式。

语义标签

  • <main>：定义文档的主要内容。
  • <aside>：定义与周围内容相关但独立的内容。
  • <figure>：定义自包含内容，如图表或图片。
  • <figcaption>：定义 <figure> 的标题。
  • <time>：定义日期或时间。

这些标签是构建网页的基础，合理使用可以提高网页的结构化和可访问性。

5、HTML 常用全局属性

全局属性适用于所有 HTML 元素，以下是一些核心属性：

class
为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择器。多个类名用空格分隔。

id
定义元素的唯一标识符，在同一文档中必须唯一。常用于 CSS 或 JavaScript 精准定位。

style
直接内联 CSS 样式，优先级高于外部样式表。例如：

<div style="color: red; font-size: 16px;">文本</div>

title
提供元素的额外信息，鼠标悬停时显示提示文本。常用于链接或按钮的说明。

data-*
自定义数据属性，存储与元素相关的私有数据。例如：

<button data-id="123">按钮</button>

hidden
布尔属性，设置元素不可见。等同于 style="display: none;"。

lang
定义元素内容的语言代码，如 lang="en" 表示英语。

表单相关属性

name
表单控件的名称，用于提交数据时标识字段。

value
表单元素的初始值，如输入框、单选按钮等。

placeholder
输入框的提示文本，用户输入时消失。

required
布尔属性，强制用户在提交前填写字段。

disabled
禁用表单控件，阻止用户交互且数据不会被提交。

readonly
字段只读，用户无法修改但数据可提交。

链接与媒体属性

href
定义超链接的目标 URL 或锚点。

target
指定链接打开方式，如 _blank 表示新窗口。

src
嵌入外部资源的路径，如图片、脚本或 iframe。

alt
图片无法显示时的替代文本，对无障碍访问至关重要。

width 与 height
设置元素的宽度和高度，单位默认为像素。

事件处理属性

onclick
点击元素时触发 JavaScript 代码。

onload
资源加载完成后触发，常用于图片或页面。

onmouseover
鼠标移入元素时触发。

onsubmit
表单提交时触发，可用于验证数据。

其他实用属性

contenteditable
允许用户编辑元素内容，如 contenteditable="true"。

draggable
设置元素是否可拖拽，需配合拖拽 API 使用。

tabindex
控制元素通过 Tab 键聚焦的顺序，值为 0 或正整数。

aria-*
无障碍属性，增强屏幕阅读器的兼容性。例如 aria-label 提供元素描述。

以上属性可根据实际需求组合使用，灵活控制 HTML 元素的行为与表现。

6、HTML闭合与非闭合标签

HTML 闭合标签

闭合标签是 HTML 中需要明确结束标记的标签，通常由开始标签和结束标签组成，结束标签在标签名前添加斜杠 /。这类标签通常用于包裹内容或嵌套其他元素。

语法示例：

<p>这是一个段落。</p>
<div>这是一个 div 容器。</div>
<a href="#">这是一个链接</a>

常见闭合标签：

  • <p></p>：段落
  • <div></div>：块级容器
  • <span></span>：行内容器
  • <h1></h1> 到 <h6></h6>：标题
  • <a></a>：超链接
  • <ul></ul> 和 <ol></ol>：列表
  • <li></li>：列表项

HTML 非闭合标签

非闭合标签（自闭合标签）不需要单独的结束标记，通常用于插入特定内容或元素，如图片、换行等。这类标签在 HTML5 中可以省略斜杠 /。

语法示例：

<img src="image.jpg" alt="图片">
<br>
<input type="text">

常见非闭合标签：

  • <img>：插入图片
  • <br>：换行
  • <hr>：水平线
  • <input>：输入框
  • <meta>：元数据
  • <link>：引入外部资源（如 CSS）

区别与注意事项

  1. 内容包裹：闭合标签用于包裹内容，非闭合标签通常独立存在。
  2. 语法差异：闭合标签需成对出现，非闭合标签无需结束标记。
  3. 兼容性：在 HTML5 中，非闭合标签的斜杠 / 可省略（如 <br>），但在 XHTML 中必须保留（如 <br />）。

特殊情况

某些标签在 HTML5 中允许省略结束标签，但逻辑上仍属于闭合标签。例如：

  • <li>：下一个 <li> 或 </ul> 会隐式闭合前一个 <li>。
  • <p>：遇到另一个块级元素时会自动闭合。

代码示例：

<ul><li>项目1<li>项目2
</ul>

7、HTML 特殊字符的写法

在HTML中，某些字符具有特殊含义（如 <、>、&），或无法直接输入（如版权符号 ©）。这些字符需要使用**实体引用（Entity Reference）或数字引用（Numeric Reference）**来表示。

常用特殊字符的实体引用

以下是一些常见的特殊字符及其对应的HTML实体写法：

  • 小于号 <: &lt; 或 &#60;
  • 大于号 >: &gt; 或 &#62;
  • 和号 &: &amp; 或 &#38;
  • 双引号 ": &quot; 或 &#34;
  • 单引号 ': &apos; 或 &#39;
  • 空格（不间断空格）: &nbsp; 或 &#160;
  • 版权符号 ©: &copy; 或 &#169;
  • 注册商标 ®: &reg; 或 &#174;
  • 欧元符号 €: &euro; 或 &#8364;
  • 乘号 ×: &times; 或 &#215;
  • 除号 ÷: &divide; 或 &#247;

实体引用与数字引用的区别

  1. 实体引用（Named Entity）
    使用易记的名称表示字符，例如 &lt; 表示 <。适合常见的符号。

  2. 数字引用（Numeric Entity）
    使用 Unicode 码点表示字符，格式为 &#十进制; 或 &#x十六进制;。例如 &#60; 和 &#x3C; 均表示 <。适合名称未知的字符。

示例代码

<p>HTML 中需要转义的符号：< > &</p>
<p>版权符号：© 或 ©</p>
<p>特殊符号：€ × ÷</p>

注意事项

  • 直接在HTML中输入特殊字符（如 <、&）可能导致解析错误，务必使用转义写法。
  • 实体名称区分大小写，例如 &lt; 正确，而 &LT; 无效。
  • 完整的HTML实体列表可参考 W3C官方文档 或 MDN。

8、HTML 注释的作用

HTML 注释用于在代码中添加说明或临时禁用部分代码，而不会影响页面显示。注释内容不会在浏览器中渲染，仅供开发者查看。

基本语法

HTML 注释以 <!-- 开始，以 --> 结束：

<!-- 这是一个注释 -->
<p>这段文字会显示。</p>
<!-- <p>这段文字不会显示。</p> -->

多行注释

注释可以跨越多行：

<!-- 这是一个多行注释。可以包含多行文本。
-->

条件注释（已废弃）

早期 IE 浏览器支持条件注释，但现代浏览器已废弃此功能：

<!--[if IE]>这段代码仅适用于 IE 浏览器。
<![endif]-->

注释中的注意事项

  • 注释不能嵌套，否则会导致解析错误： 
    <!-- <!-- 嵌套注释会出错 --> -->
  • 注释中避免使用 --，可能引发解析问题： 
    <!-- 避免使用 -- 符号 -->

实用场景

  • 调试代码时临时禁用部分内容： 
    <!-- <div class="debug">调试内容</div> -->
  • 标记代码区块用途： 
    <!-- 导航栏开始 -->
<nav>...</nav>
<!-- 导航栏结束 -->

9、HTML 文档基本结构

HTML（超文本标记语言）的结构通常由以下几个核心部分组成：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

文档类型声明

<!DOCTYPE html> 声明位于文档最前面，用于告诉浏览器该文档使用的是 HTML5 标准。这不是一个 HTML 标签，而是一个指令。

根元素

<html> 标签是所有其他 HTML 元素的容器，lang 属性指定文档的语言（如 en 表示英语）。

头部部分

<head> 元素包含文档的元数据（metadata），这些内容不会显示在页面上：

  • <meta charset="UTF-8"> 定义字符编码
  • <meta name="viewport" ...> 控制移动端显示
  • <title> 定义浏览器标签页显示的标题
  • 可以包含 <style>、<link>（引入 CSS）、<script> 等标签

主体部分

<body> 元素包含所有可见的页面内容，如文本、图片、链接、表格等。这里是网页实际显示的部分。

常见内容元素

在 <body> 中常用的结构元素包括：

<header>页眉</header>
<nav>导航栏</nav>
<main><article>独立内容</article><section>内容区块</section>
</main>
<aside>侧边栏</aside>
<footer>页脚</footer>

注释

HTML 注释不会被浏览器显示，用于开发者做备注：

<!-- 这是注释内容 -->

完整示例

以下是包含基本语义化标签的完整 HTML5 结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的网页</title><link rel="stylesheet" href="styles.css">
</head>
<body><header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li></ul></nav></header><main><article><h2>文章标题</h2><p>文章内容...</p></article></main><footer><p>版权信息 © 2023</p></footer><script src="script.js"></script>
</body>
</html>

HTML 超链接跳转

HTML 超链接跳转是通过 <a> 标签实现的，主要用于页面间导航或锚点跳转。以下是常见用法和注意事项：

基本语法

<a href="目标URL">链接文本</a>

页面间跳转

<!-- 跳转到外部网站 -->
<a href="https://example.com">访问示例网站</a><!-- 跳转到本地文件 -->
<a href="about.html">关于我们</a>

锚点跳转（页面内跳转）

<!-- 定义锚点 -->
<h2 id="section1">第一部分</h2><!-- 跳转到锚点 -->
<a href="#section1">返回第一部分</a>

新窗口打开链接

<a href="https://example.com" target="_blank">在新窗口打开</a>

邮件链接

<a href="mailto:contact@example.com">发送邮件</a>

电话链接

<a href="tel:+123456789">拨打电话</a>

注意事项

  • 使用 target="_blank" 时建议添加 rel="noopener noreferrer" 防止安全漏洞
  • 锚点名称区分大小写
  • 外部链接建议使用完整的URL（包含 http:// 或 https://）
  • 确保链接文本具有描述性，避免使用"点击这里"等模糊表述

HTML 锚链接基础

锚链接（Anchor Link）用于在同一页面或不同页面间跳转到指定位置。通过<a>标签的href属性结合id属性实现。

语法示例：

<!-- 定义锚点 -->
<h2 id="section1">第一部分</h2><!-- 创建跳转链接 -->
<a href="#section1">跳转到第一部分</a>

页面内跳转

通过#后接目标元素的id值实现页面内导航：

<a href="#footer">跳转到页脚</a>
...
<footer id="footer">这里是页脚内容</footer>

跨页面跳转

在href中指定目标页面路径后接#和锚点ID：

<a href="anotherpage.html#section3">跳转到其他页面的第三节</a>

高级用法

返回顶部按钮：

<a href="#">返回顶部</a>

结合JavaScript动态锚点：

<button onclick="window.location.href='#contact'">联系我</button>

注意事项

  • 锚点ID需唯一且不含空格
  • 避免使用特殊字符作为ID
  • 跨页面锚点跳转需确保目标页面存在对应ID元素
  • 现代单页应用(SPA)通常使用路由替代传统锚点

浏览器兼容性

所有主流浏览器均支持标准锚链接，包括：

  • Chrome/Firefox/Safari
  • Edge/Opera
  • IE9及以上版本

HTML语义化标签概述

HTML语义化标签是指通过具有明确含义的标签描述内容结构，便于开发者、浏览器和辅助技术（如屏幕阅读器）理解页面内容。相比传统<div>和<span>，语义化标签能提升代码可读性、SEO效果及无障碍访问体验。

常用语义化标签分类

文档结构类

  • <header>：定义页眉或区块头部，通常包含标题、导航或logo。
  • <footer>：定义页脚或区块尾部，包含版权信息、联系方式等。
  • <main>：标识页面主内容区域，一个页面仅有一个。
  • <article>：表示独立可分发的内容（如博客文章、新闻）。
  • <section>：定义文档中的逻辑分区（如章节）。
  • <aside>：表示与主内容间接相关的部分（如侧边栏、广告）。

内容组织类

  • <nav>：定义导航链接集合（如菜单、目录）。
  • <figure> 与 <figcaption>：包裹图片/图表及其标题。
  • <time>：标注时间或日期，支持datetime属性机器可读。
  • <mark>：高亮显示文本（如搜索关键词）。
  • <blockquote>：引用长段落内容，常配合cite属性。

表单与表格类

  • <label>：关联表单控件，提升可访问性。
  • <fieldset> 与 <legend>：分组表单元素并添加标题。
  • <thead>/<tbody>/<tfoot>：结构化表格内容。

语义化标签的优势

  • SEO友好：搜索引擎更易抓取关键内容。
  • 无障碍支持：辅助工具能准确解析页面结构。
  • 代码可维护性：清晰标签减少嵌套复杂度。
  • 未来兼容性：遵循HTML5标准，适配新特性。

通过合理组合语义化标签，可构建结构清晰、易于维护的HTML文档。

        好了，今天的内容就分享到这，我们下期再见！

http://www.dtcms.com/a/394783.html

相关文章：

  • 数据结构|图论：从数据结构到工程实践的核心引擎
  • AI赋能个人效能提升：实战演练工作规划、项目复盘与学习发展
  • 7. Linux RAID 存储技术
  • iOS 上架 App 费用详解 苹果应用发布成本、App Store 上架收费标准、开发者账号与审核实战经验
  • kafka 2.12_3.9.1 版本修复 Apache Commons BeanUtils 访问控制错误漏洞(CVE-2025-48734)
  • 二分查找经典——力扣153.寻找旋转排序数组中的最小值
  • 离散数学之命题逻辑
  • 【Linux命令从入门到精通系列指南】ping 命令详解：网络连通性诊断的终极工具
  • 游戏UI告别“贴图”时代：用Adobe XD构建“活”的设计系统
  • NXP - 用MCUXpresso IDE导入lpcopen_2_10_lpcxpresso_nxp_lpcxpresso_1769.zip中的工程
  • ✅ Python+Django租房推荐系统 双协同过滤+Echarts可视化 租房系统 推荐算法 全栈开发（建议收藏）✅
  • Django入门-3.公共视图
  • 【 设计模式 | 结构型模式 代理模式 】
  • 小杰机器学习高级（five）——分类算法的评估标准
  • IS-IS 中同时收到 L1 和 L2 的 LSP 时，是否优选 L1
  • 【开源】基于STM32的智能车尾灯
  • 电子电气架构 --- 软件开发与产品系统集成流程（下）
  • Ubuntu系统目录架构是怎么样的
  • 自动驾驶仿真之“场景交互”技术研究
  • 《AI管家还是数字化身？—— 一种面向未来的个人智能架构构想》
  • AI提升工业生产制造安全，基于YOLOv9全系列【yolov9/t/s/m/c/e】参数模型开发构建工业生产制造加工场景下工业设备泄漏智能化检测识别预警系统
  • 深度学习（十一）：深度神经网络和前向传播
  • js立即执行函数的几种写法
  • RecyclerView里更新列表数是不想让header也刷新，怎么处理
  • C#/.NET/.NET Core技术前沿周刊 | 第 55 期（2025年9.15-9.21）
  • 减少实验烦恼，革新实验效率——PFA塑料容量瓶降低实验成本与风险
  • 留给石头科技的赛道不多了
  • 基于卷积神经网络的人车识别技术：从原理突破到场景重构的深度探索
  • 信用免押租赁服务：重构消费信任体系的全球增长引擎
  • Redis数据迁移实战：从自建到云托管（阿里云／腾讯云）的平滑过渡