HTML基础

不被定义的~wolf

于 2023-11-25 10:42:48 发布

阅读量36

点赞数

分类专栏：前端设计文章标签： html 前端开发语言

本文链接：https://blog.csdn.net/lyh030105/article/details/134606643

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML基础

一、HTML历史

HTML（超文本标记语言，HyperText Markup Language）是一种用于创建和构建网页的标准标记语言。它由Tim Berners-Lee于1991年发明，最初旨在简化科学家们在网络上共享和交换信息的方式。HTML使用一系列成对出现的标签来定义元素，例如段落、标题和链接等。

HTML经历了多个版本的发展，以下是其主要历史沿革：

HTML 1.0：1991年，Tim Berners-Lee发布了第一个HTML规范，称为“HTML Tags”。这个规范定义了18个HTML标签，用于创建简单的网页。
HTML 2.0：1995年，RFC 1866发布了HTML 2.0规范。相较于HTML 1.0，HTML 2.0增加了许多新标签，例如表格、框架和表单等。这为网页的布局和交互提供了更多功能。
HTML 3.2：1996年，W3C（万维网联盟）发布了HTML 3.2规范。HTML 3.2在HTML 2.0的基础上进行了扩展，包括支持数学和化学公式、颜色值等方面。此外，HTML 3.2还引入了DOM（文档对象模型），使得JavaScript可以访问和操作HTML文档。
HTML 4.0：1997年，W3C发布了HTML 4.0规范。HTML 4.0在HTML 3.2的基础上进行了重大改进，包括引入样式表（CSS）、新的字体和媒体支持等。这有助于将表现层与内容层分离，使网页设计更加灵活。
HTML 4.01：1999年，W3C发布了HTML 4.01规范，作为HTML 4.0的微小修正版。
XHTML 1.0：2000年，W3C发布了XHTML 1.0规范。XHTML 1.0是一种基于XML的HTML版本，采用严格的XML语法，旨在解决HTML 4.0的宽松语法问题。
HTML 5：2008年，W3C发布了HTML 5的第一份工作草案。HTML 5是HTML语言的重大升级，引入了许多新的语义元素，如< heade r>、< footer >、< nav >等，以便更好地描述网页的结构。此外，HTML 5还支持音频、视频、画布（Canvas）、Web存储等技术，为网页应用开发提供了更多的可能性。
HTML 5.1：2016年，W3C发布了HTML 5.1规范。HTML 5.1在HTML 5的基础上进行了一些小的改进和优化，例如增加了对Web组件的支持。
HTML 5.2：2017年，W3C发布了HTML 5.2规范。HTML 5.2在HTML 5.1的基础上进一步优化，增加了一些新特性，如允许在HTML文件中嵌入SVG图形元素等。

目前，HTML 5.2是W3C推荐的HTML标准。然而，随着Web技术的不断发展，W3C已经开始研究HTML的继任者——HTML 6.0，以期在未来提供更多创新和功能。

二、HTML规范雏形

这是一个简单的HTML文档结构，包含DOCTYPE声明、html标签、head标签、title标签、body标签、一些基本标签（如h1-h6、p、ul、li、a和img）。在实际应用中，您可以根据需要添加更多的标签和属性。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的网页标题</title>
</head>
<body>
  <h1>这是一个主标题</h1>
  <h2>这是一个次级标题</h2>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
  <a href="***">这是一个链接</a>
  <img src="***/my-image.jpg" alt="描述图片内容的文本">
</body>
</html>

三、HTML与XHTML

HTML是Hypertext Markup Language的缩写，中文翻译为超文本标识语言。使用HTML标签编写的文档称为HTML文档，目前最新版本是HTML5.0，使用最广泛的是HTML4.1版本。

早期版本的HTML语言不适合构建标准化网页，因为它把结构和表现混淆在一起，例如，HTML把不同类型的元素，如描述性元素color、i等和结构性元素div、table等，以及元素属性放在一起，为以后的维护和管理埋下隐患。

