1. Chapter2 HTML基础

本节属于前端部分的一些基础内容。前面的内容提到,学习PHP需要有一些简单的前端基础知识作为前置技能。本节就简单介绍一些HTML的基础内容,作为学习PHP的准备。

1.1. 何为HTML

HTML为超文本标记语言(HyperText Markup Language)的简写,是标准通用标记语言下的一个应用,通常用来编写网页。

HTML简单易用,只需要使用简单的标签就能编写出丰富的网页。同时HTML最大的亮点是它具有平台无关性,在任何位置编辑好的HTML文档,就能在任何平台上被任何浏览器读取。

1.2. 一个最简单的HTML网页

我们只需要在硬盘上新建一个.html文件,就已经创建好了一个标准的HTML文档。接下来我们向文件中写入内容。

<!-- first.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>这里是标题</title>
    </head>
    <body>
        <h1>这是我的第一个HTML文档。</h1>
        <p>第一个喔!</p>
    </body>
</html>

这篇代码运行结果是

从上面这篇代码中,我们需要了解:

  1. 一个HTML文档由若干HTML标签组成,每个标签在页面加载的时候被浏览器解析成对应的形式,显示在页面上。
  2. 一个HTMl文档的全部内容被包含在一对html标签中。
  3. 每个标签都有自己对应的意义。

1.3. HTML标签

一个HTML标签通常是一对尖括号中包含一个英文单词的形式,例如<h1>。HTMl标签通常成对出现,组成一个元素。先出现的叫开始标签,后出现的叫结束标签。结束标签通常来说会比开始标签多一个斜线/

例如一个一级标题元素这样使用HTML标签来表示:

<h1>这里是一级标题</h1>

也有的元素只由一个标签组成,因为这些元素从存在意义上来说,并不需要一对标签就能准确地表达它该有的意义。例如图片标签:

<img src="/img/1/png" alt="这个图片不能显示呀" />

下面是一些常用的HTML标签:

标签 作用
html 整个html文档都被包含在一对html标签中
head 包含了页面中的一些头部信息
body 页面中主要显示的内容都在body中
style 写CSS代码的位置,记录了html文档中每个元素的样式
script 写JavaScript代码的位置,脚本代码写在这里

head标签下常用的标签有如下几种:

标签 作用
meta 规定了文档的一些头部信息,例如字符集、自适应规则等。这个可能读者还不容易理解。不用太纠结于此,如果目前不太了解,就先跳过也无所谓。
title 规定了网页的标题,这个标题会显示在浏览器的标题栏

body标签是整个网页的主体部分,该标签中包含了网页主要需要去显示的内容。常用的标签列举如下:

标签 作用
p 段落标签。该标签下的内容会被单独显示为一行。
h1~h5 一级标题~五级标题。一级标题最大,五级最小。会单独显示为一行
img 图片标签。需要注意的是,img标签是单标签形式,它只有一个结束标签。例如<img src="/img/1.png"/>
a 超链接标签。会显示为超链接的形式,点击超链接可以跳转到文档的某一个位置或另一个url。例如<a href="http://baidu.com">打开百度</a>
br 换行符。有br标签的位置会另起一行。该标签是单标签。例如<br /><br>
div 分区(division)标签。这个标签的中文译名众说纷纭,然而这对我们来说并不重要。div标签起到分隔内容的作用,在前端编写页面的时候最为常用。

html标签远远不止这些,如果对这方面有很强的兴趣,建议你系统地学习一下前端部分的相关内容。

1.4. HTML相关的其他内容

之前已经提到过,除了HTML决定一个页面有什么内容,还有CSS来决定页面的元素如何显示,以及JavaScript来决定元素们都能做什么。这些内容都属于前端开发的范畴内,我们在此不详细介绍,但是作为要学习web开发的读者——你——应该要知道还有这些内容:

  • 层叠样式表 CSS
  • 脚本 JavaScript

需要准备的前置技能就这么多,下一节我们将介绍如何搭建开发环境。

这本书是xt写的/上次修改: 2019-04-17 14:57:44

results matching ""

    No results matching ""