初学者HTML:

Web技术的时间表


2009年

2005年

2002年

2000

1998年

1997年

1996年

1994年

1991年

HTML5

AJAX

无表网页设计

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

的HTML

Contents

介绍

如果您想成为网站管理员并学习如何创建网站,则可能会发现掌握HTML的前景令人生畏.

但是,这是不可避免的,因为您访问的绝大多数网站登录页面都是使用HTML元素编写和结构化的。实际上,HTML现在 超过74%的已知网站使用了, 这种语言还可以帮助您增强从网站设计到其内容质量的所有内容.

在本指南中,我们将探讨HTML的基本原理及其潜在的应用程序,然后查看在对网站进行编码时所使用的各个元素的示例.

什么是HTML?

使用HTML的各种子类别的网站所占的百分比

HTML百分比的各种子类别

简单来说, HTML代表标准标记语言 用于在线创建网页。它代表超文本标记语言,其最主要的功能是建立各个登陆页面的结构,布局和表示。尽管网络浏览器不直接显示HTML语言,但它在帮助创建可见,可访问且易于使用的网站方面起着关键作用.

HTML还受到许多单独元素的支持,这些元素逐渐构建网页,组织内容的表示形式并使您的网站栩栩如生。这些元素被创建并包含在“标签”中,“标签”定义了替代内容,例如标题,段落和类似示例.

我们将在下面更详细地探讨这些元素及其结构,同时还将研究如何对其进行个性化设置,以将颜色,链接和可变字体引入您的网站。.


在哪里使用HTML?

使用HTML的热门网站

在哪里使用HTML

如我们所见,最常见的HTML应用程序是构成您的网站的各个目标网页的设计。这不是流行的编码工具的唯一应用程序,但是,作为新的网站管理员,了解它的其他用法将有助于您从该语言中获得最大收益。. 因此,这里是一些可以应用HTML的其他方式:

  • 在现有页面中创建可定制元素

    如果您打算允许博客文章评论或网站上发布的用户生成的内容,则可以使用HTML代码片段来启用此功能。这些元素使用户可以根据您作为主持人的限制来强调关键字,嵌入链接并设置注释格式.

  • 创建电子邮件的其他内容

    电子邮件还使用HTML作为富文本消息的语言,富文本消息具有链接,文本和其他无法单独以纯文本形式显示的其他元素。因此,如果您希望通过电子邮件共享与您的网站相关的电子书,则可以利用HTML来优化消息的影响力.

  • 了解计算机上安装的脱机帮助文档

    有趣的是,HTML用作可离线访问的基于计算机的帮助文档的格式。因此,HTML的基础知识可以帮助您了解硬件问题并更快地解决它们,从而可以确保在离线状态下可以更快地恢复网站。.

HTML和CSS
查看HTML和CSS [备忘单]

HTML页面结构

</strong><br/> <strong>
页面内容

自1990年代中期以来,html,head和body元素已成为HTML规范的一部分,直到几年前,它们还是用于为HTML文档赋予结构的主要元素。.
但是,在最近几年中,情况发生了巨大变化,因为HTML5添加了许多新标签,这些标签可用于为HTML文档的结构添加丰富的语义。.

HTML文档必须以“文档类型声明”(非正式地为“ doctype”)开头。在浏览器中,文档类型有助于定义渲染模式。 HTML5没有定义DTD;因此,在HTML5中,doctype声明更简单,更短.


在构建html页面之前,需要适当的基础知识.

通常,页面将由三个结构元素组成:

1.标头: 标头包含与您网站上所有页面相关的内容,例如徽标或网站名称,以及导航系统。在每个页面上都可以看到标题.

2.主体: 这占据了网页上最大的区域。它包含特定于正在查看的页面的内容.

3.页脚: 页脚内容通常包括联系信息,送货地址或法律声明。像页眉一样,页脚出现在每个页面上,但位于页面的底部.

这些基本结构元素组合在一起时的外观如下:


您可以在此处放置文本或代码,例如
的Google Analytics(分析)跟踪代码
例.

