大家好，我是梅巴哥er。从最近的经历来看，目前面临两大困境，一是知识面不足，基础不够扎实，二是实操能力还有所不足，对知识应用不够熟练。
针对第二点，已经开始了从页面布局到JS等多方面的练习。
为了解决第一点的问题，特意给自己开一个扫盲班，阅读MDN官方文档，拓宽知识面，补充基础知识。
从html开始阅读，并在阅读中记录自己的知识盲区，查漏补缺。同时，为了更好的掌握知识点，需要在记录时，给出代码demo，增加使用的能力。
MDNhtml官网：
MDNhtml标签：
标签中不需要包含文本，这些标签称为空标签，如 <img>。
<img src="" alt="">
<br />
<hr />
<input />
要花钱的
免费的
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页面为例：
图片发不上来了，可以参考这篇文章。点击查看即可。
打开/，把自己的网页地址输入到Address栏，并点击Check。如果有不符合的地方，会给出提示。
或者传一个文件，或者传一些html代码。都可以检测。
如果没有错误了，会给出这样的提示：
SEO。所以应该给图片取一个描述性的文件名，而不是乱取名字。src引入的图片，不推荐用src=".jpg"这种形式。因为需要经过DNS解析，加重浏览器负担，还存在一些安全隐患。alt的描述，必须带上。用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是用于描述矢量图像的XML语言。
在 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>
一个很有用的嵌入页面的元素。
<!--把下面的代码放入编辑器中，并用浏览器打开，查看效果-->
<!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=".html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"></iframe><footer>F12打开控制台，查看一下代码，是不是发现了一个 iframe元素？</footer>
</body>
</html>
有一个很经典的面试题，就是说说iframe的缺点。比如不利于seo，阻止了页面点击和加载事件，安全性问题等。但是仍然是一种常用的嵌入式元素。
通过继续学习，后续会持续更新补充。
以上。
本文发布于:2024-01-27 17:25:13，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063475251638.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
