关于HTML和CSS的几个基础问题

一.什么是结构、样式、行为相分离？这样做的好处是什么？

1.首先，我们要了解，什么是html，css，javascript；
HTML:英文全称是 Hypertext Marked Language，即超文本标记语言。用HTML编写的超文本文档称为HTML文档。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

CSS：英文全称是 Cascading Style Sheets，即层叠样式表。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。所以CSS就是给HTML文件所写的网页结构进行装饰的。

Javascript：是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
上面这三个概念就可以解释什么是结构、样式、行为相分离了。其中结构就表示的是HTML文档，样式表示CSS文档，行为可以代表JavaSrcipt文档，这三者分开书写在不同的文件中，即为结构、样式、行为的分离。但是他们都会作用到同一个HTML结构上面。这样做的好处大可比喻成图书馆对图书的分类。 例如图书馆会按照内容把书分成工具书、文学、语言等不同的类别，为什么要这么做，这样清晰、方便、便于查找修改。并且在协同开发中我们的代码不只是写给自己看的，我们需要有这么一个默认的规则来兼容并解析不同的代码风格

二.什么是语义化？为什么要语义化？

其实很简单，在HTML中语义化就是指是用含有语言意义的标签来书写代码。在一个网页布局中，可能会用到许多div的标签，这些div在网页开发中被看作一个个盒子，作为网页内容的容器，但是当网页复杂的时候，全部使用div来布局的话会让开发人员十分难以阅读代码，整个代码全部都是div的盒子，开发人员并不能很轻松的确定哪个div是页面头部，哪个div是页面的底部，哪个div的大概功能是什么。所以在新版本的HTML中就新增了一些语义化的标签，在些标签本质上与div没有不同，在网页布局中都可以看成一个一个的小盒子，但是标签的名字却带有语义化，比如header 表示页面的头部，nav表示一个导航栏…通过这样的方法予以区分，对于开发人员就能很快了解整个网页的布局情况。同时对浏览器来说也能够快速的理解整个文档。

三.什么是CSS？它的特点有哪些？

层叠性
层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色，层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow）。】
继承性
继承性是指当子标签没有设置样式时，会继承父标签的样式。
比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性等。）
优先级
选择器的优先级大致遵循这样的顺序：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】
!important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。