从零开始学前端 - 1. HTML基础知识

最新推荐文章于 2024-04-23 13:38:37 发布

她不美却常驻我心

最新推荐文章于 2024-04-23 13:38:37 发布

阅读量714

点赞数 3

分类专栏：从零开始学前端 HTML 文章标签： html javascript css vue.js node.js

本文链接：https://blog.csdn.net/qq_39506551/article/details/106062868

版权

从零开始学前端同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

一、HTML 发展历史

点这里查看发展历史
互联网及HTML的发展历史，在闲暇之余当成历史故事读一读就好，没必要强迫自己背下来，但一些关键内容还是需要记住，不然将来与别人谈起，怎么好意思说自己是从事互联网相关工作的。

二、HTML 基本骨架

如图所示，我们可以发现：一个HTML页面主要是由四个部分组成的。

HTML 基本骨架

1. 文档声明

<!DOCTYPE html>是一个文档声明，它并不是 HTML标签。它为浏览器提供一个声明，告知浏览器这是一个 HTML 页面以及 HTML 的版本，避免每个浏览器以各自不同的标准来解析。
假设一个页面并未设置该声明，那么浏览器将按照 “怪异模式” 进行解析，只有设置了该声明之后，浏览器才会按照 “标准模式” 解析网页。

注：a) 怪异模式：BackCompat ，浏览器按照自己的标准来解析渲染页面。
b) 标准模式：CSS1Compat，浏览器按照W3C的标准来解析渲染页面。

2. html 标签

<html></html> 标签限定了文档的开始点（）和结束点（），在它们之间是文档的头部和主体。在实际开发中，我们会常常看到以下几行代码：

	<html lang="en">

这行代码向浏览器表示该页面是 HTML ，并且语言为英文的网站，其 “lang” 是 “language”的缩写，语言的意思。 “en” 表示 english ，如果你的页面如果是中文页面，可将其改为 <html lang="zh">，zh 即表示中文。

	<html xmlns="http://www.w3.org/1999/xhtml">

xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。它的作用是告诉浏览器，当前页面按照 W3C 的 XHTML 标准。

3. head 标签

head 标签是网页的头部，以 <head> 开始，以 </head> 结束。它是所有头部元素的容器，通过其中元素来描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。一般来说，只有六个标签能放在 head 标签内：

3.1 title 标签

title 标签的作用就是定义页面的标题。

3.2 meta 标签

meta 标签一般用于定义页面的特殊信息，并不提供给用户观看。例如说页面的编码格式，目的是为了告诉浏览器解析时应该使用的编码格式，页面的关键字和描述信息，其目的是为了便于搜索引擎抓取相关信息；

meta 标签拥有很多的属性，但在实际开发PC端网页时，我们最常用到如下所示，也就是说，我们目前只需要记住以下几个属性即可，其他的属性暂时不用费心。

	<meta charset="UTF-8">  
	<!-- 定义页面的编码格式为 UTF-8 -->
	<meta name="keywords" content="该页面的关键字">
	<!-- 定义页面的关键字 -->
	<meta name="description" content="该页面的描述信息">
	<!-- 定义页面的描述信息 -->

注： UTF-8 包含全世界所有国家需要用到的字符， GBK 和 GB2312 主要用于汉字的编码。一般如果我们制作的网页的时候都会采用 UTF-8 的编码格式，如果打开网页出现乱码情况，基本都是因为未设定或者编码格式设置错误的问题。

3.3 style 标签

style 标签用于定义 HTML 元素的 CSS 样式，在实际工作中，我们经常使用 link 标签引入外部的 CSS 文件，所以对该标签不需要深入研究。

3.4 link 标签

link 标签用于引入外部 CSS 文件。

3.5 script 标签

script 标签内填写的是 JavaScript 代码，既可以在标签内直接填写，也可以引入外部的 JavaScript 文件。

3.6 title 标签

       base 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
       通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a> <img> <link> <form> 等标签中的 URL。
       在一个页面内，最多使用一个该标签。

4. body 标签

在一个页面中，head 标签表示的是页面的“头部”，其中的内容大部分是不可见的。而body 标签表示的是页面的身体，其中的内容则是用户可以直接看到的内容。接下来我们要学习的其他标签，都是位于 body 标签内部的。
例如我们创建一个 html 文档，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>少年中国说</title>
</head>
<body>
    <h1>少年中国说</h1>
    <p>红日初升，其道大光。河出伏流，一泻汪洋。</p>
    <p>潜龙腾渊，鳞爪飞扬。乳虎啸谷，百兽震惶。</p>
    <p>鹰隼试翼，风尘翕张。奇花初胎，矞矞皇皇。</p>
    <p>干将发硎，有作其芒。天戴其苍，地履其黄。</p>
    <p>纵有千古，横有八荒。前途似海，来日方长。</p>
    <p>美哉我少年中国，与天不老！</p>
    <p>壮哉我中国少年，与国无疆！</p>
</body>
</html>

浏览器预览效果如下所示：
在这里插入图片描述

三、HTML 注释

