第三周学习日报1_前端实习生第三周周报-CSDN博客

本文链接：https://blog.csdn.net/m0_74484441/article/details/137017945

学习来源：B站千锋前端

学习目标：能够做网页

学习成果：复习了vscode的使用，了解了html的根本形式，熟练掌握了HTML的常用标签，双标记单标记，特殊符号的表达，div和span无实际意义但在网页布局上很有用的标签等

学习记录：

1.网页HTML

1.将.txt文本改成.html

如果不显示拓展名：查看---》显示---》文件拓展名打开就好

2.网页通过浏览器才能访问阅读；

网页是网站中的一页；

网页文件拓展名.html

3.在.txt文件中写入<center> </center>；保存退出，改为.html ，即可将文本置中

4.HTML是用来描述网页的一种语言：

（1）HTML指的是超文本标记语言

（2）HTML不是一种编程语言，而是一种标记语言

（3）标记语言是一套标记标签

2.浏览器

网站 caniuse.com 可以查看html语言和浏览器是否兼容
常见浏览器Opra（欧朋），FireFox（火狐），IE（win系统自带），Safari（苹果系统特有），Chrome（谷歌），QQ浏览器

3.Web标准的指定

Web网页的组成部分：HTML结构，CSS表现（网页布局，配色，动画），JS表现（控制行为）

4.我的第一个网页

在记事本也可以完成，<br/>换行，.txt写完代码，换成.html

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <center>
            你好 <br/> 世界
        </center>
    </body>
</html>

1.双标记

2.单标记

5.VCcode的使用

Ctrl键 + 放大；Ctrl键 - 缩小；
英文模式下！+回车显示基本的语法结构
插件下载：自动重命名标签
插件下载：快速预览界面
插件下载：实时更新页面，不用手动刷新
插件下载：文本段落选中方便快捷，快捷键：Alt+W 段落标识
问题——无法实时更新页面：调试的时候右键再Open With Live Server 即可

6.标签

<!DOCTYPE ***> 特殊且固定的文档声明标签（有HTML4，XHTML，HTML5）,html指的是HTML5（最新的版本）
<html lang="***"> “en”代表英文，“zh-CN”代表中文，“ja-jp”代表日文。搜索引擎优化和浏览器有帮助，（浏览器可识别所写内容是英文还是中文等等然后结合自身浏览器系统设定（如中文）进行翻译（如将日语翻译成中文））
<meta charset="***"> 编码和解码的方式。
字符集编码：charset字符集包含ASCII（美国信息交换标准码），ISO-8859-1（拉丁字母表的字符编码），GB2312（汉字编码字符集），UTF-8（万国码字符编码）。其中UTF-8任何语言都可以编码。

7.语义以及常用标签

1.语义

（1）Web语义化：结构化，方便爬虫，方便维护

2.常用标签

（1）文本标题标签

网络爬虫优先关注一级标题，即一级标题放最想表达的思想，注意不可以使用多个一级标题，否则浏览器爬虫会拉黑你的网页。

（2）段落文本p

（3）换行br 注意：文本中的空行并不会在html中进行显示，故换行必须要用换行标签

（4）水平线

（5）加粗标记

推荐使用<strong>在加粗的同时还会突出文本，更容易被爬虫到

（6）倾斜标记

推荐使用<em>在倾斜的同时还会强调文本，更容易被爬虫到

（7）删除线标签

推荐<del>爬虫更喜欢

（8）上标，下标对词语进行注释

8.hr水平线

<hr>水平线本身是有阴影的，width控制宽度，align控制居左些居右些

9.特殊符号的表达

（1）尖角号

文本中的尖角号无法直接被识别，因为被当做html标签对待

（2）&#128519 改变最后一位数字会出现不同的表情包欧哈哈

10.div和span标签

div——没有具体含义，用来划分页面的区域，独占一行
span ——没有实际意义，主要应用于在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离
div{********}*3 快捷键，快速将内容赋值了三份
<div>*******</div>
<span>*******</span>

<h3>体育<span style="color:gray;">sports<span></h3>