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> 用来写对当前网页的一些设置信息，这些内容是用户看不到的
<meta charset="utf=8"> 设置网页的字符集
<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的替代方案，保留了一些内置的样式，并不是清除所有)。
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是表单提交数据的方式）：
1、get的传输方式的传输速度快，而post的传输速度就比较慢。
2、get的安全程度低，post的安全程度则是相对较高。
3、get的传输数据小，post可以传输的数据比较大。
百度的搜索内容一般就是用get的方式提交，而一些比较隐私的，例如账号登录时的数据提交用的是post。get和post本质没有什么区别，只不过get传输时是直接传输过去，而post则是先发起请求，等待响应返回之后才会开始传输数据，所以才有了以上的区别。
选择器生效的一些注意点：
权重的比较方式：ID选择器的权重最高，类选择器其次，元素选择器最低。
对比时，两个选择器，一个有ID选择器，一个没有，则不管后面有多少个类或者元素都没有ID选择器的高。
在直接选中的情况下，权重的生效，权重相同则是后面的会覆盖前面的样式；
在两个选择器都没有选中的情况下，哪一个更精确，那个就能生效；
两个都没选中而且精确度也是同样的情况下，还是比较权重。
在CSS中标签的等级大致分类：
块级元素：
1、独占一行；
2、可以设置其宽高；
3、不设置宽度，宽度则默认是100%；
4、可以当做容器使用。
行内元素：
可以和其他行内元素并排显示；
不能设置宽高，内容宽度为其宽度，行高为其高度。
行内块元素：
其既可以设置宽高，又可以和其他元素并列一行（非块元素）。ps:表单中的input是行内块元素
标准文档流：
浏览器的解析方式，从上到下、从左到右。
文本流：
网页中的文本内容。
脱离标准文档流的方式：
浮动，绝对定位，固定定位等。
元素浮动后会形成字围效果，是因为其只是脱离了标准文档流，但是没脱离文本流。
子元素全部浮动之后父元素的高度会变成零。
我们一般用有以下几种方法解决：
1、.clearfix{*zoom=1;}.clearfix:before,.clearfix:after{context:" ";display:table;}.clearfix:after{clear:both}（给父元素一个.clearfix的类名，将其放入样式中可以解决浮动的问题）
2、直接设置父元素的高度
3、父元素设置样式：overflow:hidder;
4、隔墙法：再浮动的元素父元素后面写一个div，给这个div加上clear：both的属性，也就是浮动效果清除的属性
Web前端基础学习-1的更多相关文章
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- Web前端基础学习-2
盒子模型 在页面中,我们将所有的元素全部看做是一个盒子,页面布局就是将大大小小不同的盒子堆砌在一起,而一个盒子由以下几部分组成: padding:内边距,内容到边框的距离: margin:外边距,其他 ...
- Web前端基础学习-3
bfc(block formatting context) 块级格式化上下文 生成bfc的方式: 1.根元素: 2.float属性不为none(脱离文档流): 3.position为absolute或 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- web前端的学习误区
web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...
- 绝版珍珍藏：web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- web前端开发学习路线图
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
- 史上最全的web前端系统学习教程！
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
随机推荐
- WTSQueryUserToken failed
https://www.cnblogs.com/tabjin/articles/11057663.html 令牌错误 https://www.cnblogs.com/FCoding/archive/2 ...
- 【串线篇】spring boot对静态资源的映射规则
WebMvcAutoConfiguration的内部类 WebMvcAutoConfigurationAdapter 其中ResourceProperties点进去 其中addResourceHand ...
- CF527E Data Center Drama
链接CF527E Data Center Drama 题目大意:给你一个无向图,要求加最少的边,然后给这些无向图的边定向,使得每一个点的出入度都是偶数. \(n<=10^5,n\leq 2*10 ...
- vue开发可复用组件
组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合. 开发可复用性的组件应遵循以下原则: 1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...
- centos启动提示unexpected inconsistency RUN fsck MANUALLY
今天一台虚拟机背后的物理机故障了,主机迁移后变成了 read only filesystem.上面部署了很多长连接服务,没有关掉就直接reboot,报错: unexpected inconsisten ...
- Oracle12c修改时区
Oacle12c支持可插入数据库(PDB)在一个统一的数据库(CDB)中具有不同的字符集.时区文件版本和数据库时区. 出于性能原因,Oracle建议将数据库时区设置为UTC(0:00),因为不需要转换 ...
- C++ 得到系统时间
Time::Time() {//得到系统时间 初始化 time_t t; t=time(NULL); tm *lt; lt=localtime(&t); hour=lt->tm_hour ...
- 第二周训练 | 搜索技术 4.3 BFS
A - Red and Black There is a rectangular room, covered with square tiles. Each tile is colored eithe ...
- postman 简单使用教程
Postman 安装 Postman 接口测试(Collection) Postman 接口测试(测试用例)Postman 接口测试(变量与参数化)Postman 接口测试(非 UI 运行模式 ...
- MySQL常用SQL（含复杂SQL查询）
1.复杂SQL查询 1.1.单表查询 (1)选择指定的列 [例]查询全体学生的学号和姓名 select Sno as 学号,Sname as 姓名 from student; select Sno,S ...