阅读 3546

(Ⅰ)正式推开“前端”的大门 | ① HTML 基础

原创:itsOli  @前端一万小时

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

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

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

 1. DOCTYPE 有什么作用?怎么写?
 2. 列出常见的标签,并简单介绍这些标签用在什么场景?
 3. 页面出现了乱码,是怎么回事?如何解决?
 4. title 属性和 alt 属性分别有什么作用?
 5. HTML 的注释怎样写?
 6. HTML5 为什么只写 <!DOCTYPE html> ?
 7. data- 属性的作用?
 8. <img> 的 title 和 alt 有什么区别?
 9. Web 标准以及 W3C 标准是什么?
10. DOCTYPE 作用? 严格模式与混杂模式如何区分?它们有何意义?
11. HTML 全局属性(Global Attribute)有哪些?

12. 以下哪种多媒体格式支持最广泛?
  ❌ .m3u8
  ✅ .mp4
  ❌ .wmv
  ❌ .flv
  ❌ .mov

13. 打开一个页面,发现页面出现了乱码,以下说法正确的是:
  ✅ 英文和数字不会出现乱码,中文可能会出现。
  ❌ 只要给 HTML 的 head 标签里加 <meta charset="UTF-8"> 就一定能解决乱码问题。
  ✅ 给 HTML 的 head 标签里加 <meta charset="UTF-8"> 不一定能解决乱码问题。
  ✅ 页面保存的时候用的是什么编码格式,就给 HTML 的 head 标签里 meta 的 charset 属性设置
     相同编码格式。

14. 关于浏览器乱码,以下说法正确的是?(不定项)
  ❌ 只要在 HTML 的 head 标签里设置 <meta charset="UTF-8"> 就一定能解决乱码问题。
  ✅ 用不合适的编辑器编辑文件,常常会出现乱码,比如 Windows 记事本。
  ✅ HTML 保存的时候需关注保存时的编码格式,保存什么格式,就设置 <meta charset="xxx"> ,
     其中 xxx 为保存文件时的编码格式。
  ❌ 如果 HTML 里只有英文和数字,一般不会出现乱码,所以 HTML 里没必要设置 charset 了。
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



前言: 学习前端我们有个不是很准确但比较形象的比喻~

  • 先打地基建房子——HTML;
  • 然后房子建好后进行硬装修——CSS;
  • 接着把门、窗户、自来水龙头、电灯开关、电灯等安装好——JavaScript;
  • ……

接下来的系列文章,我们就开始打地基建房子,然后做个硬装修。


1 认识 HTML

《从零基础到轻松就业 | 老生常谈的从 URL 输入到页面展现背后发生的事》一文中,我们认识到了网络工作的整个流程。大致回顾下这篇文章:

从 URL 输入到页面展现经过以下过程:

  • 在浏览器输入 URL;

  • 浏览器查找域名对应的 IP 地址;

  • 浏览器根据 IP 地址与服务器建立联系;

  • 浏览器与服务器通信:浏览器请求,服务器处理请求并呈现页面。

然后我们进行倒推:

第一,服务器处理请求并呈现页面: Web 服务器是一个全天 24 小时都在岗的先进劳模,它随时在准备处理来自 Web 浏览器发来的请求。一旦有请求,Web 服务器就会以适当的处理方式把装在它身体里的 HTML 文件(HyperText Markup Language 超文本标记语言)(每个服务器会存储 HTML 文件、图像、声音和其他类型的文件)反馈给 Web 浏览器。

第二,Web 浏览器得到反馈后怎么去显示这个页面: HTML 是浏览器显示页面的关键,它会告诉浏览器页面的结构和所有内容。Web 浏览器在读取服务器反馈的 HTML 文件时,它会翻译文本中的所有标记(告诉浏览器:标题放哪里,段落放哪里,哪些文本需要强调等等)。


2 动手写一个 HTML

  • ✅任务:把以下图片中的内容用 HTML 写出来,并完全熟悉每个元素。

2.1 第一步:打开编辑器

打开记事本/文本编辑器——初学的前半个月强烈建议用最简单的文本编辑工具把代码一个个敲出来。

2.2 第二步:分析结构

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>
复制代码
  • 注释 1:
<!DOCTYPE html>
复制代码

每个页面都要从 DOCTYPE 开始,它为浏览器指定这个页面的文档类型,以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写,那么浏览器就会认为你在使用标准 HTML。

这样写的好处是:不用再像 HTML5 出来之前那样,既要写上 HTML 版本号,又要写上这个 HTML 文档所依据的标准是在什么位置。一劳永逸,之后不管 HTML 再怎么更新,我们的文档都可以被浏览器以最正确的方式显示出来。

  • 注释 2:
<html>
复制代码

必须以 <html> 标记开始我们的页面,以 </html> 标记结束,注意看,结束标记多了一个“/”。这整个包含“开始标记 + 内容 + 结束标记”的一个整体就称作一个“元素”。 对于<html>元素,页面中的所有内容都嵌套在这个元素中。

所谓“嵌套”:是指一个元素可以放在另一个元素的里边(如同建房:整个房子是一个整体,入户门进去后,会有厨房、卫生间、客厅、卧室等个体,而主卧室里边可能还有一个衣帽间、一个厕所等);

❗️❗️❗️注意:在实际编写代码的过程中, <head></head> 和 <body></bode> 一般和 <html> 是平级放置的,并不需要严格嵌套。我在整个“前端一万小时”系列文章讲解中,除了个别需要强调 DOM 结构和方法的地方外,都是遵循以下结构的写法(这也是各代码编辑器默认的结构):

💡当然,你想严格按照嵌套的写法来编写 <head> 和 <body> 与 <html> 的层级关系,也完全可以:

  • 注释 3、注释 7:
<head>

<body>
复制代码

只有 <head><body> 元素能直接放在 <html> 元素里:

  • <head> 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title,可以放 CSS,这些部分不会被用户看到;
  • <body> 里边放的是和页面内容相关的元素——即你想让用户看到的内容。

下篇我们接着讲解剩下的“注释”。

祝好,qdywxs ♥ you!

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