Web前端开发：HTML、CSS

文章列表

Web前端开发：HTML、CSS

一. 前端开发介绍

1. 网页有哪些部分组成 ?

2. 我们看到的网页，背后的本质是什么 ?

3. 前端的代码是如何转换成用户眼中的网页的 ?

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

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

要想达成这样一个目标，我们就需要定义一个统一的标准，然后让各大浏览器厂商都参照这个标准来实现即可。而这套标准呢，其实早都已经定义好了，那就是我们接下来，要介绍的web标准。

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分(前端页面开发的三剑客)：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的动作和行为（交互效果）。
前端网页开发除了这三项基础的核心技术之外，现在还有非常流行的一些高级技术，比如像前端现在开发非常流行的基于JS封装的高级框架Vue，还有基于Vue封装的桌面组件库Element UI，以及异步交互技术Ajax，以及Axios等技术，前端项目的部署服务器Nginx。

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页面的基础结构标签

2. HTML中的标签特点