<!DOCTYPE html> <!--声明文档类型，不是HTML元素-->
<html lang="en-US"><!--根节点-->
<head><!--声明文档的元数据，不会显示在视口中-->
</head>
<body><!--包含显示在视口中的所有内容-->
</body>
</html>
<!DOCTYPE html>
不是html元素，是一个叫文档类型特殊的节点， doctype告诉浏览器用哪种标准模式的文档。
<html>
HTML document的根标签，是 <head> and <body>的父标签,包含除doctype之外的所有内容。
<head>
声明文档的元数据, 包含了 文档标题,角色设置, 窗口设置, 文档描述, base URL, 样式链接, icons等.
<head>
<!--字符集的编码声明，确保在title之前声明-->
<meta charset="UTF-8">
<!--字符集的编码声明，确保在title之前声明-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--定义视口的一些特性，比如是否可伸缩等-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
<!--文档标题，会在浏览器打开标签中显示-->
<title>Home</title>
</head>
<meta>
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
具体使用参照https://segmentfault.com/a/1190000004279791
<link>
link标签一般用来引入外部资源，一些是下载的资源，一些则用来展示信息。具体用来干啥，则用ref来决定。
应用示例
- 最常见的引入css文件
<link rel="stylesheet" href="./index.css">
- 网站图标favicon
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
- 网站的替用版本
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
- 规范
如果定义了多个版本的网站，rel为"canonical"的则为首选站点。
<link rel="canonical" href="https://www.machinelearning.com" />
<style>
style标签用来写css样式
<style>
:root {
--theme-color: #226DAA;
}
</style>
有三种方法可以在HTML document中运用css：link标签引入外部资源、head中在style标签中、HTML普通标签中行内样式。
<script>
用于写js。
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
一般放于body末尾，因为JavaScript不仅会导致渲染阻塞，而且当脚本被下载时，浏览器会停止下载所有资源，并且直到JavaScript执行完才会继续下载其他资源。有两个属性可以解决这个问题，defer和async。
defer, HTML在js下载时不会被阻塞，而且只有当html渲染完毕之后js才会执行。async, 在js下载时也不会阻塞HTML渲染, 但是一旦js下载完毕，html渲染就会暂停来等js执行。所以如果非要在head中执行js脚本，记得加上defer。
<script src="js/switch.js" defer></script>
<base>
<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。href属性定义了所有相对链接的基URL。只能设置在head中，且一个document只能拥有一个。
<base target="_top" href="https://machinelearningworkshop.com" />
<!--设置了base之后，a标签等可以以下那样写-->
<a href="#ref">
<!--相当于没有设置base下的-->
<a target="_top" href="https://machinelearningworkshop.com#ref">
<body>
document的内容部分，视口中展示在页面上的内容。
网友评论