前端开发6项基础知识（掌握必备）HTML篇

六项基础知识：HTML、CSS、JavaScript、移动Web开发、调试、HTTP网络知识

第一种、HTML（11种）

常用的meta头有以下几种：

• 字符编码

HTML

<meta charset="UTF-8">

• 页面viewport

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 页面描述

HTML

<meta name="description" content="这是一个网页的描述">

• 关键词

HTML

<meta name="keywords" content="关键词1,关键词2,关键词3">

• 作者

HTML

<meta name="author" content="作者姓名">

• 版权

HTML

<meta name="copyright" content="版权信息">

• robots

HTML

<meta name="robots" content="index,follow">

• http-equiv

HTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

• Pragma

HTML

<meta http-equiv="Pragma" content="no-cache">

• Cache-Control

HTML

<meta http-equiv="Cache-Control" content="no-cache">

• Expires

HTML

<meta http-equiv="Expires" content="0">

 

字符编码

charset 属性用于指定网页的字符编码。默认情况下，HTML5 文档的字符编码是 UTF-8。

页面viewport

viewport 属性用于控制网页在移动设备上的显示方式。width=device-width 表示网页的宽度与设备的宽度相等。initial-scale=1.0 表示网页的初始缩放比例为 100%。

页面描述

description 属性用于指定网页的简短描述。该描述将显示在搜索结果中。

关键词

keywords 属性用于指定网页的关键词。该关键词将用于搜索引擎优化。

作者

author 属性用于指定网页的作者。

版权

copyright 属性用于指定网页的版权信息。

robots

robots 属性用于指示搜索引擎如何处理网页。index 表示允许搜索引擎索引网页。follow 表示允许搜索引擎跟随网页上的链接。

http-equiv

http-equiv 属性用于指定 HTTP 协议头。

Pragma

Pragma 属性用于指示缓存服务器如何处理网页。no-cache 表示不缓存网页。

Cache-Control

Cache-Control 属性用于指示浏览器如何缓存网页。no-cache 表示不缓存网页。

Expires

Expires 属性用于指定网页的过期时间。

常用meta头总结

属性	说明
charset	指定网页的字符编码
viewport	控制网页在移动设备上的显示方式
description	指定网页的简短描述
keywords	指定网页的关键词
author	指定网页的作者
copyright	指定网页的版权信息
robots	指示搜索引擎如何处理网页
http-equiv	指定 HTTP 协议头
Pragma	指示缓存服务器如何处理网页
Cache-Control	指示浏览器如何缓存网页
Expires	指定网页的过期时间

示例

HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个网页的描述">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="author" content="作者姓名">
<meta name="copyright" content="版权信息">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

第二种、通过对标签语义化的理解写出更加规范的代码 

标签语义化是指使用语义化的标签来表示网页的内容和结构。语义化的标签可以使浏览器和搜索引擎更好地理解网页的内容，从而提高网页的可用性和可访问性。

• 使用正确的标签来表示网页的内容和结构。
• 避免使用非语义化的标签，如 <div> 和 <span>。
• 为所有标签添加适当的属性。

例如，以下代码是使用语义化标签来表示一个网页的标题和正文：

HTML

<h1>这是一个网页的标题</h1>
<p>这是网页的正文</p>

这段代码比以下代码更规范：

HTML

<div>
<h1>这是一个网页的标题</h1>
<p>这是网页的正文</p>
</div>

此外，我还会使用以下方法来提高HTML代码的规范性：

• 使用缩进和空格来使代码更易读。
• 使用注释来解释代码。
• 使用最新的HTML标准。

通过遵循这些原则，我可以写出更规范、更易读、更易于维护的HTML代码。

第三种、HTML5新增的能力

HTML5 新增了许多新功能，包括：

• 新的语义化标签：HTML5 新增了许多语义化标签，例如 header、nav、section、article 和 footer。这些标签可以使浏览器和搜索引擎更好地理解网页的内容和结构。
• 新的媒体元素：HTML5 新增了 video 和 audio 元素，用于播放视频和音频。
• 新的表单控件：HTML5 新增了许多新的表单控件，例如 input type="date"、input type="time" 和 input type="number"。
• 新的 API：HTML5 新增了许多新的 API，例如 Geolocation API、Canvas API 和 Web Storage API。

以下是这些新功能的详细说明：

新的语义化标签

HTML5 新增了许多语义化标签，用于表示网页的各个部分。这些标签可以使浏览器和搜索引擎更好地理解网页的内容和结构。

以下是一些常用的语义化标签：

• header：表示网页的页眉
• nav：表示网页的导航栏
• section：表示网页的某个部分
• article：表示一篇独立的文章
• footer：表示网页的页脚

新的媒体元素

HTML5 新增了 video 和 audio 元素，用于播放视频和音频。

以下是一些使用 video 和 audio 元素的示例：

HTML

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

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

新的表单控件

HTML5 新增了许多新的表单控件，用于收集用户输入。

以下是一些常用的新表单控件：

• input type="date"：用于选择日期
• input type="time"：用于选择时间
• input type="number"：用于输入数字

新的 API

HTML5 新增了许多新的 API，用于提供各种功能。

以下是一些常用的新 API：

• Geolocation API：用于获取用户的地理位置
• Canvas API：用于在网页上绘制图形
• Web Storage API：用于在浏览器中存储数据

 第四种、HTML渲染解析

HTML 的渲染解析是一个复杂的过程，它可以分为以下几个步骤：

1. 下载 HTML 文档：浏览器首先会下载 HTML 文档。
2. 解析 HTML 文档：浏览器会解析 HTML 文档，并构建 DOM 树。
3. 下载外部资源：浏览器会下载 HTML 文档中引用的外部资源，例如 CSS 文件、JavaScript 文件和图像。
4. 构建渲染树：浏览器会根据 DOM 树和 CSS 文件构建渲染树。
5. 绘制页面：浏览器会根据渲染树绘制页面。

为什么 CSS 放前面 JS 放后面

CSS 放前面 JS 放后面是因为 CSS 会影响页面的布局和样式，而 JavaScript 会影响页面的行为。

如果 JavaScript 放在前面，那么 JavaScript 可能会在 CSS 加载完成之前执行，从而导致页面布局和样式出现问题。

例如，如果 JavaScript 代码中使用了 document.getElementById() 方法来获取某个元素，那么在 CSS 加载完成之前，该元素可能还没有被创建，从而导致 JavaScript 代码执行失败。

怎么理解并行加载串行执行

HTML 的资源加载是并行的，但是 DOM 树的构建、CSS 的应用和 JavaScript 的执行是串行的。

这意味着浏览器可以同时下载多个资源，但是浏览器会等到所有资源加载完成之后再开始构建 DOM 树、应用 CSS 和执行 JavaScript。

这样做的原因是为了确保页面的布局和样式一致，并且 JavaScript 代码能够正确执行。