整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
了解同学们的专业学习情况，增强团队协作能力，近日，金盾2201班举行了以小组为单位的HTML网页项目验收。本次项目验收特邀邓旎、唐勇两位老师担任评委。
金盾特训班作为我校以高薪就业为终极目标的特色班级，除了日常文化课学习之外，提升项目实战经验也成为了他们必不可少的日常操练项。
验收现场
各小组以PPT讲解结合网页作品演示的形式，从想法构思、选定项目、作品功能实现等方面来展示团队作品。每位同学轮流上台讲解，在操作演示中突显实践的重要性。
项目验收考验的是大家代码知识的运用情况，同时还能提高表达能力及项目制作水平，为成为一名“准职业人”打好基础。大家纷纷表示，虽然在过程中遇到了数不清的困难，但是并没有因此而放弃，在老师的辅导和组员之间的互帮互助下，促使此次项目圆满完成。
颁奖典礼
经评委现场评分，最终评选出团队一、二、三等奖及优秀个人奖。
团队一等奖
王涵、李嘉星、刘灿、段李可
团队二等奖
姚宏源、周旺、骆鹏飞、凌海峰
团队三等奖
潘虹、张雅婷、胡伟
优秀个人奖
罗浩智、付清、陈韬、殷明、莫艺清
此次项目验收，充分展示了金盾班同学的理论水平、专业知识、语言表达与实践操作能力，希望各位同学再接再厉，发挥个人潜能，展示出更加优秀的作品。
高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~
哎呀呀~实在是抱歉备注标签我记错了QAQ
<!--内容打这里-->这个才是备注标签不是//
首先我们先来学习上节课留下的剧透，分别是:
有人就说了标题标签上次剧透不就只有h1标签吗?
嘿嘿，其实他还有兄弟姐妹啦~
看图，代码是从上往下从左往右执行的请记住这个顺序哦~
还有,左边是代码右边是网页上面的效果哦~
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!--标题标签是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如图所示，h1标签是最大的，h6标签是最小的
是不是很简单呀,现在已经学会了一个知识点了哦~
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千万要记住内容是写在标签里面的哦~-->
<!--段落标签是独占一条的哦-->
<p>第一条p标签</p>
<p>第二条p标签</p>
<p>第三条p标签</p>
</body>
</html>
链接标签是什么?顾名思义就是一个链接看代码：
<a href="https://www.baidu.com">百度</a>
href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接
属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦
当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com
当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页
是不是很有趣~
看视频:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->
</body>
</html>
图像标签标签如其意，就是用来上传图像的一个标签~~
我们这里介绍一下img的两个属性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。
alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字
看视频:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容
怎么拖图片到img文件下，老师~~~我不知道
看视频
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖进来就ok了是不是很简单~
okk，好快啊怎么一下就学完了今天的知识点~~~
嘻嘻今天可是有作业的~
请根据下面的网页仿写一下:
完成后作业发再评论区哦，有什么不懂的可以留言包回答的。
加油呀，每天学一点争取做出属于自己的一个网页~
上一期
要：在本文中，将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。
本文分享自华为云社区《页面首屏渲染性能指南-云社区-华为云》，作者：Ocean2022。
我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。
在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。
关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。 它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。 如下图所示：
首先，一旦浏览器得到响应，它就会开始解析它。 当它遇到依赖项时，它会尝试下载它。 如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。
如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。 只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。 这就是为什么 JS 会阻塞解析的原因。
完成所有解析后，浏览器将构建文档对象模型 (DOM) 和级联样式表对象模型 (CSSOM)。 将它们组合在一起得到渲染树。 页面的不显示部分不会进入渲染树，因为它只包含绘制页面所需的数据。
倒数第二步是将渲染树进行布局， 这个阶段也称为回流：就是计算每个渲染树节点的每个位置及其大小的地方。
最后一步是绘制。 它会根据浏览器在前一阶段计算得到的数据对像素进行着色。
因此，根据这一过程，我们在优化性能方面，得出了一些结论。如果你要提升页面初始化渲染的性能，你需要：
同时，我们会根据下面 3 个指标来衡量优化的效率：
除了渲染时间之外，还有其他一些因素也需要考虑。例如，你的页面使用了多少阻塞资源以及下载它们需要多长时间。
鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略：
首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。 其次，删除所有重复项。
然后，我建议建立一个自动压缩过程。 例如，它应该从你的后端服务中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空白字符）。
完成后，我们剩下的可以是文本字符串。 这意味着我们可以安全地应用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。
最后，还有缓存。 浏览器第一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。 但是，记住两点至关重要：
当然，应该为每个资源定义缓存策略。 有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息（可以使用 “private” 防止 CDN 缓存私有数据）。
“关键”仅指网页正确呈现所需的资源。 因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。
为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。 使用这种方法，浏览器将只根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级。 例如，如果你将 media=“print” 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。
为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。
如上所述，脚本会阻塞解析，因为它们可以改变 DOM 和 CSSOM。 为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。
标有 async 的脚本不会阻塞 DOM 构建或 CSSOM，因为它们可以在 CSSOM 构建之前执行。 但请记住，内联脚本无论如何都会阻止 CSSOM，除非你将它们放在 CSS 之上。
相比之下，标有 defer 的脚本将在页面加载结束时进行执行。
换句话说，使用 defer，脚本直到页面加载事件被触发后才会执行，而 async 让脚本在文档被解析时就会在后台运行。
最后，应将 CRP 长度缩短到可能的最小值。
作为样式标签属性的媒体查询将减少必须下载的资源总数。 script 标签属性 defer 和 async 将防止相应的脚本阻塞解析。
使用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而也减少数据传输时间）。
内联一些样式和脚本也可以减少浏览器和服务器之间的往返次数。
按照最新的最佳性能实践理念，一个网站应该做的最快的第一件事就是展示 ATF 内容。 ATF 代表首屏。 这是立即可见的区域，无需滚动。 因此，最好以首先加载所需样式和脚本的方式重新排列与渲染相关的所有内容，而其他所有内容都停止（既不解析也不渲染）。
总而言之，网站性能优化包含了网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，但是所有这些都可以逐步完成。 作为 Web 开发人员，你可以将本文作为参考，并始终记住在实验之前和之后测量性能。
浏览器开发人员尽最大努力优化你访问的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的原因。 这部分程序会在你以 HTML 格式请求的资源之前进行扫描，以便一次发出多个请求并让它们并行运行。 这就是为什么在 HTML（逐行）以及脚本标签中保持样式标签彼此靠近的原因。
此外，尝试批量更新 HTML 以避免多个布局事件，这些事件不仅由 DOM 或 CSSOM 中的更改触发，而且在设备方向更改和窗口大小调整时也会触发。
点击下方，第一时间了解华为云新鲜技术~
华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云
*请认真填写需求信息，我们会在24小时内与您取得联系。
