Web前端基础学习-1

时间 2019-11-17

标签 web 前端基础学习栏目 HTML 繁體版

原文原文链接

HTML5/CSS简介css

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

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

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

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

HTML：超文本标记语言。标记能够称为标签，节点，元素等。github

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

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

写页面以前，主体结构必定要了解。安全

CSSpost

层叠样式表，它的核心是层叠，咱们看到的最终效果每每不是一个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
\0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

说明：在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

选择器前缀法:

选择器前缀法是针对一些页面表现不一致或者须要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最多见的是

*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 等等

CSS Hack利弊：

通常状况下，咱们尽可能避免使用CSS hack，可是有些状况为了顾及用户体验实现向下兼容，不得已才使用hack。好比因为IE8及如下版本不支持CSS3,而咱们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种状况下若是不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会形成html文档混乱不堪，增长管理和维护的负担。

优雅降级和渐进加强:

因为低级浏览器不支持 CSS3，可是 CSS3 特效太优秀不忍放弃，因此在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。两者的目的都是关注不一样浏览器下的不一样体验，可是它们侧重点不一样，因此致使了工做流程上的不一样。

渐进加强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，而后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，而后针对浏览器测试和修复。好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack 使其能够在低版本浏览器上正常浏览。

第三方插件:

关于兼容性问题，除了上述的解决方案外，还能够经过使用第三方的插件来解决兼容性问题。

我的笔记

关于一些标签的使用咱们能够经过一些网站进行查询，能够去国内较为完善的W3cschool进行了解。

下面是一些零碎的知识点：

get和post的区别（get和post都是表单的属性method的属性值，method是表单提交数据的方式）：

一、get的传输方式的传输速度快，而post的传输速度就比较慢。

二、get的安全程度低，post的安全程度则是相对较高。

三、get的传输数据小，post能够传输的数据比较大。

百度的搜索内容通常就是用get的方式提交，而一些比较隐私的，例如帐号登陆时的数据提交用的是post。get和post本质没有什么区别，只不过get传输时是直接传输过去，而post则是先发起请求，等待响应返回以后才会开始传输数据，因此才有了以上的区别。

选择器生效的一些注意点：

权重的比较方式：ID选择器的权重最高，类选择器其次，元素选择器最低。

对比时，两个选择器，一个有ID选择器，一个没有，则无论后面有多少个类或者元素都没有ID选择器的高。

在直接选中的状况下，权重的生效，权重相同则是后面的会覆盖前面的样式；

在两个选择器都没有选中的状况下，哪个更精确，那个就能生效；

两个都没选中并且精确度也是一样的状况下，仍是比较权重。

在CSS中标签的等级大体分类：

块级元素：

一、独占一行；

二、能够设置其宽高；

三、不设置宽度，宽度则默认是100%；

四、能够当作容器使用。

行内元素：

能够和其余行内元素并排显示；

不能设置宽高，内容宽度为其宽度，行高为其高度。

行内块元素：

其既能够设置宽高，又能够和其余元素并列一行（非块元素）。ps:表单中的input是行内块元素

标准文档流：

浏览器的解析方式，从上到下、从左到右。

文本流：

网页中的文本内容。

脱离标准文档流的方式：

浮动，绝对定位，固定定位等。

元素浮动后会造成字围效果，是由于其只是脱离了标准文档流，可是没脱离文本流。

子元素所有浮动以后父元素的高度会变成零。

咱们通常用有如下几种方法解决：

一、.clearfix{*zoom=1;}.clearfix:before,.clearfix:after{context:" ";display:table;}.clearfix:after{clear:both}（给父元素一个.clearfix的类名，将其放入样式中能够解决浮动的问题）

二、直接设置父元素的高度

三、父元素设置样式：overflow:hidder;

四、隔墙法：再浮动的元素父元素后面写一个div，给这个div加上clear：both的属性，也就是浮动效果清除的属性