数据存储
图片会产生HTTP请求的几种情况 | 图片预加载技术
HTTP协议
HTML
- 块级 | 行内 | 行块级元素
常见的块级元素(自动换行, 可设置高宽 ) | 常见的行内元素(无法自动换行,无法设置宽高) | 常见的行块级元素(拥有内在尺寸,可设置高宽,不会自动换行 ) |
---|---|---|
div,h1-h6,p,pre,ul,ol,li,form,table,dl,dt,dd,hr 等 | a,img,span,i(斜体),em(强调),sub(下标),sup(上标),label 等。 | button,input,textarea,select,img(行内置换元素)等 |
- 置换 | 不可替换元素
置换元素 | 不可替换元素 |
---|---|
<img>、<input>、<textarea>、<select>、<object> | (x)html 的大多数元素是不可替换元素 |
内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本⾝⼀般拥有固有尺⼨(宽度,⾼度,宽⾼⽐)的元素,置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。 | 内容直接表现给用户端(如浏览器) |
例如: 浏览器会根据<img> 标签的src属性的 值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input> 标签的type属性来决定是显示输入框,还是单选按钮等。 这些元素往往没有实际的内容,即是一个空元素。 | 例如: <label> 是一个非置换元素,label中的内容将全被显示。 |
- 自然样式 | 语义样式标签
作用 | Physical Style Elements – 自然样式标签 | Semantic Style Elements – 语义样式标签 |
---|---|---|
加粗 | b | strong(强调) |
斜体 | i | em(强调) |
下划线 | u | ins |
s | del | |
预格式化文本,表示计算机代码片段 | pre | code |
应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。
- 常见标签及其作用
标签 | 作用 |
---|---|
<mark> | 高亮显示文本 |
<dfn> | 标记那些对特殊术语或短语的定义。通常用斜体来显示 |
<cite> | 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
<var> | 标签表示变量的名称,或者由用户提供的值。 |
<meta> | 位于文档的头部,不包含任何内容。元素可提供有关页面的元信息 |
<small> | 标签呈现小号字体效果。 |
<kbd> | 标签定义键盘文本。例如 键入<kbd>quit</kbd> quit 来退出程序,或者键入 <kbd>menu</kbd> menu 来返回主菜单。 |
<div> ———— | 可定义文档中的分区或节(division/section),标签可以把文档分割为独立的、不同的部分。 |
自闭合标签有<input/><img/><br/><link/><hr/>
等, 闭合标签和自闭合标签 可理解成 双标签和单标签。
- html5表单元素标签
html5 | 作用 |
---|---|
表单元素标签 | |
datalist | 规定输入域的选项列表 |
keygen | 提供一种 验证用户的可靠方法 |
output | 用于不同类型的输出 |
方法 | |
getCurrentPosition() | 获得用户的当前位置 |
getLocation() | 地图定位 |
合法的HTML5标签<p><pre><img />
<script>
var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
</script>
Blob.type只读,一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。
<input>
元素的type值可以是
hidden(隐藏的输入字段)
text(单行输入文本)
checkbox(复选框)
radio(单选按钮)
button(可点击按钮)
submit(提交按钮)
reset(重置按钮)
image(图像形式的提交按钮)
file(上传文件)
password(密码字段)
没有select(下拉菜单)
在<img>
中必须要有的属性是src
head 标签中必不少的是<title>
- form表单中input元素的readonly与disabled属性
readonly | disabled |
---|---|
输入字段为只读。 | 当 input 元素加载时 禁用 此元素。 |
input内容 会 随着表单提交 | input内容 不会 随着表单提交 |
通过js脚本 能 更改input的value | 通过js脚本 能 更改input的value |
表单提交时会触发Dom方法:submit
注意:onsubmit 在html dom 中称为事件
- viewport支持响应式设计
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
<meta name="viewport" content="width=device-width, initial-scale=1">
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;页面应该有能力去自动响应用户的设备环境。
- 编码
GBK 通常指GB2312编码,只支持简体中文字
utf 通常指UTF-8,支持简体中文字、繁体中文字、英文、日文、韩文等语言(支持文字更广)全球通用
iso-8859-2编码 欧洲地区编码方式
- 注释
HTML的注释方法 <!--注释内容-->
CSS的注释方法 /*注释内容*/
JavaScript的注释方法 /* 多行注释方式 */
//单行注释方式
DHTML
- 概念:将 HTML、JavaScript、DOM 以及 CSS 组合在一起,用于创造动态性更强的网页。 通过 JavaScript 和HTML DOM,能够动态地改变 HTML 元素的样式。
包括:
①动态内容(Dynamic Content):动态地更新网页内容,可“动态”地插入、修改或删除网页的元件,如文字、图像、标记等。
②动态排版样式(Dynamic Style Sheets)例如:当鼠标指针移到文章段落中时,段落能够变成蓝色,或者当鼠标指针移到一个超级链接上时,会自动生成一个下拉式子链接目录等。
- 作用:实现了网页从Web服务器下载后无需再经过服务的处理,而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。使网页作者改变内容的外部特征而不强制用户再次下载全部内容。
优先级
在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。
所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括:select元素,object元素,以及frames元素等等。
无窗口元素:大部分html元素都是无窗口元素。
样式
- 样式权重
样式 | 权重 |
---|---|
内联 | 1000 |
ID选择器 | 100 |
类、伪类、属性选择器 | 10 |
标签(类型)选择器、伪元素选择器 | 1 |
除!important ,内联权重最大!
clear : none | left | right | both.
一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
- css 中可继承的属性
所有元素 | 内联元素 | 块状元素 | 列表元素 |
---|---|---|---|
visibility和cursor | letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction | text-indent和text-align | list-style、list-style-type、list-style-position、list-style-image |
- 盒子模型
IE盒子模型 和 标准盒子模型
相同点:
由四个部分组成 – margin,border,padding,content
不同点:
标准盒子模型中content是一个独立的部分,不包含其他部分
IE盒子模型中content包含了border、padding,是一个总体的概念
不换行必须设置
- word-break: normal | break-all | keep-all;可以让浏览器实现在任意位置的换行。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。- white-space设置如何处理元素内的空白。
nowrap,文本不会换行,文本会在同一行上继续,直到遇到
<br>
标签为止
overflow属性
定义溢出元素内容区的内容会如何处理。
参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。
如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。
- 优先级
在不涉及样式的情况下,页面元素是 “从上往下” 解析的,因此,页面元素的优先显示 与结构摆放顺序是有关系 的,但与标签选用无关。
- link标签引入多个css外部文件时,
同时开始加载,先加载完成的优先解析;
如果多个文件中有相同的选择器规则,那么后面文件的规则将合并前面的规则。
- border
border-style:none;//无边框
border-width:0;//边框宽度为0px
- 区别
(1)性能差异
border:0; 浏览器对border-width、border-color进行渲染,占用内存。
border:none; 浏览器不进行渲染,不占用内存。
(2)浏览器兼容
IE7-不支持border:none;
始终把border-style属性声明到border-color属性之前,元素必须在改变颜色之前获得边框。
- CSS Sprites
能减少图片的字节,能很好地减少网页的http请求,从而大大的提高页面的性能
整理起来更为方便,同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位
js在页面不同位置加载顺序不同
JavaScript 放在HTML的<head>
部分会先加载完js再加载页面,放在<body>
部分会在加载页面时候加载
- 解析
根据浏览器对 HTML 文件的解析是 自上而下 的
放在<head></head>
内的 JS 会被先请求,但是解析优先级由于 JS 引擎比浏览器渲染引擎要高 ,所以会导致 JS 先加载完才把主权交给浏览器渲染引擎,如果 JS 很大,就会因此会引起页面卡顿,等待 JS 加载完成。这就是为什么要把 JS放在</body>
前的原因 。
JS代码放在<head></head>
中,实际上代码的内容是被执行了的,只是那些对 DOM 的操作没有效果,因为主权还在 JS 引擎,页面的渲染还没交给渲染引擎,获取到的 DOM 节点是空的。
Web Worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。
利用web worker,可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
验证表单
- web表单登录中用到的图形验证码的实现
服务器端生成验证码后一方面通过图片将验证码返回给客户端,同时在服务器端保存文本的验证码,由服务器端验证输入内容是否正确
出于安全考虑,不能直接在客户端进行验证,爬虫或者是恶意程序依旧可以通过各种手段获取你嵌入在html文本或者保存在cookie中的正确验证码文本,模拟表单提交来达到攻击的目的。
enctype 属性
规定在发送到服务器之前应该如何对表单数据进行编码。
属性值
application/x-www-form-urlencoded
在发送前编码所有字符(默认)
multipart/form-data
不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。
text/plain
空格转换为 “+” 加号,但不对特殊字符编码。
点击事件
把鼠标移到按钮并点击时,会产生一串事件:
hover-> focus -> active(悬停 -> 聚焦 -> 响应)
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
关于IE、FF下面CSS的解释区别
IE6.0和firefox的div的内嵌div可以把父级的高度撑大
当设置为三列布局时,IE6.0的float宽度不能达到100%,而FireFox可以。当设置为两列布局时,两种浏览器都可以。
火狐浏览器中,非float的div前面有同一父级的float的div,此div若有背景图,要使用clear:both,才能显示背景图,而IE6.0中不用使用clear:both
在[text-decoration:underline]的属性下,IE6.0显示的下划线会比FireFox低一点。在FireFox中,部分笔画会在下划线的下面1个象素左右。
bootstrap
屏幕大小 | 应用 | device-width |
---|---|---|
超小屏幕 | 手机(mobile) | – xs ( <768px ) |
小屏幕 | 平板(tablet) | – sm ( 768~991px ) |
中等屏幕 | 电脑(desktop) | – md ( 992~1170px ) |
大屏幕 | 大电脑(large desktop) | – lg ( >1170px ) |
min-device-width - max-device-width ~ -webkit-min-device-pixel-ratio(设备像素比)
iphone6s是375 - 667 ~ 2;iphone6s plus是414 - 736 ~ 3;
- 栅格系统
为了创建列(colume)之间的间隔,需要设置padding,而且需要设置margin为负值,消除第一个和最后一个之间padding的影响。而padding是自动设置的,margin需要手动修改;
bootstrap将全局的font-size设置为14px;
box-sizing初始为border-box。
MVC模型
是一种架构型的模式,本身不引入新功能,只是帮助我们将开发的结构组织的更加合理,使展示与模型分离、流程控制逻辑、业务逻辑调用与展示逻辑分离。
- Model(模型):数据模型,提供要展示的数据,因此包含数据和行为,可以认为是领域模型或JavaBean组件(包含数据和行为),不过现在一般都分离开来:Value Object(数据) 和 服务层(行为)。也就是模型提供了模型数据查询和模型数据的状态更新等功能,包括数据和业务。
- View(视图):负责进行模型的展示,一般就是我们见到的用户界面,客户想看到的东西。
- Controller(控制器):接收用户请求,委托给模型进行处理(状态改变),处理完毕后把返回的模型数据返回给视图,由视图负责展示。
也就是说控制器做了个调度员的工作。
在标准的MVC中模型能主动推数据给视图进行更新(观察者设计模式,在模型上注册视图,当模型更新时自动更新视图)。但在Web开发中模型是无法主动推给视图(无法主动更新用户界面),因为在Web开发是请求-响应模型。模型变更之后,只有控制器(Controller)才能驱动视图变更或重新渲染视图
Ajax和Flash
- ajax
优势:
1.可搜索性
2.开放性
3.费用
4.易用性
5.易于开发。
劣势:
1.它可能破坏浏览器的后退功能
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ,不过这些都有相关方法解决。
- Flash
优势:
1.多媒体处理
2.兼容性
3.矢量图形
4.客户端资源调度,可以更容易的调用浏览器以外的外部资源
劣势:
1.二进制格式
2.格式私有
3.flash 文件经常会很大,用户第一次使用的时候需要忍耐较长的等待时间
4.性能问题
可搜索性:普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的,而繁琐的swf字节码却是搜索引擎不愿触及的