8年前端带你HTML+CSS入门到实战(附视频+源码)

本文主要是解决:

        ☆ 想要自学前端开发,

        ☆ 但又不太想看博客文章,

        ☆ 觉得自学有点吃力,有点不知道学习步骤的同学

bd8054ba7e69472d83e83dc0a795ac8d.png

目录

一、HTML

1、需要了解熟练的标签

2、不太常用的标签

3、怎么算是HTML学好了,可以继续学CSS了

4、那么还有不常用不熟练的怎么办?

5、看视频学什么?

二、CSS部分

1、怎么算入门了

2、仍然会有不熟练的,甚至没有做过的

3、视频中还有实战项目哦

三、视频和实战源码已上传


一、HTML

 学习前端第一步是HTML,HTML是前端世界里的最基础也是最重要的部分之一。因为前端做的95%的工作几乎都是获取HTML元素,操作HTML元素,可以说服务端即便本事通天,手触海底,很多时候做的工作也是为我们前端HTML元素在做准备工作。

所以HTML看看有哪些标签,看完了就直接跳过去,开始CSS的学习,还不可取的。

1、需要了解熟练的标签

例如:

当要布局一个区域的时候,首先想到div标签;

当要布局一个列表的时候,可以想到ul li标签,也可以想到利用多个块元素去罗列,也可以想到采用多个行内的span元素通过转为行内元素去布局罗列;

当需要跳转的时候立刻要想到a标签,并且直接添加上href目标属性;

当需要布局一个图片的时候,是否可以直接想到img标签,并且可以明白src属性里的路径怎么样是绝对路径或者相对路径的使用,./ 和 ../ 路径查找的使用规则;

需要明白table这个标签是布局表格的,但哪些情况可以用table,哪些情况就必须用div和其他一些元素代替;

需要显示一个按钮的时候,什么时候采用button元素,什么时候写一个input type="submit"的元素;

输入框,密码框,单选框,复选框,富文本 这些是否可以灵活运用,并且什么时候需要套到form元素里,什么时候可以不套进去

哪些元素是单标签,哪些元素是双标签,必须写结束标签的;

2、不太常用的标签

例如:

iframe标签哪些时候用,他都有哪些属性;

dt dl 这些标签既然不常用,那么哪些场景可以用一下,或者一直不用也可以?

doctype是不是一个标签元素,这个声明的含义是什么;

h1到h6标签用于哪些场景,是不是不用也可以,哪些场景就用起来比较合适

等等等等吧,都是需要学习的

3、怎么算是HTML学好了,可以继续学CSS了

其实HTML标签非常多,即便高手也不可能每个都记到脑子里,非常清除他的底层意蕴。所以你需要做到的就是,看见一个区域,很快知道该用哪个元素去布局,哪里该用大的块元素,哪里是最终的那个行内元素,哪里需要把块元素转换一下,让他横着拍起来,哪里需要把行内元素转成块元素,用去嵌套其他元素。

有了这个思路,再加以练习,很快就可以开始下一步了。

4、那么还有不常用不熟练的怎么办?

你需要尽量把每个元素都练一遍,大致看看他的作用,自己做到有印象,可能平时想不起来,但别人提起来,或者做到某个布局的时候,可以联想到有这么个元素,但由于用不用两可,就不去用。

再有不熟练的怎么办,去查

5、看视频学什么?

看视频主要是解决入门的问题,不知道学习步骤的问题。即便是念了几万元的培训班下来,也是口诀666,实战就挠头。

所以,看视频还要看教你学习思路的视频,遇到不明白的,不熟悉的应该怎么去查,怎么去学习。

还要培养自己举一反三的能力,因为课上不可能把所有的知识点,练习都过一遍,而且更重要的是,参加工作了步入职场,能不能做到举一反三,比别人都一种思路,决定着你这个人是否是一个有灵性的人。

其实做开发,我们不需要多高的智商,只要入门了,然后肯下功夫就可以啦。(当然,找到了一个能让你入门的指引很重要)

二、CSS部分

很多人的对css的总结还停留在css是化妆师,可以让页面变得更漂亮上,其实不止于此,css还可以针对同类型的HTML元素,书写一个样式类就控制其样式显示,起到一个总控的作用;同时css也越来越强大,做出各种流畅的动画,同时启用GPU硬件加速的优秀特性,可以说如果某一天页面里没有js了,只用css控制HTML了我也相信。

1、怎么算入门了

当你需要布局一个区域的时候,你可以快速知道用什么HTML元素,不管是块元素,或者行内元素,可以通过块与行内的转换快速布局出来;

当你需要把一个元素定位到自己需要的位置的时候,想怎么定位怎么定位,想让他在哪里在哪里;

当你需要不管是float将两个块元素横向排列起来,还是通过display flex布局,还是转为行内元素,可以随心所欲,怎么做也可以的时候,

当你需要做一个按钮,不管是用span a div button 都得心应手的时候,

当需要鼠标上移变色,鼠标上移有个小过渡动画的时候,你可以快速写出来,就已经入门了

2、仍然会有不熟练的,甚至没有做过的

