我在乐字节学习的第二天

编程入门行业动态更新时间:2024-10-06 06:42:38

我在乐字节学习的第二天

告别了陌生感，第二天的学习轻松了一点，熟悉了学员和老师，而且课程质量真的是好得没话说，我看过很多前端的课程，但从没有哪家课程能将前端的知识体系划分的如此全面细致，还能保证每一个知识点还都能讲得如此透彻，更是难得。比如今天讲的HTMI课程内容介绍以及编程器的使用，每一个知识点的学习，都让我有种重获新生的感觉，仿佛以前学习的东西都白学了，只知道简单的用法，不了解核心原理，更不会用高级特性。现在每学习完一个模块，就期待着解锁下一个模块，迫不及待地想去知道下一个模块可以让自己get到新的技能。

课程的主讲老师，能够把webpack这样一个大而繁琐的工具，讲得如此细微易懂，让我懂了webpack的插件机制和loader机制。在大前端课程中，老师更是让我敬佩，我感觉知识面非常广，总是把我们在学习中会遇到的问题演示出来，或者是提出来让我们注意。

一个人学习或许会太孤独，但是乐字节教育前端课程里，每天和几百人一起学习，群里还有专业的助教老师答疑，其他同学很多都是前端大佬，在你遇到问题的时候，无论是什么问题，只要是前端问题，总会有人给你解答或者提供思路。

在乐字节前端课程中，一起学习，使彼此共同成长。

HTML基本结构(重点)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6hcjRP12-1599474717996)(img/mess.png)]

同理：HTML 有自己的语言语法骨架格式：

<HTML>   <head>     <title></title><link><script></script><style></style></head><body></body>
</HTML>
1234567891011
1 HTML标签：是所有HTML中标签的一个根节点。 最大的标签为根标签。2 head标签： 文档的头部文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。注意在head标签中我们必须要设置的标签是title3.title标签： 文档的标题作用：让页面拥有一个属于自己的标题。
建议：
首页标题:网站名（产品名）-网站的介绍4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
12345678910111213141516171819

HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的、、都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>
1

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 <p>这是一个段落</p>
1

2.单标签(自闭合标签)

<标签名 />
1

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如  <br />
1

HTML标签关系

1.嵌套关系（父子级关系）

<head><title></title>
</head>
123

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCDOejJv-1599474717997)(img/father.jpg)]

2.并列关系（兄弟关系）

<head></head>
<body></body>
12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxq1d3F6-1599474717998)(img/xiong.jpg)]

请问下列哪个标签是错误的？
A  <head></head><body></body>
B  <div><strong></strong></div>
C  <head><title></head></title>
D  <body><div></div></body>
12345

文档类型<!DOCTYPE>

<!DOCTYPE html> //html5版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  ".dtd">   //严格模式
12

这句话就是告诉浏览器使用的是哪个版本？目前使用的是 html 5 的版本。

作用：

用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，
这句话就是告诉浏览器使用的是哪个版本，只有这样浏览器才能按指定的文档类型进行解析。
12

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hSylDod4-1599474717998)(img\html版本.PNG)]

HTML和XHTML的区别：（了解）

XHTML 元素必须被正确地嵌套。<b><i>This text is bold and italic</i></b>===>>"这是正确的"<b><i>This text is bold and italic</b></i>===>>"这是错误的"  (html)
XHTML 元素必须被关闭。<p>This is a paragraph</p>===>>“这是正确的”<p>This is a paragraph===>>”这是错误的“  (html)
xhtml 元素标签名必须用小写字母。<p>This is a paragraph</p>==>>”这是正确的“<P>This is a paragraph</P>===>>“这是错误的”  (html)
123456789

严格模式与混杂模式：

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DOCTYPE 直接相关。
1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格模式）
2、DOCTYPE 不存在或者格式不正确——混杂模式。3、HTML5 没有 DOCTYPE ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。(HTML5 没有严格和混杂之分)意义:严格模式让各个浏览器统一执行一套规范.混杂模式保证了旧网站的正常运行.(如果只有严格模式，那么许多旧网站必须受到影响；如果只有混杂模式，那么每个浏览器都有自己的解析模式)
123456789101112

meta 标签

<meta charset="UTF-8" />
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联。扩展：
<meta name="description" content="">
注意：
1.描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要撰写的很详细，让人感兴趣。
2.同样遵循简短原则，字符数含空格在内不要超过120个汉字。
3.补充在title和keywords中未能充分表述的说明。
4.用英文逗号 关键词1，关键词2.<meta name=“keywords” content="积云教育，IT项目培训" />
keywords是页面的关键词，是搜索引擎关注点之一，应限制在6~8个关键词左右<meta http-equiv="refresh" content="3" /> 3秒后刷新页面   re  重复   fresh新鲜
<meta http-equiv="refresh" content="2,url=/">   url 统一资源定位符
1234567891011121314151617