Frontend Learning

HTML详解

HTML详解

前言

之前的HTML 基础知识入门文章中我已经介绍了HTML的基础知识，在本文中我会进行更详细的讲解。

HTML 概述

先来回顾一下HTML的概念，HTML全称为超文本标记语言(Hyper Text Markup Language),是构建网页和Web应用的标准标记语言，超文本（hypertext）是指连接单个网站内或多个网站间的网页的链接标记(markup)用来注明文本、图片和其他内容。HTML使用一系列标签和属性来定义网页的结构和内容,包括文本、图像、链接、表格、表单等元素。浏览器通过解析HTML代码,将其渲染为用户可以看到和交互的网页界面。需要明确的是HTML本身并不是一种编程语言，而是标记语言,它主要用于描述网页的结构和内容,而不是实现逻辑和功能。HTML通常与CSS(层叠样式表)和JavaScript一起使用,以实现网页的样式和交互功能。

HTML 的基本结构

在之前的HTML 基础知识入门中我们已经介绍了 HTML 的基本结构,并简单讲解了一些基本标签，下面我将更详细地讲解HTML的基本结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML详解</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
    </style>
</head>
<body>

</body>
</html>

DOCTYPE

DOCTYPE是HTML5的文档声明，它可以告诉浏览器，使用哪一个HTML版本解析文档。在浏览器发展的过程中出现过很多HTML的版本，如果没有提前告诉浏览器，那么浏览器就不知道文档解析标准是什么。此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

html

<html>标签是HTML文档的根元素，所有其他HTML元素都必须包含在<html>标签内。lang属性指定了文档的语言，这对于搜索引擎优化(SEO)和辅助技术(如屏幕阅读器)非常重要。在这里，zh-CN表示中文(中国大陆)。常见的还有en(英语)、fr(法语)、es(西班牙语)等。

<head>标签包含了文档的元数据(metadata)，这些信息不会直接显示在网页上，但对网页的功能和表现非常重要。常见的元数据包括字符集声明、页面标题、样式表链接、脚本文件链接等。meta就是元，data就是数据，元数据是用来描述数据的数据，如一个数据200，我们并不知道这个数据代表什么，但是体重：200，我们就可以知道这个数据代表体重200斤，其中的体重就是元数据，它用来描述200这个数据。下面来详细介绍几个常用的元数据标签以及标签中属性的含义。

meta

<meta>标签用于定义文档的元数据，如字符集、作者、描述等。<meta>常见的属性有：

  1. charset：指定文档的字符编码，如<meta charset="UTF-8">表示使用UTF-8编码，这是一种支持多种语言字符的编码方式，推荐使用。

  2. name和content：name属性主要用于描述网页，与其搭配使用的content属性用于提供具体的信息,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的,常见的name属性有：

    • description：网页的简要描述，有助于搜索引擎理解网页内容，如<meta name="description" content="这是一个HTML详解的网页">。
    • keywords：网页的关键词列表，多个关键词用逗号分隔，如<meta name="keywords" content="HTML,详解,网页">。
    • author：网页的作者信息，如<meta name="author" content="张三">。
    • robots：用来告诉搜索引擎是否索引该页面及其链接，如<meta name="robots" content="index, follow">表示允许索引和跟踪链接。
    • viewport：用于控制网页在移动设备上的显示和缩放行为，如<meta name="viewport" content="width=device-width, initial-scale=1.0">表示网页宽度与设备宽度相同，初始缩放比例为1。

title

<title>标签定义了网页的标题，这个标题会显示在浏览器的标签页上，也是搜索引擎结果中的标题。一个好的标题有助于吸引用户点击。

<link>标签用于定义与文档相关的外部资源，如样式表、图标等。常见的用法包括： - 引入CSS样式表：<link rel="stylesheet" href="styles.css"> - 定义网页图标：<link rel="icon" type="image/x-icon" href="favicon.ico">

style

<style>标签用于定义文档的内部样式，通常包含CSS代码。与<link>标签不同，<style>标签直接在HTML文档中定义样式，而不是引用外部样式表。css的引用方式有三种，分别是内联样式、内部样式和外部样式，<style>标签属于内部样式。本本就不详细介绍css的内容，这里只做简单说明。

body

<body>标签包含了网页的主要内容，这些内容会直接显示在浏览器中。所有可见的网页元素，如文本、图像、链接、表格等，都必须包含在<body>标签内。

