整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;title> - 定義了HTML文檔的標題
使用 <title> 標簽定義HTML文檔的標題
<base> - 定義了所有鏈接的URL
使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。
<meta> - 提供了HTML文檔的meta標記
使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，作者，字符集等。
HTML <head> 元素
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題
一個簡單的 HTML 文檔:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標題</title></head><body>文檔內容......</body></html>
HTML <base> 元素
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<base target="_blank">
</head>
HTML <link> 元素
<link> 標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你需要指定樣式文件來渲染HTML文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta>一般放置于 <head>區域
<meta> 標簽- 使用實例
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>標簽用于加載腳本文件，如： JavaScript。
<script> 元素在以下章節會詳細描述。
HTML head 元素
| 標簽 | 描述 |
|---|---|
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標題 |
| <base> | 定義了頁面鏈接標簽的默認鏈接地址 |
| <link> | 定義了一個文檔和外部資源之間的關系 |
| <meta> | 定義了HTML文檔中的元數據 |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
tml5你了解了多少？如果你還是入門階段的話，或者還是一知半解的話 ，那么我們專門為你們收集的html5常用的標簽大全對你就很有幫助了，你需要了解了html5有哪些標簽你才能夠更好的。駕馭html5這門火熱而又充滿神秘的語言技術。下面是一些常用的html5標簽。按字母順序排列的標簽列表
?4: 指示在 HTML 4.01 中定義了該元素
?5: 指示在 HTML 5 中定義了該元素
標簽 描述 4 5
<!--...--> 定義注釋。 4 5
<!DOCTYPE> 定義文檔類型。 4 5
<a> 定義超鏈接。 4 5
<abbr> 定義縮寫。 4 5
<acronym> HTML 5 中不支持。定義首字母縮寫。 4
<address> 定義地址元素。 4 5
<applet> HTML 5 中不支持。定義 applet。 4
<area> 定義圖像映射中的區域。 4 5
<article> 定義 article。 5
<time> 定義日期/時間。 5
<title> 定義文檔的標題。 4 5
<tr> 定義表格行。 4 5
<tt> HTML 5 中不支持。定義打字機文本。 4
<u> HTML 5 中不支持。定義下劃線文本。 4
<ul> 定義無序列表。 4 5
<var> 定義變量。 4 5
<video> 定義視頻。 5
<xmp> HTML 5 中不支持。定義預格式文本。 4
<aside> 定義頁面內容之外的內容。 5
<button> 定義按鈕。 4 5
<canvas> 定義圖形。 5
<caption> 定義表格標題。 4 5
<center> HTML 5 中不支持。定義居中的文本。 4
<cite> 定義引用。 4 5
<code> 定義計算機代碼文本。 4 5
<col> 定義表格列的屬性。 4 5
<colgroup> 定義表格列的分組。 4 5
<command> 定義命令按鈕。 5
<audio> 定義聲音內容。 5
<b> 定義粗體文本。 4 5
<base> 定義頁面中所有鏈接的基準 URL。 4 5
<basefont> HTML 5 中不支持。請使用 CSS 代替。 4
<bdo> 定義文本顯示的方向。 4 5
<big> HTML 5 中不支持。定義大號文本。 4
<blockquote> 定義長的引用。 4 5
<body> 定義 body 元素。 4 5
<br> 插入換行符。 4 5
<datalist> 定義下拉列表。 5
<dd> 定義定義的描述。 4 5
<form> 定義表單。 4 5
<frame> HTML 5 中不支持。定義子窗口（框架）。 4
<frameset> HTML 5 中不支持。定義框架的集。 4
<h1> to <h6> 定義標題 1 到標題 6。 4 5
<head> 定義關于文檔的信息。 4 5
<header> 定義 section 或 page 的頁眉。 5
<hgroup> 定義有關文檔中的 section 的信息。 5
<hr> 定義水平線。 4 5
<del> 定義刪除文本。 4 5
<details> 定義元素的細節。 5
<dfn> 定義定義項目。 4 5
<dir> HTML 5 中不支持。定義目錄列表。 4
<iframe> 定義行內的子窗口（框架）。 4 5
<img> 定義圖像。 4 5
<input> 定義輸入域。 4 5
<ins> 定義插入文本。 4 5
<keygen> 定義生成密鑰。 5
<isindex> HTML 5 中不支持。定義單行的輸入域。 4
<kbd> 定義鍵盤文本。 4 5
<label> 定義表單控件的標注。 4 5
<legend> 定義 fieldset 中的標題。 4 5
<div> 定義文檔中的一個部分。 4 5
<dl> 定義定義列表。 4 5
<dt> 定義定義的項目。 4 5
<em> 定義強調文本。 4 5
<embed> 定義外部交互內容或插件。 5
<fieldset> 定義 fieldset。 4 5
<figcaption> 定義 figure 元素的標題。 5
<figure> 定義媒介內容的分組，以及它們的標題。 5
<font> HTML 5 中不支持。 4
<footer> 定義 section 或 page 的頁腳。 5
<html> 定義 html 文檔。 4 5
<i> 定義斜體文本。 4 5
<li> 定義列表的項目。 4 5
<link> 定義資源引用。 4 5
<map> 定義圖像映射。 4 5
<mark> 定義有記號的文本。 5
<menu> 定義菜單列表。 4 5
<meta> 定義元信息。 4 5
<meter> 定義預定義范圍內的度量。 5
<nav> 定義導航鏈接。 5
<noframes> HTML 5 中不支持。定義 noframe 部分。 4
<noscript> 定義 noscript 部分。 4 5
<object> 定義嵌入對象。 4 5
<ol> 定義有序列表。 4 5
<optgroup> 定義選項組。 4 5
<option> 定義下拉列表中的選項。 4 5
<output> 定義輸出的一些類型。 5
<p> 定義段落。 4 5
<param> 為對象定義參數。 4 5
<pre> 定義預格式化文本。 4 5
<progress> 定義任何類型的任務的進度。 5
<q> 定義短的引用。 4 5
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內容。 5
<rt> 定義 ruby 注釋的解釋。 5
<ruby> 定義 ruby 注釋。 5
<s> HTML 5 中不支持。定義加刪除線的文本。 4
<samp> 定義樣本計算機代碼。 4 5
<script> 定義腳本。 4 5
<section> 定義 section。 5
<select> 定義可選列表。 4 5
<small> 定義小號文本。 4 5
<source> 定義媒介源。 5
<span> 定義文檔中的 section。 4 5
<strike> HTML 5 中不支持。定義加刪除線的文本。 4
<strong> 定義強調文本。 4 5
<style> 定義樣式定義。 4 5
<sub> 定義下標文本。 4 5
<summary> 定義 details 元素的標題。 5
<sup> 定義上標文本。 4 5
<table> 定義表格。 4 5
<tbody> 定義表格的主體。 4 5
<td> 定義表格單元。 4 5
<textarea> 定義 textarea。 4 5
<tfoot> 定義表格的腳注。 4 5
<th> 定義表頭。 4 5
<thead> 定義表頭。 4 5
文/丁向明
做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833
http://dingxiangming.com
好，我是堅持分享干貨的 EarlGrey，翻譯出版過《Python編程無師自通》、《Python并行計算手冊》等技術書籍。
如果我的分享對你有幫助，請關注我，一起向上進擊。
瀏覽器不是用來瀏覽網頁、觀看網絡視頻的嗎？難道還可以在瀏覽器里碼代碼嗎？
沒錯！真的可以。現在已經有很多類似JSFiddle、JSBin這樣在線編輯代碼的網站，不過我們今天要分享的方法并不需要注冊第三方網站，只需要在瀏覽器的地址欄輸入一行代碼即可。我們首先來看一下具體的效果。
編輯器里的Python代碼
上面這幅圖中，我們發現在瀏覽器中可以輸入Python代碼，而且支持語法高亮和自動縮進功能。那么，這究竟是怎么實現的呢？
這其實可以追溯到2012年時，一位叫Jose Aguinaga的國外開發者在Coderwall上分享的一個小貼士。
將瀏覽器變成一個簡易文本編輯器
一開始的功能非常簡單，根本沒有語法高亮，也沒有自動縮進，僅僅是將瀏覽器變成一個文本編輯器而已。
Jose分享的代碼如下：
data:text/html, <html contenteditable>只需要將上面的代碼復制粘貼到瀏覽器的地址欄，然后按回車，就可以讓瀏覽器變成編輯器。是不是非常簡單？
背后的原理并不高深，只是用到了Data URI格式而已。這行代碼告訴瀏覽器渲染一個HTML頁面，而這個頁面具備一個H5屬性：contenteditable。
Data URI是由RFC 2397定義的一種把小文件直接嵌入文檔的方案。格式如下：data:[<MIME type>][;charset=<charset>][;base64],<encoded data>。其實整體可以視為三部分，即聲明：參數+數據，逗號左邊的是各種參數，右邊的是數據。
請想嘗試的朋友注意，這行代碼只適用于Chrome等現代瀏覽器。如果你還在使用IE8等過時瀏覽器的話，是沒有效果的。
出現各種衍生版本
由于上面這個小技巧的出現，激發了許多開發者的的激情，不斷分享自己的版本。
下面這段代碼，可以讓編輯器在你一邊打字時，一遍切換背景顏色：
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type='text/css'> html { font-family: 'Open Sans' } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor='#ff'+n+''+n},1e3);var n=;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style='font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;'>
下面這段代碼可以將瀏覽器頁面變成一個筆記本的樣式，看上去很有感覺：
data:text/html;charset=utf-8, <title>TextEditor</title> <link rel='shortcut icon' href='http://g.etfv.co/https://docs.google.com'/> <style> html{height:100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding:3%; height:94%;} .paper { font: normal 12px/1.5 'Lucida Grande', arial, sans-serif; width:50%; height:80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color:#444; line-height:20px; border: 1px solid #d2d2d2; background:#fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width:4px; top:0; left:30px; bottom:0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height:94%; background: transparent; line-height:20px;} </style> <body spellcheck='false'> <div class='paper'> <textarea autofocus='autofocus'></textarea> </div> </body> </html>筆記本樣式的瀏覽器編輯器
如何變身Python編輯器？
接下來，我們來看怎樣將瀏覽器打造成Python編輯器。只需要在地址欄輸入下面的代碼即可：
data:text/html, <style type='text/css'>.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class='e' id='editor'></div><script src='http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'></script><script>var e=ace.edit('editor');e.setTheme('ace/theme/textmate');e.getSession().setMode('ace/mode/python');</script>這段代碼是由jdkanani在Github上分享的。
事實上，我們只要簡單修改一下上面的代碼，就可以馬上將瀏覽器變成其他語言的編輯器，包括Markdown、C/C++、Javscript、Java等幾乎所有編程語言。你所要做的，只是將代碼中的ace/mode/python，修改成ace/mode/相應的語言（如java）即可。
除了支持多種語言，它還支持更改頁面主題！Eclipse、Github、Textmate等眾多經典主題，統統支持！
只需要將ace/theme/textmate中的textmate替換成你喜歡的主題即可，如monokai。
渲染Markdown文本
如果你習慣于用Markdown語法寫作，你或許會希望直接在頁面中查看渲染后的效果。只需要輸入下面這行代碼即可：
data:text/html,<style type='text/css'>.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class='e' id='editor'></div><div class='c'></div><script src='http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js'></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit('editor');e.setTheme('ace/theme/monokai');e.getSession().setMode('ace/mode/markdown');var consoleEl=document.getElementsByClassName('c')[0];var converter=new Showdown.converter;e.commands.addCommand({name:'markdown',bindKey:{win:'Ctrl-M',mac:'Command-M'},exec:function(t){var n=e.getSession().getMode().$id;if(n=='ace/mode/markdown'){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>輸入Markdown代碼之后，然后按Ctrl+M或Command+M，就可以將代碼轉換成HTML。
渲染Markdown代碼
背后的原理
看了這幾個例子之后，大家可能已經明白了：這些示例都是通過Data URI格式讓瀏覽器渲染一段HTML代碼。而編輯器相關的樣式已經寫在了代碼中。這與將相應的HTML代碼放在單獨文件中打開的效果是相同的。
而在前兩個例子中，代碼中實際用到了一個叫ace.js的文件，不知道大家注意到沒有？據小編了解，Ace是一個用JavaScript編寫的可嵌入式代碼編輯器，據稱和Sublime、Vim和TextMate等原生編輯的功能和性能相當。而且，它還可以非常容易滴嵌入到任意網頁或JavaScript應用中。
而Ace也是一個叫Cloud9IDE的在線集成開發環境所使用的主要編輯器。具體效果請看下圖：
Cloud9IDE 編輯器效果
SlimText
程序員都是愛折騰的物種。有的開發者還是不滿足于上面那種手動輸入代碼、將瀏覽器變成編輯器的方法，甚至是直接將真正的編輯器搬到了瀏覽器中運行。這就是我們最后要介紹的SlimText，下面是具體截圖。
SlimText截圖
如截圖所示，SlimText是一個真正的瀏覽器端代碼編輯器，以Chrome插件的形式存在，文件結構、文件搜索、文件保存等功能一應具有。它是一位名叫tylerlong的國人開發的，支持Windows、Linux和Mac OS X等多個平臺。
- EOF -
文章已經看到這了，別忘了在右下角點個“贊”和“在看”鼓勵哦~
告訴你更多細節干貨
歡迎圍觀我的朋友圈
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
