前言
大家好，我是李钰，是一名大二非计算机专业的学生。我正在自学计算机前端知识，目标是本科毕业进入大厂。下面是我学习中的笔记，分享给大家哈！大家一起加油！ 下面是我学习的视频来源 黑马程序员 前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程
HTML
认识HTML
1. 网页组成和本质
网页是由文字、图片、音频、视频、超链接组成。
网页的本质是前端程序员写的代码，经过浏览器转化（解析和渲染）。
2.了解浏览器
浏览器是网页显示、运行的平台，前端开发必备的神器。
五大浏览器：IE、火狐、谷歌（最强）、Safar、Opera
浏览器通过渲染引擎，即浏览器的内核对代码进行解析渲染。 下面是不同浏览器的内核，内核不同，它们的加载代码的性能、速度、效果不同。
3.web标准
web标准保准不同浏览器打开的网页一样。
web标准由三个部分组成，详见下方
4.HTML感知
第一个代码！！！
5.HTML骨架
如同规则的万物一样，HTML也有自己层次分明的骨架结构。
简单说，从上至下，html整体、head头部、title标题、body身体。
6.编译软件vscode的简介和使用
请自行下载观看使用说明。
7.注释
注释很重要，是为了帮助下次阅读代码者的快速理解。
快捷键是ctrl+/，一次变为注释，再一次取消。
8.标签组成和关系
标签一般由开始标签、包裹内容、结束标签。
单标签：< br > 、< hr >
关系：嵌套、并列
9.标题和段落
每个文章都需要标题，且标题的数量和重要性不一。
代码：< h1>一级标题< /h1 > 标题由h1到h6，标题的重要性依次降低，大小依次减小。
段落也是经常出现。 代码：< p > 内容 < p >
10.换行和水平线标签
作用：强制让文字换行 代码：< br >
作用：可以在文字和标题之前由水平分割线 代码：< hr >
11.文本格式化标签
右边在突出重要的强调语境时使用。使用时效果左右两者一样。
12.图片的基本使用和属性
作用：使用图片 代码：< img src=" " alt= " " >
13.绝对路径
作用：找到文件，如图片文件、视频文件、音频文件等
这是指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
14.相对路径的上级、同级、下级
作用：找到文件，如图片文件、视频文件、音频文件等
这个是指从当前文件出发，找到目标文件的过程。因此产生了三种关系：上级、同级、下级。 代码同级：src = " ./路径" 下级：src=" 文件夹名/图片文件名" 上级：src=" ../文件夹名/图片文件名" ./是进入下一级，../是进入上一级
15.音频标签
作用：引入音频
代码：< audio src=" " controls > < /audio >
属性如下：
16.视频标签
作用：引入视频
代码：< video src=" "> < /video >
属性如下
17.超链接
作用：引入链接
代码：< a href=" ">超链接< /a > 注意：1.当不知道跳转链接时，可以填写#，表示空链接 2.超链接唯一自带颜色的链接。 3.href本质是跳转地址。
属性如下
18.实战演练
1）招聘
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>dayone</title>
</head>
<body>
<h1>腾讯开发招聘</h1>
<hr>
<h2>职位描述</h2>
<p>负责一方面内容</p>
<h2>岗位要求</h2>
<p>5年以上的开发经验</p>
<p>熟悉操作系统</p>
<p>对web熟悉</p>
<h2>工作地址</h2>
<p>杭州市</p>
<img src="../img/map.jpg" alt="">
<!-- 这里是我电脑上的路径，有需要可以自换 -->
</body>
</html>
效果如下：
2）跳转-index与其他页面
index.html
<h1>这是首页面index</h1>
<a href="two.html" >到two页面</a>
one.html
<video src="sample.mp4" controls loop>视频</video>
<audio src="sample.mp3" controls loop>音频</audio>
two.html
<h1><a href="one.html">到one页面</a></h1>
HTML基础
1.列表
1）使用场景
应用在内容规则排序的情况下。
对内容顺序无要求使用无序列表，有先后要求用有序列表，另有其他需求使用自定义列表。
2）无序和有序
无序列表
注意：不想要小点时，可以改变ul的css属性，即list-style : none ;
有序列表
3）自定义
2.表格
1）使用
属性如下
2）表格标题和表头单元格
3）结构标签（了解）
在视觉上没有任何区别，主要是为了计算机能够快速理解和处理。
4）合并单元格
3.表单
1）应用场景
在登录、注册、搜索区域时使用。
2）input的基本使用方法与占位符（提示信息）
intput的基本使用方法。
占位符
3）单选功能和默认选中
4）上传多个文件
5）按钮——input 与 button
reset标签要与form配合使用。
在button中value属性名的属性值时按钮上的字。
6）下拉菜单
7）文本域
8）label标签
9）语义化标签
没有语义的标签
有语义的标签
10）字符实体
因为网页不认识多个空格，只认识一个空格，所以需要字符实体来控制。
4.实战演练
1）学生信息表
<!DOCTYPE html>
<head>
<title>优秀学生表格</title>
</head>
<body>
<table border="1" width="600" height="300">
<caption><h3>优秀学生表格</h3></caption>
<tr >
<th>年纪</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<th rowspan="3">高三</th>
<th>张三</th>
<th>119</th>
<th>四班</th>
</tr>
<tr>
<th>李四</th>
<th>110</th>
<th>五班</th>
</tr>
<tr>
<th>王五</th>
<th>666</th>
<th>一班</th>
</tr>
<tr>
<td><strong>评语</strong></td>
<td colspan="3"><strong>三好学生</strong></td>
</tr>
</table>
</body>
</html>
2）表单
<!DOCTYPE html>
<head>
<title>表单练习</title>
</head>
<body>
<div><h1>李钰相亲网</h1></div>
<hr>
<form action="">
昵称：<input type="text" name="" id="" placeholder="请输入昵称">
<br>
<br>
性别：
<label ><input type="radio" name="sex" id="" checked>男</label>
<label ><input type="radio" name="sex" id="">女</label>
<br>
<br>
所在城市：
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="" selected>郑州</option>
</select>
<br>
<br>
喜欢的类型：
<label ><input type="checkbox" name="" id="">可爱</label>
<label ><input type="checkbox" name="" id="">清纯</label>
<label ><input type="checkbox" name="" id="">性感</label>
<label ><input type="checkbox" name="" id="">妩媚</label>
<br>
<br>
个人介绍：
<br>
<textarea name="" id="" cols="60" rows="20"></textarea>
<div><h3>我承诺</h3></div>
<ul>
<li>本人英俊潇洒</li>
<li>已满18，单身</li>
<li>性格敦厚，好男人一个</li>
</ul>
<br>
<br>
<input type="checkbox" name="" id="">同意共享信息
<br>
<br>
<!-- button -->
<input type="submit" value="免费注册">
<br>
<br>
<div><button type="reset">重写</button></div>
</form>
</body>
</html>
CSS
CSS基础
1.体验CSS
CSS一般写在style标签里面的，style一般在head里面。
格式如下：
2.CSS引入方式
CSS引入方式有嵌入式、外联式、内联式。
3.选择器
1）标签
2）类
3）id
4）通配符
4.文字基本样式
5.拓展
1）层叠性
即后面的覆盖前面的，在CSS的样式中，往往取最后的颜色、字体、大小等展现，而非前面的几个的样式。
2）颜色取值
3）标签居中
6.font复合属性
7.文本缩进
8.水平对齐方式
注意：居中的元素有文本、span、a、input、img标签。它们的父级添加标签。
9.文本修饰
10.行高
11.实战演练
1）新闻内容
<html>
<head>
<title>practice3</title>
<style>
p{
color: #000;
}
.one
{
color: #000;
width: 600px;
height: 600px;
margin: 0 auto;
}
.center{
text-align: center;
}
.color1{
color: blue;
font-weight: 700;
}
.color2{
color:red;
text-decoration: underline;
}
.two{
text-indent: 2em;
}
</style>
</head>
<body>
<div class="one" >
<h2 class="center">《自然》评选改变科学的10个计算机代码项目</h2>
<p class="center">
<span>2022.10.12 22:45报 李钰</span>
<span class="color1">新华社</span>
<span class="color2">请收藏关注</span>
<hr>
</p>
<p class="two">
2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
</p>
<p class="two">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的
</p>
<p class="two">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
</p>
</div>
</body>
</html>
2）图片完成
<html>
<head>
<title>practice4</title>
<style>
body{
background-color: aliceblue;
}
.good{
width: 234px;
height: 600px;
background-color: aliceblue;
margin: 0 auto;
text-align: center;
}
img{
width: 180px;
height: 200px;
}
</style>
</head>
<body>
<div class="good">
<img src="../../img/OIP-C.jpg" alt="">
<p class="good" style="font-weight: 700;">小米七号热水壶 </p> </p>
</div>
</body>
</html>
CSS进阶
1.选择器
1）后代
2）子代
3）并集
4）交集
5）伪类
2. emmet语法
3.背景
1）背景色
2）背景图
3）背景平铺
4）背景位置
5）background的属性连写
这里的连写顺序不如font一样强制，但推荐顺序如下
6）背景图与img的区别
img一般在使用重要的图片时用，不重要的图使用div+img。
4.显示模式
为了在开发网页中有多种显示方式。
1）块
2）行内
3）行内块
4）转换
5.拓张-标签嵌套
6.CSS特性
1）继承性
注意：继承也会有例外的情况，如果子元素自带特定的特点，则不会继承相应的父元素特点。如由于超链接具有自己的颜色，所以颜色不会继承。h1等不会继承font-size。
2）层叠性
7.实战演练
<html>
<head>
<title>practice1</title>
<style>
a{
text-decoration: none;
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
color: aliceblue;
text-align: center;
line-height: 50px;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>
<html>
<head>
<title>practice2</title>
<style>
a{
width: 100px;
height: 50px;
text-decoration: none;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 50px;
color: #000;
font-weight: 700;
background-repeat: repeat-x;
background-position: center center;
}
.one{
background-image: url(../../img/橙色.png);
}
.two{
background-image: url(../../img/紫色.png);
}
.three{
background-image: url(../../img/红色.png);
}
.four{
background-image: url(../../img/绿色.png);
}
.one:hover{
background-image: url(../../img/map.jpg);
}
.two:hover{
background-image: url(../../img/map.jpg);
}
.three:hover{
background-image: url(../../img/map.jpg);
}
.four:hover{
background-image: url(../../img/map.jpg);
}
</style>
</head>
<body>
<a href="#" class="one">导航1</a>
<a href="#" class="two">导航2</a>
<a href="#" class="three">导航3</a>
<a href="#" class="four">导航4</a>
</body>
</html>
CSS盒子模型
1.优先级
1）基本顺序
2）叠加计算
2.组成
3.浏览器效果
<html>
<head>
<title>text2</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
border: 1px solid #000;
padding: 20px;
margin: 50px;
}
</style>
</head>
<body>
<div>内容模块</div>
<div>内容模块</div>
</body>
</html>
4.内容width和height
5. border使用方法
如果想要盒子的一边显示
盒子边框的属性如下
6. padding——多值
可以通过padding: 上 右 下 左来设置padding内边距区域的上下左右的大小。
7.内减模式
8.外边距
可以通过margin: 上 右 下 左来设置margin外边距的上下左右的大小。
9.清除默认样式
10.版心居中
版心即有效内容，使版心居中在布局上更为美观，一般可以用外边距来实现，即margin：0 auto ;
11.外边距的问题
1）合并现象
2）塌陷现象
12.行内元素的垂直内外边距
问题：如果想要通过padding或margin改变行内标签的垂直位置，无法生效。
方法：使用line-heigt来改变。
13.实战演练
1）新浪导航
<html>
<head>
<title>新浪导航</title>
<style>
.box{
height: 40px;
border: bottom 1px solid #b7bac0 ;
border-top: 3px solid orange;
}
.box a{
padding:0 16px 0 16px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 24px;
color: #4c4c4c;
text-decoration: none;
font-weight: 400;
}
.box a:hover{
background-color: #cfcfcf;
color: orange;
}
</style>
</head>
<body>
<div class="box">
<a href="#">首页</a>
<a href="#">手机新浪网</a>
<a href="#">新浪导航</a>
<a href="#">加入我们</a>
</div>
</body>
</html>
2）新闻列表
<html>
<head>
<title>新闻案例</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.new{
width: 500px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
padding: 42px 30px 0;
}
.new h2{
font-size: 30px;
border-bottom: 1px solid #ccc;
line-height: -10px;
padding-bottom: 9px;
}
ul{
list-style: none;
}
.new li{
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.new a{
text-decoration: none;
color: #666;
font-size: 18px;
}
.new li:hover{
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="new">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京的新闻</a></li>
<li><a href="#">上海的新闻</a></li>
<li><a href="#">广州的新闻</a></li>
<li><a href="#">深圳的新闻</a></li>
<li><a href="#">杭州的新闻</a></li>
</ul>
</div>
</body>
</html>
CSS浮动
1.结构伪类
1）基本用法
2）公式
2.伪元素
3.标准流
4.行内块问题
问题：浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个间距。
5.浮动作用
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来.
浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动
6.浮动特点
7.拓展——CSS属性顺序
1.浮动/display 2.盒子模型：margin border margin padding 宽度高度背景色 3.文字样式
原因：浏览器的执行效率更高
8.清除浮动
1）场景搭建
2）额外标签
3）单伪元素
4）双伪元素
5）overflow
9.实战演练
1）小米布局1
<html>
<head>
<title>
practice1
</title>
<style>
.header{
height: 40px;
background-color: #000;
color: red;
text-align: center;
font-weight: 400;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: large;
line-height: 40px;
}
.content{
background-color: pink;
width: 1226px;
height: 100px;
margin: 0 auto;
}
.one{
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left{
width: 234px;
height: 460px;
background-color:orange ;
float: left;
}
.right{
width: 992px;
height: 460px;
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="header">首页</div>
<div class="content"></div>
<div class="one">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
2）小米布局2
<html>
<head>
<title>practice2</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1226px;
height: 614px;
background-color: #ffff；
margin: 0 auto;
}
.left{
float: left;
width: 234px;
height: 614px;
background-color: orange;
}
.right{
float: right;
width: 978px;
height: 614px;
background-color: #ffff;
}
ul{
list-style: none;
}
.right li{
float: left;
width: 234px;
height: 300px;
background-color:skyblue;
margin-right: 14px;
margin-bottom: 14px;
}
.right li:nth-child(4n){
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
3）导航
<html>
<head>
<title>practice3</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul li {
float: left;
}
.one ul li a{
text-decoration: none;
width: 80px;
height: 50px;
background-color: pink;
display: inline-block;
color: aliceblue;
text-align: center;
line-height: 50px;
font-weight: 400;
font-size: 16px;
}
.one ul li a:hover{
background-color: orange;
}
.one{
margin: 50px auto;
width: 640px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="one">
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</div>
</body>
</html>
大型实战演练——学成在线项目
代码如下
链接：pan.baidu.com/s/1INVmUmlM…
提取码：15ht
成品如下
CSS定位装饰
1.定位
1）作用与使用步骤
网页布局的方式共三种，具体如下
2）相对relative
注意：left 与right同时存在时，以left为准。同理，top与bottom同时存在时，以top为准。
3）绝对absolute——参照浏览器
注意：此类先找已经定位的父级，依次为参照物进行移动。如果没有。就以浏览器窗口为参照物。
还有使用此类属性会使其脱标，不占位置。也改变了标签的显示特点，使其具有行内块的特点。
此外绝对定位的盒子不能用margin: 0 auto;居中
4）子绝父相
一般我们会对父级进行相对定位，子级进行绝对定位，这样配合使用可以是子级在父级内相对移动。 同时，值得注意的是父级是一个广泛的概念，非直接的父级元素也是参考此的。在子级寻找父级定位时，会由近及远，主机查找已定位的父级元素，如果查找不到就以浏览器窗口为参照进行定位。
5）居中
/*水平居中*/
/*整个盒子移动到浏览器中间偏右的位置*/
left:50%;
/*把盒子向左侧移动：自己宽度的一半*/
margin-left:-150px;
/*垂直居中*/
/*整个盒子移动到浏览器中间偏下的位置*/
top:50%;
/*把盒子向上侧移动：自己宽度的一半*/
margin-top:-200px;
6）位移居中
/*位移：自己宽度高度的一半*/
transform:translate(-50%,-50%);
7）固定
8）显示层级
注意：在默认情况下，定位的盒子后来者居上。
在使用定位的情况下，可以使用z-index：整数；，取值越大，显示顺序越靠上。默认值为0
2. vertical-align
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
值得注意的是，浏览器处理行内标签，处理行内块时是按照与文字类型一样的方式来处理。
3.光标类型
4.圆角边框
5.溢出显示效果——overflow
6.显示隐藏——基本使用
visibility:hidden;是占位隐藏
display: none ;是不占位隐藏
7.透明属性opacity
8.精灵图的使用步骤
9.背景图大小
10.盒子阴影
11.过渡
12.骨架标签
<!-- 兼容IE与edge浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 宽度=设备宽度：移动端网页开发 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13.SEO
SEO三大标签
14.favicon-标题图标
大型实战演练——小兔鲜项目
代码在网盘里哈
链接：https://pan.baidu.com/s/1INVmUmlMr4U5UB49GuruzQ
提取码：mrx0
成果如下
