1.前端3大件：
HTML结构 CSS 样式 JavaScript交互
2.什么是前端：
前端又名Web前端，用来给用户呈现一个一个的网页
3.什么是HTML页面？
HTML超文本标记语言：
超文本：文本 声音 图片 视频 表格 链接
标记：由许许多多的标签组成
HTML页面是运行到浏览器上面的
4.vscode环境的搭建：
（1）首先vscode，它是企业开发前端的时候非常常用的一个开发工具
（2）安装vscode，安装好了之后再安装一些插件：
Auto Rename Tag
view-in-browser
Live Server
5.编写第1个HTML页面
前提：记事本上编写代码，编写好之后ctrl+s保存，注意以.html为结尾保存该文件。将其打开后的这个页面，你会发现并没有标签（如下图1），只有字符串hello world，那么这样就不是一个标准的html页面：
图1
效果：直接在浏览器上输出hello world
6.解释
图2
每个尖括号代表的是 html里的标签。括号里写的内容叫标签名。像<html>…</html>这种被称为是双标签，即：有开始有结束，例如：head title body html单标签：上图没有出现，后续再讲html页面是由许多标签组成，标签里面是有它的内容和属性，所有的标签都是以html为根标签为基准其中html是html文件的根标签其中head是用来编写页面相关的属性其中tltle代表 页面标题其中body代表 页面内容展示信息
你可以将上图内容看作为是一DOM树（如下图3），其中head可以被认为成是一个子标签(所有的标签都是可以被认为成是html的子标签)
图3
其中head和body是兄弟标签，head和title是父子标签（如上图2）
其中每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改
7.当重新在记事本里写：
图4
再次打开.html结尾的文件，刷新后如下图5：
图5
你可以与图1作对比，相比之多了页面标题
8.VScode如何快速生成代码？
一般固定的框架是：
图6
那在VScode中，按住！+enter 就可直接生成
图7
解释：
第1行代表的意思是：指定当前的html版本为5（即 html5）第2行的lang代表language 语言，后跟en，这一行的作用是指定当前页面内容是英文的。这一行不是告诉人的，而是告诉浏览器、搜索引擎……页面内容主要语言为英语，以便于他们以合适的方式（如英语语音朗读、按英语语言规则来处理等）来处理页面。第4行代表：浏览器按照什么样的规则来进行解码文件，这里是按照UTF-8的规则进行解码文件，即：编码格式是UTF-8。（这里注意：UTF-8是一种编码格式，同时又包含了解码规则，它具有编码和解码的双向性）
如果我将原先的编码格式UTF-8（图8）改成ISO（图9），内容处写：这是内容 ，则结果如下图10一样出现的是乱码：
图8
图9
图10
出现乱码原因：因为这个文件是按照ISO来编写的，但是却又在第4行告诉电脑要它按照UTF-8来解码，则自然而然会出现问题
第5行代表移动端适配问题，因本人针对Web端学习的，所以这里不做过多讲解。
这里补充两点：
（1）Ctrl+Shift+r 代表的是刷新
（2）如果你使用！+enter键后并不能生成那一段内容，那说明你创建的这个文件的文件名不是以.html结尾，也就是该文件不是个html文件
9.html标签、标题
（1）注释标签
Ctrl+/ 就会将所选中内容进行注释。
你保存之后，去页面看，发现注释的内容并没有显示出来，那就说明注释成功了，因为注释是不显示在页面上的。
如果你想看，就按 f12 就会出现下图11：
（2）标题标签
从h1到h6，数字越大，则字体越小并且越细。
呈现结果：
那么你会发现，每行之间为什么会有同样的间隙？
这是浏览器里面自带的样式，自带的CSS，后续会讲如何去更改……
另：注意 标题标签是单独起一行的
（3）段落标签
如果我写三段话：
则浏览器中显示：
你会发现，写在一行了，并未分行写！说明在VScode里面的换行对浏览器没有用。那么这时就需要用到段落标签p标签，如图11所示：
图11
浏览器结果：
如果想将第1段从“人工智能”处开始换行，那直接按enter键，则浏览器中结果是否能换行？
浏览器中结果：
你会发现，浏览器中显示的是一个空格！（已用红笔标出）
那么如何换行呢？
（4）换行标签
在要换行之前写 <br/>，若想在上段内容的“人工智能”开始换行，则：
在浏览器中，“人工智能”之后内容，则开始换行！
疑问：为什么换行后的那段内容的间隙比其他小？
这个其实也属于是浏览器的默认样式。
注意：
换行标签是一个单标签，所以没有结束标签。
br是break的缩写，表示换行。
（5）格式化标签
5.1加粗
是strong标签和b标签
5.2倾斜
em标签和i标签
5.3删除线
del标签和s标签
5.4下划线
ins标签和u标签
举例说明：
根据上面代码处的标签，浏览器中结果显示改动的地方（已用红笔标出）：
（6）html中的img标签（即：图片标签）
##1.img的src属性：
使用img标签的时候，必须要搭配着src属性，作用是：来引入图片的路径
相对路径：
（假设a位于文件夹之内则称之为a比文件夹低一级！）
&1：代码和图片都在该文件夹里面： ./xxx.png，假设该文件夹为x文件夹，则相当于是该图片和代码都是比x文件夹低1级！&2：该图片在代码所在的文件夹（即x文件夹）里的文件夹（设为y文件夹）的里面： ./y/xxx.png，相当于是该图片比y文件夹低1级，比x文件夹低2级！&3：图片与该文件夹是同一级： ../xxx.png，相当于是该图片与x文件夹同级！
图片再次解释：
上面的x文件夹就是这里的class_11_14文件夹，与该文件夹同级的是pinduoduo.png（也就是&3所描述！）
打开class_11_14文件夹后：
这里的class_11_14_3就是上面的y文件夹，而baidu.png（就是&1所描述！）
打开class_11_14_3文件夹：
这个huawei.png（就是&2所描述！）
举例说明：
绝对路径：
&4：如果想将网页中的任意图片导入代码，显示在浏览器中，则<img src = “右键复制图片路径”>
图12
我复制的是该图片：
浏览器显示：
（因图片太大所以分两部分截取）
##2.img的alt属性
alt属性：作用是替换文本，当文本不能正确显示的时候，会显示一个替换的文字
注意：这个alt属性是只有在图片加载失败的情况下才会显示文本内容！如果图片加载成功，那么文案就不会展示！
假如我将图12中的13行的<img src = “baidu.png”>故意改错为<img src = “baidu01.png”>，则结果如下：
##3.img的title属性
title属性：作用是提示文本，鼠标放到图片上，就会有提示。
举例说明：
##4.img的width/height属性
width/height属性：作用是控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
情景：我们导入的图片，有的时候会觉得太大了，那如何让它小一点呢？就可以使用这个属性！
其中width和height分别代表宽度和高度
举例说明：
将之前导入的向日葵图片的宽度设置成100px（其中px代表像素！）
注意：上面的代码中可以只写width，也可以只写height，也可以两个属性都写！
##5.img的border属性：
border属性：作用是给图片加一个边框，参数是宽度的像素，但是一般使用CSS来设定。
举例说明：现在给上面的向日葵图片加一个10px的边框：
整体总结：
<img >这里的img后面的属性顺序是无所谓的，并不是说src必须得排在第1个，而是任意属性排序顺序都无所谓。
10.易错部分：
10.1当我把上一个完整的html文档结构注释掉后，想再复用html的基本框架结构，将原本body部分的内容替换成”你好”，却发现浏览器里未能呈现”你好”这个结果！（如图13）
图12
图13
原因：注释只是告诉阅读代码的人这部分内容不需要关注，但是对于浏览器来说，它依然会按照既定规则，只会解析第1个有效的<html>，只有删除，页面才会显示正常预期内容，如图14
图14
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
