网站搭建(一)

这个系列是关于如何搭建一个网站的教程,首先讲述 HTML, CSS, and JavaScript,在之后部分会讲述搭建Blog of Code 网站的细节,搭建wordpress等。大部分内容均为自己的总结,部分参考了educative网站的英文教程如果你想及时获取新文章,可以去右上角的“订阅”里找到网站建设系列,这样你每个月都会收到最新的信息。

HTML有什么用呢?首先看看这个页面,在上面有红色的标题“网站搭建”,下面又有加粗的关于这个系列的整体介绍,他们由不同的字体大小组成,如果你仔细观察,在网站的各个地点字体都会有多多少少的差异。HTML会把网页分为  headers, main content, footers, table of contents, captions等模块。 这让你的浏览器很明确的知道,这段话应该用什么样的大小,字体来展示。

HTML究竟是什么?他全称( Hyper Text Markup Langauge ),提供一种结构化的描述让浏览器知道如何显示页面。我们通过HTML element(就是标签)来形成这种结构化的描述。比如

  • <h1>: 最高级别的标题
  • <h6>:最低级别的标题
  • <img>: 一个图像
  • <a>: 一个超链接,可以指向其他页面,文件,视频等等

大多数的HTML标签都会有一个结束标志,注意是大多数, 比如<img> 和<a> 就没有

<p>This is a paragraph element.</p>

一起看看一段HTML长什么样子,首先来看效果

页面标题

文章标题

这里放页面的内容

再来看看代码

<DOCTYPE! html>
<html> 
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>文章标题</h1>
    <p>这里面放页面的内容</p>
  </body>
</html>

第一行 <DOCTYPE! html> 是一个声明,告诉浏览器HTML的版本。html指出这个文本是用HTML5写出(这很简洁,因为最新版本就是HTML5,如果你想要用旧版本的HTML,需要添加额外修饰)。

第二行 <html> 和最后一行的 </html>是必须的,在里面写出其他HTML标签,这表示了HTML的范围。

在<head>中包含一些基本的数据,比如下面的<title>(这个标签必不可少,用来指出标题),还可能包含Javascript files 和 CSS stylesheets。

<body>里面就是要展示在页面上的内容了,这段代码使用了最高等级的标题<h1>,和段落<p>

后面会介绍更多内容~


发表评论