前端基础入门(1)初识

前面

我们每天都在浏览着网络上丰富多彩的页面,那么在网页中所呈现出的绚丽多彩的内容是怎么设计出来的呢?我们想要自己设计一个页面又该如何来做呢?对于刚刚接触网页设计的小伙伴来说,看到网页背后的一堆符号和代码,是不是会感到有些凌乱。“看这里、看这里”,其实HTML并不复杂,严格意义上它并不是编程,它只是一些标记,也可以说是和浏览器的一些“约定”,就是告诉浏览器,要显示什么内容,这些内容是什么样式。

好了,不废话了,来个例子看下:

一个 HTML 小例子

第一步:新建“记事本”,把下面这段代码复制到记事本中去,然后保存。



    
        网页的标题    
    
    
        

左手程序Z右手诗

第二步:将记事本后缀名“.txt”改为“.html”。

第三步:点击“新建文本文档.html”这个HTML文件,就可以在浏览器打开了。

OK,是不是很简单,我们看一下过程:
前端基础入门(1)初识_第1张图片
通过上面的几行代码,不难看出,HTML就是由一些用尖括号围起来并且成对出现的标签组成。不错,HTML就是由若干标签及其包含的内容组成,这些标签一般都是成对出现的,有开始和结束,但也有部分自闭合标签例外,HTML的基本结构由以下几个部分组成:

标记符和,表明该文件是用HTML来描述的,声明了文档的开头和结尾。
标记符和 ,表示HTML文档头部信息的开始和结尾。头部信息主要包括页面的标题、相关说明等内容,它不作为网页的内容在浏览器中显示。
标记符和,网页中要显示的实际内容就在这两个标记符之间,它是网页的主体部分。
我们再对前面记事本里的代码加上注释,就会看的更明白。

  
  
  
     
  
  
    

左手程序Z右手诗

HTML 小总结

HTML(Hypertext Markup Language) 是用来描述网页的一种语言。

HTML 指的是超文本标记语言,不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag)。

HTML 使用标记标签来描述网页。

简单说来,HTML 就是我们与浏览器用来沟通交流的语言,我们通过 HTML 告诉浏览器让它按照我们的意愿展示出我们期望的内容及效果。

认识一下 CSS

大概了解了一下 THML,我们在来看一下 CSS,其实 CSS 就是一个标准的“颜值党”,它基本决定了网页的外观样式。HTML 和 CSS 相辅相成,它们一个负责网页上要显示的内容,另一个负责这些内容的布局和样式。

看个小例子,比如我要调整前面记事本里 HTML 所显示文字的字体、颜色和大小,如下:




    网页的标题
    
    


    

左手程序Z右手诗

先看一下在浏览器中的显示效果:

不难看出,在 HTML 文档的头部,就是标记的里面加上了,在这里定了

的样式,字体是“微软雅黑”,大小是“12pt”,颜色是“白色”,背景是“绿色”。

最后

OK!看完的小伙伴应该大概了解 HTML 和 CSS 是干什么的了吧,稍微总结一下,HTML就是一堆标签,这些标签告诉浏览器要显示的内容的是什么,CSS 就是告诉浏览器要如何显示这些内容。列一下前面例子里出现过的标签:




    
    
   
    





    

```一点说明 代码加注释是非常必要且重要的,它能提高代码的可读性。注释不参与编译,不会被执行,THML注释同样也不会在浏览器里显示,它只是代码的说明。 HTML注释:“”表示注释的结束。 CSS注释:“/*”表示注释的开始,“*/”表示注释的结束。

一点说明

代码加注释是非常必要且重要的,它能提高代码的可读性。注释不参与编译,不会被执行,THML注释同样也不会在浏览器里显示,它只是代码的说明。

HTML注释:“ ”表示注释的结束。

CSS注释:“/”表示注释的开始,“/”表示注释的结束。

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享)。.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中

你可能感兴趣的:(程序员,编程,web前端,资讯,科技,IT,JavaScript,vue,框架)