被称为 HTML 注释，以 " <!-- " 开始，以 " - -> " 结束，在其中的内容并不会被浏览器显示到页面上。注释信息并不是给浏览器或者用户看的，而是面向开发人员。
       在实际开发中，一个页面的代码往往都是几百上千行的，而一个项目中，又拥有多个页面。这个时候，我们就需要用到注释来对关键的部分进行相应的解释或者标注。注释的好处多多，比如说方便查找，也可以让同一个项目组的同事快速理解你的代码。
       如果没有注释，时间长了，自己都有可能看不懂自己过去写过的代码，特别是在团队开发中，如果同事来维护自己的项目时，由于没有注释的原因，往往会花大量的时间来理解代码。所以说：使用对代码注释是一个良好的习惯。

四、HTML 基本语法

1.空格、换行、缩进。

HTML 只在乎标签的嵌套结构和关系。谁嵌套了谁，谁被谁嵌套了。浏览器解析 HTML 文件时，会忽略掉换换行和缩进，并不影响页面的结构。也就是说，HTML 不是依靠缩进来表示嵌套的，而是看标签的包裹关系。但是，我们发现如果有良好的缩进，代码的可读性会更强，所以要求大家在开发时要有良好的书写习惯，正确缩进代码。
但在项目上线，发布到服务器时，考虑节约服务器的存储空间和带宽，一般都会使用代码打包工具对完成的代码进行打包，对浏览器而言标签的层次依然清晰，只不过程序员不可读了。例如说百度首页的代码：
百度首页html部分

2. 标签闭合原则

所有标签都是放在 <> 尖括号里的，成对出现，且必须闭(开始&结束标签)。
例：<html></html>

3. 单标签

有些特殊标签没有相对应的标签，我们一般称为单标签、自闭合标签等。
例： <br/>

4. 属性

所有标签本身都具有一个或多个属性，写法：属性名=”属性值” 多个属性用空格隔开。
例：<meta charset="UTF-8"> charset 是属性名，UTF-8 是属性值。

5. 标签嵌套原则

在 HTML 中所有的标签都可以相互嵌套的，但嵌套要合理，且闭合时要严格按照嵌套顺序进行闭合。

6. 注释标签不可相互嵌套。

7. 书写规范

写标签时应该小写、属性值双引号、嵌套缩进。遵循代码清晰的原则，便于维护。

8.语义化原则

       语义化，顾名思义，就是用相对应的、有一定语义的标签来表示 HTML 的结构，且 HTML本身就是标记语言。
注：语义化的优点：
        a) 增强可读性，对开发者更友好，在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构，便于团队的开发和维护。
        b) 有利于 SEO ，可以让搜索引擎爬虫更好地获取到更多有效信息，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网页的搜索量。
        c) 支持读屏软件，方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

五、常见浏览器及内核

图标	名称	内核
	谷歌浏览器 Chrome	以前是Webkit内核，现在是Blink内核
	火狐浏览器 Firefox	Gecko内核，俗称Firefox内核
	苹果浏览器 Safari	Webkit内核
	IE浏览器 IE	Trident内核，也是俗称的IE内核
	欧朋浏览器 Opera	最初是自己的Presto内核，后来是Webkit，现在是Blink内核
	edge浏览器	最初是 EdgeHtml 内核，现在换成了 chrome 内核

目前国内大部分浏览器均采用 IE + Chrome 双内核模式，在其基础上进行了相应的二次开发。例如说 360 浏览器，QQ 浏览器等。普通兼容模式使用 Trident 内核，急速模式使用 Chrome 内核。

在这里插入图片描述

六、开发工具

1. Visual Studio Code

微软出厂的跨平台编辑器，完全免费。加载大文件几乎秒开，运行速度很快，拥有很多插件，且查找安装方便，如果只是编写前端代码的话，其对插件依赖较小，集成的功能基本上够用。debug 功能强大，在Nodejs调试中十分方便，也是作者一直使用的前端 IDE。

2. Sublime Text

作者本人从来没有使用过 Sublime ，所以不多加介绍。听同事的简单介绍它是一款轻量、简洁的跨平台的编辑器。支持N多种语言，很多人都偏爱它。作为web学习者，我觉得不用在编辑器的选择上太费周章，选一款你中意的就行，一般不会有团队强求所有人使用一样的 IDE。

3. HBuilder

国人自主开发的一块编辑器，中文界面，免费且提示功能强大，支持H5项目云打包，内置 mui 的项目模板，十分适合新手使用。可惜早年使用的时候运行较大项目时卡顿严重，不知道目前的优化程度如何，后续推出的 HBuilder X 也没有使用过。

4. WebStorm

与 Java 开发神器 IntelliJ IDEA 师出同门也被成为 Web 前端的开发神器，集成了许多强大的功能，非常丰富，基本无须安装插件，可以自动保存代码，而且可以在整个项目中搜索代码，更改文件名时，也会友好的对你提示会对那些地方造成影响。
但是因为集成的功能过于丰富，对电脑的要求也高。配置比较低的话，打开速度慢，打开大文件的速度也不尽人意。打开多个项目的话，内存占用会大幅上升。尽管如此，也从来没有造成过什么损失，最多只是重启一下。
所以一般电脑上安装这个编辑器（开发使用），一般还要安装一个轻量级的编辑器（打开单个文件使用）作为辅助使用。
最重要的一点是该编辑器收费，但是网上也有很多激活码和破解版。