文章目录
前言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><!-- 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>.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.骨架标签
<!-- 兼容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-标题图标
大型实战演练——小兔鲜项目
代码在网盘里哈
链接:/s/1INVmUmlMr4U5UB49GuruzQ
提取码:mrx0
成果如下
补充一句,这里是对这篇学习笔记的补充(一点难度较高的内容),内容来自尚硅谷
如果觉得《Web前端html5+css3前端开发入门学习笔记》对你有帮助,请点赞、收藏,并留下你的观点哦!