HTML
canvas
1.html5中没有getContent（）和getCanvas方法
2.调用canvas对象的getContext（）方法来获取绘图环境
HTML5相关的框架或类库
RactiveJS ， Bootstrap ， AngularJS
DHTML 的动态样式的作用
DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
包括：
①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。
②动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。
超链接样式顺序
为了符合浏览器解析CSS所遵循的就近原则，将一般的放在上面，将特殊的放在下面。
a:link; a:visited; a:hover; a:active;
a:hover必须放在a:link和a:visited之后；
a:active必须放在a:hover之后。
记忆：
Link,visited,hover,active.
L o v e h a t e 爱与恨
HTML5新增的表单元素
autocomplete， autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, min, multiple, pattern, placeholder, step, width
HTML5中新增的属性
header，footer，nav，article，section，aside，datalist，audio，video，embed，input
块级元素
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr
行内元素
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u
常见的块级元素
< p> < div> < ul> < li> < h1> < hr> < table>
常见的行内元素
< span> < a> < b> < strong> < i> < big> < small>
行内块元素：
< img> < input> < textarea> < button>
产生粗体字的HTML标签：
- < bold >
- < bb >
- < b >
- < bld >
html 语言中加粗的标签有和 或使用css 设置{font-weight: bold;}
blockquote标签
< blockquote> 标签定义摘自另一个源的块引用。
< blockquote> 与 </ blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
HTML5中，自关闭的斜线（/）对：
area，base, br, col, command, embed, hr, ing, input, keygen, link, meta, param, source, track, wbr
空标签无效，言即不炫耀自闭合(/)这个小尾巴了，若写上也可以
html5 规范：
inline元素只能嵌套inline元素，网站页面里只能有一个title。
h5新标签的main只允许有一个，代表主要内容。
head 标签中必不可少的是
HTML5标签
meta编码说明
picture标签用于为不同设备提供图像
getCurrentPosition()获取用户当前位置放入一个值中保存
getLocation（） 地图定位
< q > 定义短的引用
< ins > 定义被插入的文本
< menu > 定义命令的列表或菜单
HTML媒体标签
audio 用来嵌入音频
video 用来嵌入视频
embed 用来定义嵌入的内容
source 对于定义多个数据源
track 标签为媒介规定外部文本轨道，用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的
HTML中优先级
帧元素(frameset) > 表单元素 > 非表单元素
HTMl5 不再支持
< noframes > (为方便编写后面省略< >), frameset, frame, applet, acronym, basefont, dir, tt, strik, big, blink, s, font
HTML5新加的元素
canvas , audio, video, source, embed, track, datalist, keygen, output, article, aside, bdi, commond, details, dialog, summary, figure, figcaption, footer, header, mark, meter, nav, progress, ruby, rt, rp, section, time, wbr
嵌入在HTML文档中的图像格式
.gif .png .bmp (所占内存大) .jpg
空元素（void elements）
一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。
HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 元素嵌套在一个 < hr > 元素里。
在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， 的闭标签是无效的 HTML。
在 HTML 中有以下这些空元素：
- < area >
- < base>
- < br>
- < col>
- < colgroup> when the span is present
- < command>
- < embed>
- < hr>
- < img>
- < input>
- < keygen>
- < link>
- < meta>
- < param>
- < source>
- < track>
- < wbr>
HTML的居中对齐
A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。
B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。
C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。
D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。
而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行
置换元素和不可替代元素
替换元素
置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的、、、、 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
不可替换元素
不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。
例如： 标签
CSS
CSS清除浮动方法
方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如
，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或<hr class=“clear” / >来进行清理。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content">***</div>
</div>
注意这里的div.content有内容。
方法五：使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
css单位
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
1
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
可用于优化 CSS 图片加载的技术
CSSSprite ：减少对服务器请求
SVGSprite ：体积小，矢量
Iconfont ：体积小，矢量，集成度高
Base64 ：减少对服务器请求
CSS中优先级
优先级顺序：
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
css优先级，可以给选择器分配权值：
id选择器的权值为100
class、属性和伪类选择器的权值为10
标签选择器的权值为1
权值较大的优先级越高
比较样式时，将对应的选择器权值相加，大的优先级高
权值相同的，根据从上往下的原则，后定义的优先级高
特殊！important，优先级最高
div > #title{color: blue;}…101
div > h3#title.title{color: red;}…112
[lang=”en”] h3.title{color: green;}…21
[lang=”en”] #title{color: gray;}…110
CSS3新增属性用法整理
- box-shadow (阴影效果)
- border-color (为边框设置多种颜色)
- border-image (图片边框)
- text-shadow (文本阴影)
- text-overflow (文本截断)
- word-wrap (自动换行)
- border-radius (圆角边框)
- opacity （透明度）
- box-sizing （控制盒模型的组成模式）
- resize（元素缩放）
- outline（外边框）
- background-size（指定背景图片尺寸）
- background-origin （指定背景图片从哪里开始显示）
- background-clip （指定背景图片从哪里开始裁剪）
- background （为一个元素指定多个背景）
- hsl（通过色调，饱和度，亮度来指定颜色值）
- hsla（在hsl的基础上增加透明度设置）
- rgba（基于rgb设置颜色，a设置透明度）
关于animation-timing-function
| 属性 | 描述 |
|---|---|
| linear | 动画从头到尾的速度时相同的 |
| ease | 动画从低速开始，然后加快，在结束前变慢（默认） |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 在cubiz-bezier函数自己的值，可能的值是从0-1的数值 |
link和@import的区别
1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
2）link可以加载CSS，Javascript；@import只能加载CSS。
3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。
用法：
1）link的写法：
主流浏览器内核私有属性css前缀：
mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms
CSS颜色表示红色
1、颜色名
如：red，blue，green
2、十六进制(红绿蓝)
#f00、#ff0000表示红色
一般为3或者6位数字，题目4位？？？
3、rgb(r,g,b)
如：rgb(255,0,0)表示红色
4、hsl(Hue,Saturation,Lightness)/（色调、饱和度、亮度）
hsl(0,100%,100%)
0：红色
120：绿色，
240： 蓝色
bootstrap
关于栅格系统，哪些时正确的？（关于屏幕的尺寸标准）
| 超小屏幕（手机 ) | 小屏幕（平板） | 中等屏幕（桌面） | 大屏幕（桌面） |
|---|---|---|---|
| <768px | >=768px | >=992px | >=1200 |
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
bootstrap 中如何让一个区块居中
- center 是 标签
- center-block 是 boostrap的样式
< small > 标签
在标题内还可以包含< small >标签或赋予.small 类的元素，可以用来标记副标题
bootstrap辅助类
.text-muted 文字的颜色换成灰色
.text-primary 文字的颜色换成蓝色
.text-success 文字的颜色换成绿色
.text-info 文字的颜色换成暗蓝色
.text-waring 文字的颜色换成暗黄色
.text-danger 文字的颜色换成红色
样式
| 颜色 | 类名 |
|---|---|
| 主要蓝 | bg-primary |
| 成功绿 | bg-success |
| 信息蓝 | bg-info |
| 警告黄 | bg-warning |
| 危险红 | bg-danger |
table
| 类名 | 含义 |
|---|---|
| .table | 为任意< table > 添加基本样式（只有横向分割线） |
| .table-striped | 在< tbody > 内添加斑马线形式的条纹（IE8不支持） |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在< tbody > 内的任意行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
其他
响应式设计
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
web worker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 w3c上有说的
UTF-8
UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。 GBK是汉字编码，是双字节码，可表示繁体字和简体字。 ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。 Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。目前的Unicode字符分为17组编排，0x0000 至 0x10FFFF，每组称为平面（Plane），而每平面拥有65536个码位，共1114112个。然而目前只用了少数平面。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。
iframe 可用在以下几个场景
- 典型系统结构，左侧是功能树，右侧就是一些常见的table 或者表单之类的，为了每一个功能，单独分离出来，采用iframe
- ajax上传文件
- 加载别的网站内容，例如google广告，网站流量分析
- 在上传图片时，不用flash实现无刷新
- 跨域访问时可以用到iframe，使用iframe请求不同域名下的资源
下列哪些功能可以通过Cookie来实现？
- 来访者的信息：一般处理成kv键值对的形式，故可存在cookie中；（√）
- 在页面之间传递信息：通过设置Cookie的path等属性，可在特定域名或URI下共享Cookie信息（√）
- 自动识别用户:通过Cookie中保存用户uid，服务器会sid等方法，可以记录用户登录状态；（√）
- 对数据进行操作：Cookie是保存在用户浏览器上的小文本文件，不是数据库，也没有提供操作数据库的API。（×）
Reflow（回流） Repaint （重绘）
回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了
重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color…
会导致回流的操作：
页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法
在HTML中嵌入PHP代码，有以下几种方法
- PHP默认语法：<?php ... ?>
- 脚本风格：< script languange=“php”> … </ script>
- PHP手动开启的简短风格，以“<?”开头，以“?>”结束，中间为PHP操作代码，须在php.ini中设置short _open_tag=on，默认是on,或者在 PHP 编译时加入了 –enable-short-tags 选项。(PHP 3版本还可以通过 short_tags() 函数激活使用短标记。) ：<? ... ?>
- asp风格：<% … %>
各语言的注释方法
HTML注释
< !–注释的内容-- >
CSS注释
/* 注释内容 */
JS注释
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾
扫一扫
4016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
