MDN扫盲班开课啦！（1）

本文主要是介绍MDN扫盲班开课啦！（1），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，我是梅巴哥er。从最近的经历来看，目前面临两大困境，一是知识面不足，基础不够扎实，二是实操能力还有所不足，对知识应用不够熟练。

针对第二点，已经开始了从页面布局到JS等多方面的练习。

为了解决第一点的问题，特意给自己开一个扫盲班，阅读MDN官方文档，拓宽知识面，补充基础知识。

从html开始阅读，并在阅读中记录自己的知识盲区，查漏补缺。同时，为了更好的掌握知识点，需要在记录时，给出代码demo，增加使用的能力。

MDNhtml官网：https://developer.mozilla.org/zh-CN/docs/Glossary/HTML

MDNhtml标签：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

空标签

标签中不需要包含文本，这些标签称为空标签，如 <img>。

<img src="" alt="">
<br />
<hr />
<input />

HTML 文件通常会以 .htm 或 .html 为扩展名。

发布网站

要花钱的
- 买服务器和域名
免费的
- GitHub pages
- Google App Engine
- 这里有GitHub pages发布网站的讲解：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website

在浏览器里输入一个网址到页面呈现，中间发生了什么？

浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）。

DNS

DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。

真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 63.245.217.105。这叫做 IP 地址，它代表了一个互联网上独特的位置。IP并不容易记住，这就是DNS被发明的原因。

语义化标签

header ：页眉
nav：导航栏
- 包含页面主导航功能。其中不应包含二级链接等内容。
main：
- 主内容。主内容中还可以有各种子内容区段，可用article 、 section和 div等元素表示。
- 存放每个页面独有的内容。每个页面上只能用一次main，且直接位于body中。
- 最好不要把它嵌套进其它元素。
article：包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
section：
- 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。
- 一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
aside：
- 侧边栏，经常嵌套在main中。
- 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
- 在与主内容又关联时使用
footer：页脚。

示例：我们用语义化标签，写一个这样的静态页面
在这里插入图片描述
demo代码：

<!--demo.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="demo.css">
</head>
<body><header>聆听电子天籁之音</header><nav><ul><li>主页</li><li>作品</li><li>项目</li><li>联系我们</li></ul><form action=""><input type="search" name="q" placeholder="要搜索的内容"><input type="button" value="搜索"></form></nav><main><article><h2>火星演唱会火热售票中</h2><br><p>这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊</p><br><h3>九九八十一 传唱经典</h3><br><p>这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊</p><br><p>这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊</p><br><h3>达拉崩吧 生僻字</h3><br><p>这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊</p><br><p>这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊这里有好多的字啊</p><br></article><aside><h2>相关链接</h2><ul><li><a href="javascript:;">言和</a> </li><li><a href="javascript:;">乐正绫</a></li><li><a href="javascript:;">初音未来</a></li><li><a href="javascript:;">三无Marblue</a></li><li><a href="javascript:;">二次元欢迎你</a></li></ul></aside></main><footer>© 2050 某某保留所有权利</footer>
</body>
</html>

/*demo.csss*/
* {padding: 0;margin: 0;
}body {background-color: rgb(169, 169, 169);line-height: 1.5em;
}header, nav, main, footer {width: 758px;margin: auto;
}header {height: 72px;font-size: 30px;text-align: center;line-height: 72px;font-weight: 700;color: #fff;
}nav {height: 50px;background-color: rgb(102, 204, 255);
}nav ul {float: left;list-style-type: none;width: 468px;height: 100%;
}nav ul li {display: inline-block;margin: 0 33px;text-align: center;line-height: 50px;
}nav form {float: right;margin-right: 30px;width: 222px;height: 100%;text-align: center;line-height: 50px;
}nav form input:nth-child(1) {width: 150px;padding-left: 10px;box-sizing: border-box;border: none;outline: none;border-radius: 4px;
}nav form input:nth-child(2) {width: 60px;height: 24px;background-color: rgb(51, 51, 51);color: #fff;border: none;margin-left: 5px;
}main {height: auto;margin-top: 10px;overflow: hidden;
}main article {float: left;width: 552px;height: auto;background-color: #fff;padding: 5px;padding-top: 20px;box-sizing: border-box;
}main article h2 {text-align: center;line-height: 1.5em;
}main aside {float: right;width: 180px;height: 733px;background-color: rgb(102, 204, 255);/* overflow: hidden; *//* text-align: center; */
}main aside h2 {text-align: center;line-height: 3em;
}main aside ul {width: 100%;margin-left: 40px;
}main aside ul li {margin: 10px 0;
}footer {height: 56px;background-color: #fff;line-height: 56px;margin-top: 10px;box-sizing: border-box;padding-left: 5px;
}

