什么是 HTML - 完整指南

你需要了解的一切有关 HTML 的知识–它是什么、有什么用、如何使用 HTML 创建网页。

什么是html

Html（超文本标记语言的简称）是一种用于创建网页和信息的语言。它是网站的重要组成部分。

虽然如果没有额外的编程，就无法使用 HTML 创建表单处理等动态功能，但它为整个万维网的构建奠定了基础。

HTML 的版本：它从较简单的形式（HTML 2.0）发展到扩展版本（HTML 4.01、XHTML），获得了新的功能。
HTML5：最新版本支持多媒体，无需额外插件，是现代网络应用的要素。
相关技术：HTML 通常与 CSS（用于可视化样式）和 JavaScript（用于交互性）相关，两者结合可创建复杂的网络解决方案。

html代码的工作原理

html 代码描述了页面的结构以及页面上的元素。它侧重于诸如段落、标题、链接、列表、表格等信息。 Internet 上的每个页面都包含这样的代码。 例如，标题的代码是‹h1›。

这种语言区分信息的显示方式，而不是内容本身。 CSS 编程语言用于定义页面样式，例如颜色、使用的字体等。

在 WordPress 中，您可以在 WordPress 文本编辑器中创建内容时使用这些代码。在文本编辑器中，您可以使用它们来编写用于创建网页或单篇文章的所有工具。

入门需要什么？

对于您的项目，您需要一个常用的网络浏览器（如Mozilla Firefox、Opera或Internet Explorer）和一个优秀的文本编辑器（如Sublime Text或Notepad++）。

如何创建 HTML 文件？

要开始创建网站，您只需要一个基本的文本编辑器和一个浏览器。步骤如下：

创建一个新的文本文档：在文本编辑器中键入本教程下面的 HTML 结构。
以扩展名.html 保存文件：以反映文件内容的特定名称保存文件，例如onas.html 。将主页命名为index.html 。
本地浏览：在网络浏览器中打开文件，查看其内容。要查看页面源代码，请使用快捷键Ctrl+U 。
在线发布：在线共享文件需要虚拟主机和域名。 index.html 文件将自动加载为您域名的主页。

HTML 文档结构

每个 HTML 文档都以<!DOCTYPE html> 声明开始，该声明将文档定义为 HTML5 文档。HTML 页面的根元素是<html> ，其中包含两个主要部分：<head> 和<body> 。

<head> 元素包含文档标题和不显示的元数据，如 CSS 引用和字符集声明。<body> 包含作为网页一部分显示的所有内容，如标题、段落、图像等。

<!DOCTYPE html>
<html>
     <head>
         <title>Názov vašej stránky</title>
     </head>
     <body>
         <!-- Obsah stránky je tu -->
     </body>
</html>

基本分数

HTML 标签定义了页面上的元素，基本标签包括

标题：<h1> 至<h6> 标签在页面上创建标题和副标题。
段落：<p> 标记表示段落。
链接：<a href="URL"> 创建超链接。
列表：<ul> 用于无序列表，<ol> 用于有序列表，<li> 用于列表项。
图片：<img src="obrázok.jpg" alt="popis"> 嵌入图片。
表格：<table> ，表格行<tr> ，标题<th> ，单元格<td> 。
表单：<form>,<input>,<label> 及其他与表单相关的元素。

属性

属性提供 HTML 元素的附加信息。它们出现在开头标签中，常见属性包括

href：指定链接的 URL。
src：指定图像的来源。
alt提供图像的替代文本。
class说明：将类应用于使用 CSS 进行样式设置的元素。
id为元素指定一个唯一标识符。
style：直接在标签中包含 CSS 样式。
title说明：当您将鼠标悬停在物品上时，会以说明的形式提供咨询信息。

<p class="text-info">Toto je odsek s atribútom class.</p>
<a href="https://example.com" title="Príklad webových stránok">Navštíviť príklad</a>

了解并有效使用这些基本元素和属性，就能创建一个结构合理、易于访问的网站。

