前端基础之HTML+CSS

tips：惨，一个月没写网页了，感觉好像忘了好多东西，写个博客压压惊！

先写一个最简单的网页，桌面右键新建一个文本文档，修改后缀名为html，妥了，网页建好了！是不是很简单！想要显示内容？简单，在新建的文本文档中输入Hello Word，再改后缀名，是不是有了！是不是很神奇！

当然，这不能算是一个网页，网页是一个包含HTML标签的纯文本文件，那么这个文件它包含HTML标签吗，如果你用网页编辑器打开它你就会发现它没有任何的HTML标签。

一、HTML常用标签

1、构建一个网页的基础标签

所有的网页都会包含三对标签：<html></html><head></head><body></body> 

<html>
    <head>
    </head>
    <body>
    </body>
</html>

其中<html></html>是网页的跟标签，网页所有的内容都必须写在这一对标签之中，除了文档声明<!DOCTYPE html>，如果把html当作是一个整体，那么它就分成两个部分，head以及body。

head，译为头部，在这个部分写的是网页的标题，网页引用的脚本、样式、元信息等内容。

body，译为身体，在这个部分写的是网页的主体内容，所有呈现在你眼前的静态内容都写在这个部分。

2、<head>标签中的内容（常用）

<head>是双标签，定义在文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

• <meta>是单标签，该标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
• <title>是双标签，该标签定义文档的标题，浏览器将其显示在网页的标题栏或状态栏上。
• <link>是单标签，该标签定义文档与外部资源的关系，通常用来引用外部样式表。
• <style>是双标签，该标签用于为 HTML 文档定义样式信息。
• <script>是双标签，该标签用于定义客户端脚本，比如 JavaScript，可以通过 src 属性指向外部脚本文件。

3、<body>标签中的内容（常用）

<body>是双标签，定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

注：body中的标签有很多，回头再写一篇博客专门介绍

二、CSS常用样式

1、css是啥

css，Cascading Style Sheets缩写，即层叠样式表，定义如何显示HTML元素，通俗的讲就是让页面变的花里胡哨。

2、css的引用

css有三种引用方式，分别是内联样式，内部样式，外部样式。

内联样式写在网页的元素标签的style属性中：

<div style="width:100px;height:100px"></div>

内部样式写在头部的<style>标签中：

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: #000000;
    }
</style>

外部样式通过<link>标签引入

<link rel="stylesheet" type="text/css" href="style.css">

3、选择器

css中的一个标准的样式由两个部分组成，选择器和声明，选择器用于选择你想要改变样式的HTML元素，声明即是属性和值，例如

div{width:100px;height:100px;background:red}

div即是选择器，大括号中的即使样式。

css中常用的选择器是id选择器，类选择器，元素选择器。

id选择器是通过元素的id匹配到该元素，id是所有选择器中最特殊的一个选择器，因为它必须是唯一的，语法：

#box{width:100px;height:100px}

类选择器是通过元素的class匹配到该元素，不同的元素可以有相同的class名，一个元素可以有多个class名，语法：

.box{width:100px;height:100px}

元素选择器是通过元素的标签名匹配到该元素，语法：

div{width:100px;height:100px}

除此之外还有后代选择器、子代选择器、兄弟选择器，后代选择器用空格连接，匹配该元素下的每一个后代；子代选择器用 > 连接，匹配该元素的直系子代；兄弟选择器用 + 连接，匹配该元素的的同级元素。

div p{color:red}
div>p{color:red}
div+p{color:red}

4、css常用样式（写几个意思意思）

width: 100px;/*宽度*/
height: 100px;/*高度*/
color: red;/*字体颜色*/
background-color: red;/*背景颜色*/
background-image: url("xx.jpg");/*背景图片*/
font-size: 12px;/*字体大小*/
font-family: "宋体";/*字体样式*/
border: 1px solid red;/*边框*/
margin: 10px;/*外边距*/
padding: 10px;/*内边距*/

三、CSS布局

css可以分为两种布局，一种是div+css布局，另一种是table布局，前者是主流，后者逐渐被淘汰，但某些特定情况下仍旧会使用。

1、盒子模型

盒子模型是css的核心，即整个网页是一个大盒子，大盒子中放数个中盒子，中盒子再放数个小盒子，层层嵌套成整个网页。css的盒子模型有两种：IE盒子模型和标准的W3C盒子模型。盒模型由内容（content）、内边距（padding）、边框（border）以及外边距（margin）组成。两种盒模型的区别是IE的内容部分把内边距和边框计算了进去。

2、浮动

float，浮动，即让盒子浮起来，专业术语就是脱离文档流。浮动之后的元素不在文档中占据位置，它会向上浮动，直到撞到父级边框或者撞到别的浮动元素，后面的元素会自动向前填补位置。float有两个值，left和right，一者向左浮动，一者向右浮动。

浮动之后的元素不占文档位置，会导致其父级的高度塌陷，有三种解决办法：给父级设置固定高度、让父级浮动、清除浮动。（清除浮动回头再写一篇博客）

3、定位

position，定位，通过设置该属性的值改变元素的定位原点，默认为static，即没有定位，元素出现在正常的文档流中。除默认值外还有：

absolute，绝对定位，生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。设置该值，元素会向上查找设置过position的父元素，定位原点即是该父元素的原点。

relative，相对定位，生成相对定位的元素，相对于其正常位置进行定位。

fixed，窗口定位，生成绝对定位的元素，相对于浏览器窗口的定位。

inherit，继承父元素的position定位。

想要移动谁就给谁一个绝对定位，再给父级一个相对定位。

元素设置定位后，再设置left、right、top、bottom、四个属性值改变其位置

4、弹性盒模型布局（css3新增）

设置display：flex，该布局方式是css3新增的，回头再写一篇博客。

四、知识点

1、文档声明<!DOCTYPE html>

文档声明位于文档的第一行，作用时告知浏览器用什么文档标准解析这个文档。如果文档声明不存在，浏览器会以兼容模式呈现该文档的内容，兼容模式下，文档以宽松的向后兼容的方式显示，模拟老式浏览器的行为，防止站点无法工作。

2、div和span

div是块元素，独占一行，可以设置宽高；span是行内元素，宽高由内容撑开。两者运用得好会让布局变得很轻松。

3、外边距重叠

在css中，相邻的两个盒子同时设置了外边距（margin），那么两者的外边距将会合并成单独的外边距，称为折叠外边距。相邻的两个外边距都是正数时，折叠结果是两者中的较大值；相邻的两个外边距都是负数时，折叠结果时两者绝对值较大的值；相邻的两个外边距一正一负时，折叠结果时两者相加的值。

4、css多列等高

大盒子中有数个高度不同的小盒子

给大盒子设置overflow: hidden;小盒子设置margin-bottom: -999px;padding-bottom: 999px;

大盒子的高度会被撑到最高的那个小盒子的高度，其余比它低的小盒子会自动补偿这部分的高度差。

5、css优先级

优先级就近原则，同等权重下样式定义最近者为准，载入样式以最后载入的为准。

内联样式 > 内部样式 > 外部样式        ！important > id > class > tag   ！important的优先级比所有的都高

6、css的权重

标签的权重为1，class的权重为10，id的权重为100，权重的计算方式时相加，例如#box .class div{} 结果为100+10+1

to be continued~~~