一. 前端开发介绍
- 在介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序,如下图所示:
- 文字、图片、音频、视频、超链接、表格等等。
- 程序员写的前端代码 (备注:在前后端分离的开发模式中,)
- 通过浏览器转化(解析和渲染)成用户看到的网页
- 浏览器中对代码进行解析和渲染的部分,称为 浏览器内核
而市面上的浏览器非常多,比如:IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。 而且我们电脑上安装的浏览器可能都不止一个,有很多。
但是呢,需要大家注意的是,不同的浏览器,内核不同,对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题,同一段前端程序,不同浏览器展示出来的效果是不一样的,这个用户体验就很差了。而我们想达到的效果则是,即使用户使用的是不同的浏览器,解析同一段前端代码,最终展示出来的效果都是相同的。
- 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):层叠样式表,用于控制页面的样式(表现)。
文章来源:https://www.toymoban.com/news/detail-416912.html
- 其中<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后缀的文件,默认是被浏览器识别的。
文章来源地址https://www.toymoban.com/news/detail-416912.html
总结:
![Web前端开发:HTML、CSS](https://imgs.yssmx.com/Uploads/2023/04/416912-5.png)
- <title>中定义标题显示在浏览器的标题位置
- <body>中定义的内容会呈现在浏览器的内容区域
- HTML标签不区分大小写,在项目开发当中一般使用的都是小写
- HTML标签的属性值,采用单引号、双引号都可以
- HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)
到了这里,关于Web前端开发:HTML、CSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!