初学前端小总结

1、什么是前端

前端就是指计算机web应用程序的前台界面。计算机前端就是创建web页面或APP前端界面呈现给用户的过程，通过HTML、CSS、JS（JavaScript）以及各种技术来实现互联网产品的用户界面交互，以图片和文字为主，用户使用网站的行为以浏览为主。简单来说前端就是写网页

2、网页组成

一个网页主要由结构、样式、行为三部分组成，

结构（HTML）：用于描述页面的结构；

表现（CSS）：用于控制页面中元素的样式；

行为（JavaScript）：用于响应用户操作。

HTML是超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML负责网页三个组成部分中的结构，HTML使用标签的形式来标识网页中的不同组成部分。所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

CSS 是指层叠样式表 (Cascading Style Sheets)，样式定义如何显示HTML 元素，用于控制web页面的外观。CSS负责网页三个组成部分中的表现，样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

JavaScript 是脚本语言（简称"JS")，是一种轻量级的编程语言，用于控制网页的行为。JavaScript负责网页三个组成部分中的行为，可插入 HTML 页面的编程代码，JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

3、名词解释

在学习web前端过程中，我们总是在和“标签”、“属性”打交道，如果不了解它们表示的含义，学起来就很迷惑，下面将对它们进行行解释：

• 标签

就是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的，具体在html中的变现形式 由 < > 括起来的对象 比如: html  head  body

 注意:

1.标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签  称作 单标签或者空标签 比如:meta

2.一个标签完整组成部分是分为3个部分  开始标签   结束标签   内容部分 <开始标签>内容部分</结束标签>

3.标签是允许嵌套的,但是要符合嵌套的标准

4.每一个标签都具备其对应含义，通常,我们也会将标签称作为元素  根元素   head元素  

• 属性

属性是额外的对标签进行描述的信息

属性的格式:  

通常格式是:  key=value  键值对的形式

少部分情况下格式:  只有key没有value值  它的值是逻辑值  true 或者 false  

一个标签是可以拥有多个属性的, 多个属性之间通过空格分隔，属性是写在开始标签的<>中。

属性可以分成两大类:

 全局属性:任何元素都具备的属性,叫做全局属性 ，常见的全局属性:    id  class  style  hidden          局部属性(特定属性):只能某一些元素能够使用

4、元素分类

通过在页面中的展示以及元素特性，可以将元素分为三大类：块级元素、行内元素、行内块元素。

块级元素特点：

• 块元素具有布局特点，一般常用于页面的整体布局
• 块元素独占其父元素的一行
• 块元素可以嵌套任何其他类型的元素（p元素除外，p元素不能嵌套任何块元素）
• 块元素可以设置宽、高
• 默认宽度由其父元素决定，默认高度由内容决定

行内元素

• 正常情况下，行内元素不会独占一行，直到一行排不下，元素才会自动换行
• 行内元素不可以设置宽、高
• 默认宽度和高度都由内容决定
• 行内元素一般不会嵌套块级元素，大多数是嵌套文本或其他行内元素

行内块元素

• 行内块元素不会独占一行
• 可以设置宽、高
• 默认宽度和高度有内容决定

5、引入css的三种方式

• 行内样式  每一个元素都具备style属性，通过该属性可设置元素的相关样式。缺点：复用性不高、样式更新麻烦；不符合网页标准
• 内联样式  通过style标签，在html中设置当前网页所需要的css样式内容。缺点：复用性不高；还存在模块没有分离，相互耦合，不独立
• 外联样式  将css的内容，独立保存在一份文件中，通过link标签去引入外部样式文件，该文件可以被任何的页面引用。

6、CSS选择器

要想为元素设置特定的样式，前提是需要找到并选中该元素，才能为它设置样式。css中通过选择器选择器选中相应元素

• 基础选择器 包括元素选择器、类选择器、id选择器、通配选择器
• 复合选择器 包括交集选择器、并集选择器
• 关系选择器 包括父子选择器、后代选择器、兄弟选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

7、CSS三大特性

• 层叠性        当有多个相同选择器或者同类型选择器选中同一个元素的同一个属性，但是设置的属性值不一样，就会优先选择靠近元素的选择器所设置的样式。当选择器的优先级不同时，无法通过层叠性样式冲突
• 优先级         ！important>行内样式>id选择器>类选择器>元素选择器>通配选择器
• 继承性          css规定一些通用样式属性，不需要频繁去写，通过继承即可实现

8、文档流

概念：网页是无数个网页一层一层叠加起来的，处于网页最底层的就称作文档流

基于文档流概念，元素就会有两种状态：

元素在文档流中时（默认情况）：

块级元素：

• 独占其父元素的一行
• 可以设置宽高
• 默认高度由内容决定，或者子元素决定
• .默认宽度是其父元素的100%
• 占据页面实际的位置

行内元素：

• 不会独占一行，在一行水平依次排列，直到排不下自动换行
• 不可以设置宽高
• 默认高度和宽度都是由内容决定
• 占据页面实际的位置

元素脱离文档流

• 一旦元素脱离文档流，将不再占据文档流中的位置
• 脱离文档流后，元素不再有任何的区分，统一视作一致的，没有区分
• 脱离文档流的元素可以设置宽高，不会独占一行

9、盒模型

页面中所有的元素，其本质都是一个矩形盒子，页面的本质就是一个一个的矩形盒子组成的，写网页的布局就是把这些盒子摆放到正确的位置上。盒模型可分为标准盒模型和IE盒模型（怪异盒模型）。不管是哪一种盒模型，其都是由4部分组成   盒模型： 内容区  +  边框  +  内边距 + 外边距