Web前端基础学习-1

HTML5/CSS简介

首先来说一说什么是HTML5，HTML5可以认为是字面上的意义，也就是HTML的第五代产品，当然从另一个角度来说它是一种新的富客户端解决方案。

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML：超文本标记语言。标记可以称为标签，节点，元素等。

HTML的核心是它的语义，也就是标签本身的含义。我们再写结构的时候只需要注重标签的语义而无需考虑标签的样式。

再写页面的时候，HTML、CSS、JS各有各的用处，HTML负责网页的结构，CSS负责网页的美化渲染，JavaScript负责用户与网页的交互。

写页面之前，主体结构一定要了解。

CSS

层叠样式表，它的核心是层叠，我们看到的最终效果往往不是一个CSS就能搞定的，它都是很多的CSS样式叠加才形成了用户最终看到的界面。

CSS的使用方式：

内联样式：直接写在行内，以style属性将样式直接写在元素上。

内部样式：写在<style>标签中的样式，通过选择器选择页面上的元素进行样式的添加。

外部样式：写在CSS文件中，通过link标签进行调用。

三种方式中，内联样式的优先级是最高的，另外两只优先级相同。写在页面中，优先级相同则写在后面的会覆盖前面的样式。（建议使用外部样式，写页面的时候要尽量做到结构与样式相分离，也就是页面结构，CSS样式最好不要放到一起）

网页的主体结构

<!DOCTYPE html> 文档声明头，主要是用来声明代码是H5的，如果不写的话，代码会被浏览器降级处理。

<html> 网页的全部

<head> 用来写对当前网页的一些设置信息，这些内容是用户看不到的

<body> 网页的主体，再页面上显示的内容基本上都在这里

HTML5 兼容性

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。

CSS Reset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

CSS Reset 下载地址: https://meyerweb.com/eric/tools/css/reset/

Normalize(号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)。

下载地址:https://necolas.github.io/normalize.css/

CSS Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

分类:

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

关于IE的条件注释可以参考https://www.cnblogs.com/liujunhang/articles/10667109.html.

CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。

属性前缀法:

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

hack	写法	实例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
_	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y

Web前端基础学习-1

HTML5 兼容性

相关推荐