html_01 | HTML——① HTML 基础

时间 2019-11-06

标签 html 基础栏目 HTML 繁體版

原文原文链接

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

html_01
复制代码

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；但是尚未电，没有水怎么办？——造发电机、兴修水力发电站（PHP 等）；但是依旧没水没电——修水库，引入水源，进行水力发电（MySQL 等）。那接下来的系列文章，就开始咱们的打地基建房子，而后作个硬装修。html

1 认识 HTML

在《老生常谈的从 URL 输入到页面展示背后发生的事》一文中，咱们认识到了网络工做的整个流程，也知道了咱们前端开发的主力点是在“MVC（model view controller）”中的“视图（view）”这一环。大体回顾下这篇文章：前端

从 URL 输入到页面展示通过如下过程：web

在浏览器输入 URL；
浏览器查找域名对应的 IP 地址；
浏览器根据 IP 地址与服务器创建联系；
浏览器与服务器通讯：浏览器请求，服务器处理请求并呈现页面。

而后咱们进行倒推：面试

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

第二，web 浏览器获得反馈后怎么去显示这个页面： HTML 是浏览器显示页面的关键，它会告诉浏览器页面的结构和全部内容。web 浏览器在读取服务器反馈的 HTML 文件时，它会翻译文本中的全部标记（告诉浏览器：标题放哪里，段落放哪里，哪些文本须要强调等等）。浏览器

2 动手写一个 HTML

任务：把如下图片用 HTML 写出来，并彻底熟悉每一个元素。

2.1 第一步：打开编辑器

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

2.2 第二步：分析结构

2.3 第三步：给文字加标记

<!--注释1-->    <!DOCTYPE html>
<!--注释2-->    <html>
<!--注释3-->     <head>
<!--注释4-->       <meta charset="utf-8">
<!--注释5-->       <title>Oli-Zhao的前端一万小时</title>
<!--注释6-->     </head>
<!--注释7-->     <body>
<!--注释8-->       <img src="HTML图片" alt="HTML首页图">
<!--注释9-->       <!--如下咱们来写这个页面-->
<!--注释10-->       <h1>《Oli-Zhao的前端一万小时》之:(1)HTML基础</h1>
<!--注释11-->         <p>本知识学习用时：2小时……</p>
<!--注释12-->         <p>前言：学习前端咱们有个比喻：先打地基……<br>
                       那接下来的系列文章，咱们开始咱们的……
<!--注释13-->         </p>
                   <h2>1、认识HTML</h2>
                    <p>在《Oli-Zhao的前端一万小时》之……</p>
<!--注释14-->     </body>
                </html>
复制代码

注释 1：

<!DOCTYPE html>
复制代码

每一个页面都要从 doctype 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML 。只要按照这样的格式和位置写，那么浏览器就会认为你在使用标准 HTML 。这样写的好处是：不用再像 HTML5 出来以前那样，既要写上 HTML 版本号，又要写上这个 HTML 文档所依据的标准是在什么位置。一劳永逸，以后无论 HTML 再怎么更新，咱们的文档均可以被浏览器以最正确的方式显示出来。服务器

注释 2：

<html>
复制代码

必须以 <html> 标记开始咱们的页面，以</html>标记结束，注意看，结束标记多了一个“/”。这整个包含开始标记+内容+结束标记的一个总体就称做一个“元素”。对于<html>元素，页面中的全部内容都嵌套在这个元素中。所谓“嵌套”：是指一个元素能够放在另外一个元素的里边（如同建房：整个房子是一个总体，入户门进去后，会有厨房、卫生间、客厅、卧室等个体，而主卧室里边可能还有一个衣帽间、一个厕所等）；网络

注释三、注释 7：

<head>

<body>
复制代码

只有 <head> 和 <body> 元素能直接放在 <html> 元素里。<head> 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——能够设置它的 meta、title，能够放 CSS，这些部分不会被用户看到。 <body> 里边放的是和页面内容相关的元素——即你想让用户看到的内容。编辑器

注释 4：

<meta charset="utf-8">
复制代码

“meta” 指的是咱们要告诉浏览器关于咱们页面的一些信息。 “charset” 是 <meta> 标记的属性，咱们的开始标记都是能够有属性的。这里，咱们要在 charset 属性中指定字符编码。 “utf-8”是 unicode 系列中的其中一个编码，这个编码是互联网上使用最普遍的一种 unicode 的实现方式。它是为传输而设计的编码，并使编码无国界，这样就能够显示世界上全部文化的字符了——无论字母、数字仍是中文、阿拉伯文等等。

⚠️“乱码”详细缘由：

当咱们保存一个写好的 HTML 文件，编码方式会保存为 UTF-8 ；
一个文件就是一堆的数据，即咱们写的内容变成了一堆的数据。那这个数据究竟是变成了 123，仍是 456 呢？
这里咱们就用到了“编码”，用的编码方式不同，那么数据呈现的状态就不同；
而后，当咱们把这个以适当编码方式保存好的数据再次展现在浏览器页面上时（或用其余编辑器打开时），那这个数据还要再恢复出来；
那这时候，浏览器（或编辑器）须要使用相同的、与文件相对应的编码方式去解码（但浏览器不是万能的，你不告诉它，它就不知道用什么方式去解码，它会随意地选择）；
这时，当编码是一种方式，而解码又是另外一种方式时，页面就会出现“乱码”；
而解决乱码的方式就是：只须要知道我在编辑器保存这个 HTML 文件时，保存的是什么编码格式，而后在头部中告诉浏览器用什么方式来解码。
注释 5：

<title>Oli-Zhao的前端一万小时</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>《Oli-Zhao的前端一万小时》之:(1)HTML基础</h1>
复制代码

这里用一个 <h1> 开始标记，来讲明这句话是一个一级标题。咱们的标题能够往下分到 <h6> ，通常工做实际中，通常到 <h3> 。

注释 11：

<p>本知识学习用时：2小时……</p>
复制代码

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

注释 12：

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

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

注释 13：

</p>
复制代码

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

注释 14：

</body>
</html>
复制代码

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

2.4 第四步：存好关联文件

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

2.5 第五步：保存

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

2.6 第六步：完成并测试

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

🔗效果及源码连接

后记： 这篇的学习，咱们大体了解了 HTML 的基本结构，也写出了第一个能够在浏览器上展现的页面。下一篇，咱们就细讲 HTML 其余重要的元素（列表、超连接、表格、音视频等）以及对应的属性。

祝好，qdywxs ♥ you！