MDN扫盲班开课啦！（1）

2024-04-28 04:08
文章标签 扫盲 开课 mdn

本文主要是介绍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>

在这里插入图片描述
有一个很经典的面试题，就是说说iframe的缺点。比如不利于seo，阻止了页面点击和加载事件，安全性问题等。但是仍然是一种常用的嵌入式元素。

通过继续学习，后续会持续更新补充。

以上。

这篇关于MDN扫盲班开课啦！（1）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/942302。

相关文章

EtherCAT扫盲,都是知识点

EtherCAT扫盲,都是知识点

1. 什么是EtherCAT EtherCAT，全称Ethernet for Control Automation Technology，字面意思就是用于控制自动化技术的以太网。它是一种基于以太网的实时工业通信协议，简单说，就是让机器们通过网线互相聊天的高级方式。 EtherCAT 是最快的工业以太网技术，同时它提供纳秒级精确的同步。相对于设定了相同循环时间的其他总线系统，Ethe
阅读更多...
大模型扫盲系列——大模型实用技术介绍_大模型底层技术是哪些

大模型扫盲系列——大模型实用技术介绍_大模型底层技术是哪些

Gemma模型架构和参数计算 近期，大模型相关的技术和应用层出不穷，各个方向的论文百花齐放，底层的核心技术是大家公认的精华部分。本文从技术的角度聚焦大模型的实战经验，总结大模型从业者关注的具体方向以及相关发展，帮助打算参与到大模型工作的人高效上手相关工作。 基座模型参数 在动手实践之初，首要任务便是选取一款市场上表现卓越的基座模型，为各种任务打下坚实的基础。在这个领域，OpenAI的Chat
阅读更多...
Node.js安装扫盲

Node.js安装扫盲

一、Node.js安装 在官网下载node.js安装包 双击打开node-v20.14.0-x64.ms文件，点击运行 进入安装Node.js的对话框，点击Next继续 勾选复选框后点击Next继续 默认安装路径 默认配置 这里不需要勾选，直接点击Next 点击Install 二、Node.js验证 安装好Node.js之后我们可以打开命令提示符窗口输入node -v验证node是否安
阅读更多...
HTTP基本知识扫盲

HTTP基本知识扫盲

一.C/S结构与B/S结构 1 C/S结构，即Client/Server(客户机/服务器)结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。早期的软件系统多以此作为首选设计标准。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sql Server等。例如QQ就是基于C/S
阅读更多...
【JavaScript】MDN

【JavaScript】MDN

一、初识 1.1 基础 1.1.1 语言速成课 1.1.1.1 变量 ​ 变量是存储值的容器。首先用let关键字声明一个变量，后面跟着你给变量的名字 ​ 变量命名区分大小写 ​ 分号在JavaScript中是用来分隔语句的，但是如果语句后面有一个换行符(或者在{block}中只有一个语句)，分号可以省略。 1.1.1.2 注释 ​ 多行注释：/*comments*/ ​ 单行注释
阅读更多...
FPGA专项课程即将开课，颁发AMD官方证书

FPGA专项课程即将开课，颁发AMD官方证书

社区成立以来，一直致力于为广大工程师提供优质的技术培训和资源，得到了众多用户的喜爱与支持。为了满足用户需求，我们特别推出了“基于Vitis HLS的高层次综合及图像处理开发”课程。 本次课程旨在帮助企业工程师掌握前沿的FPGA技术，通过Vitis HLS工具实现高效的图像处理应用。无论您是从事医疗设备、工业机器人还是消费电子产品的开发，课程都将为您提供宝贵的知识和实战经验。 打开F学社
阅读更多...
云计算扫盲（一） Iaas，Paas，Saas的区别

云计算扫盲（一） Iaas，Paas，Saas的区别

https://jingyan.baidu.com/article/fc07f98942883a12ffe519a5.html
阅读更多...
javascript-MDN笔记-函数

javascript-MDN笔记-函数

1、函数作用域： 在函数内定义的变量不能在函数之外的任何地方访问。 定义在全局域中的函数可以访问所有定义在全局域中的变量。 在另一个函数中定义的函数也可以访问在其父函数中定义的所有变量和父函数有权访问的任何其他变量。 // 下面的变量定义在全局作用域(global scope)中var num1 = 20,num2 = 3,name = "Chamahk";// 本函数定义在
阅读更多...
javascript-MDN笔记-产生固定范围随机数

javascript-MDN笔记-产生固定范围随机数

function random(min, max) {var num = Math.floor(Math.random() * (max - min + 1)) + min;return num;}
阅读更多...
javascript-MDN笔记-对象

javascript-MDN笔记-对象

例子：创造一个对象 function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;this.bio = function() {alert(this.name.fir
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2