文本格式

在本节中，你将学习如何使用 HTML 标记在网页上创建有效而多样的文本显示。从突出重点到用标题组织内容，了解文本格式是设计可读性强、引人入胜的网站的关键。

文本元素

段落和标题
使用<p> 标签定义段落，创建用边距分隔的文本块。标题对于组织内容至关重要；在<h6> 标签上使用<h1> 标签表示标题的级别，<h1> 表示最重要或主要的标题，<h6> 表示最不重要的标题。

文本样式和语义
要突出显示文本，可使用<strong> 来突出显示，并使用黑体字和<em> 来显示斜体文本，以表示不同的语气或情绪。品牌如 <mark>, <small>, <del>, <ins>, <sub> a <sup> 可以让您更具体地突出显示、标记编辑内容或显示下标和上标文本。

文本样式

CSS 样式和嵌入式：
您使用 CSS 控制了文本元素的设计。对于嵌套样式，可直接在元素中添加style 属性。例如：<p style="color: blue;">Tento text je modrý.</p> 。

字体和颜色
使用 CSS，使用font-family 属性自定义字体，并使用color 更改字体颜色。要进一步自定义外观，可使用background 更改文本的背景颜色，或使用text-align 调整文本的对齐方式。

使用外部 CSS
为了更简洁、更易维护，建议使用外部 CSS。在单独的.css 文件中定义样式，并在 HTML 的<head> 元素中使用<link> 标签进行链接：

<head>
   <link rel="stylesheet" href="styles.css">
</head>

例如，为可重复使用的样式创建特定的类：

/* styles.css */

.important-text {
   font-weight: bold;
   color: red;
}

.center-align {
   text-align: center;
}

然后将这些类应用于 HTML 元素，以达到所需的效果：

<p class="important-text center-align">Tento text je tučný a zarovnaný na stred.</p>

掌握了 HTML 和 CSS 的这些基本要素，你就掌握了以吸引人和有条理的方式呈现内容所需的工具，从而改善网站的用户体验。

内容安排

使用 HTML 适当组织网页内容对用户体验和无障碍访问至关重要。以合乎逻辑的方式构建信息，可以让用户轻松浏览和理解您的内容。

列表

HTML 列表有多种选择，每种选择都有不同的用途。

无序列表 (ul)用于不需要特定订单的物品。列表中的每个项目都用列表项目标记 (li):

<ul>
  <li>Položka zoznamu 1</li>
  <li>Položka zoznamu 2</li>
  <li>Položka zoznamu 3</li>
</ul>

有序列表 (ol)有序列表（ol）：当项目必须按顺序排列时，如教程中的步骤，请选择此类列表。

<ol>
  <li>Prvý krok</li>
  <li>Druhý krok</li>
  <li>Tretí krok</li>
</ol>