语义化标签

在之前的HTML 基础知识入门文章中我已经介绍了HTML的基本标签，所以在本文就不再赘述。在HTML5中引入的语义化标签，这是HTML5的重要特性，下面我将介绍一些常用的HTML语义化标签：

  • header：定义文档或节的头部区域，通常包含标题、导航链接等内容。
  • nav：定义导航链接的区域，通常包含网站的主要导航菜单。
  • main：定义文档的主要内容区域，通常包含页面的核心内容。
  • section：定义文档中的一个独立区域，通常包含相关内容的集合。
  • article：定义独立的内容块，如博客文章、新闻报道等。
  • aside：定义与主内容相关的侧边栏内容，如广告、推荐文章等。
  • footer：定义文档或节的底部区域，通常包含版权信息、联系信息等内容。

使用语义化标签有助于提高网页的可读性和可维护性，同时也有助于搜索引擎优化(SEO)和辅助技术的支持。

块级元素与行内/行内块

在HTML中，元素可以分为块级元素(block-level elements)和行内元素(inline elements)以及行内块元素(inline-block elements)三大类。这两类元素在网页布局和显示方式上有显著的区别。

块级元素

块级元素通常会占据其父元素的整个宽度，并且在其前后会自动换行。块级元素可以包含其他块级元素和行内元素。常见的块级元素有： - <div>：用于定义一个容器，可以包含其他元素。 - <p>：用于定义段落。 - <h1>至<h6>：用于定义标题，<h1>表示最高级别的标题，<h6>表示最低级别的标题。 - <ul>和<ol>：用于定义无序列表和有序列表。 - <li>：用于定义列表项。 - <table>：用于定义表格。

行内元素

行内元素不会占据整个宽度，只会占据其内容所需的宽度，并且不会在其前后换行。行内元素通常只能包含文本或其他行内元素。常见的行内元素有： - <span>：用于定义一个行内容器，可以包含文本或其他行内元素。 - <a>：用于定义超链接。 - <strong>：用于定义重要的文本，通常以粗体显示。 - <em>：用于定义强调的文本，通常以斜体显示。 - <img>：用于嵌入图像。

行内块元素

行内块元素结合了块级元素和行内元素的特性，它们在文档流中表现为行内元素，但可以设置宽度和高度。常见的行内块元素有： - <button>：用于定义按钮。 - <input>：用于定义输入字段。 - <label>：用于定义表单控件的标签。

嵌套与转换

块级元素和行内元素可以嵌套使用，但需要遵循一定的规则。例如，块级元素不能嵌套在行内元素内，而行内元素可以嵌套在块级元素内。块级元素和行内元素之间也可以转化，例如通过CSS的display属性将块级元素设置为行内元素，反之亦然。

将块级元素转化为行内元素：

1
2
3

div {
    display: inline;
}

将行内元素转化为块级元素：

1
2
3

span {
    display: block;
}

把元素设置为行内块元素：

1
2
3

button {
    display: inline-block;
}

媒体与图形

多媒体元素

HTML5引入了多媒体元素，使得在网页中嵌入音频和视频可以不再依赖外部插件。下面我将介绍HTML中的多媒体元素：

audio

用于在网页中嵌入音频文件。常见的属性有src(指定音频文件的URL)、controls(显示音频控件)、autoplay(自动播放音频)、loop(循环播放音频)等。例如：

1

<audio src="audio.mp3" controls></audio>

video

用于在网页中嵌入视频文件。常见的属性有src(指定视频文件的URL)、controls(显示视频控件)、autoplay(自动播放视频)、loop(循环播放视频)、width和height(指定视频的宽度和高度)等。例如：

1

<video src="video.mp4" controls width="600" height="400"></video>

source

用于为<audio>和<video>元素提供多个媒体资源，以便浏览器选择支持的格式。例如：

1
2
3
4
5

<video controls width="600" height="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

Canvas 与 SVG

HTML5引入了<canvas>和<svg>元素，用于在网页中绘制图形和矢量图形,。

canvas

<canvas>元素用于在网页中绘制位图图形。它提供了一个绘图区域，可以通过JavaScript使用Canvas API进行绘图操作。常见的属性有width和height(指定画布的宽度和高度)。例如：

