13860637705

如何建立网站第一部分:理解和编写HTML

2019年05月03日 17:38:27 福州网站建设

 

网站跳出率过高怎么办?在建站时这些问题就要考虑_好推建站

 

网站跳出率过高怎么办?在建站时这些问题就要考虑_好推建站

每个人至少在网络上生活一段时间,无论你是为了生活而开发网页,想要创建一个铭牌网站,还是只是想要更好地控制你的评论在网站上的显示方式,了解一下您的命令中的HTML是非常宝贵的。考虑到这一点,在我们关于如何建立网站的第一课中,我们将涵盖HTML的顶级基础知识 - 网络的主要标记语言。

现在很容易使用社交媒体和个人登录页面整合网站,但如果你想真正建立自己的网站,你将需要学习HTML和CSS。幸运的是,我们可以提供帮助。

上面的视频将让您使用文本编辑器进行设置,引导您完成HTML文档的基本结构,并向您介绍一些您想立即了解的HTML内容。在本课程结束时,您将了解如何创建基本HTML页面。如果您忘记了某些内容或想要一些额外的参考资料,请查看下面的文字。它将为您提供有关HTML所需的基本信息。

你需要什么

用于编写HTML的纯文本编辑器

您选择的Web浏览器来测试您的HTML

希望加强您对网络运作方式的了解

正如您所看到的,您真的不需要太多开始。

获得纯文本编辑器

为了编写HTML,您需要一个纯文本编辑器。这个视频使用一个名为Textmate的纯文本编辑器,但这会花费你。如果你想要免费的东西,你有很多很棒的选择,包括Windows和Mac的Notepad ++(Windows),Kod(Mac)或Sublime Text。还有其他几个文本编辑器,所以你可以使用你想要的任何东西,只要它是纯文本编辑器。虽然纯文本这个词有点用词不当(这就是为什么),它基本上用于描述没有任何风格的文本,只是字母,数字和符号。这意味着没有粗体,没有斜体,没有不同的大小等。虽然你的纯文本编辑器可能有语法高亮 - 一个功能,根据你键入的内容改变文本的颜色,使你的代码更容易阅读 - 这只是你的事情将在您的文本编辑器中看到未保存到文件中的内容。基本上,你需要一个文本编辑器除了文本之外不保存任何东西(这意味着你不想使用像Microsoft Word这样的东西)。

注意:出于本课程的目的,您应将在文本编辑器中创建的所有文件保存.html为文件扩展名,例如“my_first_web_page.html”。您可以在所选的纯文本编辑器中编辑.html文档,但也可以在浏览器中查看.html文档。在浏览器中打开它时看到的内容与在文本编辑器中打开时看到的内容大不相同。

什么是HTML文档?

如果你阅读上面的部分,你可能已经猜到HTML代表超文本标记语言 - 只是一堆文本保存为浏览器识别为使用HTML的文档类型。如果您在网页上看到一个图像,它只是在HTML文档的文本中引用,而不是作为文件的一部分实际包含在内。所有HTML文档确实提供了一组基于文本的指令,Web浏览器可以解释这些指令。它通过将页面的文本封装在标签中来实现这一点,我们将在一分钟内了解更多信息。它还使用这些标记告诉Web浏览器执行诸如显示图像,添加换行符等操作。更进一步,HTML可以使用CSS代表样式 - 代表级联样式表 - 我们将在下一课中学习。目前,你要写。

什么是标签?

标签在HTML中用于指定页面上的某些元素,以便Web浏览器知道如何呈现它们。这是一组标签的样子:

以上标签是HTML标签。您的整个HTML文档都在这些标记内。所有标签都以小于符号开头,以大于符号结束。它们被称为标签,部分原因是因为这些符号使它们看起来像标签。起始标记只是在其中包含术语HTML,但您会注意到结束标记在术语HTML之前有/。/是什么指定它是结束标记。此标记告诉您的Web浏览器第一个HTML标记是HTML文档的开头,第二个/ HTML结束标记是结束。大多数标签看起来像这样。例如,如果您想使文本变为粗体,您可能会看到注意:还有其他方法可以使文本变为粗体,因此请务必观看视频以获得完整的解释,因为这些差异有时非常重要。

上述标签是图像标签。您可能已经想到了这一点,但它的工作是显示图像。这个标签有两个值得注意的不同之处。首先,它没有结束标记。这是因为img标签是一个自动关闭标签。它不需要结束标记,因为在开始标记和结束标记之间没有任何内容。但是,你会注意到img标签末尾的/,那就是指定结束。回到HTML的早期阶段,您不需要将其添加到图像标记中,从技术上讲,您仍然没有,但它是正确的形式。你会注意到的另一个区别是标签有一堆属性。属性类似于src =“”和height =“”,它们包含描述有关标记的更多信息;

src属性指定我们要显示的图像文件是image.jpg。因为我们只是列出文件名,所以浏览器会假设我们将该图像文件保存在与HTML文档完全相同的位置。如果你在HTML文档的同一个地方有一个名为images的文件夹,并将图像保存在那里,你可以将src设置为“images / image.jpg”,因为/表示我们要进入一个文件夹。如果您想从外部网站加载图像,您可以只是图像的完整URL(例如)。其他属性只是指定图像的高度和宽度。图像标记只需要src属性,但如果您没有指定图像的高度和宽度,浏览器将不知道要留出多少空间,并且在加载时将继续调整页面。

有关您可以在文档中使用的一些基本标记元素的快速参考,这个备忘单是一个很好的起点。

基本HTML文档的结构

既然您已经有了基本的标记结构,那么让我们来看看基本的HTML文档的结构。您应该知道这是一个非常基本的外观,并不完全包含您可能在完全开发的HTML文档中找到的所有内容,但它可以很好地工作并保持简单。这是最基本的结构:

您会注意到HTML标记内部是HEAD和BODY标记。HEAD标记封装了不一定要直接显示在页面上的信息,例如页面标题(在Web浏览器中显示为窗口或标签标题),CSS样式和其他元数据。BODY标记封装了将在页面上显示的信息- 您的文本,图像和富媒体。在Web浏览器中打开生成的HTML文档(只需双击保存的文件或将其拖到浏览器窗口中)将如下所示:

从示例中可以看出,body标签内部有一些内容。首先是一个ID为标头的DIV标签。DIV标签用于包含一些内容,因此您可以设置样式并使用CSS移动它们。在下一课中我们深入了解CSS时,您将了解更多相关信息。

标题内的DIV标记是一些文本。文本的第一部分在H1标签内。H1,H2,H3,H4,H5和H6标签都用于创建标题文本。H1是最大的,H6是最小的。默认情况下,它们会生成粗体,较大的文本,但您可以使用CSS来设置它们的样式。由于此HTML文档没有CSS样式信息,因此H1标记将使“我的页面”文本看起来是粗体。此效果与您在本文中看到的大截面标题文本非常相似。

H1文本下面只是一些常规的,未打造的文本。大多数浏览器使用Times New Roman字体以12pt的大小呈现未样式的文本