偶先用一个网站【千图网】的源码分析来了解CSS、HTML、JavaScript各自的作用
上图是千图网首页的布局,偶先通过Google Chrome来调试看看这个网站的首页(点击鼠标右键选择查看就可以看到如下图所示)
左边显示的是HTML的主要内容,右边显示的是CSS的内容
CSS是什么呢?其作用又是什么?
打开昵图网首页,大家可以看到整体布局非常美观。那如果没有CSS会怎么样呢?大家可以查看这个首页的的源码,可以看到是有引用css样式表文件。
偶现在将css引用给删掉
大家再来看下首页的效果
通过以上操作,你应该就能明白css的作用是什么了吧?
css的主要作用就是用于网页的排版布局和美化,能够让大家开发出来的网页更好看
HTML是什么?其作用是什么?
一个网页是有很多个部件组成的,有文字显示、有输入栏、有列表、有图片、有视频、有跳转到新的页面的链接。偶还是用上面网站的首页结合检查功能来说明。
上图中红色框标出来了,各种类型的部件。
上图中左侧显示了部分的Html的内容。更多的html的内容,可以到
/index.html
进行了解。非常详细
HTML标记语言的作用就是告诉浏览器,在加载的时候显示的是什么控件,再结合css就能够显示出非常漂亮美观的静态页面了。那如果要做一些动态的页面和数据交互,就需要用到JavaScript,你在这里没有提到这个问题,偶就不做具体的说明了。可以自行查阅相关文档及说明!
为什么看了视频还是看不懂?要如何学习?
对于初学者来说,其实偶是不在建议直接看视频来学习。个人的的建议是前期购买专业的web前端开发书或者通过偶上面讲到的w3school网站进行学习,将相关的基础识知点完全掌握,并跟着书上或者网站上的代码进行实际的敲打一篇或者多篇。一直到脑子里有印象和概念,看到一个网页,能够知道这个网页的布局是什么样子的,用到了哪些部件,这个部件对应的html标签是什么?可能用到了什么样的css样式?
只有做了这一步后,你再看视频教程。更多的是建议看一些项目实战的视频,采取第一次将视频看完,然后实际编写一次。如果遇到有不记得的地方,回看视频的,对照视频进行编写巩固。通过这样子的方式 不断的加深记忆以及理解html和css的作用。
多敲代码、多敲代码、多敲代码。编译运行查看实际效果,反复的这个过程中,偶相信你现在提到的这个问题,最终就不是问题了。
如你自己本身自学能力不足,还有一个建议就是去专门的IT教育机构进行系统的专业的学习。
如果你选择IT教育机构培训,一定要注意的就是机构的选择,这里面也有比较多的坑。
偶不是专门的web前端开发,但由于平时的工作原因,有时也需要自己写了些web页面。可以关注偶私信沟通交流!
@ css由哪几部分组成?
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS格式设置规则由选择器和声明两部分组成,其中选择器是标识格式元素的术语(如p、h1、类名或id),声明用于定义元素样式。
CSS的主要优点是提供了便利的更新功能。设计网站时,可以创建一个CSS样式表文件,然后将网站中的所有网页都连接到该样式表文件,这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时,使用该样式的所有网页的格式都会自动更新为新样式,而不必逐页进行修改。
@ css中focus的用法?
在css中,focus的意思是“焦点”,是一种伪类选择器,作用是选取获得焦点的元素;通过“:focus”选择器可以对获取焦点的元素设置样式,语法为“元素:focus{css样式代码;}”。
在css中,focus是焦点的意思,通常表示的是“:focus”选择器,“:focus”选择器用于选取获得焦点的元素。接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
@ css专业人士都是怎么给网站写css?
那当然是经验比较丰富的前端用的那些方案啦,首先是要有自己的一套,比如页面布局,涉及到div的各种定位,虽然有很多种写法都能还原成效果图的样子,但是优秀的前端会用自己熟悉那一两种方案,比如垂直居中。另外要熟悉各种第三方的组件库,可以大大节省时间精力,代码也更规范。响应式布局也是必须的,写一套代码就要考虑到所有尺寸的屏幕。less,sass等扩展也要了解。当然,代码提示丰富的编辑器也很重要,偶一直用hbuilder,还不错,偶一个后端都在用这个。