HTML基础知识
HTML基础知识
HTML (HypText米arkupl(语言)是用来构建网页及其内容的代码。例如，可以将内容结构化为一组段落、一组要点列表或使用图像和数据表。正如标题所示，本文将让您对HTML及其功能有一个基本的了解。
那么HTML是什么呢?
HTML是一个标记语言它定义了内容的结构。HTML由一系列元素，你用它来包裹或包裹内容的不同部分，以使其呈现出某种方式或表现出某种方式。封闭标签可以将一个单词或图像超链接到其他地方，可以对单词进行斜体化，可以使字体变大或变小，等等。例如，下面这行内容:
我的猫脾气很坏
如果我们想让行独立存在，可以通过将它括在段落标签中来指定它是一个段落:
<p>我的猫脾气很坏p>
解析HTML元素
让我们进一步研究这个段落元素。
我们的元素的主要部分如下:
- 开始标记:它包含元素的名称(在本例中是p)，用开始和结束分隔尖括号． 它声明元素在哪里开始或开始生效——在本例中是段落在哪里开始。
- 关闭标签:这与开始标记相同，除了它包含一个正斜杠在元素名之前。这表示元素的结束位置——在本例中是段落的结束位置。没有添加结束标记是初学者的标准错误之一，可能会导致奇怪的结果。
- 内容:这是元素的内容，在本例中只是文本。
- 元素:开始标记、结束标记和内容一起组成元素。
元素也可以有如下的属性:
属性包含有关元素的额外信息，您不希望这些信息出现在实际内容中。在这里,类是属性的名字和编者注是属性价值． 的类属性允许您为元素指定一个非唯一标识符，该标识符可用于定位元素(以及其他具有相同标识符的元素)类价值)与样式信息和其他东西。
一个属性应该始终具有以下内容:
- 它和元素名之间有一个空格(如果元素已经有一个或多个属性，则是前面的属性)。
- 属性名后面跟一个等号。
- 由开始和结束引号包围的属性值。
注意:不包含ASCII空格(或任何字符)的简单属性值＂ ＇ ｀ ＝ < >)可以不加引号，但建议您用引号括起所有的属性值，这样可以使代码更加一致和易于理解。
嵌套的元素
您也可以将元素放入其他元素中——这被称为嵌套． 如果我们想说我们的猫是非常臭脾气，我们可以把"非常"这个词用< >强元素，意思是这个词要被强烈强调:
<p>我的猫是<强大的>非常强大的>脾气暴躁。p>
不过，您确实需要确保元素被正确嵌套。在上面的例子中，我们打开< p >元素，然后< >强元素;因此，我们必须关闭< >强元素，然后< p >元素。以下是不正确的:
<p>我的猫是<强大的>很暴躁。p>强大的>
元素必须正确地打开和关闭，这样它们才能清楚地彼此在内部或外部。如果它们像上面显示的那样重叠，那么你的浏览器会试图猜测你想说什么，这可能会导致意想不到的结果。所以不要这样做!
空元素
有些元素没有内容而被调用空元素． 取< img >元素，我们已经在我们的HTML页面:
<img src＝＂图片/ firefox-icon.png＂ alt＝＂我的测试图像＂>
这包含两个属性，但没有关闭< / img >没有内部内容。这是因为图像元素不会包装内容来影响它。它的目的是在HTML页面中出现图像的地方嵌入图像。
解析HTML文档
以上介绍了单个HTML元素的基本知识，但是单独使用它们并不方便。现在，我们将看看如何将单个元素组合成一个完整的HTML页面。让我们回顾一下我们放入的代码index . html我们第一次在处理文件文章):
<！文档类型 超文本标记语言>
<超文本标记语言>
<头>
<元 字符集＝＂utf - 8＂>
<标题>我的测试页面标题>
头>
<身体>
<img src＝＂图片/ firefox-icon.png＂ alt＝＂我的测试图像＂>
身体>
超文本标记语言>
在这里，我们有以下内容:
<！DOCTYPE html >——doctype。这是一个必要的序言。在HTML还很年轻的时候(1991/92年左右)，文档类型的作用是作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这可能意味着自动错误检查和其他有用的东西。然而现在，它们做的不多，基本上只需要确保文档的正确行为。你现在只需要知道这些。< html > < / html >- - -< html >元素。这个元素包装了整个页面上的所有内容，有时也称为根元素。<头> < / >头- - -< >头元素。这个元素作为一个容器，包含您想要包含在HTML页面上的所有内容不是显示给页面浏览者的内容。这包括以下内容关键字你想要在搜索结果中出现的页面描述，样式化内容的CSS，字符集声明等等。< meta charset = " utf - 8 " >-这个元素设置你的文档应该使用的字符集为UTF-8，包含了绝大多数文字语言的大部分字符。实际上，它现在可以处理您可能添加到它上的任何文本内容。没有理由不设置它，它可以帮助避免以后的一些问题。<标题> < /名称>- - -<标题>元素。这将设置页面的标题，即加载页面时出现在浏览器选项卡中的标题。它也可以用来描述书签/收藏的页面。<身体> < /身体>- - -<身体>元素。这包含了所有当用户访问你的页面时，你想要显示给他们的内容，无论是文本，图像，视频，游戏，可播放的音频轨道，或其他任何内容。
图片
让我们把注意力转向< img >元素:
<img src＝＂图片/ firefox-icon.png＂ alt＝＂我的测试图像＂>
如前所述，它将图像嵌入到页面中显示的位置。它通过src(source)属性，它包含图像文件的路径。
我们还包括了alt(替代)属性。在这个属性中，您为无法看到图像的用户指定描述性文本，可能是因为以下原因:
- 他们有视力障碍。有严重视力障碍的用户经常使用一种叫做屏幕阅读器的工具来为他们读出替换文本。
- 有些东西出了问题，导致图像不能显示。例如，尝试故意改变路径在您的
src属性使其不正确。如果你保存并重新加载页面，你应该会看到这样的图片:
alt文本的关键字是“描述性文本”。你写的替换文本应该为读者提供足够的信息，让他们对图像所传达的信息有一个很好的概念。在这个例子中，我们当前的“我的测试图像”文本一点也不好。对于我们的Firefox标志，一个更好的选择是“Firefox标志:一只燃烧的狐狸围绕着地球。”
现在试着为你的图像提供一些更好的alt文本。
注意:在我们的可访问性学习模块．
标记文本
本节将介绍一些用于标记文本的基本HTML元素。
标题
标题元素允许您指定内容的某些部分为标题或子标题。就像一本书有主标题、章节标题和副标题一样，HTML文档也可以有。HTML包含6个标题级别，<标题> - <编辑>，尽管你通常最多只使用3到4个:
<！- 4个标题级别:->
<h1>我的主标题h1>
<h2>我的顶级标题h2>
<h3>我的副标题h3>
<h4>我sub-subheadingh4>
注意:HTML中的任何内容<！--和-->是一个HTML评论． 浏览器在呈现代码时忽略注释。换句话说，它们在页面上是不可见的——只在代码中可见。HTML注释是一种为你的代码或逻辑写有用的注释的方法。
现在，尝试在HTML页面的上方添加合适的标题< img >元素。
段落
正如上面介绍的那样,< p >元素是用来包含文本段落的;在标记常规文本内容时，你会经常使用这些:
<p>这是一个单独的段落p>
添加您的示例文本(您应该从你的网站看起来会是什么样子?)内的一个或几个段落，并将这些段落直接放在你的< img >元素。
列表
web的很多内容都是列表，而HTML为列表提供了特殊的元素。标记列表总是由至少两个元素组成。最常见的列表类型是有序列表和无序列表:
列表中的每个项都放在<李>(列表项)元素。
例如，如果我们想将下面段落片段的部分转换为一个列表
<p>在Mozilla，我们是一个由技术人员、思想家和建设者共同工作的全球社区……p>
我们可以将标记修改为这样
<p>在Mozilla，我们是一个全球性的社区p>
<ul>
<李>技术人员李>
<李>思想家李>
<李>建筑商李>
ul>
<p>一起工作…p>
尝试向示例页面添加有序或无序列表。
链接
链接是非常重要的——它们使网络成为一个网络!要添加链接，我们需要使用一个简单的元素-<一>-“a”是“anchor”的缩写形式。要将段落内的文本变成链接，请遵循以下步骤:
- 选择一些文本。我们选择文本“Mozilla Manifesto”。
- 将文本包装在
<一>要素，如下所示:
复制到剪贴板<一个>Mozilla宣言一个> - 给
<一>一个元素href属性，如下所示:
复制到剪贴板<一个 href＝＂＂>Mozilla宣言一个> - 将这个属性的值填入你想要链接到的网址:
复制到剪贴板<一个 href＝＂https://www.mozilla.org/en-US/about/manifesto/＂>Mozilla宣言一个>
如果您省略https://或http://一部分,叫做协议，在网址的开头。在建立一个链接后，点击它，以确保它发送到你想要的地方。
注意: href对于属性名称，一开始可能看起来是一个相当模糊的选择。如果你很难记住它，记住它代表hypertext裁判erence．
如果您还没有添加链接到您的页面，现在就添加链接。
结论
如果您遵循了本文中的所有说明，您应该会得到一个类似于下面的页面(您也可以把它在这里)：
如果你卡住了，你总是可以把你的工作与我们的比较完成了示例代码在GitHub上。
这里，我们仅仅触及了HTML的表面。想了解更多，请访问我们的学习HTML的话题。