今天是跟着老师学习wbe的第一天，由于我之前漏了一天的课，所以刚到课堂来是有点懵逼的，但跟在老师后面认真听讲并且观看录播视屏学习后，在同学和老师的帮助下渐渐明白了很多原本不懂的地方。
目录
0.第一天学习目标：
学习目标：
1:安装vscode，hbuilder及相关的插件，会基本使用
2:最简单的网页结构、网站的完整结构，每一行代码的意义
3:文档声明
4:字符集
5:了解h5规范
6:了解实体含义，熟记3-5个常用的实体1.介绍前端以及学习需要的开发软件：
<!--
前端前期三剑客
HTML 搭网页结构（主要学习一些标签）
CSS 网页装饰（）
JS 实现一些响应功能
-->
<!-- https://www.dcloud.io/hbuilderx.html
https://code.visualstudio.com/Download
-->
<!--
1:安装VSCode
2:打开html文件
3:创建一个新的网页
4:安装插件chinese
live server
vetur
chinese lorem
1:改字体大小
2: 保存和自动更新，随时改，随时更新
Files: Auto Save
Files: Auto Save Delay
-->
2.网页结构：
<!-- 注释快捷键：ctrl+/
1、注释不能嵌套
2、养成注释的习惯
3、注释要简单明了
-->
<!-- html 重点关注的是语义，而不是样式 -->
<!-- html 是根标签/根元素 一个页面只有一个html 所有的内容必须写在html -->
<html>
<!-- head 保存一些元信息 里面内容不会页面中展示 只是 辅助浏览器 编译页面 -->
<head>
<!-- title 默认情况显示在浏览器的标题栏中
它最重要的作用帮助推广部门做SEO/SEM优化
SEO 搜索引擎优化
通过提升网站关键词排名的方式实现网站自然排名，效果长久稳定
SEM 行业竞价
需要企业网站花钱做推广达到营销效果，为网站带来更多商业价值-->
<title>你看我在哪里</title>
</head>
<!-- body标签 书写网页的主体内容 -->
<body>
<!-- 此处文字通过插件自动生成，无任何意义
插件名称: Chinese Lorem
ID: catlair.chinese-clorem
说明: 简体中文的乱数假文
版本: 0.0.2
发布者: catlair
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=catlair.chinese clorem -->
鼓自变希普的打，啦骂是娇天国，见打竟有斯，以智之无俭自失卧争什妄是来死人了得人愚
</body>
<!-- 浏览器有自动纠错功能，但我们要尽可能避免
1、影响网站的性能
2、它更改的不一定是你要的
--></html><!-- 文档声明 告诉浏览器，我是按照html的规范编写 防止出现怪异模式，从而出现乱码-->
<!DOCTYPE html>
<html>
<head>
<!-- 属性 属性值 放在标签内部 -->
<!-- meta 自结束标签 设置一些元信息 辅助浏览器编译代码
charset 字符集
utf-8 万国码
GB2312 中国
GBK 中国扩展版
编码 将字符转成二进制
解码 将二进制转成字符
乱码 编码和解码参考的标准不一样
-->
<meta charset="utf-8" />
<meta name="keywords" content="手机,手机品牌,手机评测,手机资讯,手机行情" />
<meta name="description" content="中关村在线手机频道为用户提供最新、最深度、最全面的手机相关资讯。能够让用户在最快的时间内了解到如何选手机、买手机、用手机。" />
<title>标题</title>
</head>
<body>
<!-- 通过Chinese lorem插件生成的无意义字符 -->
乡人感是则过什韩谢馆五，制世后，畴仇下皇陀种作
</body>
</html>
3.实体：
<!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>
</head>
<body>
<!-- 什么是实体
浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号
用一些额外的字符来表示，这些额外的字符，就叫实体
实体语法
&实体的名字;
常用的实体
空格
> 大于号
< 小于号
© 版权符号
https://www.w3school.com.cn/html/html_entities.asp
-->
其说爻升明斗 才才榜。
3<4>5
©
</body>
</html>
4.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>
</head>
<body>
<!--
1、html 不区分大小写 但一般用小写
2、注释不能嵌套
3、浏览器的纠错一定要避免
4、html标签规范，要么成双成对，要么自结束
5、标签可以嵌套，但不能交叉
-->
<div></div>
</body>
</html>
2.0.第二天学习目标：
学习目标：
1:常用的语义标签，明白语义是什么?至少记忆6-8个
2:熟悉有序列表，无序列表，定义列表的用法
3:行内元素与块元素的基本区别，并各举三个常用的块，行内元素
4:a标签的属性有哪些， 其中target属性，有哪些属性值，能达到什么效果
a标签的路径问题，./和../
5:img标签的常用属性有哪些
6:常用的图片格式，简单知道各自的优势在哪里
7:音视频标签及常用属性
2.1.常用标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的标签</title>
</head>
<body>
<!-- 关注语义，而不是样式！！（关注代码标签的意义而不是它运行后长什么样子；感觉这句话非常重要！！）-->
<!-- 一： 标题标签h1 ~ h6 块元素 独占一行 此处特别注意独占一行的特性，个人认为容易混淆-->
<!-- 二： 段落标签p，块元素 独占一行 段落标签用于表示内容中的一个自然段-->
<!-- 三： hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup-->
<!-- 四： em标签强调语音语调的加重， 行内元素（inline element）-->
<!-- 五： strong表示强调，重要内容,强调 -->
<!-- 六： blockquote 引用别人说的话 长引用 会换行 块元素-->
<!-- 七： q 表示短引用-->
<!-- 八： br换行标签 自结束标签-->
<!-- 九： hr分割线 自结束标签-->
<!-- 十： 使用del标签来表示一个删除的内容-->
<!-- 十一： center 居中效果-->
<!-- 十二： div 没有任何语义 只表示一个块元素-->
<!-- 十三： span 没有任何语义 只表示一个行内元素 一般用来包裹文字-->
</body>
</html>2.2.结构标签 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 布局标签（结构化标签）
header----网页的头部
main------网页的主体部分（一般就一个）
footer----网页的底部
nav-------网页的导航
aside-----和主体相关的内容，侧边栏
article---文章之类的
section---独立的区块，上面的标签都不合适，就用这个
-->
<header>
<body>
</body>
</header>
<header>举个例子</header>
</body>
</html>
2.3.块元素与行内元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
1）块元素（block element）
1.独占一行
2.默认宽度是父元素的100%
例：p h1-h6 div ul li ...
2）行内元素（inline element）
一般包裹文字
1.不独占一行
2.宽高被内容撑开，不可自定义高度
例：em strong a span ...
3）行内块元素
兼具块元素和行内元素的特点
布局的注意：
1.块元素内能放任何东西，能放块元素，行内元素，行内块
2.行内元素不可以放块元素
3.p标签是特别的块元素，其内不可放块元素
-->
</body>
</html>
2.4.列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- 列表（list） 一组一组
1:有序列表 ol标签创建，li标签表示列表项
2:无序列表 ul标签创建，li标签表示列表项
3:定义列表 dl标签创建，dd标签表示具体内容，dt被定义的内容
注意：列表之间是可以互相嵌套的
ol ul dl li 都是块元素
通过type属性更改列表的项目符号
例：1.有序列表
项目符号：1（默认值）、a、A、i、I
2.无序列表
项目符号:
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
-->
<div>
<p></p>
<span></span>
</div>
<div>睡觉</div>
<ol>
<li></li>
<ol>
<li></li>
</ol>
<ul>
<li>
</li>
</ul>
</ol>
<ol type="I">
<li>刷牙</li>
<li>洗脸</li>
<li>吃早餐</li>
</ol>
<ul type='circle'>
<li>吃饭</li>
<li>睡觉</li>
<li>学习</li>
</ul>
<dl>
<dt>前端</dt>
<dd>html/css</dd>
<dd>js/es6-es11</dd>
<dt>后端</dt>
<dd>java基础</dd>
<dd>javaWeb</dd>
</dl>
</body>
</html>
2.5.超链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<!-- 2个属性，2个功能，1个补充 -->
<!-- 超链接
可以是一个字，一段文字，图片，表格，可以是任何东西
是特殊的行内元素，它里面什么都能放，除了它自己
功能：1、一个页面跳到另一个页面
2、当前页面的跳转
3、下载
属性：
1、href属性 指向跳转的路径地址
属性值
外部网站的地址 绝对路径
内部的页面 相对路径
./ 默认值 ./可以省略
同级目录内的地址
../
跳出当前文件夹，来到上一级文件夹内
关键点：你（超链接）在哪里，你要去哪里
2、target属性 控制超链接打开的方式
可选值：
_self 默认值 在当前页面打开超链接
_blank 新开页面打开超链接
锚点功能（跳转到页面任意的位置）
1、回到顶部，只需要href属性值设置#
2、去到任意的位置
第一步：要去的位置打个id属性，起个id属性值
第二步：href属性值 #id属性值
id属性 给对应的标签打个标记
id属性值不能以数字开头
id属性值是独一无二的存在
id属性值最好不要是汉字
-->
<!-- <a href="https://www.jd.com/"> 你今晚0jwjwddf </a> -->
<!-- <a href="./04.列表.html" target="_blank">去列表</a> -->
<!-- <a href="./img/img/2.gif">图片</a>
<a href="./02.结构标签.html"> .... </a>
<a href="../测试/01.html">测试</a>
<a href="../../6.20/02.常用标签/01.常用标签1.html">去常用标签</a>
-->
<!-- 空链接一 -->
<a href="#">待定</a>
<!-- 空链接二 -->
<a href="JavaScript:;">待定2</a>
<a href="#pp">去底部</a>
<a href="#中间">去中间</a>
<div>
<p>
居婵自丈三生啦看不后李非全之内措，这作你人普都夫年笔才次们设不关年身沫洞，朗专君报不永帝专派问交烦惜种，嗣答想报搏何了了司之楚，韩司对落为应郭惶使德范由而谓付特会，文若评范流情之氏今法房得大京胜国极，为虽未，我起嗣有举人家己么刑十司德不，韩落张若光秦第老。
</p>
<p id="中间">
居婵自丈三生啦看不后李非全之内措，这作你人普都夫年笔才次们设不关年身沫洞，朗专君报不永帝专派问交烦惜种，嗣答想报搏何了了司之楚，韩司对落为应郭惶使德范由而谓付特会，文若评范流情之氏今法房得大京胜国极，为虽未，我起嗣有举人家己么刑十司德不，韩落张若光秦第老。
</p>
<p id="pp">
居婵自丈三生啦看不后李非全之内措，这作你人普都夫年笔才次们设不关年身沫洞，朗专君报不永帝专派问交烦惜种，嗣答想报搏何了了司之楚，韩司对落为应郭惶使德范由而谓付特会，文若评范流情之氏今法房得大京胜国极，为虽未，我起嗣有举人家己么刑十司德不，韩落张若光秦第老。
</p>
</div>
<a href="#">回到顶部</a>
<a href="JavaScript:;">待定3</a>
</body>
</html>
2.6. 图片标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片，
img标签也是一个自结束标签
img这种元素属于行内块元素（基于块和行内元素之间，具有两种元素的特点）
4个属性
src 引入图片的地址
alt 图片引入不成的时候，文字提示 更重要的作业，浏览器会根据alt值来区分推荐图片
width 控制图片的宽度
height 控制图片的高度度
注意：width和height一般不会同时设置，可能会导致图片的变形
-->
<img src="./img/png/w.gif" alt="11111" height="500px" >
</body>
</html>
2.7.图片标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明，不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好
base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
-->
<!-- 网页加载流程
第一次请求：加载网页本身
第二次之后请求，加载外部资源 -->
</body>
</html>
2.8.音视频：
<!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>
</head>
<body>
<!-- audio标签 用来向页面中引入一个外部的音频文件
src 引入音视频路径地址
controls 是否允许用户控制音视频的播放 ，默认是不允许
loop 循环播放
autoplay 自动播放 很多浏览器废弃
-->
<audio src="./source/达拉崩吧.mp3" controls loop autoplay></audio>
<!-- video标签来向页面中引入一个视频，使用方式跟音频基本上一样的 -->
<video src="./source/绝地逢生.mp4" controls></video>
</body>
</html>
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
