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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/31912.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NLP中的词向量对比:word2vec/glove/fastText/elmo/GPT/bert

点击上方,选择星标或置顶,每天给你送干货! 阅读大概需要15分钟 跟随小博主,每天进步一丢丢 作者:JayLou,NLP算法工程师 知乎专栏:高能NLP之路 地址:https://zhuanlan.zhihu.com/p/56…

6款AI写作工具类网站推荐(第二版)

我们搜集了一些AI写作工具,希望对你有帮助,不论是在提升工作效率方面,还是在了解最新的AI技术方面,帮助你提升工作效率。 Notion AI https://www.notion.so/product/ai NotionAi可以提供AI智能写作,还能检查代码、语法…

国内大模型侵权第一案,6 年成果,被爬取 200+ 万次,仅索赔 1 元?

整理 | 郑丽媛 出品 | CSDN(ID:CSDNnews) 上个月,学而思曾透露消息称,目前其正在自研数学大模型 MathGPT,即面向全球数学爱好者和科研机构,以数学领域的解题和讲题算法为核心打造而成。 彼时许多…

用GPT-4 写2022年天津高考作文能得多少分?

正文共 792 字,阅读大约需要 3 分钟 学生必备技巧,您将在3分钟后获得以下超能力: 积累作文素材 Beezy评级 :B级 *经过简单的寻找, 大部分人能立刻掌握。主要节省时间。 推荐人 | Kim 编辑者 | Linda ●图片由Lexica …

react聊天组件:用antd和react-chat-element组装的聊天列表

效果图: 安装库 用到了antd design和github上的一个库:react-chat-element (1)antd design: 安装:yarn add antd 修改 src/App.css,在文件顶部引入 antd/dist/antd.css import ~antd/dist/a…

chatgpt赋能python:人脸识别技术进程Python应用

人脸识别技术进程Python应用 人脸识别技术是计算机视觉领域的重要应用,随着深度学习技术的发展,越来越多的人开始关注并使用这种技术。Python作为一种高效、易用的编程语言,也在人脸识别领域得到了广泛应用,本文将介绍Python如何…

chatgpt赋能python:Python人脸搜索:进入智能搜索的新时代

Python人脸搜索:进入智能搜索的新时代 随着神经网络和深度学习的迅猛发展,人工智能已经成为许多领域中最重要的研究方向。人脸搜索的普及,是人工智能引领的技术革命最具有代表性的例子。Python作为一种高级编程语言,在人脸搜索领…

chatgpt赋能python:Python实现人脸识别系统

Python实现人脸识别系统 在当今科技发展的时代,人脸识别技术已经广泛应用于各行各业中,如安全防范、金融交易、医学检测等领域,成为了一个备受瞩目的技术。Python作为当今最流行的编程语言之一,其实现人脸识别系统的能力备受重视…

chatgpt赋能python:人脸识别软件的作用及发展

人脸识别软件的作用及发展 随着科技的飞速发展,人脸识别技术越来越广泛地应用于各个领域,例如安全监控、金融交易、社交网络等。人脸识别软件通过识别人脸图像中的特征来进行身份验证或辨认,具有高效、准确、便捷等优点。而Python作为一种易…

chatgpt赋能python:Python人脸匹配:自动识别人脸并进行匹配

Python人脸匹配:自动识别人脸并进行匹配 介绍 Python已经成为一种广泛使用的编程语言,在许多任务中被广泛应用。其中一项任务是人脸匹配,这是在安全性和身份验证方面非常有用的应用程序。Python提供了一些很好的库,使得在Python…

chatgpt赋能python:Python人脸识别教程

Python人脸识别教程 什么是人脸识别? 人脸识别是一种通过人脸图像进行身份识别的技术,根据人脸的特征信息进行比对,以识别一个人的身份。 Python人脸识别技术 Python是一种高级编程语言,现在被广泛应用于人工智能,…

IDEA官方中文插件!!!

随着IDEA2020.1版本的到来,官方也悄悄更新了IDEA的中文插件 不得不说,还是比较给力的。 打开设置–>插件: 搜索 Chinese (Simplified) Language Pack 下载重启,IDEA中文版就来啦。 整体效果还是不错的: ATFWU…

IDEA官方中文版插件

IDEA官方中文插件安装步骤: 打开Settings–>Plugins:搜索 Chinese (Simplified) Language Pack 下载重启,IDEA中文版安装完成。

IDEA好用的插件推荐

目录 1.Translation 2.GsonFormat 3. VisualVM Launcher 4.CodeGlance Pro 5.Key Promoter X 6.GenerateAllSetter 7..ignore 8.MyBatisCodeHelperPro 9.Grazie 10.Background Image Plus 1.Translation 翻译插件。程序员最痛苦的事莫过于阅读代码时遇到不懂的英文单词&#…

IDEA实用插件

IDEA中引入插件支持方式如下: 点击File-- Settings设置界面--PlugIns,安装指定的插件,安装后自动或手动重启IDEA。 1、Translation 【实用程度 ★★★★★】 用处:直接选中你想要翻译的词,然后右键选择,或…

idea中文版插件

IDEA怎么设置成中文? 首先点击左上角的File-Settings 进入设置 进入Settings后点击Plugins,在搜索框输入Chinese language pack,点击install安装插件 下载成功后,点击installed,找到下载的汉化插件,点击Restart IDE&…

如何缓解高考前紧张的情绪,ChatGPT这么说......

明天就要高考了,看到家长有各种打气的做法,既有上灵隐寺的,也有穿着旗袍希望旗开得胜的,还有说什么失败了不要紧的......,反正都是焦虑的不行。 面对高考,大多考生都会紧张,但适度的紧张对发挥出…

13、列表

一.列表 列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. 比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用’ , 隔开而且可以存放各种数据类型: 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型&#…

基于单片机无线防丢报警器设计过程分享

目录 【功能介绍】 【原理图】 【PCB】 【实物图】 【元器件清单】 【源代码】 【模块介绍】 【参考资料】 【参考文献】 【功能介绍】 本设计利用51单片机结合NRF24L01无线模块进行设计,防丢器分为两个部分,分为从机和主机,即发射模…

基于单片机倾角检测仪设计分享

目录 【功能介绍】 【原理图】 【PCB】 【实物图】 【元器件清单】 【源代码】 【参考资料】 【参考文献】 【功能介绍】 本设计利用51单片机为主控系统,采用三轴加速度传感器ADXL345进行倾角测量,可以实现两大功能: 实时显示当前测…