HTML：修订间差异

来自运维百科
（创建页面，内容为“HTML（​​超文本标记语言​​，HyperText Markup Language）是用于创建和设计网页的标准标记语言。它通过一系列​​标签​​（tags）定义网页的结构和内容，浏览器会解析这些标签并渲染成用户看到的页面。 == ​​HTML 的核心特点​​ == === ​​标记语言​​ === * 由​​标签​​（如 <html>、<p>、<img>）组成，用尖括号 < > 包裹。 * 标签通常是成对出现的…”）
 
第40行： 第40行：
== ​​常用HTML标签示例​​ ==
== ​​常用HTML标签示例​​ ==
{| class="wikitable"
{| class="wikitable"
! 标签 !! 作用 !! 示例 !! 输出效果
! HTML标签 !! 描述 !! 示例 !! 输出效果
 
|-
| <code>&lt;h1&gt;到&lt;h6&gt;</code> || 标题（1级最大，6级最小） || <code>&lt;h1&gt;主标题&lt;/h1&gt;</code> || <h1 style="margin:0;font-size:120%">主标题</h1>
| <code>&lt;h1&gt;-&lt;h6&gt;</code> || 标题标签 || <code>&lt;h1&gt;一级标题&lt;/h1&gt;</code> || <h1 style="margin:0;font-size:1.2em">一级标题</h1>
 
|-
| <code>&lt;p&gt;</code> || 段落 || <code>&lt;p&gt;这是一个段落&lt;/p&gt;</code> || <p style="margin:0">这是一个段落</p>
| <code>&lt;p&gt;</code> || 段落 || <code>&lt;p&gt;这是一个段落&lt;/p&gt;</code> || <p style="margin:0">这是一个段落</p>
|-
| <code>&lt;a&gt;</code> || 超链接 || <code>&lt;a href="#"&gt;链接&lt;/a&gt;</code> || <a href="#">链接</a>
|-
| <code>&lt;img&gt;</code> || 图片 || <code>&lt;img src="//placeholder.com/50" width="50"&gt;</code> || <img src="//placeholder.com/50" width="50">
|-
| <code>&lt;ul&gt;&lt;li&gt;</code> || 无序列表 || <code>&lt;ul&gt;&lt;li&gt;项目&lt;/li&gt;&lt;/ul&gt;</code> || <ul style="margin-top:0"><li>项目</li></ul>
|-
| <code>&lt;ol&gt;&lt;li&gt;</code> || 有序列表 || <code>&lt;ol&gt;&lt;li&gt;第一项&lt;/li&gt;&lt;/ol&gt;</code> || <ol style="margin-top:0"><li>第一项</li></ol>
|-
| <code>&lt;div&gt;</code> || 块级容器 || <code>&lt;div&gt;容器&lt;/div&gt;</code> || <div>容器</div>
|-
| <code>&lt;span&gt;</code> || 行内容器 || <code>&lt;span&gt;文本&lt;/span&gt;</code> || <span>文本</span>
|-
| <code>&lt;strong&gt;</code> || 加粗文本 || <code>&lt;strong&gt;重要&lt;/strong&gt;</code> || <strong>重要</strong>
|-
| <code>&lt;em&gt;</code> || 强调文本 || <code>&lt;em&gt;强调&lt;/em&gt;</code> || <em>强调</em>
|-
| <code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;</code> || 表格 || <code>&lt;table border="1"&gt;&lt;tr&gt;&lt;td&gt;单元格&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</code> || <table border="1"><tr><td>单元格</td></tr></table>
|-
| <code>&lt;br&gt;</code> || 换行 || <code>第一行&lt;br&gt;第二行</code> || 第一行<br>第二行
|-
| <code>&lt;hr&gt;</code> || 水平线 || <code>&lt;hr&gt;</code> || <hr>
|}


| <code>&lt;a&gt;</code> || 超链接 || <code>&lt;a href="https://example.com"&gt;示例链接&lt;/a&gt;</code> || <a href="https://example.com">示例链接</a>
| <code>&lt;img&gt;</code> || 图片 || <code>&lt;img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/50px-Wikipedia-logo-v2-en.svg.png"&gt;</code> || <img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/50px-Wikipedia-logo-v2-en.svg.png">
| <code>&lt;ul&gt;</code> || 无序列表 || <code>&lt;ul&gt;<br>&lt;li&gt;项目1&lt;/li&gt;<br>&lt;li&gt;项目2&lt;/li&gt;<br>&lt;/ul&gt;</code> || <ul style="margin-top:0"><li>项目1</li><li>项目2</li></ul>
| <code>&lt;ol&gt;</code> || 有序列表 || <code>&lt;ol&gt;<br>&lt;li&gt;第一项&lt;/li&gt;<br>&lt;li&gt;第二项&lt;/li&gt;<br>&lt;/ol&gt;</code> || <ol style="margin-top:0"><li>第一项</li><li>第二项</li></ol>
| <code>&lt;div&gt;</code> || 块级容器 || <code>&lt;div style="background:#eee"&gt;容器内容&lt;/div&gt;</code> || <div style="background:#eee; padding:0 5px">容器内容</div>
| <code>&lt;span&gt;</code> || 行内容器 || <code>&lt;span style="color:red"&gt;红色文本&lt;/span&gt;</code> || <span style="color:red">红色文本</span>
| <code>&lt;strong&gt;</code> || 加粗文本 || <code>&lt;strong&gt;重要内容&lt;/strong&gt;</code> || <strong>重要内容</strong>
| <code>&lt;em&gt;</code> || 强调文本（斜体） || <code>&lt;em&gt;强调文本&lt;/em&gt;</code> || <em>强调文本</em>
|}
== ​​为什么学习HTML？​​ ==
== ​​为什么学习HTML？​​ ==
* 是​​前端开发​​的基础（与CSS/JavaScript并称前端三件套）。
* 是​​前端开发​​的基础（与CSS/JavaScript并称前端三件套）。
* 简单易学，适合编程入门。
* 简单易学，适合编程入门。
* 几乎所有网站都依赖HTML构建。
* 几乎所有网站都依赖HTML构建。

