前端练习Day 2

1、HTML文档包含超链接时,要实现当鼠标移入该链接,超链接文本大小变为30px
鼠标移入onmouseover,移出onmouseout
<a href="#"
onmouseover="this.style.fontSize='30px'">注册</a>

js添加的属性名用驼峰法,css使用连接线
补充:驼峰命名法就是当变量名或函数名是由一个或多个单字连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始,第二个单词的首字母大写或每一个单词的首字母都采用大写

2、alt和title的区别是前者只有在图片无法加载时才会显示其值,而title是在图片正常加载鼠标放上去显示的值,alt在低版本的ie浏览器上也有后者的功能。
alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

3、css盒子模型(box model)又称为框模型,包含元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素
css盒子模型图片
详解见https://www.cnblogs.com/clearsky/p/5696286.html

4、mobile-xs(<768px)
tablet-sm(768~991px)
desktop-md(992~1170px)
large desktop-lg(>1170px)

5、产生粗体字的标签<b> 斜体<i> 下划线<u>
css设置粗体字的属性 {font-weight: bold}

6、浏览器的内核引擎,四分天下:
1)Trident: IE 以Trident 作为内核引擎;
2 ) Gecko: Firefox 是基于 Gecko 开发;
3)Webkit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;apple、android手机的默认浏览器;
4)Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台–Opera mini
另外,搜狗浏览器是双核的,双核并不是指一个页面由2个内核同时处理,而是所有网页(通常是标准通用标记语言的应用超文本标记语言)由webkit内核处理,只有银行网站用IE内核 。

7、em,px,pt都能够用于边距的单位
pt (point,磅):是一个物理长度单位,指的是72分之一英寸。
px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

8、css3中,主流浏览器的私有属性前缀:
mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms(microsoft)
补充:浏览器引擎 浏览器解析渲染页面原理
浏览器 最重要 最核心的部分是“解释引擎”,也就是“浏览器内核”: 负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。
网页的工作过程需要使用到两个引擎:渲染引擎和javascript引擎
什么是JavaScript引擎?简单来讲,就是能够提供执行JavaScript代码的运行环境 。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,排版引擎(Rendering Engine,也有称渲染引擎),渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
浏览器内核很多,如果加上所有的几乎没有什么人在用的非商业的免费内核,那么可能大约有10款以上甚至更多,不过通常我们比较常见的大约只有以下四种:

  • Trident :[ˈtraɪdnt] IE浏览器(遨游、世界之窗、腾讯TT…都是IE)Trident内核最慢 。IE 以Trident 作为内核引擎 ,前缀为–ms。
  • Gecko:[ˈgekəʊ] 开放源代码、以C++编写的网页排版引擎,是跨平台的 FireFox是基于 Gecko 开发;
  • presto:[ˈprestəʊ] 目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎,Opera(欧朋浏览器),但由于市场选择问题,主要应用在手机平台–Opera mini
  • Webkit: 苹果公司自己的内核,google的chrome也使用webkit作为内核。 是一个开源的浏览器引擎,同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,它拥有清晰的源码结构、极快的渲染速度,包含的 WebCore 排版引擎和 JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来。
    许多网站都是按照IE来架设的,很多网站不兼容Webkit内核,比如登录界面、网银等网页均不可使用Webkit内核的浏览器。
    Safari([səˈfɑri]), Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器 基于 Webkit 开发。

注:2013年2月Opera宣布转向WebKit引擎
注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

9、BFC即“块级格式化上下文”。根据W3C对BFC的描述,可以总结出:BFC是一个具有特殊CSS样式的HTML盒子,比如div标签就经常用来当盒子用。这些特殊样式如下,下面的样式只要满足一项,就说明这个盒子是BFC

float: left | right
position: fixed | absolute
display: inline-block | table-cell | table-caption | flex | inline-flex
overflow: hidden | scroll | auto
http://www.cnblogs.com/asheng2016/p/7281784.html

10、bootstrap中,一个元素需要打印时隐藏,使用hidden-print类

11、<canvas> 只是图形容器元素,必须通过脚本 (通常是JavaScript)来绘制图形。 你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。 <canvas> 元素的第一个浏览器版本号:谷歌4.0 IE9.0 火狐2.0 safar3.1 opera9.0

12、cookies一般是用于自动登录(如淘宝,京东一些可以勾选自动登录),这就相当于进行从登录页到主页的跳转了,页面之间传递着用户的信息,以键值对的方式存储着用户的信息,当然登录跳转也用到了其他以键值对存储的信息,如session(服务端保持,一些需要登录以后才可以访问的就需要session校验,如果是大项目开发的话会用到过滤器) cookies主要用于客户端保持,当然了,cookies怎么可能对数据库进行操作呢,cookies是保存在客户端的。

13、常见的浏览器端的存储技术有cookie,localStorage,userData
cookie 是靠谱的浏览器都支持;localStorge 比 cookie 存的更多,获取更方便,而且存储内容不会随请求发送给服务器;session 虽然需要 cookie 支持(通常存放加密过的 sessionId),但是不在浏览器端存放主要信息,排除;IE 支持 userData 存储数据,但是基本很少使用到,除非有很强的浏览器兼容需求。

14、MVC模型:是一种架构式的模式,本身不引入新功能,只是将开发的结构组织的更加合理,使展示与模型分离、流程与控制逻辑、业务逻辑调用与展示逻辑分离。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller(控制器)是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

猜你喜欢

转载自blog.csdn.net/silenmm/article/details/80214012