说明列表 (dl)说明：用它们列出表达式及其说明。将定义表达式 (dt）的定义说明 (dd).

<dl>
  <dt>HTML</dt>
  <dd>Jazyk hypertextových značiek</dd>
  <dt>CSS</dt>
  <dd>Kaskádové štýly</dd>
</dl>

表格

表格将数据组织成行和列，使用table 元素创建。制作表格如下

表格行 (tr)：定义表格中的一行。
表头（th）：表示表格中的表头单元格。
表格数据 (td)：表示表格中包含数据的单元格。
表格标题（caption）：提供表格的标题或摘要。
表格部分：使用thead （表头组）、tbody （表体组）和tfoot （表脚组）来组织表格。

<table>
   <caption>Vzorová tabuľka</caption>
   <thead>
     <tr>
       <th>Hlavička 1</th>
       <th>Hlavička 2</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Údaje 1</td>
       <td>Údaje 2</td>
     </tr>
     <tr>
       <td>Údaje 3</td>
       <td>Údaje 4</td>
     </tr>
   </tbody>
</table>

科和处

在分割内容时，HTML 提供了许多旨在创建清晰语义结构的元素。最高级别 <header>, <nav>, <section>, <article>, <aside> a <footer> 定义网页大纲。每一种都有特定的用途：

Jandi soon,CC BY-SA 3.0, via Wikimedia Commons

<header> 用于介绍内容或导航辅助。
<nav> 通常用于导航链接。
<section> 是内容的专题分组，每个部分最好有一个标题。
<article> 构成一个可独立分发或重复使用的自足组合体。
<aside> 包含与主内容间接相关的内容，如边栏。
<footer> 为某个部分或整个页面提供最终信息。

除这些元素外，<div> 元素还可用于对内容进行逻辑划分，或使用 CSS 或 ID 类进行样式设计。在使用 CSS Flexbox 或网格系统控制布局时，它们变得尤为有用，因为它们可以通过各种显示属性进行自定义，从而有效地对齐和分配内容。

在各节中，使用标题（<h1> 至<h6> ）组织文本内容，标明重要性，并按照适当的层次结构组织结构，以便于导航和理解。对于项目列表，HTML 提供了有序列表 (<ol>) 和无序列表 (<ul>) 以及描述性列表 ( <dl> ，表达式为<dt> ，定义为<dd> )。使用这些列表可以使点或数据的显示更清晰、更有条理。

如果您的内容包含表格数据，使用<table> 元素是关键。有了它，你可以将数据结构化为行和列，使其更易于阅读和理解。不要忘记使用 <th> 标题、 <tr> 的表格行、 <td> 用于表格数据和可选元素，如 <caption>, <thead>, <tbody> a <tfoot> 以进一步描述和组织表格内容。

通过采用这种层次结构，并将其与适当的属性和风格搭配起来，就能创建一个条理清晰的网站，从而增强用户体验，促进信息的有效交流。

链接和导航

高效的网络导航可让用户快速找到所需的信息。这对于在网站上实现无缝用户体验至关重要。在本节中，你将学习创建超链接、使用图像地图以及使用不同的元素和属性在单个页面内导航。

创建超链接

超链接（或简称链接）是网络导航的支柱，可让您连接不同的网站和资源。要创建超链接，请使用带有href 属性的<a> 元素，该属性定义了目标 URL。下面介绍如何创建指向其他页面的链接：

<a href="https://www.example.com">Navštívte example.com</a>

您可以使用mailto: 链接到电子邮件地址或电话号码，也可以在href 属性中使用tel: 链接到电子邮件地址或电话号码：

<a href="mailto:someone@example.com">Odoslať e-mail</a>
<a href="tel:+1234567890">Zavolajte nám</a>

target 属性可以控制新文档的打开方式。例如，使用target="_blank" 将在新标签页中打开链接：

<a href="https://www.example.com" target="_blank">Example.com na novej karte</a>

插图地图

图像地图允许您将图像的不同部分链接到不同的目的地。要创建图像地图，请使用带有usemap 属性的<img> 标签，并将其与包含<area> 元素的<map> 元素配对，以显示每个可点击区域。

以下是图像映射的基本代码结构：

<img src="image.png" usemap="#imagemap">
<názov mapy="imagemap">
   <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Strana 1">
   <tvar oblasti="kruh" coords="345,45,60" href="strana2.html" alt="strana dva">
</map>

在本例中，coords （坐标）定义了图形的大小和位置，shape 可以是rect 、circle 或poly ，表示矩形、圆形或多边形。

网站导航

浏览网站需要链接到特定的锚点或 ID。要创建这些导航点，请在要用作锚点的元素上使用id 属性。然后使用href 属性链接到它们，并在网格 (#) 后面加上锚点 ID。

锚点和指向锚点的链接示例：

<a href="#section2">Prejsť na sekciu 2</a>
...
<h2 id="section2">Sekcia 2</h2>

点击链接后，浏览器会跳转到页面中相应的部分id 。这种方法用于创建内容或浏览长篇文章。

媒体

HTML 中的媒体可让您嵌入不同类型的内容，包括图片、音频和视频，从而丰富您的网站。这些元素可以通过提供视觉辅助和互动内容来增强用户体验。

插入图像

当您需要在 HTML 文档中包含图片时，请使用<img> 元素。为此，请将src 属性设置为要显示的图片的 URL。始终包含alt 属性，以便为屏幕阅读器或无法显示图像时提供替代文本。例如：

<img src="cesta-k-vasmu-obrázku.jpg" alt="Popisný text o obrázku">

要对图片及其描述进行语义分组，可将它们封装在<figure> 元素中，并使用<figcaption> 来描述上下文：

<figure>
     <img src="cesta-k-vasmu-obrázku.jpg" alt="Popis">
     <figcaption>Váš popis nájdete tu.</figcaption>
</figure>

声音和视频

要在网站上添加音频文件，请使用<audio> 元素。它有controls 、autoplay 和loop 等属性来控制播放。

<audio controls>
   <source src="váš-audio-súbor.mp3" type="audio/mpeg">
   Váš prehliadač nepodporuje audio tag.
</audio>

如果需要加入字幕或标题，请添加<track> 元素。

嵌入视频与音频类似。 <video> 元素包含相同的可用性属性。

<video ovláda slučku automatického prehrávania>
   <source src="váš-video-súbor.mp4" type="video/mp4">
   Váš prehliadač nepodporuje značku videa.
</video>

对象和 iFrame

要嵌入不同类型的多媒体，如 Flash、PDF 文件或其他 HTML 文档，请使用<object> 元素。如果对象包含参数，则包括<param> 元素：

<object data="your-file.swf" width="400" height="300">
   <param name="paramName" value="paramValue">
   Váš prehliadač nepodporuje prvok object.
</object>

<iframe> 元素允许您在网站上嵌入外部资源，如视频、地图或网页：

<iframe src="http://www.example.com" width="600" height="400">
   Váš prehliadač nepodporuje prvky iframe.
</iframe>

您可以使用width 和height 等属性或 CSS 来指定<iframe> 元素的大小。

表格和用户输入

在 HTML 中，表单对于捕捉和处理用户输入至关重要，了解表单的结构和功能是创建交互式网络应用程序的关键。

表格基础知识

创建 HTML 表单时，输入元素会被包裹在<form> 标签中。使用不同的表单元素可以收集用户的不同信息。表格通常包括

<input>：数据录入的基本构件。
<label>输入：为每个输入提供描述性标签，提高了可访问性。
<textarea>多行文本输入：允许多行文本输入。
<button>：发送或刷新表单，或执行自定义 JavaScript。
<select>：创建一个下拉列表，将<option> 元素作为选项。
<fieldset>：汇总相关条目，<legend> 提供标题。

对于每个表单元素，都有特定的 HTML 属性来定义其行为和外观。例如，<input> 元素中的type 属性指定要收集的数据类型，如text 、email 或password 。

输入类型

输入类型决定了表单中数据字段的类型。以下是常用的<input> 类型及其用途：

text：纯文本输入。
password：出于保护隐私的考虑，不公开您的信息。
submit：向服务器发送表单数据。
reset：将表格重置为初始状态。
checkbox可选择多个选项。
radio：允许您从一组选项中选择一个。
file允许上传文件。
hidden数据存储：存储用户看不到的数据，但会随表单提交一起发送。
image：它的工作原理与submit 按钮类似，但显示为图像。
dáte, month, range, search, url, email, tel, number, color输入类型：便于输入特定的标准化格式或提供控制功能（如用于选择范围的滑块）的输入类型。

控制这些元素的其他属性包括min,max,maxlength,pattern 和 required ，它们为用户输入提供了额外的限制和规则。

客户端身份验证

HTML5 引入了执行客户端身份验证的功能，可向用户提供即时反馈并减少服务器负载。为此使用了以下属性：

required：发送前必须填写该字段。
pattern说明：输入必须符合特定的正则表达式模式。
min 和max ：设置数值输入的最小值和最大值。
maxlength限制文本输入的字符数。

为了增强用户体验，HTML5 还引入了placeholder 、autofocus 、readonly 和disabled 等属性，这些属性可控制交互性，向用户提供提示或存储预填充信息，而不允许编辑。使用这些身份验证和属性，可以引导用户提供正确的数据，并在表单数据到达服务器之前对其进行编辑。

高级功能

当你掌握了 HTML 的基础知识后，你会遇到许多高级技术和功能，它们能极大地改进你的网络项目。

HTML API

HTML5 随附的多个API 拓展了浏览器的应用范围。地理位置API 可让您的网络应用程序访问用户的地理位置，从而改进基于位置的服务。

拖放和文件 API功能使文件处理更加直观，从而增强了用户界面。通过利用本地存储和会话存储，您可以永久存储数据或在页面会话期间存储数据，这非常适合需要在没有服务器端控制的情况下保持状态的网络应用程序。

Web Worker允许您在后台运行脚本，而不会影响页面性能。

应用程序接口实例实践
- 使用本地存储来存储用户首选项。
- 实施 Web Worker，在不中断用户体验的情况下处理数据。

HTML 和 Javascript

JavaScript 是编程的支柱，它能让 HTML 代码栩栩如生。通过操作文档对象模型（DOM），JavaScript 可以创建和修改动态内容。

onclick 、oninput 、onload 和onsubmit 等事件允许您使用事件处理程序对即时用户交互做出响应。它们能使用户界面更具互动性，并对用户的操作做出快速反应。

事件处理程序用于
- 根据用户操作触发动画或通知。
- 当用户使用oninput 键入时，对表单输入进行验证。

HTML 和 CSS

CSS 塑造了网页上 HTML 的外观和感觉，通过样式和设计元素增强了网页的表现力。介绍使用媒体查询来适应不同屏幕尺寸和分辨率的响应式网页设计。

CSS柔性框和网格提供了现代布局选项，可响应任何设备的需求并具有灵活性。 CSS动画等增强功能可为用户带来引人入胜的互动体验。使用链接标签整合外部样式和嵌入式style 属性，对元素进行快速而具体的更改。

采用响应式设计：
- 媒体查询，以适应不同的屏幕尺寸。
- Flexbox 和网格系统可实现流畅的动态布局。

通过理解和应用这些高级主题，你的网络开发技能可以从创建基本网站发展到创建复杂、交互式和响应式网络应用程序。

HTML 最佳实践

在创建 HTML 网页时，遵循最佳实践是优化搜索引擎优化、确保可访问性和提高网站性能的关键。对这些细节的关注会影响网站的用户体验和搜索引擎排名。

SEO优化

正确的搜索引擎优化始于语义 HTML。使用标题标签（<h1> 至<h6> ）对内容进行分层结构化，并使用<title> 和<meta> 等元数据元素来描述页面内容。确保链接具有描述性并充分利用rel 属性，同时URL必须清晰且结构合理。执行以下内容：

页面名称：始终为每个页面定义一个独特的描述性<title> 。
元数据： <meta> 标签中的关键词和描述应反映您的内容。
页眉标签：每页只使用一个<h1> ，然后根据结构需要使用<h2>–<h6> 。
备选文本：为图片添加描述性的备选文本，以便搜索引擎理解图片。

无障碍指南

遵循《可访问性指南》，让每个人都能访问您的网站。必要时使用 ARIA 角色和属性 (Accessible Rich Internet Applications) 并确保使用键盘进行无差错导航。以下是需要重点关注的关键要素：

替代文本：为图片提供alt 文本。
语言：使用lang 属性指定页面的语言。
ARIA：包含属性role 和aria-* ，以提高可访问性。
键盘导航：确保所有交互元素都可以通过键盘访问，使用tabindex 。

通过键盘访问导航链接的示例：

<a href="https://example.com" tabindex="0">Domov</a>

提高性能的技巧

网站速度是用户体验不可忽视的一个方面。提高性能：

最小化：通过最小化减少 HTML、CSS 和 JavaScript 文件的大小。
压缩：在服务器上启用 gzip 或 Brotli压缩。
懒加载：对图片和 iframe 元素实施懒加载。
异步/延迟：使用脚本标记中的async 或defer 属性来控制 JavaScript 的加载过程。

用于以后需要的脚本：

<script src="script.js" defer></script>

遵循这些 HTML 结构的最佳实践将极大地影响网站的可用性、排名和整体性能。

工具和资源

当你开始学习 HTML 时，你将拥有正确的工具和资源来简化你的开发过程。其中包括用于编写代码的 HTML 编辑器、用于测试和调试的基于浏览器的开发工具，以及用于启动项目的即用型 HTML 模板。

HTML 编辑器

选择具有语法高亮、自动完成和错误检测等功能的 HTML 编辑器，可以大大提高编码效率。

Sublime Text和Atom等文本编辑器提供了一个轻量级但功能强大的编码环境。另一方面，Visual Studio Code和WebStorm 等集成开发环境（IDE）提供了更丰富的功能和集成调试工具。和源代码管理。

Sulime Text：以速度和效率著称的多功能文本编辑器。
Atom：一款开放源码文本编辑器，拥有丰富的扩展库。
Visual Studio Code：一款流行的免费集成开发环境，支持 HTML、CSS、JavaScript 等。
WebStorm专为网页开发定制的专业集成开发环境。

浏览器开发工具

浏览器的开发工具对于实时审查和调整 HTML 代码至关重要。使用 “检查元素“深入 DOM 树，使用 “控制台“测试 JavaScript，使用 “信息网格“监控资源加载，使用 “性能数据 “优化页面速度。就调整而言，这些工具非常宝贵。

Google Chrome 浏览器：提供广泛网络开发功能的开发者工具。
Firefox：具有网格布局检查器等独特功能的开发人员工具。
Safari：为使用苹果设备的网络开发人员提供的开发工具。

HTML 模板

使用HTML 模板可节省开发时间，HTML 模板是一种标准，通常包含 CSS 和 JavaScript 样式，可创建特定的布局或主题。这些模板既有简单的初始布局，也有适合大量定制的复杂框架和主题。

Bootstrap：提供移动友好和可定制模板的框架。
W3.CSS：内置响应式模板的现代 CSS 框架。
HTML5 UP：免费的响应式 HTML5 和 CSS3 模板集。

通过利用这些工具和资源，您将为创建结构合理的网站做好更充分的准备，并获得更顺畅的开发流程。

学习与社区

开始学习 HTML 将为你打开网络开发的大门，在这里你可以培养自己的技能，获得庞大社区的支持，并利用丰富的资源。以下是通过实践、文献和结构化课程提高学习能力的具体方法。

HTML 练习

定期练习对掌握 HTML 至关重要。参与互动练习和试用真实案例，以加强您的理解。 W3Schools等平台提供了一个 “自己试试 “的编辑器，让您可以编写 HTML 代码并立即看到效果。

此外，还可以考虑参与GitHub项目或在Stack Overflow 上回答问题，以进一步磨练自己的技能。

在线资源和文件

文档是学习 HTML 的基础。 MDN Web Docs 等信誉良好的资源提供了全面的指南和参考资料。它们可确保您获得有关元素、属性和最佳实践的最新准确信息。 MDN 教程和示例是初学者和经验丰富的开发人员的重要参考点。

HTML 课程

花时间学习HTML 课程可以提高学习效率。许多课程提供从入门辅导到更高级主题的结构化学习。完成课程后，有些课程可能会提供认证证书，对您的职业发展大有裨益。

Codecademy , Udemy 和其他在线平台提供的课程，以结构化的方式提高你的网络开发技能。此外，在这些平台上创建一个账户，您就可以跟踪自己的学习进度，并访问各种评估来测试自己的知识。