1.网站应该使用什么结构?
接下来,让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中,最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些:
index.html
:这个文件一般会包含主页内容,也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器,创建一个名为index.html
的新文件,并将其保存在test-site
文件夹内。images
文件夹:这个文件夹包含网站上使用的所有图片。在test-site
文件夹内创建一个名为images
的文件夹。styles
文件夹:这个文件夹包含用于设置内容样式的 CSS 代码(例如,设置文本和背景颜色)。在你的test-site
文件夹内创建一个名为styles
的文件夹。scripts
文件夹:这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码(例如,点击时加载数据的按钮)。在test-site
文件夹内创建一个名为scripts
的文件夹。
2.在网页中插入图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="" alt="My test image">//src存放路径名
</body>
</html>
文件路径的一些通用规则:
- 若引用的目标文件与 HTML 文件同级,只需直接使用文件名,例如:
my-image.jpg
。 - 要引用子目录中的文件,请在路径前面写上目录名,再加上一个正斜杠。例如:
subdirectory/my-image.jpg
。 - 若引用的目标文件位于 HTML 文件的上级,需要加上两个点。举个例子,如果
index.html
在test-site
的一个子文件夹内,而my-image.jpg
在test-site
内,你可以使用../my-image.jpg
从index.html
引用my-image.jpg
。 - 以上方法可以随意组合,比如:
../subdirectory/another-subdirectory/my-image.jpg
。
3.元素
- 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
元素也可以有属性(Attribute):
属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class
是属性名称,editor-note
是属性的值。class
属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。
属性应该包含:
- 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
- 属性的名称,并接上一个等号。
- 由引号所包围的属性值。
4.标记文本
1.列表
列表(List)
Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:
- 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul> 元素包围。
- 有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 <ol> 元素包围。
列表的每个项目用一个列表项目(List Item)元素 <li> 包围。
比如,要将下面的段落片段改成一个列表:
<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>
可以这样更改标记:
<p>At Mozilla, we're a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together… </p>
2.标题
标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题,等。HTML 文档也是一样。HTML 包括六个级别的标题, <h1> (en-US)–<h6> (en-US) ,一般最多用到 3-4 级标题。
HTMLCopy to Clipboard
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
3.链接
链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接,我们需要使用一个简单的元素 — <a> — a 是 "anchor" (锚)的缩写。要将一些文本添加到链接中,只需如下几步: