YJlio
YJlio

关于 HTML 的一切：初学者指南

HTML 代表超文本标记语言，是用于创建网页和 Web 应用程序的标准语言。

本指南将全面介绍 HTML，涵盖从基本语法和语义到更高级功能的所有内容。

我的目标是用简单的术语解释 HTML，以便即使没有编码经验的人也能学习如何使用 HTML 构建网页。

如果您想开始成为一名程序员，请查看文章《   2023 年如何学习编程》 
什么是 HTML？

HTML 是一种标记语言，这意味着它使用标签来标记内容并定义网页的结构。这是一个非常基本的 HTML 文档：


  
    页面标题
  
  
    
最大的标题文本

    
第一段文本.

标签提供语义和结构。例如， 标签告诉浏览器这是一个 HTML 文档。 包含页面标题等元数据。 包含可见内容。

标记定义顶级标题，而

定义文本段落。

当浏览器加载 HTML 页面时，它会读取标记并将其呈现为格式化的网页。标签告诉浏览器如何在屏幕上显示每个元素。

三个月就能成为程序员吗？ 在这篇激动人心的文章中找到方法

HTML 文档结构

所有 HTML 文档都有一个基本结构，其中包括以下元素：

  • - 文档类型声明。这不是 HTML 标签，但它告诉浏览器这是一个 HTML5 文档。
  • - 包裹整个文档的根元素。
  • - 包含有关页面的元数据，例如标题、样式和脚本。这对用户来说是不可见的。
  • - 指定文档标题，显示在浏览器选项卡中。</li> <li><body> - 包含所有可见内容，如文本、图像、链接等。</li> <li><h1>...<h6> - 标题以 <h1> 开头（表示最重要），到 <h6> 表示最不重要。</li> <li><p> - 文本段落。</li> </ul> <p style="margin-left:0;"><span style="color:#171717;"><span style="background-color:#ffffff;">这是一个包含所有基本元素的示例：</span></span></p> <div style="margin-left:0;"> <pre class="has" style="margin-left:0;"><code class="language-highlight language-html"> <!DOCTYPE html> <html> <head> <title>页面标题

    我的第一个标题

    My我的第一段

这个基本结构为浏览器提供了正确呈现页面所需的信息。

HTML 元素和标签

HTML 文档由嵌套的 HTML 元素组成。元素由围绕内容的标签定义。元素的一般语法是：

一些常见的 HTML 元素包括：

例如：

大多数元素都包含开始和结束标签，中间有内容。但有些元素（例如 ）只需一个标签即可自动关闭。

HTML 属性

HTML 元素可以具有提供有关元素的附加信息的属性：

href 属性提供锚标记的链接目标。

常见属性包括：

  • id - 元素的唯一标识符
  • class - 标识元素的类名
  • src - 指定媒体元素的源，例如
  • href - 超链接的目标
  • alt - 图像的替代文本
  • style - 将 CSS 样式应用于元素

属性在元素名称后面的开始标记中定义。一般语法是：

HTML 标题

HTML 中的标题是用

到

标签定义的。

是最高或最重要的标题，而

是最低级别：

标题  1


标题  2
 

标题  3


标题 4


标题5


标题6

标题有助于创建文档结构并概述页面上的主题。搜索引擎还使用它们来索引和确定内容。

HTML 段落

HTML

标签定义一段文本：

这是一段文字。段落包含相关句子组合在一起。

浏览器会自动在段落前后添加一些边距以区分它们。

您可以使用
标签在段落中添加换行符：

This paragraph
contains a line break.

HTML 链接

链接允许用户导航到其他页面，并使用 HTML 锚标记 进行定义：

 to Example

href 属性指定链接的目标。这可以是绝对或相对 URL。

您还可以使用 id 属性链接到同一页面上的元素：

返回顶部 

页面底部

target 属性可以指定链接是否在新的浏览器选项卡中打开：

Open in New Tab

HTML 图像

标签将图像文件嵌入到网页上：

My Image

  • src 属性指定图像的路径。这可以是相对或绝对 URL。
  • alt 属性提供描述图像的替代文本以方便访问。

图像还可以具有宽度、高度和其他属性：

My Image

HTML 表格

表格允许您将文本、图像、链接和其他元素等数据排列到行和列中。

表是用

标签定义的。行用 定义，表标题用 、 和 来进一步构建表格。

HTML 列表

HTML 支持有序列表、无序列表和定义列表。

有序列表使用数字：

    
  
  1. 第一项
    2. 
  
  2. 第二项
    3.

无序列表使用项目符号：

    
  
  • 列表项
    • 
  
  • 列表项
    •

定义列表是术语和定义的组：


  
HTML

  
超文本标记语言

列表有助于组织内容并提高可读性。

HTML Div 和 Span

和 标签提供了对内容进行分组以设置样式的方法：

  • 定义文档中的分区或部分。它是一个从新行开始的块级元素。
  • 是文本的内联容器。它允许对线条的一部分进行样式设置。

例如：




You can 突出显示文本 与span标签.
HTML 表单

表单允许用户输入文本等数据、选择选项、操作控件以及向服务器提交信息：

该表单有两个文本输入、标签和一个提交按钮。提交后，表单数据将使用 POST 方法发送到 /signup URL。

其他一些表单控件包括：

定义，表单元格用 定义。




  

    Name
    Age
  

  

    John
    30
  

  

    Jane
    25

您可以使用 colspan 属性跨越列，并使用 rowspan 跨越行。还有其他元素，如