Web前端开发:HTML、CSS

一. 前端开发介绍

  • 在介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序,如下图所示:

1. 
网页有哪些部分组成
?
  • 文字、图片、音频、视频、超链接、表格等等。
2. 
我们看到的网页,背后的本质是什么
?
  • 程序员写的前端代码 (备注:在前后端分离的开发模式中,)
3.
前端的代码是如何转换成用户眼中的网页的
?
  • 通过浏览器转化(解析和渲染)成用户看到的网页
  • 浏览器中对代码进行解析和渲染的部分,称为 浏览器内核

而市面上的浏览器非常多,比如:IE、火狐Firefox、苹果safari、欧朋、谷歌ChromeQQ浏览器、360浏览器等等。 而且我们电脑上安装的浏览器可能都不止一个,有很多。

但是呢,需要大家注意的是,不同的浏览器,内核不同,对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题,同一段前端程序,不同浏览器展示出来的效果是不一样的,这个用户体验就很差了。而我们想达到的效果则是,即使用户使用的是不同的浏览器,解析同一段前端代码,最终展示出来的效果都是相同的。

要想达成这样一个目标,我们就需要定义一个统一的标准,然后让各大浏览器厂商都参照这个标准来实 现即可。 而这套标准呢,其实早都已经定义好了,那就是我们接下来,要介绍的web
标准。
Web标准
也称为
网页标准
,由一系列的标准组成,大部分由W3C
( World Wide Web Consortium,万维网联盟)负责制定。由三个组成部分(前端页面开发的三剑客):
  • HTML:负责网页的结构(页面元素和内容)。
  • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
  • JavaScript:负责网页的动作和行为(交互效果)。
  • 前端网页开发除了这三项基础的核心技术之外,现在还有非常流行的一些高级技术,比如像前端现在开发非常流行的基于JS封装的高级框架Vue,还有基于Vue封装的桌面组件库Element UI,以及异步交互技术Ajax,以及Axios等技术,前端项目的部署服务器Nginx。

 二. HTML、CSS

HTML(HyperText Markup Language):超文本标记语言。

  • 超文本:超越了普通文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。像平时基于Windows当中的记事本这一类的工具所编写的一些文本都称之为普通文本。
  • 标记语言:由标签构成的语言。
  • HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。XML就是一种标记语言,XML是可扩展的标记语言。
  • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

  • 其中<html>是根标签,<head><body>是子标签,<head>中的字标签<title>是用来定义网页的标 题的,里面定义的内容会显示在浏览器网页的标题位置。
  • <body> 中编写的内容,就网页中显示的核心内容。
  • 学习HTML主要学习HTML当中的这些常用的标签,而我们学习CSS主要学习的就是CSS当中所定义的常见的样式。
  • h1标签它是一个标题标签,它是一级标题标签。
  • HTML文件通常来说它的后缀名都是.html,HTML结构标签最外层的html,浏览器在解析的时候一旦见到了html标签,那就知道要以HTML的格式来解析。
  • 在html的标签中还要定义两对子标签,一对是head代表头,一对是body代表体,那在head当中,我们需要通过title这个标签来定义HTML文件的标题,在body当中,我们就可以来编写HTML的页面内容了title标签控制的就是HTML文件的标题。
  • 当把后缀名改为.html之后,这个文件就马上被电脑的浏览器识别出来了,原因是因为在我们的操作系统当中,如果是.html后缀的文件,默认是被浏览器识别的。

 总结:

1. HTML
页面的基础结构标签
  •  <title>中定义标题显示在浏览器的标题位置
  • <body>中定义的内容会呈现在浏览器的内容区域
2. HTML
中的标签特点
  • HTML标签不区分大小写,在项目开发当中一般使用的都是小写
  • HTML标签的属性值,采用单引号、双引号都可以
  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>