超文本标记语言(Hypertext Markup Language)
蒂姆·伯纳斯-李 (Tim Berners-Lee)
.html
HTML 是用于在互联网上开发和构建网页的最广泛使用的标记语言。它定义了网页的构建块。
不,HTML 不是一种编程语言。
通常,编程语言具有某种功能性目的,而 HTML 不包含任何编程逻辑,它不像编程语言那样执行任何操作。它是一种用于在互联网上开发和构建网页的标记语言。
HTML 5.2
HTML5 最初于 2008 年 1 月 22 日公开发布。
经过重大更新;HTML5 于 2014 年 10 月 28 日作为 W3C 推荐标准发布,标志着规范流程的完成。然而,HTML5.1 和 HTML5.2 分别于 2016 年 11 月 1 日和 2017 年 12 月 14 日作为 W3C 推荐标准发布。
HTML <!DOCTYPE> 标签是一条指令,用于向浏览器提供有关文档中使用的 HTML 版本或类型的信息。它被称为文档类型声明(DTD)。
<!DOCTYPE> 声明可以在 Html5 中定义为:
<!DOCTYPE html>
<!-- DOCTYPE html-->
<!-- DOCTYPE html--><!-- DOCTYPE html-->
每个 HTML 文档都需要一个文档类型声明,以确保页面按预期显示。因此,根据 HTML 规范或标准,我们在每个 HTML 页面顶部所有其他元素之前编写 Doctype 声明,这告诉浏览器以标准模型打开此网页,并使网页与最新版本的 HTML 兼容,而无需指定特定版本。
如果我们不在 HTML 页面中提及 <!DOCTYPE>,浏览器将无法获取该特定网页中使用的 HTML 版本信息,并且浏览器无法获取 HTML 的最新功能,并停留在旧版本中。
不,有些标签,如 <img>、<br> 等,没有配对。
任何写在尖括号“<”和“>”之间的内容都称为标签,通常用于标记 HTML 元素的开始。标签的示例是:<h1>。
任何写在 HTML 标签内的内容都称为 HTML 元素。它指定了一般内容。
标签和属性是 HTML 的基础。HTML 标签以 < 开头,以 > 结尾,用于标记 HTML 元素的开始。
HTML 属性用于详细描述 HTML 元素的特性。它只存在于起始标签中。
可以,大多数旧文件都可以在较新的浏览器上运行,但由于新功能的存在,某些功能可能无法正常工作。
如果用户操作系统不支持某些 HTML 字符,那么用户将无法读取这些字符,因为操作系统会显示一些随机的方形或圆形字符,或者将其显示为图像。
没有闭合标签的标签称为空标签,它们只包含开放标签,但它们在网页中执行某些操作。一般来说,我们可以说空元素是自闭合或无效的,而不是容器标签,例如 <br>。
标签之间没有文本意味着没有什么可以格式化的。因此,当我们在浏览器上执行 HTML 文件时,屏幕上将不会显示任何内容。
不能,当我们创建 <a> 标签时,它只接受一个 href 属性。
<head> 和 </head> 标签之间的元素充当元数据的容器,它通常定义文档标题、字符集、样式、脚本和其他元信息。Head 标签应放置在 <html> 标签和 <body> 标签之间。
HTML 文档的标题由 <title> 标签定义。它在浏览器标题栏或页面标签中显示页面标题。文档标题必须仅为文本。
<u> 标签用于在 Html 文档中给文本加下划线。<u> 标签在 HTML 中曾被弃用,但后来在 HTML5 中重新引入。
我们可以使用 <b> </b> 标签或 <strong> </strong> 标签在 HTML 中加粗文本。
<b> Hello</b>
<strong> 标签
HTML 元素有两种类型:行内元素和块级元素。
行内元素占据由定义元素的标签所限定的空间,而不是中断内容流。它不会在新行上开始,只占据必要的宽度。
块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容的高度,从而创建一个“块”。块级元素始终在新行上开始,无论是在元素之前还是之后,并占据可用宽度。您可以将它们表示为一堆盒子。
HTML <q> 标签和 <blockquote> 标签用于在您的 html 页面上显示 HTML 引用。通常 <q> 标签用于在您的网站上放置短引用,而 <blockquote> 标签用于在您的网站上定义大引用。
HTML 中有六种标题标签,它们由 <h1> 到 <h6> 标签定义。<h1></h1> 标签在所有标题标签中提供最大的字体大小。通常,标题文本的字体大小从 <h1> 标签到 <h6> 标签递减。
我们可以使用空格键向网页添加空格。通常,HTML 在单词之间显示一个空格,无论您输入了多少次空格键。在 HTML 页面中添加空格的最简单方法是使用不间断空格实体,写作 或  ,它用于强制添加额外的空格。这意味着它有助于防止在该位置换行。
您还可以使用附加的 HTML 实体   和   分别添加两个和四个不间断空格。
<!DOCTYPE html>
<html>
<head>
<title>
HTML 示例
</title>
</head>
<body>
<h1> 超文本标记语言研究</h1>
</body>
</html>
HTML 表格帮助网页开发者将数据设置到单元格的行和列中。HTML 表格通过 <table> 标签指定,其中 <tr> 标签用于创建表格行,<td> 标签用于创建数据单元格。<td> 下的元素默认是常规且左对齐的。
<th> 标签用于指定表格标题。如果您的文本在 <th> 元素中,它们将是粗体且居中。您可以使用 bgcolor 属性或 background 属性设置表格背景。
我们使用以下标签在 HTML 中分隔文本部分:
<em> 标签用于产生强调文本。
在 HTML 无序列表中,所有列表项都用项目符号标记。它也称为项目符号列表。无序列表由 <ul> 标签定义,列表项以 <li> 标签开头。
在有序 HTML 列表中,所有列表项默认用数字而不是项目符号标记。它也称为编号列表。有序列表由 <ol> 标签定义,列表项以 <li> 标签开头。
重要的列表样式之一是 HTML 描述列表,它受 HTML 和 XHTML 支持。它也称为定义列表,其中条目像字典或百科全书一样列出。
HTML 定义列表包含以下三个标签:
通过使用缩进,您可以使列表元素对齐。
是的。您可以使用嵌套列表的概念在一个列表内包含另一个列表。
嵌套列表可以定义为所有其他列表(如有序列表、无序列表和定义列表)的组合。例如,如果您想在编号列表中创建一个项目符号列表,那么这种类型的列表将被称为嵌套列表。
是的。项目符号的颜色取自列表的第一行。因此,要更改项目符号的颜色,您应该更改列表中第一行的文本颜色。
我们可以使用注释标签在 HTML 中插入注释,注释标签以小于号“<!-”开头,以大于号“->”结尾。放在注释标签内的数据不会在浏览器中显示。
例如,<! – Comment –>。
<button> 标签用于定义一个可点击的按钮。
示例
<button type="button">点击这里!</button>
在 HTML 中,<input type="button" /> 用于在 HTML 表单中创建按钮。使用 HTML 表单,您可以轻松获取用户输入。
对于 button 标签,您可以出于一般目的在任何地方创建按钮。它用于重定向到任何链接,不受表单操作的限制。通过使用 <button> 元素,您可以放置文本和标签,如 <b>、<i>、<br>、<strong>、<img> 等。这在使用 <input> 元素创建的按钮中是不可能的。
<div class='myDiv'>
nbsp; <button 1</button>
nbsp; <button 2</button>
<button>按钮 3</button>
</div>
HTML <span> 元素代表一个通用的行内容器,用于标记文本的一部分或文档的一部分。这意味着它可以通过使用 class 和 id 属性或行内样式来对分组的行内元素进行样式设置。
这两个标签(<div> 和 <span>)都用于表示网页的一部分。<span> 标签与 <div> 元素非常相似,但 <div> 用作块级元素,<span> 是行内元素。Div 标签可以接受 align 属性,但 <span> 标签不接受 align 属性。Div 标签应该用于包裹一个部分,以突出该部分,但 <span> 标签应该用于包裹您想要在网页中突出显示的任何特定单词。
您可以使用标签来指定文本颜色。
示例
是的。您可以使用 <font> 标签在网页上创建多色文本。这意味着对您想要着色的特定文本应用 <font color ="color"> </font>。
通过使用 © 或 ©,您可以在 HTML 文档中插入版权符号。
HTML 中有些元素只需要一个开始标签,不需要闭合标签,但它们会在网页上执行一些操作,这些标签被称为空元素。例如 <br />、<img />、<hr /> 等。
不,<body> 标签不是空元素或虚空元素。它是一个容器标签。
空白是由空格、制表符或换行符组成的空序列。它将帮助您以一种易于您自己和他人阅读的方式组织您的代码。
<marks> 标签用于突出显示文本。
语法
<mark>这是高亮文本 </mark>
CSS(层叠样式表)是一种文件格式,描述了 HTML 文档如何在屏幕上呈现。它通过使用不同的样式功能(如更改文本颜色、增加或减少字体大小、HTML 标签对齐等)为样式网页文档提供了简单有效的替代方案。
HTML 代表超文本标记语言,它是一种用于定义网页结构的语言。
CSS 代表层叠样式表,它通过使用不同的样式功能来样式化网页文档。
下表总结了 HTML 和 CSS 之间的一些基本区别。
| HTML | CSS |
|---|---|
| HTML 用于定义网页结构 | CSS 用于样式化网页文档 |
| 我们不能在 CSS 表中编写 HTML 代码。 | 我们可以在 HTML 文档中编写 CSS 代码。 |
| 它由标签和元素组成。 | 它由选择器和声明块组成。 |
| HTML 没有进一步的类型。 | 根据要求,我们可以将 CSS 用作内部或外部。 |
| 它不用于呈现和可视化。 | 它主要用于呈现和可视化。 |
| 相对较少的备份和支持。 |
相对较高的备份和支持。 |
HTML 属性是用于定义元素附加特性或属性的特殊词,应始终与开始标签一起使用。这意味着属性是 HTML 元素的修饰符。此外,您可以在一个 HTML 元素中使用多个属性,但需要在两个属性之间留出空格。
要在同一个网页中创建指向不同部分的多个链接,我们可以使用 <a> 标签,并结合使用 # 符号进行引用。
井号 (#) 不仅仅是一个普通的字符,它具有特殊的功能,用于链接到同一网页的某个部分。它被称为命名锚点,有时也称为片段。
基本上,为了将用户导航到长网站的某个特定标题,我们在锚标签中使用井号和该标题的名称。当单独使用且没有其他副标题时,相同的链接会导航到当前页面的顶部。
我们使用锚标签 <a> 在 HTML 文档中创建超链接,这有助于将一个页面链接到另一个页面。超链接也可以添加到图像中。
是的,超链接可以应用于图像。
href 属性用于指定要链接的页面的 URL。如果 href 属性不存在,<a> 标签将不是超链接。您可以使用 href=”#top” 或 href=”#” 链接到当前页面的顶部。
我们可以通过在 HTML 的 <link> 标签中使用 sizes 属性来调整链接资源的大小。
语法
<link sizes="HeightxWidth | any">
这里,'HeightxWidth' 用于指定链接图标的高度和宽度值。'any' 表示图标是可缩放的,如 SVG 或 PNG 图像。
如果您想从网站访问者那里收集信息,那么您可以使用 HTML 表单。表单将从用户那里收集输入,然后将其传递给后端应用程序,如 CGI、ASP 脚本或 PHP 脚本等,这些应用程序将根据应用程序中定义的逻辑处理这些数据。
HTML <form> 标签用于创建 HTML 表单,并且有各种表单元素,例如文本字段、密码字段、文本区域字段、下拉菜单、单选按钮、复选框等。
文本输入控件以未加密的形式显示获取的文本,而密码输入控件在用户输入字符后立即隐藏输入字符,并将其替换为加密形式,例如点、星号或方框。
HTML 中的图像地图通过使用单个图像链接到不同类型的网页。这意味着当您点击图像的可点击区域时,它将打开新的或提供的目的地。
HTML <map> 标签与 <area> 标签一起使用,用于定义客户端图像映射。这意味着您可以在不借助 <map> 标签分割图像的情况下,轻松地将图像的任何部分链接到其他文档。
Marquee HTML 标签是一个非标准的 HTML 元素,它创建一个滚动文本或图像,可以自动地在屏幕上沿特定方向(即左、右、上或下)移动。
示例: <marquee>要滚动的文本 </marquee>。
alt 属性是 HTML 属性,用于在图像因任何技术问题无法加载时,替代图像显示为替代文本。
是的,Html5 可以通过使用 audio 标签在网页上支持声音或音乐文件。HTML 5 audio 标签主要支持三种文件格式:mp3、ogg 和 WAV。
Html audio 标签有不同的属性,例如 src、controls、muted、loop、autoplay 和 preload。
div 标签代表 Division 标签。HTML 中的 div 标签用于将一组 HTML 元素组合在一起,这有助于一次性对许多元素应用 CSS 样式。这意味着 div 标签是一个块级标签,它就像一个容器单元,帮助我们在网页中为特定数据或功能创建特定部分。
样式表用于描述 HTML 文档如何在屏幕上呈现,您可以为给定的 HTML 元素提供多个样式属性。因此,它有助于为 HTML 网页创建定义良好的模板。此外,我们可以将单个样式表模板链接到多个网页,这使得维护和更改网站外观变得更容易和更有效。
<code> 标签用于定义一段计算机代码。其中的内容以浏览器默认的等宽字体显示。
语法
<code> 这是计算机代码 </code>
SVG 代表可缩放矢量图形(Scalable Vector Graphics)。它是一种基于 XML 的图像格式。它用于描述网络的矢量或栅格图形。矢量图像可以任意放大或缩小,而不会损失图像质量。
通常,我们将其用于矢量类型的图表,如饼图、X-Y 坐标系中的二维图。
示例
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Html <canvas> 标签用于通过脚本在网页上绘制图形。它只是一个容器。因此,您应该使用脚本来绘制图形。通常,您可以使用 canvas 的方法绘制路径、盒子、圆形、文本并添加图像。
让我们看看 <canvas> 元素的语法。
语法
<canvas id="myCanvas" width="200" height="100"></canvas>
通常,网页中的网页称为嵌套网页。我们可以通过使用内置的 iframe 标签在 HTML 中创建嵌套网页。也就是说,<iframe> 标签将帮助浏览器在当前 HTML 文档定义的矩形区域中显示一个单独的 html 文档。
例如
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframe</title>
</head>
<body>
<p>文档内容在此处...</p>
<iframe src = "C:\learnetutorials\HtmlPrograms\Form.html" width = "555" height = "200" frameborder="1" scrolling = "yes">
抱歉,您的浏览器不支持内联框架。
</iframe>
<p>文档内容也在此处...</p>
</body>
</html>
HTML 下标文本可以通过使用 <sub> 标签来实现,该标签通常出现在正常行下方半个字符处,有时以较小的字体呈现。
语法
这是 <sub> 下标 </sub> 的一个例子
我们可以通过使用 <sup> 标签在 Html 中插入上标文本。这种上标文本字体较小,并以升高基线显示。
例如,当处理质能等价方程如 E=mc2 时,数字 2 呈现为上标。
语法
这是上标 E=MC<sup> 2 </sup> 的一个例子
<del> 标签用于表示从文档中删除或擦除的一段文本。它将在删除的内容上划一条线。
语法
这是一个 <del>删除文本</del> 的例子。
HTML <ins> 标签用于表示 HTML 文档中新添加的文本。它表示一段带有下划线的文本,该文本已添加到文档中。
语法
这是一个 <ins>插入文本</ins> 的例子
HTML 文档将通过使用 <script> 标签包含脚本文件。
Web 应用程序可以使用 Web 存储功能在客户端浏览器中本地存储数据。它以键/值对的形式在浏览器上存储数据。Web 存储有时也称为 DOM 存储。
HTML5 有两种类型的 Web 存储:
我们可以在 </head> 标签之后使用以下语法将图片设置为网页的背景图片:
语法
<body background =”图片文件名和扩展名">
不,<!DOCTYPE html> 声明不是 HTML 标签。HTML 有多种类型。因此,我们在这里使用 <!DOCTYPE html> 来指示网页浏览器关于 HTML 页面。
是的。通过使用 HTML 5 的地理定位 API 功能,我们可以检索用户的地理位置。
HTML5 的重要功能之一是拖放,它允许用户抓住页面上的任何对象,拖动它并借助鼠标将其放到不同的位置。这意味着通过按住鼠标按钮在元素上拖动元素,并在您想要的位置释放鼠标按钮来放置元素。
用户只能拖动具有 draggable 属性为 true 的 HTML 元素。示例:
< img draggable ='true'/ src='img.png'>
页面上的拖动对象只能拖放到指定了 ondragover 事件的特定位置。示例:
< div >
如果要在 Html 文档中添加视频,则在要添加视频的位置使用 HTML <video> 元素。
示例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
progress 标签仅通过在网站上创建进度条来表示任务的进度,而 meter 标签用于衡量给定范围内的数值。
HTML 5 主要支持三种视频格式:
如果想在 HTML 文档中添加 YouTube 视频,则需要在要嵌入 YouTube 视频的位置使用 <iframe> 标签。我们可以在 <iframe> 标签中添加多个属性,例如“src”、“height”和“width”等。
示例
<iframe height="400" width="500"
src="https://www.youtube.com/embed/d58D3PPKsjE">
</iframe>
figure 标签用于标记或在网页上添加图片,它可以处理一组图表、照片、代码列表以及一些嵌入内容。
<figcaption> 元素与 <figure> 元素一起使用,为照片添加标题。
我们可以使用 HTML <blink> 标签在 HTML 中使文本闪烁。<blink> HTML 元素是一个非标准元素,它有助于创建包围文本的缓慢闪烁效果。
<meta> 是用于在 HTML 中指定元数据的标签。借助 <meta> 标签,您可以指定页面描述、版权、关键词、语言、文档作者等,这些通常不会显示在网页上,但搜索引擎可以使用元数据扫描网页以了解网页。
HTML 和 XHTML 有以下几点区别:
| HTML | XHTML |
|---|---|
| 代表超文本标记语言 | 代表可扩展超文本标记语言 |
| 标记文件格式 | 文档文件格式 |
| 不需要按照标签打开的顺序关闭标签 | 必须按照标签打开的顺序关闭标签 |
| 不需要在文件顶部编写 doctype | 在文件顶部编写 doctype 非常重要 |
| HTML 中使用的文件扩展名是 .html, .htm。 |
XHTML 中使用的文件扩展名是 .xhtml, .xht, .xml。 |
HTML 标签 <iframe> 用于表示一个内联框架。它用于在当前 HTML 文档中嵌入另一个文档。也就是说,<iframe> 标签将帮助浏览器在当前 HTML 文档定义的矩形区域中显示一个单独的 html 文档,其中包括滚动条和边框。
| HTML | HTML5 |
|---|---|
| 在没有 Flash 播放器支持的情况下,它不允许音频和视频控制。 | 它允许使用 和 标签控制音频和视频。 标签。 |
| 字符编码长而复杂。 | 字符编码简单易行。 |
| 它不允许 JavaScript 在浏览器中运行。 | HTML5 中的 JS Web Worker API 将帮助您在后台运行 JavaScript。 |
| 它通过使用 cookie 存储临时数据。 | SQL 数据库和应用程序缓存用于存储离线数据。 |
| 它不允许拖放效果。 | 它允许拖放效果。 |
| Doctype 声明长而复杂。 | Doctype 声明简单易行。 |
| 我们无法在 HTML 中绘制圆形、矩形、三角形等形状。 | 我们可以绘制圆形、矩形、三角形等形状。 |
| 旧版本的 HTML 不是移动设备友好的标记语言。 | HTML5 语言是一种更适合移动设备的标记语言。 |
| 它适用于所有旧浏览器。 | 所有新浏览器,如 Firefox、Mozilla、Chrome、Safari 等都支持 HTML5。 |
通过使用 PHP 脚本,我们可以生成 HTML 代码。此外,我们还可以将 HTML 中的值传递给 PHP 代码。