发表于： 2019-09-24 11:59:55
2 1214
今天完成的事：学习了一些布局；还有一些js的事件和方法；
明天要完成的事 ：正式开始js的学习;
难题：DOM到底是个啥？？？
收获：对js的事件有一点模糊的概念了；
多列等分布局
多列等分布局常出现在内容中，多数为功能的，同阶级内容的并排显示等。
html结构如下所示
<div class="parent">
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
实用float实现
.parent{margin-left:-20px}/*假设列之间的间距为20px*/
这个父元素的margin负值没有什么意义；有没有效果都一样；
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
box-sizing:border-box使边框和边距包裹在宽高值之内；相当于ie浏览器的渲染方式；
什么是CSS RESET？
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
CSS Reset的作用：
CSS Reset让各个浏览器的CSS样式有一个统一的基准，而实现这一基准最主要的方式就是“清零”
什么是NORMALIZE？
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
normalize创造的目的：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
RESET和NORMALIZE的区别：
1. Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再 为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时， Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点， Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、许多 出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.css 不会让你的调试工具变的杂乱
使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链， 如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中 对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
4. Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分， 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.css 拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。 这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。 这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、 浏览器之间的差异，并且你可以更容易地进行自己的测试。
css reset参考网站：http://www.codefans.net/articles/756.shtml
https://www.zhangxinxu.com/wordpress/2010/08/html5-css-reset/
https://blog.csdn.net/u014516981/article/details/52141451
任务13的深度思考这2个之前看过之前能理解现在看反而蒙了：
固定宽度布局开发WebApp如何实现多终端下自适应？
移动端有哪些常见布局方式？
理解到是能理解就是感觉不是特别理解没彻底吃透；
何为BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
之前这个有看过现在又一次加深了理解；一些之前没讲的原理也讲了一下；
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
SEO的相关概念：https://blog.csdn.net/jnshu_it/article/details/80029988
稍微看了一下content不知道有啥用：没有Dom存粹的表现元素；
稍微了解了一下html5的离线缓存；
Quirks模式是什么？它和Standards模式有什么区别？
什么是 Quirks Mode? 翻译过来就是怪异模式
简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。在怪异模式下，为了支持在网络标准被广泛采用前，就已经建好的网站，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。
标准模式（Standards mode）和接近标准模式（Almost standards mode）
在标准模式下，行为是由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。
实际上，在提到的具有 Quirks 和 Standards 两种文档模式的浏览器中还存在第三种模式—Almost Standards Mode。这种模式和 Standards Mode 几乎一致，唯一的区别就在于某些情况下 Almost Standards Mode 会采用与 Quirks 相同的方式来绘制页面。比如当我们需要把图片分割后显示在一个表格单元中时，Almost Standards Mode 与 Quirks Mode 采用同样的绘制方式从而让图片显示不像在 Standards Mode 中那么的四分五裂。
但是这只是极少数的情况，在大部分情况下 Almost Standards 和 Standards 两种模式是一致的，所以一般不专门区分二者
<!DOCTYPE html>
当 doctype 信息如上时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
当 doctype 如上时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
当 doctype 如上时，浏览器会选择 Almost Standards Mode，需要注意的是如果今后需要把这个页面改为 HTML5 规范，那么上文讨论的<table>中的分割图片问题可能会错乱。
（这个是历史遗留问题注意html里第一行声明html的格式即可）
在 IE 盒模型中，
盒子宽= 内容宽+左右内边距+左右边框=height（高度）
盒子高= 内容高+上下内边距+上下边框=width（宽度）
而正常（现在我们html5中）是：
盒子宽= 内容宽=height（高度）
盒子高= 内容高=width（宽度）
任务15里的css hack之前有看过：又重新理解了一下
使用CSS选择器Hack
CSS选择器Hack是指通过在CSS选择器的前面，加上一些只有特定浏览器才能识别的Hack前缀，来控制不同的CSS样式。
IE6及IE6以下版本识别的选择器Hack，书写CSS样式时，如果希望此样式只对IE6及IE6以下版本的浏览器生效，可以使用IE6及以下版本的选择器Hack，其基本语法如下：
* html 选择器{样式代码}；
E7版本识别的选择器Hack，书写CSS样式时，如果希望此样式只对IE7版本的浏览器生效，可以使用IE7版本的选择器Hack，
*+html 选择器{样式代码}；
目前最常见的是：
*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有效等等
2.3.使用CSS属性Hack
2.4. hack方式-条件注释法
其他浏览器的识别符
Firefox: -moz-
Chrome、Safari: -webkit-
Opera: -o-
IE: -ms-
2.5.CSS hack利弊
一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。
比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，
这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。
使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。
3.常见问题
3.1不同浏览器的标签默认的margin和padding不同
问题描述：写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方法：CSS里加一行*{margin:0;padding:0;
3.2 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决办法：可通过加入 CSS 属性 transform: scale(0.75,0.75); 解决。
4.解决方案
4.1不同浏览器的标签默认的margin和padding不同
问题描述：写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方法：CSS里加一行*{margin:0;padding:0;
4.2 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决办法：可通过加入 CSS 属性 transform: scale(0.75,0.75); 解决。
学了一点js：
js中的事件：HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
html事件可以是浏览器行为也可以是用户行为；事件是可以被 JavaScript 侦测到的行为。
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
通常，当事件发生时，你可以做些事情。在事件触发时 JavaScript 可以执行一些代码。HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
focus 事件：当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
focus 事件只能在可见元素上使用
jQuery 事件 - blur() 方法 失去焦点时，发生blur
jQuery 事件 - keyup() 方法：$(selector).keyup()
完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
提示：请使用 .which 属性来确定按下了哪个按键（亲自试一试）。
HTML DOM submit() 方法：
submit() 方法把表单数据提交到 Web 服务器。
Form 对象
Form 对象代表一个 HTML 表单。
在 HTML 文档中 <form> 每出现一次，Form 对象就会被创建。
jQuery click() 方法：
当单击元素时，发生 click 事件。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
相关阅读：
onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。
2、click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件
3、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；
4、onclick则是给这个id注册一种行为，可以重复触发
5、click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件。
看了很久还是没太理解事件之间的区别；事件和方法的区别：
简单点说，事件是‘怎么了’，方法就是‘怎么办’
js中事件分为三大类：鼠标事件、键盘事件、html事件。如：鼠标事件click，当元素容器被点击时，响应
方法呢，就是对一段代码的封装、打包。打个比方，吃kfc，发现有不少的人喜欢点个原味鸡的时候再来个香辣鸡翅、饮料、奥尔良一起吃。所以kfc直接把这几个组一组，弄了一个全家桶，以后遇到类似喜好的人，就让他点这个套餐，方便还有优惠。js中封装函数一个道理，方便调用，减少代码重复度。
对任务14中js的学习：刚开始是绝望的；dom是个啥？我要干啥？？？
结果w3把简介藏得严严实实的；心态爆炸：结果dom是个啥？？百度出人才:
Dom就跟css3一样是个标准，
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
编者注：DOM 是 Document Object Model（文档对象模型）的缩写。
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面；
感觉还是云里雾里的；
简单来说，document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
所有的全局函数和对象都属于Window 对象的属性和方法。
document 对 Document 对象的只读引用。
区别:
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
突然联想到就百度出来的
返回列表
评论