您页面的主体是
这里。用文本和图像填充!

这是另一个示例,使用标头标签和段落标签来美化内容。另外,我们在页面主体下方添加了页脚标记,用于内容:


您可以在此处放置文本或代码,例如
的Google Analytics(分析)跟踪代码
例.

我的第一个标题

欢迎来到我的网站!

联系信息可以去这里


HTML标签

HTML标签

任何HTML代码的起点都是单独的标记,这些标记可用于创建所有关键元素并帮助构建网页。下面,我们将研究最常见的标签,然后探讨如何利用它们来生成特定的页面上元素:

标题标签

所有在线文档(包括网页)均以标题开头。这些是使用HTML标记构造的,当前使用的语言最多允许六个可变大小的元素,这些元素还使您可以使用其他标题,字幕和加粗文本突出显示的行来组织内容。要开始标题,您只需在相关文本前面加上

,

,

,

,

要么
标签取决于所需的大小.
然后,您必须在标题的末尾应用结束标记以封装文本,并将以HTML格式显示如下:

标签共有12类:


这是标题1

这是标题2

这是标题3

这是标题4

这是标题5

这是标题6

领先的HTML标签技术
在网路上分享

0.27%

HTML5
帆布标签

0.29%

HTML5
音频标签

0.69%

HTML5
影片标记

3.1%

HTML5
SVG标签

6.54%

HTML5
嵌入标签


一旦确认,这将转化为您网站上的以下美学’的目标网页:

这是标题1

这是标题2

这是标题3

这是标题4

这是标题5

这是标题6

在这里,可以清楚地看到可变标题的各种大小,这是浏览器在标题前后添加一行的事实。您还将注意到,标题文本结尾处的结束标记具有稍微不同的美感,但是在下一章中,当我们希望使用标记来定义特定元素时,将对此进行介绍。.

段落标签

视频和音频支持
无需使用Flash Player和其他第三方媒体播放器,即可使用新的HTML5真正访问您的视频和音频

类似的原理也适用于起始段落标签,由

. 这使您可以组织内容并将其分成相关的段落,从而转化为更轻松,更无缝的阅读体验。再一次,

标签应放置在相关文本的开头,然后在末尾应用替代结束标签以完成效果。但是,与标题标签不同,没有数字变量可以改变段落中特色文本的大小. 例如:

您的第一段

您的第二段

您的第三段

全球网站对HTML5视频标签的使用情况

国家
网站数量
美国
140,008
俄国
87,508
德国
34,519
英国
26,609
法国
25,697
日本
23,578
台湾
19,798
乌克兰
19,204
巴西
16,773
中国
16,523
世界其他地区
265,371

在HTML格式之外,这将在完成的网页上按以下方式细分文本:

您的第一段

您的第二段

您的第三段

换行标签

第一个示例代表了最基本的HTML标记,但是还有一些使用不同格式和替代结束标记的示例。以换行符为例,换行符可以区分文本行并在下一行继续。在HTML字段中,换行符和段落之间存在核心区别,因为后者是包含文本的标准块元素,而前者在现有文本中创建分隔

元件.

因此,换行符表示HTML中的空元素,因此没有通过打开或关闭标签来定义。相反,它们由
标签,可以插入到现有标签中

分解文本并可能突出重要信息的元素。字符br和正斜杠之间的单个空格至关重要,因为否则该标签无法以HTML格式识别.

这是一个例子:

是HTML5绘图标签,它使您可以比以前的丰富Internet应用程序平台(例如Flash)利用更多的网络交互性和网络动画.
您甚至可以使用HTML5的 标签。 HTML5提供了一种出色的移动友好方式来开发有趣的交互式游戏

早上好

非常感谢您的询问,如果我们还有其他要求,我们会与您联系.

最好的祝福

J先生

一旦应用,这将使文本分解如下:

早上好,

非常感谢您的询问,如果我们还有其他要求,我们会与您联系.

最好的祝福

琼斯先生

