一、前端认知
1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 前端开发的核心语言
- HTML——结构
- CSS——样式
- JS——行为
二、HTML
> HTML（Hypertext Markup Language）翻译过来就是 超文本标记语言。
超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。
标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。
当我们将英语单词放入到标记当中，这时候我们可以称之为 标签（单标签、双标签）。
HTML的基本结构
<!DOCTYPE html>
<!-- 文档头（类型）声明 不是标签，代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
<!--网页的标题 -->
<title>html+css基础知识总结</title>
<!--针对搜索引擎和解析格式的属性->
<meta charset="utf-8"/>
<!--定义网页的关键字-->
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<!--定义网页的关键字-->
<meta name="description" content="html+css基础知识总结" />
</head>
<body>
<!-- 里面包含的绝大部分在页面中都是可见的， 主要用于搭建 HTML 结构 -->
</body>
</html>
head 中的元素
描述
<head>
定义了文档的信息
<title>
定义了文档的标题
<base>
定义了页面链接标签的默认链接地址
<link>
定义了一个文档和外部资源之间的关系
<meta>
定义了HTML文档中的元数据
<script>
定义了客户端的脚本文件
<style>
定义了HTML文档的样式文件
<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
三、CSS
> 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
1. CSS 的引入方式
-
内联样式表
<div style="width:100px;height:100px;background-color:red;"></div>内联样式表
-
内部样式表
写在内部<head> <style type="text/css"> div{ width: 100px; height: 100px; background: red; } </style> </head>内部样式表
-
外部样式表
单独写在一个文件中，通过 link 进行引入
rel：当前引入文件和文件本身的关系
type：当前引入文件的编码格式
href：用于书写引入外部样式所处位置<head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>外部样式表
2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。
CSS 选择器分为三种
- 标签名选择器div{width:100px;...}
会直接选择某一类标签，会针对这一类标签全部生效。
优先级：1 - 类选择器.div{width:100px;...}
使用类选择器时，需要我们给标签写上类名，如。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
优先级：10 - ID 选择器#div{width:100px;...}
使用 ID 选择器时，需要我们给标签写上 ID 名，如。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
优先级为：100
3. 引入方式的优先级
内联>内部 和 外部；
内部 和 外部 谁生效
- 如果选择器优先级相同的话，谁后引入谁生效。
- 如果选择器优先级不同，选择器优先级高的生效。
四、盒模型
> 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
> 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；。如下图所示。
盒模型
1. content（盒子模型中的内容）
下面通过一个 Demo 一起来学习 盒模型
<!DOCTYPE html>
<html>
<head>
<title>盒模型</title>
<meta charset="utf-8"/>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
感受
我认为在学习前搞清楚网页的构成很重要，方便我们理解这几个语言间的关系。网页可以想像成一层一层叠加组成的，html、css、JavaScript分别书写网页的结构、表现和行为。
CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此，学习CSS不仅要学它的使用，更要学习如何合理的运用到你想要表达的页面当中去，打造一个属于你自我特色的页面，这种实践内容才是我们学习的目的，才能促进我们不断进步。
