阅读 1690

(Ⅱ)这样学 HTML 特简单 | ① HTML 基础

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有专栏「前端一万小时 | 从零基础到轻松就业」
复制代码


🔗紧接上篇文章

2.3 第三步:给文字加标记

<!DOCTYPE html> <!-- ❗️注释 1 -->
<html> <!-- ❗️注释 2 -->

<head> <!-- ❗️注释 3 -->
  <meta charset="UTF-8"> <!-- ❗️注释 4 -->
  <title>前端一万小时</title> <!-- ❗️注释 5 -->
</head> <!-- ❗️注释 6 -->

<body> <!-- ❗️注释 7 -->
  <img src="HTML 图片" alt="HTML 首页图"> <!-- ❗️注释 8 -->

  <!-- 以下我们来写这个页面 --> <!-- ❗️注释 9 -->
  <h1>① HTML 基础</h1> <!-- ❗️注释 10 -->
  <p>本知识学习用时:2 小时……</p> <!-- ❗️注释 11 -->
  <p>前言:学习前端我们有个比喻:先打地基……<br> <!-- ❗️注释 12 -->
    那接下来的系列文章,我们开始我们的……
  </p> <!-- ❗️注释 13 -->
  <h2>1 认识 HTML</h2>
  <p>在《Oli's 前端一万小时》之……</p>
</body> <!-- ❗️注释 14 -->

</html>
复制代码
  • 注释 4:
<meta charset="UTF-8">
复制代码

“meta” 指的是我们要告诉浏览器关于我们页面的一些信息。 “charset” 是 <meta> 标记的属性,我们的开始标记都是可以有属性的。这里,我们要在 charset 属性中指定字符编码。

“UTF-8”是 Unicode 系列中的其中一个编码,这个编码是互联网上使用最广泛的一种 Unicode 的实现方式。它是为传输而设计的编码,并使编码无国界,这样就可以显示世界上所有文化的字符了——不管字母、数字还是中文、阿拉伯文等等。

❗️️“乱码”详细原因:

  • 当我们保存一个写好的 HTML 文件,编码方式会保存为 UTF-8;

  • 一个文件就是一堆的数据,即我们写的内容变成了一堆的数据。那这个数据到底是变成了 123,还是 456 呢?

  • 这里我们就用到了“编码”,用的编码方式不一样,那么数据呈现的状态就不一样;

  • 然后,当我们把这个以适当编码方式保存好的数据再次展示在浏览器页面上时(或用其他编辑器打开时),那这个数据还要再恢复出来;

  • 那这时候,浏览器(或编辑器)需要使用相同的、与文件相对应的编码方式去解码(但浏览器不是万能的,你不告诉它,它就不知道用什么方式去解码,它会随意地选择);

  • 这时,当编码是一种方式,而解码又是另一种方式时,页面就会出现“乱码”;

  • 而解决乱码的方式就是:只需要知道我在编辑器保存这个 HTML 文件时,保存的是什么编码格式,然后在头部中告诉浏览器用什么方式来解码。


  • 注释 5:
<title>Oli's 前端一万小时</title>
复制代码

<head> 元素里,必须在正确的位置包含一个 <title> 元素(图上圈住的的都是我们“title”这个元素呈现出来的):

  • 注释 6:
</head>
复制代码

首部 <head> 元素结束标记。

  • 注释 8:
<img src="HTML 图片" alt="HTML 首页图">
复制代码

这里是一个  <img> 元素,img=image 图像。我们知道,HTML 页面是一个纯文本,图像是绝对无法作为页面的一部分直接显示出来的,都是通过外部引入(链接)的方式来展现。

我们浏览器在看到这个元素时,会做的处理不是像看到 <h1><p> 元素那样直接在页面上显示相关内容,而是需要先到 Web 服务器去获取这个图像,然后再显示出来。

💡Web 常用的图像格式有 JPEG、PNG 和 GIF:

  • JPEG:最适合保存照片和其他复杂图像;
  • PNG 或 GIF:最适合保存 LOGO 和其他包含单色、线条或文本的简单图形。

  • 注释 8 中: <img> 有两个必要的属性:src 和 alt。

    • src:它是 source 的缩写,意指这个图像来源自哪里(这后边可以放所在文件的路径,也可以是一个所在的 URL);
    • alt:这个属性主要是为了规避例如:因网速差、硬件设备限制等外部因素,我们的浏览器不能很好的显示出图像,那 alt 后边的文本将会取代图像告诉用户这里会是什么东西(参考后边最终的页面展现)。
  • 注释 9:

<!-- 以下我们来写这个页面 -->
复制代码

这个是用来写我们的注释的,便于我们阅读、修改等。这部分所有内容都不会被浏览器显示出来。

  • 注释 10:
<h1>① HTML 基础</h1>
复制代码

这里用一个 <h1> 开始标记,来说明这句话是一个一级标题。我们的标题可以往下分到 <h6> ,一般工作实际中,一般到 <h3>

  • 注释 11:
<p>本知识学习用时:2 小时……</p>
复制代码

“p” 是 “paragraph” 段落的意思。所以这里 <p> 开启一个段落。

  • 注释 12:
  <p>前言:学习前端我们有个比喻:先打地基……<br> <!-- ❗️注释 12 -->
    那接下来的系列文章,我们开始我们的……
  </p> <!-- ❗️注释 13 -->
复制代码

<br> 元素,是我们 HTML 中专门用来换行的元素。“br”=“break” 间断,换行的意思。 注意,如果一个元素没有任何实际内容,只有开始标记和结束标记。那么这个元素可以直接简写成一个开始标记。这样的元素我们叫他 “void 元素”——空元素,如:<br> 元素、<img> 元素等。

❗️注意:

  • HTML5 的规范中,自闭合标签不加斜杠,但兼容加斜杠的写法;
  • XHTML 严格要求自闭合标签中要加斜杠;
  • HTML 文件声明了 <!DOCTYPE html> 后,自闭合标签不需要再加斜杠。

(🏆总结:在具体的实战中,推荐都加上斜杠,如 <br /><img /><input /> 等!)


  • 注释 13:
</p>
复制代码

时刻不要忘记一个完整的元素包含哪些标记:元素 = 开始标记 + 内容 + 结束标记。

  • 注释 14:
  </body>
</html>
复制代码

整个身体元素结束,以及下边的整个 <html> 元素的结束。这都是不可或缺的标记。

2.4 第四步:存好关联文件

在你电脑喜欢的位置新建一个文件夹来存储我们练习中所有相关文件、图像等。

2.5 第五步:保存

把上边我们写的文档存储为 .html 格式文件,并记得编码方式为 UTF-8 。把这个文件保存在第四步建立的文件夹里。

2.6 第六步:完成并测试

用浏览器打开这个 HTML 文稿。对照第三步的注释再次学习,看看每个标记都在页面中对应的那个东西(❗️️这一步很重要!)。

🔗效果及源码链接


后记: 这篇的学习,我们大致了解了 HTML 的基本结构,也写出了第一个可以在浏览器上展示的页面。下一篇,我们就细讲 HTML 其他重要的元素(列表、超链接、表格、音视频等)以及对应的属性。

祝好,qdywxs ♥ you!

关注下面的标签,发现更多相似文章
评论