当你上一步可以看视频做到举一反三,并且很熟练的时候,其实已经可以面对日常的开发工作了。再遇见不熟练的,就去查,去别的网站爬,怎么爬,我视频里有,不要一说到爬虫就感觉好高端,我们前端只要你想获取到的,只要他们敢暴露出来的,我们一样可以快速爬过来。我的视频里应该有对应的部分。

谁都会有不熟练的,但不熟练并不是借口,你需要的是述职,通过练习熟知,即便不熟练,当你打开百度那一刻,可能很快你就能找到他了。

3、视频中还有实战项目哦

我自己想了一个项目,并且做出了具体的静态页面,供大家HTML + CSS实战练习。分为首页,列表页,详情页,个人中心等页面,还有登录,注册弹框等页面的练习。

其实一个网站如果想做成熟了,大概会有百八十个页面吧,但我这些都是主干页面,意思就是不管一个网站做多大,都只是这个主干的业务扩展,技术点上来说,80%还是这些技术点的复制粘贴,

后续还有很多知识点,我会利用休息时间慢慢补充的,有需要的也可以给我提建议!

三、视频和实战源码已上传

其实看视频只是一个入门,不会让你精通的,

精通还是要不断的练习;

参加工作,有了自己的理解,再不断实战中总结的东西,再将总结辅助工作实战,这样得出的才是开发真理所在;

当然这还不算精通,怎么算精通呢,其实日常工作中,大家80 90 % 的工作都是哪些东西,一旦碰见10%了,其实大部分人都觉得吃力,那么就是谁遇到了,谁做出来了而已。真正的精通场景是什么呢?面试,简历上写了精通,面试答题666,这就精通了。然后入职以后继续做日常工作。

名人名言咋说的来着:面试造火箭,工作拧螺丝。

同时高能预警:未来你的服务端同学可能会用node java python mysql 等语言,前端初学者不建议去过早触碰这些东西,等你有了一定的经验基础,如果还有时间,会有机会的。甚至最近特别火的chatgpt,感兴趣可以了解一下,但是不至于过多的花费时间。

bf33ee3fde704ae3835b4bc3b436cfa8.png

 850acdafdce14aa9ae6ac2f3c6b92573.png

 f543a023b3184759876287e47b181f35.png

 最后:我所希望解决的问题并不大,只是想让初学者入门顺带实战,找到学习的一个路线,帮你给家里节省点培训费用,而已。

后续还有很多知识点,我会利用休息时间慢慢补充的,有需要的也可以给我提建议!

  • 22
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 32
    评论
### 回答1: HTML CSS前端智慧校园系统网页源码,是指使用HTMLCSS语言编写的前端代码,用于创建一个智慧校园系统的网页。智慧校园系统是利用计算机和互联网技术,为学校提供信息化管理和服务的一种综合性平台。 网页源码主要包括HTMLCSS代码,HTML负责页面结构的搭建,CSS则负责页面样式的设计和布局。 在HTML代码中,可以使用不同的标签来创建网页的各个部分,比如头部导航栏、侧边栏、主要内容区域等。使用标签可以实现页面的划分和布局,方便用户进行浏览和操作。 而CSS样式代码则用于美化页面,通过定义不同的样式属性和值,可以设置网页中的文本字体、颜色、背景、边框等,从而使得网页具有更好的视觉效果。 在具体实现智慧校园系统网页的过程中,可以根据需求进行定制化开发,比如添加学生课程表、成绩查询、教师和学生信息管理等功能。通过将这些功能模块与HTMLCSS代码结合起来,可以实现一个全面而且美观的智慧校园系统网页。 总的来说,HTML CSS前端智慧校园系统网页源码是一个用于创建智慧校园系统网页的前端代码,通过HTMLCSS的结合,可以实现网页的布局和样式设计,为学校提供全面且美观的信息化管理和服务。 ### 回答2: HTML CSS前端智慧校园系统网页源码是用HTMLCSS编写的智慧校园系统的前端网页界面代码。该系统是基于Web的校园管理系统,在网页上实现了课程管理、学生成绩查看、作业提交、通知公告等功能。 HTML是用来定义网页结构的标记语言,它提供了丰富的元素和属性,用于构建网页的内容和布局。在智慧校园系统中,HTML被用来创建各种功能模块的网页元素,如导航栏、课程列表、成绩表等。通过使用不同的HTML元素和属性,可以实现不同功能的网页界面。 CSS是用来控制网页样式的样式表语言,它可以定义网页中元素的外观和布局。在智慧校园系统中,CSS被用来设置元素的颜色、字体、大小、边距等样式属性,以及调整元素的位置和布局。通过使用不同的CSS样式规则,可以使网页界面更加美观、易读和易用。 智慧校园系统的前端网页源码会包含HTMLCSS的代码,通过嵌套、引用和调用,将不同的功能模块组合起来,形成完整的网页界面。开发者需要根据系统需求和设计要求,编写对应的HTMLCSS代码,实现各种功能和效果。通过合理使用HTMLCSS的特性和技巧,还可以优化用户体验,提高系统的性能和响应速度。 综上所述,HTML CSS前端智慧校园系统网页源码是基于HTMLCSS的智慧校园系统的前端网页界面代码,通过编写和调整HTMLCSS代码,实现各种功能和样式效果,提供用户友好的界面和良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 32
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值