XHTML是The Extensible HyperText Markup Language的缩写，中文翻译为可扩展标识语言，实际上它是HTML 语言的升级版本，目前遵循的是W3C于2000年1月推荐的XHTML 1.0(参考htp://www.wl.org/TR/xhtmll)。

XHTML和HTML在语法和标签使用方面差别不大。熟悉HTML语言，再稍加熟悉标准结构和规范，也就熟悉了XHTML语言。

XHTML具有如下特点：

用户可以扩展元素，从而扩展功能，但在目前1.0版本下，用户只能够使用固定的预定义元素，这些元素基本上与HTML4版本元素相同，但删除了部分属性描述性的元素。
能够与HTML很好地沟通，可以兼容当前不同的网页浏览器，实现XHTML页面的正确浏览。

四、HTML基础

1、HTML语言作用

使用HTM1语言标识文本。例如，定义标题文本、段落文本、列表文本、预定义文本等。
使用HTMI语言建立超链接，通过超链接可以访问互联网上的所有信息，当使用鼠标单击超链接时，会自动跳转到链接页面。
使用HTML语言创建列表，把信息有序地组织在一起，以方便浏览。
使用HTMI语言在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲Note 击力。
使用HTML语言可以制作表格，以方便显示大量数据。
使用HTML语言制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。

2、HTML文档基本结构

文档类型声明（Document Type Declaration）：

<!DOCTYPE html>

网页头部（Head）：包含网页标题、编码格式、CSS样式、JavaScript代码等。

<head>
  <title>我的网页标题</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
</head>

网页主体（Body）：包含网页的主要内容，如文本、图片、链接、表格等。

<body>
  <h1>欢迎来到我的网站</h1>
  <img src="my-image.jpg" alt="描述图片内容的文本">
  <a href="***">点击这里访问示例网站</a>
  <table>
    <!-- 表格内容 -->
  </table>
</body>

以上代码构成了一个基本的HTML文档结构。实际的网页可能需要更复杂的结构，但一般都包含这些基本部分。

3、HTML基本语法

HTML（超文本标记语言）的基本语法包括一系列标签，这些标签用来构造网页的内容和结构。以下是一些常用的HTML标签：

文本标签：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>这是段落。</p>
<strong>这是粗体文本。</strong>
<em>这是斜体文本。</em>

链接标签：

<a href="***">这是一个链接</a>
<a href="***" target="_blank">在新窗口打开链接</a>

图片标签：

<img src="image.jpg" alt="描述图片内容的文本">

列表标签：

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

<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

表格标签：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表单标签：

<form action="***/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <button type="submit">提交</button>
</form>

以上是一些基本的HTML标签。实际上，HTML标签的数量超过100个，您可以通过阅读教程或参考文档来学习更多的标签和属性。要建立一个网站，您还需要了解CSS和JavaScript，以便设置网页样式和添加交互功能。

4、HTML常用标签

文档标签

< hml >…< /html >:标识HTML文档的起始和终止。
< head >…< /head >：标识HTML文档的头部区域。
<body…< /body >：标识HTML文档的主体区域。

文本格式标签

< title >…< /title >：标识网页标题。
< hi >…< hi >:标识标题文本，其中i表示1、2、3、4、5、6，分别表示一级、二级、三级等标题。
< p >…< /p >:标识段落文本。
< spre >…< /spre >:标识预定义文本。
< blockquote >…< /blockquote >：标识引用文本。

字符格式标签

< b >…＜/b >:标识强调文本，以加粗效果显示。
< i >…< /i >：标识引用文本，以斜体效果显示。
< blink >…< /blink >:标识闪烁文本，以闪烁效果显示。IE浏览器不支持该标签。
< big >…< /big >：标识放大文本，以放大效果显示。
< small >…< /small >：标识缩小文本，以缩小效果显示。
< sup >…< /sup >：标识上标文本，以上标效果显示。
< sub >…< /sub >：标识下标文本，以下标效果显示。
< cite >…< /cite >：标识引用文本，以引用效果显示。

列表标签

< ul >…< /ul >：标识无序列表。
< ol >…< /ol >：标识有序列表。
< li >…< /li >：标识列表项目。

还可以自定义列表

< dl >…< /dl >：标识定义列表。
< dt >…< /dt >：标识词条。
< dd >…< /dd >：标识解释。

链接标签

< a >…< /a >:标识超链接

多媒体标签

< img />:嵌入图片
< audio />:嵌入音频
< video />:嵌入视频
< embed >…< /embed >:嵌入多媒体
< object >…< /object >:嵌入多媒体

表格标签

< table >…< /table >：定义表格结构。
< caption >…< /caption >:定义表格标题。
< th >…< /th >：定义表头。
< tr >…< /tr >：定义表格行。
< td >…< /td >：定义表格单元格。

表单标签

< form >…< /form >：定义表单结构。
< input/ >：定义文本域、按钮和复选框。
< textarea >…< /textarea >：定义多行文本框。
< select >…< /select >：定义下拉列表。
< option >…< /option >：定义下拉列表中的选择项目。

五、XHTML基础

1、XHTML文档基本结构

XHTML（Extensible Hypertext Markup Language）是一种基于HTML的标记语言，但更加严格和规范。XHTML文档的基本结构与HTML相似，但需要遵守一些额外的规则。以下是一个XHTML文档的基本结构：

文档类型声明（Document Type Declaration）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "***/TR/xhtml1/DTD/xhtml1-strict.dtd">

网页头部（Head）：包含网页标题、编码格式、CSS样式、JavaScript代码等。

<html xmlns="***/1999/xhtml">
<head>
  <title>我的网页标题</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="scripts.js"></script>
</head>

网页主体（Body）：包含网页的主要内容，如文本、图片、链接、表格等。

<body>
  <h1>欢迎来到我的网站</h1>
  <img src="my-image.jpg" alt="描述图片内容的文本" />
  <a href="***">点击这里访问示例网站</a>
  <table>
    <!-- 表格内容 -->
  </table>
</body>

关闭标签（Close Tag）：在XHTML中，所有标签都必须关闭。对于不需要关闭的单标签（如<img>、<br>等），应使用</br>这样的形式进行关闭。

2、XHTML基本语法

所有标签都必须关闭。
属性值必须用双引号括起来。
元素名称必须使用小写字母。
XHTML规范废除了name属性，而使用id属性作为统一的名称。在IE4.0及以下版本中应保留name属性，使用时可以同时使用id和name属性。

3、XHTML文档类型

XHTML（Extensible Hypertext Markup Language）是一种基于HTML的标记语言，但更加严格和规范。在XHTML文档中，需要使用文档类型声明（DOCTYPE Declaration）来定义文档类型。以下是一些常见的XHTML文档类型：

XHTML 1.0 Strict：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "***/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "***/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "***/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "***/TR/xhtml-basic/xhtml-basic11.dtd">

XHTML Mobile 1.0：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "***/TR/xhtml-mobile10.dtd">

XHTML Mobile 1.1：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "***/TR/xhtml-mobile11.dtd">

XHTML Mobile 1.2：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "***/TR/xhtml-mobile12.dtd">

在选择XHTML文档类型时，请根据您的需求和目标平台进行选择。XHTML Strict是最严格的类型，要求遵循所有的XHTML规则，但可能会限制某些功能和特性。XHTML Transitional和Frameset允许使用一些不规范的特性和元素，但对于创建兼容的网页非常有用。XHTML Basic和Mobile是针对移动设备和低功耗设备的类型。

4、DTD文档类型解析

DTD（Document Type Definition，文档类型定义）是一种用于定义XML（eXtensible Markup Language）或XHTML文档结构的文件。它定义了允许使用的元素、属性、实体和注释，以确保文档的语法和结构正确。在解析DTD文档时，会检查文档是否符合在其中定义的规则。

以下是一个简单的DTD文档示例：

<!ELEMENT html (head, body)>
<!ELEMENT head (title, meta, link, style, script*)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT meta (#PCDATA)>
<!ELEMENT link (#PCDATA)>
<!ELEMENT style (#PCDATA)>
<!ELEMENT script (#PCDATA)>
<!ELEMENT body (#PCDATA|h1|p)>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA)>

这个简单的DTD定义了一个HTML文档的结构，包括html、head、body、title、meta、link、style、script和h1元素。每个元素都有一个定义，指定了该元素可以包含的内容。

例如，<!ELEMENT html (head, body)> 定义了html元素必须包含head和body子元素。类似的，<!ELEMENT head (title, meta, link, style, script*)> 定义了head元素必须包含title、meta、link、style和任意数量的script子元素。

在解析DTD文档时，解析器会根据这些定义检查XML或XHTML文档，确保其元素、属性、实体和注释符合DTD文件中的定义。如果文档不符合DTD定义，解析器可能会报告错误，导致文档无法正确显示或处理。

5、名字空间

在XHTML（Extensible Hypertext Markup Language）中，名称空间（Namespace）用于区分不同XML词汇表（Vocabularies）中的元素和属性。名称空间有助于避免元素和属性命名冲突，从而使不同的XML应用能更容易地融合在一起。

在XHTML中，常用的名称空间包括：

XHTML名称空间（默认名称空间）：

<html xmlns="***/1999/xhtml">

XML名称空间：

<html xmlns:xml="***/10/xml">

XLink名称空间（用于创建超链接）：

<html xmlns:xlink="***/1999/xlink">

XML Schema名称空间（用于定义XMLSchema）：

<html xmlns:xsi="***/2001/XMLSchema-instance">

SVG名称空间（用于定义SVG图形）：

<html xmlns:svg="***/2000/svg">

在使用名称空间时，需要在元素和属性前添加前缀，以表示它们属于哪个名称空间。例如：

<html xmlns:svg="***/2000/svg">
  <body>
    <svg:circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </body>
</html>

在这个示例中，svg前缀表示circle元素和stroke、stroke-width、fill属性属于SVG名称空间。

通过使用名称空间，可以在同一个文档中组合来自不同词汇表的元素和属性，同时避免命名冲突。这有助于创建更灵活、可扩展的XHTML文档。

六、HTML元信息

HTML元信息（Metadata）是指包含在与HTML文档相关联的元数据中，用于描述文档的特性和属性。元信息不会影响文档的显示和布局，但对搜索引擎、浏览器和其他应用程序很有用。HTML元信息通常包含在<head>部分的<meta>元素内。

以下是一些常见的HTML元信息：

<meta charset="utf-8">：声明文档的字符编码。
<meta name="description" content="这是一段文档描述">：提供文档的描述信息，可用于搜索引擎结果摘要。
<meta name="keywords" content="关键字1, 关键字2, 关键字3">：提供与文档相关的关键字列表，用于搜索引擎优化。
<meta name="author" content="作者名字">：标识文档的作者。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：定义视口（Viewport）的宽度和初始缩放比例，用于移动设备。
<meta name="robots" content="noindex, nofollow">：用于搜索引擎优化，指示搜索引擎是否应索引此页面或跟随其链接。
<meta http-equiv="refresh" content="5;url=***">：设置页面重定向，使浏览器在指定时间后自动跳转到指定URL。