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

1、HTML 概述

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

2、HTML 的基本结构

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

1<!DOCTYPE html>
2<html lang="en"><!--英文-->
3<head>
4    <meta charset="UTF-8">
5    <!--指定当前文档使用的字符编码为 UTF-8-->
6    <!--通用的 Unicode 编码格式，能支持多种语言字符（包括中文、日文、特殊符号等），确保网页内容正确显示而不会出现乱码-->
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <!--width=device-width 表示网页宽度与设备屏幕宽度一致。
9initial-scale=1.0 表示初始缩放比例为 100%，避免移动端浏览器自动缩放页面。-->
10    <title>网页标题</title>
11    <!--该标题会显示在浏览器的标签页、搜索引擎结果页面（SERP）以及用户收藏网页时的默认名称中。----->
12</head>
13<body>
14    <!-- 网页内容 -->
15</body>
16</html>
17

<!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>：列表项。

表格

1<table>
2    <tr>
3        <th>表头1</th>
4        <th>表头2</th>
5    </tr>
6    <tr>
7        <td>数据1</td>
8        <td>数据2</td>
9    </tr>
10</table>
11

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

表单

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

1<form action="/submit" method="post">
2    <label for="name">姓名：</label>
3    <input type="text" id="name" name="name">
4    <!--name与后端相关-->
5    <input type="submit" value="提交">
6</form>
7

<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 样式，优先级高于外部样式表。例如：

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

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

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

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

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 中需要明确结束标记的标签，通常由开始标签和结束标签组成，结束标签在标签名前添加斜杠 /。这类标签通常用于包裹内容或嵌套其他元素。

语法示例：

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

常见闭合标签：

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

HTML 非闭合标签

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

语法示例：

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

常见非闭合标签：

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

区别与注意事项

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

特殊情况

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

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

代码示例：

1<ul>
2  <li>项目1
3  <li>项目2
4</ul>
5

7、HTML 特殊字符的写法

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

常用特殊字符的实体引用

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

小于号 <: < 或 <
大于号 >: > 或 >
和号 &: & 或 &
双引号 ": " 或 "
单引号 ': ' 或 '
空格（不间断空格）:   或  
版权符号 ©: © 或 ©
注册商标 ®: ® 或 ®
欧元符号 €: € 或 €
乘号 ×: × 或 ×
除号 ÷: ÷ 或 ÷

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

实体引用（Named Entity）
使用易记的名称表示字符，例如 < 表示 <。适合常见的符号。
数字引用（Numeric Entity）
使用 Unicode 码点表示字符，格式为 &#十进制; 或 &#x十六进制;。例如 < 和 < 均表示 <。适合名称未知的字符。

示例代码

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

注意事项

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

8、HTML 注释的作用

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

基本语法

HTML 注释以  结束：

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

多行注释

注释可以跨越多行：

1<!-- 
2  这是一个多行注释。
3  可以包含多行文本。
4-->
5

条件注释（已废弃）

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

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

注释中的注意事项

注释不能嵌套，否则会导致解析错误：

1<!-- <!-- 嵌套注释会出错 --> -->

注释中避免使用 --，可能引发解析问题：

1<!-- 避免使用 -- 符号 -->

实用场景

调试代码时临时禁用部分内容：

1<!-- <div class="debug">调试内容</div> -->

标记代码区块用途：

1<!-- 导航栏开始 -->  
2<nav>...</nav>  
3<!-- 导航栏结束 -->

9、HTML 文档基本结构

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>文档标题</title>
7</head>
8<body>
9    <!-- 页面内容 -->
10</body>
11</html>
12

文档类型声明

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

根元素

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

头部部分

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

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

主体部分

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

常见内容元素

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

1<header>页眉</header>
2<nav>导航栏</nav>
3<main>
4    <article>独立内容</article>
5    <section>内容区块</section>
6</main>
7<aside>侧边栏</aside>
8<footer>页脚</footer>
9

注释

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

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

完整示例

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

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>我的网页</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <header>
11        <h1>网站标题</h1>
12        <nav>
13            <ul>
14                <li><a href="#">首页</a></li>
15                <li><a href="#">关于</a></li>
16            </ul>
17        </nav>
18    </header>
19    
20    <main>
21        <article>
22            <h2>文章标题</h2>
23            <p>文章内容...</p>
24        </article>
25    </main>
26    
27    <footer>
28        <p>版权信息 © 2023</p>
29    </footer>
30    
31    <script src="script.js"></script>
32</body>
33</html>
34

HTML 超链接跳转

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

基本语法

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

页面间跳转

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

锚点跳转（页面内跳转）

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

新窗口打开链接

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

邮件链接

1<a href="mailto:[email protected]">发送邮件</a>
2

电话链接

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

注意事项

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

HTML 锚链接基础

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

语法示例：

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

页面内跳转

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

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

跨页面跳转

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

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

高级用法

返回顶部按钮：

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

结合JavaScript动态锚点：

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

注意事项

锚点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文档。

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

《前端基础：从0到1实现简单网页效果（一）》是转载文章，点击查看原文。