如您所见,只要在现有段落元素中可以添加换行符,只要它们能增加价值并使信息更易于理解,就可以对其应用。您还将看到,开始和结束段落标记保持不变,而换行标记用于修改包含在其中的文本的布局.

这是如何使用HTML标签更改现有元素的示例之一,它在定义网页和内容的视觉布局方面起着关键作用.

水平线

使用HTML5 Canvas标签的网站类别

使用HTML5 Canvas标签的网站类别

同样,在

元素,或进一步分隔网页上的文本。使用最广泛的一种是


标记,它有助于创建一个空元素,该元素在在线文档的其他部分之间绘制可见的水平线。例如,您可能想在两个文本主体之间放置一条线,以使读者重新聚焦或简单地引入新的视觉元素。这是您在HTML中创建此类中断的方式:

您的第一段


您的第二段

此处,hr字符和正斜杠之间的中断突出显示了一个空元素的构造,而再次不需要结束标记即可完成效果. 这将创建以下视觉效果:

您的第一段
________________________________________

您的第二段

您的第一段
_______________________

您的第二段

移动浏览器已完全采用HTML5,因此创建移动就绪项目就像为其较小的触摸屏显示器进行设计和构建一样容易,因此响应式设计非常流行。有一些很棒的元标记也可以让您针对移动设备进行优化
78%的内容开发人员同意该结构适合创建移动应用程序,而68%的开发人员认为它适合设计任何种类的应用程序


图片标签

图像标签还表示HTML中的空元素,这再次意味着它们不包含结束标签。由于它们仅包含与您要嵌入到网站上的图像的URL相关的属性,因此它们的定义很简单, 标签在元素的开头。它们可以放在您网站的任何位置,尽管通常不将它们包含在现有元素中,例如段落或标题。这是典型的HTML图像标签将如何呈现自身:

some_text

您还应该为图像提供替代文本,以帮助人们在加载时间较慢或使用屏幕阅读器的情况下进行查看。这样,如果浏览器找不到图像,它将向浏览者显示替代属性的值。这再次使用了image标记,但包含一组不同的属性:

 HTML5 Icon

HTML元素

html元素

以前,我们研究了如何使用简单的HTML标签定义页面上的元素,同时还探讨了如何通过使用包含图像和换行符的空元素来进一步自定义它们。这有助于我们了解标签和元素之间存在的关系,以及如何使用它们来定义网站上不同类型的内容.

例如,虽然HTML语言的所有方面都由标记表示,但是包含内容的已定义元素必须同时具有开始和结束标记。因此,标题和段落是HTML元素,因为它们使用开始和结束标记来封装和扩充相关文本。相反,空元素要么包含属性,要么根本不包含任何内容,从而允许它们在现有元素中使用,而无需结束标记.

定义HTML元素

HTML5无处不在,并且随着越来越多的元素被采用,越来越多的公司将开始用HTML5开发

使用标题和段落之类的示例时,正确使用开始标签和结束标签至关重要。它是开始标记(例如

要么

)定义了相关元素,例如,闭合标签可确保该元素不会在网页的其余部分中继续出现。如果您无法使用结束 标记在所需段落的末尾,例如,文本将显示在一个难看的且极难阅读的块中.

除了前一个标记在相关字符之前带有正斜杠之外,所有的结束标记与开始标记相同。因此,在

标题,结束标记为 , 而对于段落,您将始终使用 定义文本的中断。这需要在编码时注意细节,并且在编程标题时要注意,您使用的数字(例如h1或h2)同时应用于开始和结束标记中,这一点很重要.

不同HTML元素的使用频率

XHTML元素名称

标题
html
身体
一个

img

d
TR
br
p
脚本
字形
div
b
链接
中央
跨度
形成
输入
样式
小时
强大
一世
hl

Noscript
地图
区域
ul
选择
选项
3小时
h2

框架集
参数
嵌入
EM
ü
宾语
块引用
没有
镜框
身体
iframe

4小时
基础





























0
10
20
30
40
50
60
70
80
90
100

使用嵌套的HTML元素