2025年6月21日 (六) 11:55的版本

HTML（​​超文本标记语言​​，HyperText Markup Language）是用于创建和设计网页的标准标记语言。它通过一系列​​标签​​（tags）定义网页的结构和内容，浏览器会解析这些标签并渲染成用户看到的页面。

​​HTML 的核心特点​​

​​标记语言​​

  • 由​​标签​​（如 <html>、

    、<img>）组成，用尖括号 < > 包裹。

  • 标签通常是成对出现的（如

    内容

    ），也有自闭合标签（如 <img>）。

​​描述结构​​

定义网页的标题、段落、列表、图片、链接等元素。

例如：

  • 这是一个标题

  • 这是一个段落。

​​超文本功能​​

通过 <a> 标签实现页面跳转或资源链接：

<a href="https://example.com">点击这里</a>

​​基本HTML文档结构​​

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>主标题</h1>
    <p>段落文字...</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。

<html>：根元素，包裹所有内容。

<head>：包含元信息（如标题、字符编码）。

<body>：网页可见内容。

​​常用HTML标签示例​​

HTML标签 描述 示例 输出效果
<h1>-<h6> 标题标签 <h1>一级标题</h1>

一级标题

<p> 段落 <p>这是一个段落</p>

这是一个段落

<a> 超链接 <a href="#">链接</a> <a href="#">链接</a>
<img> 图片 <img src="//placeholder.com/50" width="50"> <img src="//placeholder.com/50" width="50">
<ul><li> 无序列表 <ul><li>项目</li></ul>
  • 项目
<ol><li> 有序列表 <ol><li>第一项</li></ol>
  1. 第一项
<div> 块级容器 <div>容器</div>
容器
<span> 行内容器 <span>文本</span> 文本
<strong> 加粗文本 <strong>重要</strong> 重要
<em> 强调文本 <em>强调</em> 强调
<table><tr><td> 表格 <table border="1"><tr><td>单元格</td></tr></table>
单元格
<br> 换行 第一行<br>第二行 第一行
第二行
<hr> 水平线 <hr>

​​为什么学习HTML？​​

  • 是​​前端开发​​的基础（与CSS/JavaScript并称前端三件套）。
  • 简单易学，适合编程入门。
  • 几乎所有网站都依赖HTML构建。
取自“http://wiki.lanfutun.com/index.php?title=HTML&oldid=28811”