失眠网 > Web前端html5+css3前端开发入门学习笔记

Web前端html5+css3前端开发入门学习笔记

时间：2021-11-29 01:06:32

文章目录

前言HTML认识HTML1. 网页组成和本质2.了解浏览器3.web标准4.HTML感知5.HTML骨架6.编译软件vscode的简介和使用7.注释8.标签组成和关系9.标题和段落10.换行和水平线标签11.文本格式化标签12.图片的基本使用和属性13.绝对路径14.相对路径的上级、同级、下级15.音频标签16.视频标签17.超链接18.实战演练1）招聘2）跳转-index与其他页面HTML基础1.列表1）使用场景2）无序和有序3）自定义2.表格1）使用2）表格标题和表头单元格3）结构标签（了解）4）合并单元格3.表单1）应用场景2）input的基本使用方法与占位符（提示信息）3）单选功能和默认选中4）上传多个文件5）按钮——input 与 button6）下拉菜单7）文本域8）label标签9）语义化标签10）字符实体4.实战演练1）学生信息表2）表单CSSCSS基础1.体验CSS2.CSS引入方式3.选择器1）标签2）类3）id4）通配符4.文字基本样式5.拓展1）层叠性2）颜色取值3）标签居中6.font复合属性7.文本缩进8.水平对齐方式9.文本修饰10.行高11.实战演练1）新闻内容2）图片完成CSS进阶1.选择器1）后代2）子代3）并集4）交集5）伪类2. emmet语法3.背景1）背景色2）背景图3）背景平铺4）背景位置5）background的属性连写6）背景图与img的区别4.显示模式1）块2）行内3）行内块4）转换5.拓张-标签嵌套6.CSS特性1）继承性2）层叠性7.实战演练CSS盒子模型1.优先级1）基本顺序2）叠加计算2.组成3.浏览器效果4.内容width和height5. border使用方法6. padding——多值7.内减模式8.外边距9.清除默认样式10.版心居中11.外边距的问题1）合并现象2）塌陷现象12.行内元素的垂直内外边距13.实战演练1）新浪导航2）新闻列表CSS浮动1.结构伪类1）基本用法2）公式2.伪元素3.标准流4.行内块问题5.浮动作用6.浮动特点7.拓展——CSS属性顺序8.清除浮动1）场景搭建2）额外标签3）单伪元素4）双伪元素5）overflow9.实战演练1）小米布局12）小米布局23）导航大型实战演练——学成在线项目CSS定位装饰1.定位1）作用与使用步骤2）相对relative3）绝对absolute——参照浏览器4）子绝父相5）居中6）位移居中7）固定8）显示层级2. vertical-align3.光标类型4.圆角边框5.溢出显示效果——overflow6.显示隐藏——基本使用7.透明属性opacity8.精灵图的使用步骤9.背景图大小10.盒子阴影11.过渡12.骨架标签13.SEO14.favicon-标题图标大型实战演练——小兔鲜项目

前言

大家好，我是李钰，是一名大二非计算机专业的学生。我正在自学计算机前端知识，目标是本科毕业进入大厂。下面是我学习中的笔记，分享给大家哈！大家一起加油！

下面是我学习的视频来源

黑马程序员前端开发入门教程，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的简介和使用

官网下载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属性名的属性值时按钮上的字。

button和input之间的实现功能的区别，请看下面链接

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><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>.10.12 22:45报李钰</span><span class="color1">新华社</span><span class="color2">请收藏关注</span><hr></p><p class="two">，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。 </p><p class="two">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的</p><p class="two">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在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>

大型实战演练——学成在线项目

代码如下

链接：/s/1INVmUmlMr4U5UB49GuruzQ

提取码：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.骨架标签

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">