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

前言

大家好，我是李钰，是一名大二非计算机专业的学生。我正在自学计算机前端知识，目标是本科毕业进入大厂。下面是我学习中的笔记，分享给大家哈！大家一起加油！
下面是我学习的视频来源
黑马程序员 前端开发入门教程，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）招聘

代码如下：

"en">
    
        
    
    
        
腾讯开发招聘
        

        
职位描述
        
负责一方面内容
        
岗位要求
        
5年以上的开发经验
        
熟悉操作系统
        
对web熟悉
        
工作地址
        
杭州市

        "../img/map.jpg" alt="">
        


    

效果如下：

2）跳转-index与其他页面

index.html

这是首页面index
"two.html" >到two页面

one.html

two.html

"one.html">到one页面

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）学生信息表

    


    "1"  width="600" height="300">
        
优秀学生表格
        

            
年纪
            
姓名
            
学号
            
班级
        
        

            
"3">高三
            
张三
            
119
            
四班
        
        

            
李四
            
110
            
五班
        
        

            
王五
            
666
            
一班
        
        

            
评语
            
"3">三好学生
            
        

    
    

2）表单

    


    
李钰相亲网
    

    
"">
        昵称："text" name="" id="" placeholder="请输入昵称">
        

        

        性别：
        "radio" name="sex" id="" checked>男
        "radio" name="sex" id="">女
        

        

        所在城市：
        "" id="">
            "">上海
            "">北京
            "" selected>郑州

        
        

        

        喜欢的类型：
        "checkbox" name="" id="">可爱
        "checkbox" name="" id="">清纯
        "checkbox" name="" id="">性感
        "checkbox" name="" id="">妩媚
        

        

        个人介绍：
        

        ""</span> id=<span class="token string">""</span> cols=<span class="token string">"60"</span> rows=<span class="token string">"20"</span>>
        
我承诺
        

            
本人英俊潇洒
            
已满18，单身
            
性格敦厚，好男人一个
        
        

        

        "checkbox" name="" id="">同意共享信息
        

        

        
        "submit" value="免费注册">
        

        

        
        
"reset">重写
    

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）新闻内容

    
        
        
    
    
       
"one" >
        
"center">《自然》评选改变科学的10个计算机代码项目
        
"center">
            2022.10.12 22:45报 李钰
            "color1">新华社
            "color2">请收藏关注
            


        

       
        
"two">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。  
        
        
"two">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的
            
        
"two">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”


        

    
 
    

2）图片完成

    
        
        
    
    
        
"good">
            "../../img/OIP-C.jpg" alt="">
            
"good" style="font-weight: 700;">小米七号热水壶   
        

            
        
        
        
    

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.实战演练

    
        
        
    
    
        "#">导航1
        "#">导航2
        "#">导航3
        "#">导航4
        "#">导航5
    

    
        
        
    
    
        "#" class="one">导航1
        "#" class="two">导航2
        "#" class="three">导航3
        "#" class="four">导航4
    

CSS盒子模型

1.优先级

1）基本顺序

2）叠加计算

2.组成

3.浏览器效果

    
        
        
    
    
        
内容模块
        
内容模块
        
    

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）新浪导航

    
        
        
    
    
        
"box">
            "#">首页
            "#">手机新浪网
            "#">新浪导航
            "#">加入我们
        
    

2）新闻列表

    
        
        
    
    
        
"new">
            
最新文章/New Articles
            

                
"#">北京的新闻
                
"#">上海的新闻
                
"#">广州的新闻
                
"#">深圳的新闻
                
"#">杭州的新闻
            
        

    

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

    
        
        
    
    
        
"header">首页
        
"content">
        
"one">
            
"left">
            
"right">
        
    

2）小米布局2

    
        
        
    
    
        
"box">
            
"left">
            
"right">
                

                    

                    

                    

                    

                    

                    

                    

                    

                

            
        
    

3）导航

    
        
        
    
    
        
"one">
            

                
"#">新闻1
                
"#">新闻2
                
"#">新闻3
                
"#">新闻4
                
"#">新闻5
                
"#">新闻6
                
"#">新闻7
                
"#">新闻8
            
        
    

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

代码如下
链接：https://pan.baidu.com/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.骨架标签

    
    "X-UA-Compatible" content="IE=edge">
    
    "viewport" content="width=device-width, initial-scale=1.0">

13.SEO

SEO三大标签

14.favicon-标题图标

大型实战演练——小兔鲜项目

代码在网盘里哈
链接：https://pan.baidu.com/s/1INVmUmlMr4U5UB49GuruzQ
提取码：mrx0
成果如下

补充一句，这里是对这篇学习笔记的补充（一点难度较高的内容），内容来自尚硅谷