规划网站：画草图

以上面我们写的<<聆听电子天籁之音>>的demo页面为例：

图片发不上来了，可以参考这篇文章。点击查看即可。

检查你的html页面是否通过了W3C标准

打开https://validator.w3.org/，把自己的网页地址输入到Address栏，并点击Check。如果有不符合的地方，会给出提示。

或者传一个文件，或者传一些html代码。都可以检测。

如果没有错误了，会给出这样的提示：

在这里插入图片描述

img标签的src文件名和alt描述

搜索引擎会读取图像的文件名并把它们计入SEO。所以应该给图片取一个描述性的文件名，而不是乱取名字。
src引入的图片，不推荐用src="https://www.example.com/images/dinosaur.jpg"这种形式。因为需要经过DNS解析，加重浏览器负担，还存在一些安全隐患。
alt的描述，必须带上。

video和audio

用source标签来引入资源。同时最好带上type属性。浏览器会通过检查type属性来迅速跳过那些不支持的格式。如果不写type，浏览器会尝试加载每个source文件，知道找到一个能正确播放的格式，这样会浪费大量时间和资源。比如，<source src="rabbit320.mp4" type="video/mp4">
不要打开自动播放autoplay和循环播放loop功能，因为用户大概率会不喜欢。autoplay = "false" loop="false"
初始化静音功能muted。值是布尔值，默认false，也就是不静音。
用来缓冲角大文件的属性preload。
- 值是"none"，不缓冲
- "auto"：页面加载后缓存媒体文件。
- "metadata"：仅缓冲文件的元数据。
给音频加字幕文件track标签

<video controls><source src="example.mp4" type="video/mp4"><source src="example.webm" type="video/webm"><track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
<!--
kind属性有3个值，表示是哪种类型的字幕：subtitles（翻译字幕）， captions（同步翻译对白）， timed descriptions（文字转为音频）src中的文件格式是.vttsrclang属性是告诉浏览器用哪种语言来编写kind的字幕类型。en表示英语。-->

沙盒

一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。

SVG

SVG是用于描述矢量图像的XML语言。

ps : meta viewport

在 HTML 文件中的 <head>标签里，你将会找到这一行代码 <meta name="viewport" content="width=device-width">: 这行代码会强制地让手机浏览器采用它们真实可视窗口的宽度来加载网页（有些手机浏览器会提供不真实的可视窗口宽度, 然后加载比浏览器真实可视窗口的宽度大的宽度的网页，然后再缩小加载的页面，这样的做法对响应式图片或其他设计，没有任何帮助)。

响应式图片

<img srcset="elva-fairy-320w.jpg 320w,elva-fairy-480w.jpg 480w,elva-fairy-800w.jpg 800w"sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,800px"src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"><!--
srcset：定义了一个图像集。里面包含图片名和真实宽度。320w就相当于320px，但是这里不用px做单位。sizes：定义了对应媒体条件和图片显示尺寸。
-->

突显图片主题内容

实际上就是把<picture>当做一个图片切换器，在不同的视宽上，显示出适合的图片。

<!--需要美术设计的：-->
<picture><source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"><source media="(min-width: 800px)" srcset="elva-800w.jpg"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

<!--不需要美术设计的且能满足老式浏览器需求的-->
<picture><source type="image/svg+xml" srcset="pyramid.svg"><source type="image/webp" srcset="pyramid.webp"><img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

iframe

一个很有用的嵌入页面的元素。

<!--把下面的代码放入编辑器中，并用浏览器打开，查看效果-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>iframe {border: 1px solid black;width: 300px;}.output {background: #eee;}</style>
</head>
<body><header>下面添加一个iframe，来看看效果：</header><iframe id="inlineFrameExample"title="Inline Frame Example"width="300"height="200"src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe><footer>F12打开控制台，查看一下代码，是不是发现了一个 iframe元素？</footer>
</body>
</html>