一、块级、内联、内联块级元素
（1）块级元素：block & &
& & & &**独占一行
& & & &**可设置width，height，margin，padding
& & & &**内部可包含块级或内联元素
（3）内联（行内）元素：inline & & &
& & & &**和其他inline元素同行显示
& & & &**可以设置margin-left，margin-righ，padding-left，padding-right，
& & & &**无效设置widht，height，margin-top，margin-bottom，padding-top，padding-bottom
& & & &**内部可包含块级或内联元素，内部包含块级元素时，该块级元素继续保持独行显示，下一个内联元素会换行显示
（4）内联块级元素：inline-block
& & & &**和其他inline或inline-block元素同行显示。
& & & &**和块级元素一样可设置width，height，margin，padding。
& & & &**内部可包含块级或内联元素，内部包含块级元素时，该块级元素会在内联元素的内部独行显示，不会影响下一个内联元素的同行显示
&div& 定义文档中的节
&blockquote&定义长的引用
&dl&定义列表详情
&fieldset& 定义围绕表单元素的边框
&form& 定义html的表单
&h1&--&h6& 标题
&hr& 水平线
&legend& 定义&fieldset&元素的标题
&li& 定义列表的项目
&object&&定义内嵌对象
&ol&&定义有序列表
&p&&定义段落
&pre& 定义预格式文本
&table&&定义表格
&ul&定义无序列表
Html5新元素
&article& 定义一个文章区域
&aside&&定义页面的侧边栏内容
&audio&&定义音频内容
&canvas& 定义画布
&dialog& 定义对话框，比如提示框
&embed& 定义嵌入的内容，比如插件
&figure& 定义独立的流内容（图像、图标、照片、代码等）
&figcaption& 定义元素的标题
&footer& 定义section或document的页脚&
&header& 定义文档的头部区域
&nav&&定义导航链接的部分
&section&&标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
&summary&&标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息
&a& 超文本链接
&address& 文档作者或拥有者的联系信息
&abbr& ,&acronym& &定义缩写
&area& 定义图像映射内部的区域
&b&加粗字体
&bdo& 定义文字方向
&cite&定义引用
&code& 计算机代码
&dfn& 定义定义项目
&em& 定义强调文本
&ins& 定义被插入的文本
&kbd& 定义键盘文本
&label&定义input元素的标注
&map& 定义图形映射
&mark& 定义带记号的文本
&q&&定义短的引用
&samp& 计算机样本
&samll&&定义小号文本
&span& 定义文档中的节
&strong& 定义强调文本
&sub&&定义下标文本
&sup&&定义上标文本
&tt&&定义打字机文本
&var&&定义文本的变量部分
Html5新元素
&bdi&&允许您设置一段文本，使其脱离其父元素的文本方向设置。
&meter& 定义度量衡。仅用于已知最大和最小值的度量
&rp& &在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容
&rt& &标签定义字符（中文注音或字符）的解释或发音
&ruby& 标签定义 ruby 注释（中文注音或字符）
&time&&定义日期或时间，或者两者
&wbr&&规定在文本中的何处适合添加换行符
内联块级元素
&&button& 定义一个点击按钮
&iframe& 定义内联框架
&img& &定义图像
&&input& &定义输入控件
&select&&定义选择列表（下拉列表）
&textarea& &定义多行的文本输入控件
Html5新元素
&video&&标签定义视频，比如电影片段或其他视频流
&keygen& 对表单生成密钥字段
&progress&&定义运行中的进度（进程）
作者：leona
原文链接：&
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
阅读(...) 评论()【纯干货】4年前想解决的事情，今天才实验成功：浏览器原生分块上传文件
时间： 12:24:15
&&&& 阅读：998
&&&& 评论：
&&&& 收藏：0
第一份软件开发工作的第一个星期（不算做试用期的一个星期，无薪水试用）。因为不是软件专业，也没有经过培训和相关工作经验。老板不放心，但还是让我试一试。做的第一件事情就是上传文件，实时看进度，并且上传后预览。预览的文件类型有word,ppt,excel,flash，视频按帧获取预览图。office文件是在服务器端转成html后显示出来。
做的还满意，就留下来了，后来就在那个公司待了两年。
没解决的事情：
上传大文件，分块上传，浏览器原生不支持，需要借助第三方插件。最根本的原因就是浏览器端的js考虑的安全问题，不允许读取文件内容。
现在IE10和其他主流浏览器支持html5了，js内置Filereader对象，websocket，这些听听都酷毙了。
重大意义的时刻：
我实现了原生分块上传，道路非常崎岖，结果很美好。
这一实现标识着，浏览器未来无可替代的地位。
我只介绍干货部分，其他细节，相信有兴趣的人已经知道了。
首先，分块上传，必须能在js内读取文件内容，filereader对象是关键。这是一个异步读取方法，必须在onload事件内获取文件内容。要真真的分块上传，靠onprogress读取文件进度是不够的，并且文件过大的时候浏览器会卡死。file的slice函数是关键，把文件内容分块，每一个onload事件触发，标志着一块内容读取完毕，且可以在该事件内把文件进一步处理，如上传。
FileReader有四个read方法，
asText,只建议用来读取文本文件
asDataUrl,读取到的媒体文件可以直接用于src属性，或者html文件内容也可以读成DataURL
asArrayBuffer,官方介绍说不能直接使用，需要借助DataView,如int8Array或int32Array。实际上这话是有条件的，既然设计出来肯定是有用处的，当websocket的binaryType=‘arraybuffer‘时，该event.target.result是可以直接被send到服务器端的，服务器端接收类型是byte[],对应superwebsocket的NewDataReceived事件。目前的问题，当文件大小是2k的时候，服务器端可以接收；而当文件为18K的时候，superwebsocket报protocolerror错误。尚不知道临界值是什么，或者需要设置什么参数，rfc6455协议好像也没限制最大大小吧。还是去年看过这个协议，待会查查。
webSocket的关键设置：
client = new WebSocket("ws://127.0.0.1:2014");
client.binaryType = "arraybuffer";//如果不设置该属性，就不能直接send字节数组到服务端。如果superwebsocket服务端报protocolerror则有可能是这个原因引起的
webSocket.send方法在onload事件中调用：
client.send(this.result);
结合slice和onload事件分块上传的核心代码：
var res = this.
loaded += res.byteL
if (loaded & fileSize)//继续读取下一块
readBlob(loaded);
times += 1;
console.log("next block,times:" + times);
//读取完成
console.log("done loaded:" + loaded + ",size:" + fileSize);
slice的使用方法：
function readBlob(start)
var blob = currentFile.slice(start, start + step);
reader.readAsArrayBuffer(blob);
// 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
//+-+-+-+-+-------+-+-------------+-------------------------------+
//|F|R|R|R| opcode|M| Payload len |
Extended payload length
//|I|S|S|S|
//|N|V|V|V|
(if payload len==126/127)
//| |1|2|3|
//+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
Extended payload length continued, if payload len == 127
//+ - - - - - - - - - - - - - - - +-------------------------------+
|Masking-key, if MASK set to 1
//+-------------------------------+-------------------------------+
//| Masking-key (continued)
Payload Data
//+-------------------------------- - - - - - - - - - - - - - - - +
Payload Data continued ...
//+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
Payload Data continued ...
//+---------------------------------------------------------------+
从帧结构来看，有8个字节表示内容长度，所以内容长度限制在哪设置的？有谁熟悉superwebsocket
asBinaryString 现在不赞成使用的方法，且IE中也没有该方法。
如果服务器端，不支持websocket又不想使用第三方支持如superwebsocket这样组件，可以直接使用ajax真真分块上传，确定是每次请求都会建立新的连接。
使用ajax上传注意事项干货：
建议把arraybuffer转成int32array,这样客户端转换较快。服务器端用int32[]接收；如果int8array服务端也可以用int32接收。
重点：async:false 保证顺序；也可以每次上传的时候额外带参序号，服务器端重新组装顺序。
Int8array的话，服务端可以直接把每个元素转成byte
[System.Web.Mvc.HttpPost]
public ActionResult File(int[] datas)
if (datas != null)
var d = datas.ToList().ConvertAll(x =& (byte)x).ToArray();
return Content("OK");
int32array的话，服务端可以借助bitconverter.getbytes(int)方法。
[System.Web.Mvc.HttpPost]
public ActionResult File(int[] datas)
if (datas != null)
List&byte& bs = new List&byte&();//接收到的文件缓冲对象
for (int i = 0; i & datas.L i++)
foreach (var item in BitConverter.GetBytes(datas[i]))
bs.Add(item);
return Content("OK");
ajax客户端上传关键方法：
$.ajax("/Home/File", {
data: { datas: new Int8Array(this.result) }, success: function (res) {
console.log(res);
async: false,
type:"post"
这个调用是位于FileReader的onload事件中。
如果觉得有意义，别忘了点【推荐】标签：原文地址：http://www.cnblogs.com/langu/p/4478701.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！21:44 提问
ueditor分片上传后怎么合并啊？
用ueditor，配置了底层js的分片上传后，文件需要在后台合并，但是分片的文件传到系统中的先后顺序视文件大小、传输速率而定，怎么弄？
按赞数排序
无非分块上传，然后用filestream合并。
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐web页面分块加载
时间： 17:53:22
&&&& 阅读：136
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文链接http://www.cnblogs.com/BearsTaR/archive//flush_chunk_encoding.html
一般大家在处理这种情况，都使用ajax，先把html输出到客户端，然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数，而且需要写额外的js代码、和js调用的请求接口。&正对这种情况，还有一种处理方法，就是让response分块编码进行传输。response分块编码，可以先传输一部分不需要处理的html代码到客户端，等其他耗时代码执行完毕后再传输另外的html代码。&分块编码(chunked encoding)&chunked encoding 是http1.1 才支持编码格式(当然目前没有哪个浏览器不支持1.1了)，chunked encoding 与一般的响应区别如下：&
复制代码代码如下:
正常的响应：&HTTP/1.1 200 OK&Cache-Control: private, max-age=60&Content-Length: 75785&Content-Type: text/ charset=utf-8&..其他response headers&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&
复制代码代码如下:
chunked encoding 响应:&HTTP/1.1 200 OK&Cache-Control: private, max-age=60&Content-Length: 75785&Content-Type: text/ charset=utf-8&Transfer-Encoding: chunked&..其他response headers&chunk #1(这里通常是16进制的数字，标志这个块的大小)&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"....&chunk #2&&div .....&chunk #3&....&/body&&/html&&
实例(JSP)&一个简单的页面，分为头部(header)和内容(部分)，假设内容部分需要读取数据库，花费3秒时间,然后显示csdn的logo。header部分显示cnblogs的logo。代码如下：&
复制代码代码如下:
&body&&&div id="head" style="border:1px solid #"&&cnblogs logo &img src="http://files.jb51.net/upload/13.gif" /&&&/div&&&br /&&&div id="content" style="border:1"&&&%&// 睡眠3秒&Thread.currentThread().sleep(3000);&%&&csdn logo&br /&&&img src="http://files.jb51.net/upload/58.gif" /&&&/div&&&/body&&
演示地址：http://213.186.44.204:8080/ChunkTest/nochunk.jsp (服务器比较差，请大家温柔点)&打开这个演示地址发现很正常的页面，在3秒后才开始下载显示2个logo，资源加载瀑布图如下：&现在把代码改成如下，加上flush，让response把之前的html分块输出：&&div id="head" style="border:1px solid #"&&
复制代码代码如下:
cnblogs logo &img src="http://files.jb51.net/upload/13.gif" /&&&/div&&&%&out.flush(); // flush response，分块输出&%&&&br /&&&div id="content" style="border:1"&&&%&// 睡眠3秒&Thread.currentThread().sleep(3000);&%&&csdn logo&br /&&&img src="http://files.jb51.net/upload/58.gif" /&&&/div&&
演示地址：http://213.186.44.204:8080/ChunkTest/chunk.jsp&打开这个演示地址，是不是发现cnblogs logo先下载显示出来，3秒后csdn logo才显示，资源加载图如下：&从这个图发现，cnblogs的logo在jsp页面还没执行完就开始下载了，这就是分块输出的效果。&监控工具：
&& & &如何知道我们是否成功使用了chunk encoding了 ，只要用工具查看response header 中是否包含了Transfer-Encoding: chunked，如果包含了，则是分块了。但要想监控分块的详细信息，据我所知，目前只有httpwatch支持，可以查看我们到底分了多少块，但是数量好像都多显示了1个，如下图：
&& &&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/afterwawa/p/4882716.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！Webpack笔记：基础配置与代码分块 - 简书
Webpack笔记：基础配置与代码分块
工欲善其事，必先利其器。webpack就是前端开发的一个利器。下面是一些自己学习过程中的笔记，欢迎交流。
在前端开发中，我们为什么需要使用webpack呢，简单总结一下，比较直接的原因有两点：
代码压缩打包
开发中的热更新
在现在的前端开发中，我们需要依赖大量的第三方代码库，通过webpack这样的打包工具，我们可以方便的管理各个依赖。而配合webpack-dev-server这样的插件，即使你只是平常做一些前端的练习，也能大大提高你的学习效率。
下面是一个快速的配置文件，可以用作日常的前端学习练习时使用（webpack2）：
var path = require("path");
module.exports = function() {
main: "./src/app.js"
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
test: /\.css$|\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["es2015"]
这个配置包含了两个功能：
CSS文件预处理，同时支持SCSS
JavaScript文件打包到dist/bundle.js
现在，来看一下怎么使用这份配置文件，在你的本地文件夹运行：
# 初始化项目并生成package.json文件
# 新建webpack.config.js文件，再复制配置到文件中，并安装webpack和webpack-dev-server插件和其他用到的加载器：
npm install --save-dev webpack webpack-dev-server css-loader style-loader
npm install --save-dev sass-loader node-sass
接下来，给npm添加命令：
"script": {
start: "webpack-dev-server --open"
现在，在命令行运行
npm run start
成功（此时默认你已经在你的文件夹中建立index.html入口，并且在html中引入了/bundle.js）！
此时，会自动打开浏览器跳转到index.htl。
webpack-dev-server的作用？
提供了一个本地的开发server，并且有live reload的功能，也就是，你在编辑器里更改了CSS或者JavaScript之后，浏览器中的网页就自动刷新了。
下面详细解释一下配置文件中各部分代码的作用：
entry:这是你的应用的入口点参数，webpack从这里给的文件开始解析你的代码，你也可以定义多个入口点
output:这是处理后的文件存放的参数。
module:你的代码中需要使用的加载器配置，配置中，test可以使用正则表达来检测文件名，以确定是否使用当前的加载器
完整的配置文件可以参考：
使用CommonsChunkPlugin
在代码中，一些引入的第三方代码，如果和自己的代码混合在一起打包，那么每次生成代码，都会生成新的打包文件。为了提高网站的加载速度，我们需要利用浏览器的缓存，一些第三方的代码库不需要每次都生成新的压缩代码，而是缓存在浏览器中，下次使用直接从浏览器加载。为了分离我们自己的代码和第三方的代码，或者一些类似的场景，我们需要使用CommonsChunkPlugin
下面是一个官方的配置文件
main: './index.js' //Notice that we do not have an explicit vendor entry here
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
//CommonChunksPlugin will now extract all the common modules from vendor and main bundles
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
在这个文件中，使用了两次CommonsChunkPlugin插件，而entry只有一个main。那么，如果分离特殊的代码呢？
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
在这里，minChunks是一个函数，插件通过这个函数来判断当前的chunk是否是符合条件。如果符合条件，就通过这个CommonsChunkPlugin，把当前chunk分离出去，如果不符合条件，那么第二个CommonsChunkPlugin就处理这个chunk。这样，当你的代码变动，由于vender的代码已经分离了，所以变动之后，重新打包，webpack并不会对vender的代码重新打包。
前端工程师努力中
GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要解决的是什么问题？ 对webpack的主要配置项进行分析，虽然不会涉及太多细节，但是期待在本节能让我们知晓如果我们有什么需求，我们该从哪些配置项着手修改？ 分析...
本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/7802如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/bl...
版权声明：本文为博主原创文章，未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 由于前端之前js、css、图片文件需要单独进行压缩和打包，这样团队人员处理很繁琐，然后 Instagram 团队就想让这些工作自动化，然后webpack应运而生...
webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安装 webpack 使用 命令行调用 配置文件 webpack 配置参数 entry 和 output 单一入口 多个入口 多个打包目标 webpack 支持 ...
前言 WebPack 是什么？ WebPack 是什么，WebPack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览...
自从我有了男朋友，凡是自己一个人出去，吃饭听讲座跑步遇到认识的人，他们的第一句话都是“诶？你的男朋友呢？” 我知道这是寒暄打趣的一种方式，但是总是会觉得不如意。好像我身上只剩下了一个标签“???的女朋友”，好像我干什么事情都要和男朋友在一起，好像我自己一个人的时候就是孤寂落...
(一段未理清楚的想法，暂寄与此) 一位很有名的哲学家提过一个同样很有名的观点：生产力决定生产关系。这是其思想的核。生产关系通过生产组织形式进行反映和体现。而且其还提出了关于剩余价值理论，认为所有的一切财富都是由人创造的。在现代宏观经济学里面，认为经济的总体增长来源于三个要素...
定位一个城市很正常。 也是必须的。 只有定位一个城市，才能在这个地方有所发展，将来还要在这里成家。等到后期，便以此城市作为发展基地，世界一张网，交通便利。北上广深杭，一线二线城市，个体及团体全面延伸，互联网时代的到来，让一切距离都不再是距离了。 你可以上午在家睡觉，中午就去...
前两天收到一封面试邀请，是外派到百度一个项目的技术职位。 自我介绍一下我——赵四小姐，今年24，目前在一家小型公司就职技术岗，公司主要做信息安全这块，我来这个公司大概一年半左右。我们技术部门十几个人，就我一个女生，我是不是很幸运，曾经我听过很多非议关于女生适不适合做技术类的...
前晚朋友问我，有没有交警大队的电话号码？我的第一反应是她出了什么事，可是转念一想，她一个女孩子，还没有考驾照，能出啥事？后来我的猜想真的是对的。 出事的是她弟弟，醉酒驾驶，外加酒后打交警，闹事。现在这社会，这三条随便有其中一条都是一种违法行为，都要接受处分。何况这三条他一起...}