dreamingbaobei的博客

在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。假设word中取边距为上下2.54cm，左右3.18cm，即向下边距1英寸，左右边距约1.25英寸，按96pdi计算，上下边距96px,左右边距约为120px。通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px，向下取整为宽793像素和高1122像素，这是我们在制作网页的时候需要的像素。浏览器打印机和导出word支持的样式,由于网页。

介绍移动端布局常用方法之前，推荐回顾一下这3篇博文。移动端布局-分辨率和视口网页的响应式布局与媒体查询一步步学习Flex弹性布局在做移动端布局时，html的header中加上这段代码<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">移动端布局时，首先要确认一下需求，即是否需要兼容PC端，即两端适配，这是移动端布局的比较麻烦的情况，这时候我通常用响应式布局和媒体查询来

在移动端布局时，图片的显示是个棘手的问题。通常我们会要求运营在上传图片时使用我们规定比例的文章，但不能保证被严格的执行，必然会导致一些扭曲、页面的跑位等等问题由于移动端图片宽度要适应设备，为避免扭曲，高度不能限定，会图片加载过程中会出现页面的白屏抖动等情况如下图有4个不同比例的图片，使用弹性布局，限定图片的宽度、不限定高度，显然不是我们想要的结果我们使用css来解决图片比例的问题，块...

手机移动端WEB资源整合meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> name="viewport" c...

搜索引擎工作原理      当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。      在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫...

在写HTML代码时，你有没有感到痛苦，我们甚至要花好多时间写这些符号<>,"",/,写CSS的时候，有时候要写一大堆的浏览器前缀。Emmet就是一款能解放我们的工具。Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。我们之前提过的Sublime,VS code,Webstor...

ECMAScript是客户端脚本语言（JavaScript）的标准。引入js的方法。1、内部JS： 定义&lt;script&gt;，标签体内容就是 js 代码 外部JS：2、外部JS:定义&lt;script&gt;，通过src属性引入外部的js文件注意：script标签可以定义在 html 页面的任何地方。但是定义的位置会影响执行顺序。可以多个定义script标签。JS基本语法规...

前端在工作中，一定会经常涉及到图片，甚至很多人认为前端就是切图的，还有人说前端是用div+css布局的，如果从事了这项工作，你一定不这么认为，相信大家都知道前端绝对不是用PS切片工具把网页切成小图片这样简单，但是不得不说，前端真的会接触很多图片。涉及到图片的知识点也很多，这篇文字主要讲解一下网页中的图片优化的话题。1、加载图片的原理2、图片的格式3、矢量图和位图4、图片的尺寸和大小5、图...

字符集就是将这些二进制数据进行翻译的规则，使用不同的规则就会产生不同的结果，如果使用错了字符集就会产生乱码，比如服务端响应客户端http请求,发送了一段utf-8格式的文本，客户端却使用gb2312格式查看，就会导致乱码的情况。

一、概述SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。1、SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE...

HTML5是对HTML的第5次重大的修改，虽然HTML5 标准还在制定中，但不能阻碍其势不可挡的脚步，不用HTML5你就OUT了。首先要说的是不是所有的浏览器都支持HTML5,Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9支持部分 HTML5 特性。HTML5的W3C标准声明改为&amp;amp;amp;lt;!doctype html...

XHTML可扩展超文本标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。XHTML 是 HTML 与 XML（扩展标记语言）的结合物；XHTML 与 HTML 4.01 几乎是相同的；XHTML1.1为XHTML最后的独立标准。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。HTML 使用标记标签来描述网页。HTML的语法是给文本加上表明文本含义的标签(Tag)，使浏览器能够按照约定的方式解析。HTML 标签结合W3C的标准，对标签的语法做如下整理1、HTML 标签是由尖括号包围的关键词，如 2、HTML 标签的基础语法：&amp;amp;amp;lt;标签名 属性名1=“属性值” 属性名2=“属性值...

这里的**超文本**是什么意思，姑且字面理解为超级本文，超过文本，也就是说比文本厉害的意思，那么这个超文本比文本厉害在哪呢？

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人；

head元素是所有头部元素的容器。head容器中可以包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等，这里面内容较多的是meta元素（元数据），元数据的讲解将放置在最后，但它不是不重要，而是很重要。

HTML文档中<>括起来的部分就是标签，这种书写方式就是超文本标记语言的书写方式。浏览器能够读取 HTML 文档，并以网页的形式显示出这些标签。通常标签是成对出现的，有开始有结束，本文将分类的讲解一些标签

HTML表单用于搜集用户输入的信息，常见的应用如用户注册，登录，填写资料等，在网页中非常常见，表单是由form标签包裹的一组标签组成。表单之所以重要，是因为表单连接着用户、前端和后端，用户可以通过表单输入信息，前端要对用户输入的信息进行响应，如验证输入，验证通过后通过一定的方式提交给后端，后端接到数据要做进一步处理，如：第二次验证，返回处理结果等。