一. 前端开发介绍

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

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、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标签的时候尽量严谨一些)

Web前端开发：HTML、CSS相关推荐

1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
【web前端开发】CSS浮动
文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动方法1:额外标签方法2:单伪元素方法3:双伪元素方法4:overflow 1.浮动 ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...
【web前端开发】CSS定位
文章目录 1.定位介绍 2.定位的方式 2.1 相对定位 2.2 绝对定位 2.2.1 子绝父相 2.3 固定定位 3. 元素的层级关系 4. 总结 1.定位介绍定位有两个作用: 1.可以解决盒子和 ...
web前端开发-HTML+CSS基础入门课程笔记
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录概述术语版本和兼容性开发环境的准备第一 ...
3. web前端开发分享-css,js提高篇
http://www.cnblogs.com/jikey/p/3604459.html 一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清posit ...
（转）web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
企业中书写css,web前端开发企业级CSS常用命名，书写规范总结(示例代码)
(1)页面结构容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

Web前端开发：HTML、CSS

一. 前端开发介绍

二. HTML、CSS

总结：

Web前端开发：HTML、CSS相关推荐

最新文章

热门文章