人人都能看懂的全栈开发教程——HTML

人人都能看懂的全栈开发教程——HTML

Chris Yue No Comment
Posts

上一篇我们制定的开发计划第一步是先创建 HTML 页面。这篇文章便是手把手教大家,什么是 HTML,以及如何创建一个 HTML 文档。

就算之前没有接触过开发,我相信 HTML 这个词大家还是比较眼熟的。HTML 是『超链接文本标记语言』的缩写(Hyper Text Markup Language),具体定义不多说,网上一大堆,我们实际做点什么来感受一下 HTML 到底是啥。

我假设读者还是有点电脑基础知识的,清楚基本的文件操作,并知道扩展名是什么,以及如何查看,修改一个文件的扩展名。后面的操作,如果有不清楚怎么做的,可以自行上网查询,很好找答案。

首先,HTML 是一个『文本文件』。而最知名的文本文件,要数 txt 文件,它是一个扩展名为 .txt 的文件。我们先在桌面上,创建一个 index.txt 文件,然后双击打开它。这里以 Windows 为例子,很可能是用的记事本打开的(其他的软件打开的也没关系)。然后我们在记事本里输入

Hello world

保存文件并退出记事本。

很常见的操作是吧?我们刚刚创建了一个内容为 『Hello world』的文本文件,也经常被成为文本『文档』(document)。

接下来,我们把这个文件的扩展名改成 .html,修改后应该能注意到文件的图标变了,并且应该是某个浏览器的图标。双击这个文件,会被浏览器打开。现在的操作系统都支持拖拽打开文件的方式,你也可以先开启你常用的浏览器,比如火狐,然后将这个文件拖拽到火狐里打开。你将能看到浏览器里也显示了『Hello world』。

这说明,HTML 本质上也是一个文本文档,并且是在浏览器里显示的文档。

而我们所能看到的几乎所有的『网页』,都是通过 HTML 来描述的,所以网页即是 HTML 文档

估计大家会好奇,我浏览过的网页可比这好看多了,这是怎么做到的呢?

我们重新打开记事本,并且将 index.html 文件拖到记事本里打开,将之前的文本内容改成:

<h1>Hello world</h1>

切回到浏览器刷新,你会发现 <h1> 并没有显示出来,但 Hello world 变大了。

<h1> 在 HTML 里,叫做『标签』,英文叫 tag。HTML 是一种『标记语言』,『标记』什么呢?标记的是『语义』,即给予内容更多的含义。回到例子。一开始我们只写了一个 Hello world,此时 HTML 文档跟一般文档一样,只包含一个普通的文本;而在文本两边加上 <h1>...</h1> 『标签』之后,Hello world 即被『标记』成了『头号标题』的含义。可能大家能猜到,h1 标签是头号标题,那是不是还有 h2?没错,还有 h3h4 直到 h6。有兴趣可以替换一下例子中的 h1 标签试试,注意标签都是前后成对出现的,包括开启和结束(结束比开启多了一个 /,一定要留意不能漏),修改的时候需要同时改前后两处地方。

这里要说明一下,h1 显示得比一般文本要大,可能字体和粗细都有变化,这些行为都是因为你所使用的浏览器的开发商觉得,头号标题就应该这么显示而已,不同的浏览器之间的显示方式不一定一样,甚至有的浏览器还提供可以让用户自己修改浏览器默认样式的功能。

强调这个细节的主要目的,是为了跟大家明确一个概念:HTML 的标签仅用来表示内容或者『数据』本身,而不应该用来表示『样式』。虽然不是强制规定,却是一个应该遵从的规范,而好的代码规范往往能避免一些意想不到的问题。样式,或者说展示方式,是由各种因素决定的,比如 『CSS』(后面会说到),比如浏览器自己定义的样式。如果有盲人用户访问你的网站,他或她访问你的网页时,展示方式甚至都不是画面,而是通过盲人专用浏览器,利用语音告诉用户,你某个文本是个头号标题,你某些文本是段落。切记,HTML 只应关心内容或者数据本身。强调这句话是因为我遇到很多从业人员都容易犯这个错,比如觉得使用 h2 标签后的字体大小更符合设计稿,把本来应该是头号的标题改成了 2 号标题;更常见的用折行或者空格来增加某些显示元素之间的间距。其实这些显示相关的工作,都应该是 CSS 负责。