1
2
3
4
5
6
7

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 600, 400);
</script>
  • getContext("2d")方法用于获取2D绘图上下文，可以使用该上下文对象进行绘图操作。
  • fillStyle属性用于设置填充颜色。
  • fillRect(x, y, width, height)方法用于绘制一个填充矩形。

svg

<svg>元素用于在网页中嵌入可缩放矢量图形。SVG是一种基于XML的图形格式，可以通过SVG标签和属性定义图形元素。常见的SVG元素有<circle>(圆形)、<rect>(矩形)、<line>(直线)、<path>(路径)等。例如：

1
2
3

<svg width="600" height="400">
    <circle cx="300" cy="200" r="100" fill="blue" />
</svg>
  • cx和cy属性指定圆心的坐标。
  • r属性指定圆的半径。
  • fill属性指定填充颜色。

因为canvas和svg的内容较多且涉及的知识较复杂,在本文就不再详细介绍,后续我会单独写文章进行讲解。

浏览器能力：存储与实时通信

本地存储与会话存储

HTML5引入了本地存储(Local Storage)和会话存储(Session Storage)两种机制，用于在用户浏览器中存储数据。这些存储机制允许网页在用户关闭浏览器后仍然保留数据，提供更好的用户体验。下面我将介绍HTML5的本地存储：

本地存储(Local Storage)

本地存储允许网页在用户浏览器中存储数据，数据没有过期时间，除非用户手动清除，否则数据会一直保留。常用的方法有： - localStorage.setItem(key, value)：存储数据。 - localStorage.getItem(key)：获取数据。 - localStorage.removeItem(key)：删除数据。 - localStorage.clear()：清空所有数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 存储数据
localStorage.setItem("username", "张三");

// 获取数据
let username = localStorage.getItem("username");
console.log(username); // 输出: 张三

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

会话存储(Session Storage)

会话存储与本地存储类似，但数据只在当前浏览器会话中保留，关闭浏览器窗口或标签页后数据会被清除。常用的方法与本地存储相同： - sessionStorage.setItem(key, value)：存储数据。 - sessionStorage.getItem(key)：获取数据。 - sessionStorage.removeItem(key)：删除数据。 - sessionStorage.clear()：清空所有数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 存储数据
sessionStorage.setItem("username", "张三");

// 获取数据
let username = sessionStorage.getItem("username");
console.log(username); // 输出: 张三

// 删除数据
sessionStorage.removeItem("username");

// 清空所有数据
sessionStorage.clear();

Web Workers 与 WebSockets

HTML5引入了Web Workers和WebSockets两种技术，用于提升网页的性能和实时通信能力,这也是HTML5的重要特性之一。

Web Workers

Web Workers允许网页在后台线程中运行JavaScript代码，从而避免阻塞主线程，提高网页的响应速度。常用的方法有： - 创建Worker：let worker = new Worker("worker.js")。 - 发送消息：worker.postMessage(data)。 - 接收消息：worker.onmessage = function(event) { ... }。 - 终止Worker：worker.terminate()。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// main.js
let worker = new Worker("worker.js");
worker.postMessage("Hello, Worker!");
worker.onmessage = function(event) {
    console.log("Received from worker: " + event.data);
};
// worker.js
onmessage = function(event) {
    let result = event.data + " - Processed by Worker";
    postMessage(result);
};

WebSockets

WebSockets提供了一种在客户端和服务器之间进行双向通信的机制，允许实时数据传输。常用的方法有： - 创建WebSocket连接：let socket = new WebSocket("ws://example.com/socket")。 - 发送消息：socket.send(data)。 - 接收消息：socket.onmessage = function(event) { ... }。 - 关闭连接：socket.close()。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let socket = new WebSocket("ws://example.com/socket");
socket.onopen = function(event) {
    socket.send("Hello, Server!");
};
socket.onmessage = function(event) {
    console.log("Received from server: " + event.data);
};
socket.onclose = function(event) {
    console.log("WebSocket connection closed.");
};

Web Workers和WebSockets的内容较多且涉及的知识较复杂,在本文就不再详细介绍,后续我会单独写文章进行讲解。

结语

HTML构成了Web世界的一砖一瓦，是每个前端开发都必须掌握的基础知识。HTML看似简单，实际上可深挖的内容很多，本文也并不能涵盖所有细节，所以有些知识需要自己去学习，在一些公司的面试中也会问到关于HTML的相关问题，所以掌握好HTML是非常有必要的。

参考资料

Licensed under CC BY-NC-SA 4.0