整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
指引
网页中的信息主要是以文本为主的，可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。文字版面的编辑包括文本标签和格式标签两种，在浏览器中显示的文字内容和格式都要在<body>标记中编写。文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用。对文字的格式化，通常可以使用两种方式：一种方式是直接使用HTML标记，另一种方式是使用CSS。利用CSS可以对文本的格式进行精确控制，使用HTML标记则更有利于搜索引擎抓取。本章主要介绍一些和页面排版相关的标记。
1 HTML基础标签
HTML标签有很多，为了方便学习和使用，我们可以将这些标签按类别细分一下。基础标签则是页面制作最常使用的一些标签，包括上一章介绍过的结构标签，都属于基础标签。本节介绍的基础标签如表1所示：
表1 HTML基础标签
览器兼容性问题着实让人头疼，从最初的IE6浏览器到现在HTML5+CSS3的兴起，依然会存在兼容性问题，这里分享几个小技巧来避免这个问题。
如果你正在使用最新的 CSS 代码，比如 box-sizing，或者 background-clip等，确保你使用了合适的供应商前缀。
大家可以从网上下载写好的样式模板，也可以自己去写，当然建议下载一个完整版，自行保存，这样每次使用的时候可以直接拿来。
当你给一个包含 width 的元素加 padding，那它实际显示的要比本应显示的大。因为 width 和 padding 会加到一起。比如一个元素 width 是 100px，又给它加了一个 10px 的 padding。那某些浏览器会将该元素显示成 120px。
为了解决这个问题，可以用如下代码：
在写页面的时候要确保我们把浮动都清理掉了，如果不清理掉，可能会出现很奇怪的情况。
可以用下面 CSS 代码清理浮动：
如果要把你大部分代码都包起来，有个更简单的方法就是把它添加到我们的 wrap 类里面：
这样的话浮动就没清理掉了，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
掌握这几个小技巧，让它成为日常开发的习惯，会避免90%的跨浏览器不兼容问题，拿走不谢。
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式。在如今的软件编程中越来越重要，不管你是开发web还是app，其数据格式是一定会使用的。
今天我们就手写一款JSON格式化工具。
主要是用html，js和css，简单几行代码就写出一个自己的json格式化工具，显示样式可以自己控制，简洁、方便、好用。而且拿出来还能装逼。
先看一下完成时的效果：这里样式我选择css控制成极简风格的，只要一个格式控制和颜色控制。毕竟写代码的时候不想被视觉污染。
感觉基本的功能都有了，格式化，缩进量，是否显示引号，单引号双引号自动变换，分级展示，控制展开和叠起。觉得功能不全的你还可以继续添加。样式觉得丑的，你可以自己定义css样式。
然后让我们看一下市面上常用的比较成熟的json格式化工具，做下对比。下边这个是google浏览器的插件JSON Edit。
嗯，对比结束，我写的比他的好，嗯，是这样，没毛病。
废话少说，上代码：
总共三部分：html、css和js，组合在一起就能用，不过百行代码。如果你嫌麻烦，在文章底部我有一个做好了的打成压缩包分享在github了，链接已有，自己下。
结构如下
html代码：
<!DOCTYPE html>
<html >
<head>
<title>原生json格式化及高亮</title>
<meta name="description" content="json,格式化,高亮">
<meta name="keywords" content="json,格式化,高亮">
<script src="c.js" type="text/javascript"></script>
<link href="s.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div class="HeadersRow">
<div id="HeaderTitle">
<h3 id="HeaderSubTitle">JSON格式化及高亮:</h3>
<textarea id="RawJson">
</textarea>
</div>
<div id="ControlsRow">
<input type="Button" value="格式化" onclick="Process()"/>
<span id="TabSizeHolder">
缩进量
<select id="TabSize" onchange="TabSizeChanged()">
<option value="1">1</option>
<option value="2" selected="true">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</span>
<label for="QuoteKeys">
<input type="checkbox" id="QuoteKeys" onclick="QuoteKeysClicked()" checked="true" />
引号
</label>
<a href="javascript：void(0);" onclick="SelectAllClicked()">全选</a>
<span id="CollapsibleViewHolder" >
<label for="CollapsibleView">
<input type="checkbox" id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="true" />
显示控制
</label>
</span>
<span id="CollapsibleViewDetail">
<a href="javascript：void(0);" onclick="ExpandAllClicked()">展开</a>
<a href="javascript：void(0);" onclick="CollapseAllClicked()">叠起</a>
<a href="javascript：void(0);" onclick="CollapseLevel(3)">2级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(4)">3级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(5)">4级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(6)">5级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(7)">6级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(8)">7级</a>
<a href="javascript：void(0);" onclick="CollapseLevel(9)">8级</a>
</span>
</div>
<div id="Canvas" class="Canvas"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript" src="m.js"></script>
</body>
</html>
css代码：
css代码是控制样式的，无操作逻辑，你可以换成你自己喜欢的风格，这里不大费篇章的介绍，简单截图带过。看源码的可以下我的分享的压缩包。
js代码：
直接上github链接，我已经上传压缩包，解压可用，源码也可以查看，自己下载看吧。
https://git.oschina.net/lovepeng/share-for-you.git
*请认真填写需求信息，我们会在24小时内与您取得联系。
