IT兄弟連 HTML5教程 HTML5文字版面和編輯標簽 HTML基礎標簽

指引

網頁中的信息主要是以文本為主的，可以通過字體、大小、顏色、底紋、邊框等來設置文本的屬性。文字版面的編輯包括文本標簽和格式標簽兩種，在瀏覽器中顯示的文字內容和格式都要在<body>標記中編寫。文字是網頁設計最基礎的部分，一個標準的文字頁面可以起到傳達信息的作用。對文字的格式化，通常可以使用兩種方式：一種方式是直接使用HTML標記，另一種方式是使用CSS。利用CSS可以對文本的格式進行精確控制，使用HTML標記則更有利于搜索引擎抓取。本章主要介紹一些和頁面排版相關的標記。

1 HTML基礎標簽

HTML標簽有很多，為了方便學習和使用，我們可以將這些標簽按類別細分一下。基礎標簽則是頁面制作最常使用的一些標簽，包括上一章介紹過的結構標簽，都屬于基礎標簽。本節介紹的基礎標簽如表1所示：

表1 HTML基礎標簽

覽器兼容性問題著實讓人頭疼，從最初的IE6瀏覽器到現在HTML5+CSS3的興起，依然會存在兼容性問題，這里分享幾個小技巧來避免這個問題。

CSS3風格的前綴

如果你正在使用最新的 CSS 代碼，比如 box-sizing，或者 background-clip等，確保你使用了合適的供應商前綴。

使用樣式重置

大家可以從網上下載寫好的樣式模板，也可以自己去寫，當然建議下載一個完整版，自行保存，這樣每次使用的時候可以直接拿來。

避免padding和width一起使用

當你給一個包含 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

在線咨詢

上一篇：收藏一個很棒的HTML5網站模版下載網站
下一篇：干貨:HTML中高效獲取url的參數

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。