HTML学习笔记（1）：HTML基础

October 04, 2021 3896

Web标准

Web标准：制作网页要遵循的规范。

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

Web标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
行为标准（JS）：用于定义网页的交互和行为。

根据上面的Web标准，可以将 Web前端分为三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

浏览器

浏览器的组成

渲染引擎（浏览器内核）

浏览器所采用的“渲染引擎”也称之为“浏览器内核”，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

渲染引擎是浏览器兼容性问题出现的根本原因。

渲染引擎的英文叫做Rendering Engine。通俗来说，它的作用就是读取网页内容，计算网页的显示方式并显示在页面上。

目前全球仅有四个独立的浏览器内核，分别为微软IE的Trident、火狐的Gecko、KDE的开源内核Webkit以及Opera的内核Presto。其中，Presto是历史最悠久的内核。

Chrome浏览器使用的内核是Blink（基于Webkit研发），IE浏览器使用的内核为Trident。

JS引擎

JS引擎也称为 JS 解释器。用来解析网页中的JavaScript代码，对其处理后再运行。

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。

浏览器工作原理

浏览器由以下部分组成：

User Interface：用户界面，我们所看到的浏览器。
Browser engine：浏览器引擎，用来查询和操作渲染引擎。
Rendering engine：用来显示请求的内容，负责解析HTML、CSS。
Networking：网络，负责发送网络请求。
JavaScript Interpreter（解析者) ：JavaScript解析器，负责执行JavaScript的代码。
UI Backend：UI后端，用来绘制类似组合框和弹出窗口。
Data Persistence（持久化）：数据持久化，数据存储 cookie、HTML5中的sessionStorage。

HTML

概念

HTML 全称为HyperText Markup Language，即超文本标记语言。

HTML 不是一种编程语言，是一种描述性的标记语言。HTML是负责描述文档语义的语言。

所谓的超文本，有两层含义：

图片、音频、视频、动画、多媒体等内容，称为超文本，因为它们超出了文本的限制。
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：

标记语言是一套标记标签。比如：标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属于 HTML 标签。通俗一点说就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

HTML 格式的文件是一个纯本文文件，用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。

需要额外注意的是，HTML负责描述文档语义，比如，<h1> 标签有什么作用？

正确答案：给文本增加主标题的语义。
错误答案：给文字加粗、加黑、变大。

名词

HTML有关的名词概念有很多：

网页：由各种标记组成的一个页面就叫网页。
主页（首页）：一个网站的起始页面或者导航页面。
标记：比如<p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：比如<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
XHTML：符合XML语法标准的HTML。
DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

XHTML

XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。 XHTML的主要目的是为了取代HTML，也可以理解为HTML的升级版。 HTML的标记书写很不规范，会造成其它的设备（ipad、手机、电视等）无法正常显示。 XHTML与HTML4.0的标记基本上一样。 XHTML是严格的、纯净的HTML。

HTML结构

HTML骨架

一个HTML页面的主要骨架为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

在vscode中可以使用“html:5”通过Emmet展开而成。

声明头

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……>开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。

DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如HTML4或HTML5。HTML4.01这个版本是IE6开始兼容的。HTML5是IE9开始兼容的。如今，手机、移动端的网页，就可以使用HTML5了，因为其兼容性更高。

对于以下声明头：

1	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

是一个HTML4.01或XHML1.0的声明头，其中“XHTML 1.0”可选为“HTML 4.01”或“XHTML 1.0”，“Transitional”字段可选为“Strict”“Transitional”“Frameset”。

而在HTML5中就没有XHTML了，因此HTML5中极大的简化了DTD。HTML5的DTD如下：

1	`<!DOCTYPE html>`

HTML的规范

HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。

HTML页面的后缀名是html或者htm（有一些系统不支持后缀名长度超过3个字符，比如dos系统）。

编写XHTML的规范：

所有标记元素都要正确的嵌套，不能交叉嵌套。
所有的标记都必须小写。
所有的标签都必须闭合。
所有的属性值必须加引号。<font color="red"></font>
所有的属性必须有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
XHTML文档开头必须要有DTD文档类型定义。

HTML的基本语法特性：

（1）HTML对换行不敏感，对tab不敏感：

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。

比如百度为了追求极致的显示速度，所有HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。

（2）空白折叠：

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

（3）标签要严格封闭：

标签不封闭的结果往往是灾难性的。

注释

HTML使用如下的格式来使用注释：

1	`<!-- 我是 html 注释 -->`

* 你好，我是大森。如果文章内容帮到了你，你可通过下方付款二维码支持作者 *