在此阶段,可以清楚地看到HTML文档和网页是由各种元素的树形成的,这些元素充当资产阵列的基础。我们还研究了如何形成和使用这些元素来构造在线内容,并且现在我们将通过嵌套HTML元素继续进行下去。.

就像空元素和独立标签(例如
可以将其合并到已定义的HTML元素中,所谓的嵌套元素也可以包含在诸如标题和段落之类的内容中。这些示例包括粗体和斜体字样以及带下划线的文本,这些示例可用于为您的内容添加个性并吸引读者的注意力.

HTML中的粗体,斜体和带下划线的文本

让’s表示您想突出显示现有段落元素中的单词。您可以通过使用标准中的简单标记使其变粗来实现此目的

元件。使用HTML,您可以如下进行编程:

我想要 这个 粗体字.


在此,嵌套元素既具有开始标记,也具有结束标记,每个标记都遵循与标题和段落相关的相似格式。它们可以在现有元素中无缝使用,在这种情况下,它将产生以下结果:

我想要 这个 粗体字.

现在,让’例如,您还想更改此单词的版式,使其也为斜体。这可以简单地通过添加另一个嵌套元素来实现,该元素的编码应如下所示:

我想要 这个 粗体字.

如您所见,开始和结束斜体标签已简单地合并到

元件。现在,这将转换元素内的内容,使其显示如下:

HTML标题一直是并且仍然是搜索引擎用来了解页面内容的最重要的HTML信号。实际上,如果您认为HTML标题不正确或不具有描述性,则Google会对其进行更改
我想要 这个 粗体字.

当然,您可能会决定以其他方式突出显示该单词。因此,您可以使用替代的嵌套元素,例如下划线(由下划线 标签。这些标签可以以相同的方式应用于

元素,在HTML中显示如下:

我想要 这个 要强调的词.

在这种情况下,文本将在您的文档或登录页面上显示如下:

HTML5引入的新语义元素将使初学者轻松阅读。而不是看到一行一行
元素,更定义的标签,例如
,
我想要 这个 要强调的词.

这提供了对可以由标签形成的元素的深入了解,标签又反过来定义了网页的结构及其特征。不仅如此,空元素和嵌套元素还可以用于进一步定义内容.

HTML属性

全局属性是所有HTML元素共有的属性。它们可以在所有元素上使用,尽管属性可能对某些元素没有影响。可以在所有HTML元素上指定全局属性,即使标准中未指定全局属性


如果标记是构造和定义元素的构建块,则可以使用HTML属性自定义其特征(例如样式,颜色和语言。所有HTML元素都具有核心属性,这些属性提供核心信息,并且始终在stat标记中指定。它们通常成对出现,因此通常以以下格式出现:name =”值.“

简单来说,名称代表您要设置的属性,而值与您要合并的特定条件相关.

有很多属性可以应用于您的HTML元素,但与雏形的网站管理员最相关的属性是:

“朗格”属性

最基本的单个属性,它定义文档的语言及其元素。它使用 ‘郎’ 属性,尽管它很容易被忽略,但它的好处是可以使屏幕阅读器和搜索引擎更容易访问内容。它通常以以下格式显示在文档的开头:

已经识别出几种基本属性类型,包括:

必要属性, 特定元素类型需要该元素类型才能正常运行

可选属性, 用于修改元素类型的默认功能

标准属性, 受大量元素类型支持

事件属性, 用于使元素类型指定在特定情况下运行的脚本


在lang属性之后,前两个字母指定语言(在这种情况下为英语)。在连字符后,下两个字母建立了方言,尽管并非每种语言都存在。如果您要成功吸引受众,请务必正确设置此属性.

“对齐”属性

我们已经涉及到HTML属性的格式(name =”值),而当您尝试在元素内对齐内容时,便是最好的体现。例如,您可以决定将所有段落放在特定页面的中心,对齐方式是您要设置的属性。随后, ’中央’ 是属性的值,尽管您可以选择将文本左对齐还是右对齐. 例如:

此文本居中对齐

使用HTML5构建的应用类型

生产率
54%
效用
38%
消费者
35%
高球
22%
社交网络
18%
娱乐
17%
生活方式
12%
旅行
9%
游戏类
8%
其他
13%

这将使您的

页面中心的元素,并创建统一的布局以适合您网站的特定性质(请参见下文):

此文本居中对齐
此文本居中对齐
此文本居中对齐

“ Href”属性

HTML5还附带了许多出色的API,可让您建立更好的用户体验以及功能更强大,更动态的网络应用程序-以下是本机API的快速列表:
  • 拖放(DnD)
  • 离线存储数据库
  • 浏览器历史记录管理
  • 文件编辑
  • 定时播放媒体

如果要构建可见的网站,则必须同时包含入站链接和出站链接。建立包含反向链接到内部登录页面的链接组合也是一种可行的策略,因此您将需要学习如何在HTML中进行编码.

HTML链接是使用 标记,其中包括目标链接以及将包含URL的相关锚文本。它是 ‘href ’ 指定站点地址的属性,但是,它作为开始标记的一部分被合并。 HTML编码如下:

谷歌

这清楚地突出了开始标记和结束标记之间的区别,并将在您的目标网页上进行如下翻译:

HTML5不受一家公司控制。它的最佳功能之一在于它是一个开放标准。开发人员可以自由发挥自己的创造力,并尽可能添加尽可能多的功能和特性


“颜色”属性

这是另一个重要属性,因为使用颜色可以为您的网站注入生命,同时有助于形成重要的对比和强烈的设计美感。在HTML中,可以使用颜色名称来指定颜色,尽管也可以利用RGB或HEX值来实现此目的。前一个选项最容易遵循,但是它也可以应用于页面上的标题,段落和其他元素.

HTML5画布
查看HTML5画布[备忘单]

这是一个样式属性,您选择的颜色代表您想要设置的值。例如,将红色应用于主标题时,它将看起来像这样:

通过使用红色设置背景色

应用后,此元素将在您的网站上显示如下:

通过使用红色设置背景色
与其他浏览器相比,每个Google Chrome更新都确保包含对HTML5的支持。此外,YouTube的默认播放器现在为HTML5,而Google的Flash广告正在转换为HTML5


再次,定义元素的开始标记和结束标记之间存在明显的区别,而这是在HTML中最容易应用的属性之一。它还进一步突出显示了名称=”HTML属性的值格式,使整个网站的学习和应用过程变得更加容易.

测试自己

在基本了解HTML及其各个元素之后,下一步是进行一些简单的项目并运用您的理论知识来解决实际挑战.

运行HTML5的基于浏览器的应用程序使用地理定位将没有问题

在下面的练习中,我们以文本为特色,并要求使用HTML格式化各个方面. 在准备编写自己的网站代码时,请使用该指南以及到目前为止所学到的所有知识来完成挑战.
________________________________________

主标题

欢迎来到我们的网站Example.com!我们希望您喜欢阅读我们的内容,随时与我们联系.

感谢造访!

学到更多.

开发人员对HTML5的使用
(按地区)

北美和拉丁美洲
70%
南美洲
61%
阿萨普
60%
澳大利亚
60%
欧洲
59%
非洲
50%

________________________________________

问题:

  1. 使用正确的结束标记完成标题元素.
  2. 将标题设为粗体.
  3. 在标题下插入一条水平线.
  4. 使用颜色属性和阴影 ‘感谢造访’ 绿色
  5. 插入此超链接(https://www.w3schools.com/html/)放入锚文本 “学习
    更多.”
  6. 在页面顶部,使用name =”值格式以使段落左对齐


结论

HTML仅在1991年才创建(随后在1995年发布了第一版编码语言),但它已迅速成为设计功能性和视觉吸引力网站的开创性工具。 HTML的影响力水平也在不断发展,随着全球越来越多的网站采用最新版本(HTML5).

在这方面,学习HTML的基本元素以及如何应用它们是建立成功,可见并最终具有竞争力的网站所要采取的最重要的单个步骤.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map