上文中出现的 CSS 是我们后面要接触的一个知识点,这里不展开讨论,只用知道 CSS 专门用于定义网页的展现的编程语言即可。

我们还是回到需求上来。先将下面代码覆盖 index.html 原有内容,然后刷新页面看看效果。请注意要好好阅读注释里面的内容。在 HTML 中,我们用 <!-- xxx ---> 来表示『注释』。所有计算机语言都有注释,作用仅为在源代码里给开发者查看,而无任何别的作用,所以 HTML 的注释将不会出现在页面里:

<!DOCTYPE html>
<html><!-- 无实际意义,但一个合法的 HTML 文档就应当包含 html 标签,以及第一行的申明,下一章会解释 -->
  <!-- 另外这里可以看到,标签的特点:标签有首有尾,尾比首多一个 /;另外标签是可以嵌套的 -->
  <head><!-- head 表示不会显示在页面里的『头部』内容,虽然不显示但会提供很多有用的信息 -->
    <!-- 作为 head 信息的第一个例子,title 的内容会显示在浏览器的标题栏上,并且 title 对搜索引擎收录网页有极大影响,以后会专门讨论 -->
    <title>任务列表</title>
  </head>
  <body><!-- body 表示会显示在页面里的『正文』内容 -->
    <ul><!-- ul 表示列表 -->
      <!-- li 表示列表中的一项 -->
      <li>这是第一个任务</li>
    </ul>
  </body>
</html>

可能有人会注意到代码里有的行开头会有几个空格,但前面不是说不能用空格来表示间隔吗?其实这些空格只是用来给开发者看的,能更容易看出标签和标签的嵌套关系来,而这些空格在页面上都是不会显示的,大家可以自己多打几个空格试试看看页面是否有变化。其实在所有的计算机语言里都会用这种方式方便开发人员浏览代码,甚至有专门用来描述它的名词,叫『缩进』(indent)。代码的嵌套关系越深,缩进数量就越多。前面说到 HTML 代码里的空格不是真的空格,而表示内容的空格,在 HTML 里,得写成 &nbsp;,这又涉及到开发常见的另外一个概念,叫『转义』。不过这些现在大家都可以不用关心,知道有这么个概念就行了。

这里再多说一点跟团队相关的话题:编码规范的统一。

比如上面的 HTML 代码,我的缩进用的是两个空格,可能有的人喜欢四个空格。如果一个项目就一个人写,那怎么舒服怎么来;但在团队里就不能这样了,你得照顾团队共同的感受。一个团队的代码,就应当看上去像是一个团队写出来,而不是 n 个人写出来的。

用记事本写代码是比较麻烦的事情,缩进敲空格就让人想放弃编程。好在有更专业的代码编辑器提供了很多辅助功能,比如 Sublime TextAtom 等,用起来更加得心应手,事半功倍。有的甚至提供了跟项目管理有关的功能,叫做 IDE(Integrated Development Environment,继承开发环境,听起来就挺庞大的,常见的有 EclipseNetBeansVisual Studio 等),但对于入门来说,并不推荐这些大型 IDE,因为功能太多会导致注意力的分散,入门时还是应当先关注代码内容本身。但无论使用什么代码编辑器,都会提供编码规范相关的设置,比如一个缩进是 tab 还是空格,如果是空格应该是多少格,回车是用 Unix 风格还是 Windows 风格,文本默认编码是 UTF-8 还是 GBK……刚才提到的这些设置,对写代码来说还是很重要的,像文件编码会直接影响网页里中文是否能正确显示。这里先不展开解释这些概念,后面都会说,建议先设置好自己的编辑器默认编码是 UTF-8,并且回车是 Unix 风格(\n)。

本章完整代码可点此查看。

人人都能看懂的全栈开发教程——HTML by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

写作累,服务器还越来越贵
求分担,祝愿好人一生平安
天使打赏人

发表评论

+ 21 = 26