整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;title> - 定義了HTML文檔的標(biāo)題
使用 <title> 標(biāo)簽定義HTML文檔的標(biāo)題
<base> - 定義了所有鏈接的URL
使用 <base> 定義頁面中所有鏈接默認(rèn)的鏈接目標(biāo)地址。
<meta> - 提供了HTML文檔的meta標(biāo)記
使用 <meta> 元素來描述HTML文檔的描述，關(guān)鍵詞，作者，字符集等。
HTML <head> 元素
<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素
<title> 標(biāo)簽定義了不同文檔的標(biāo)題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
定義了瀏覽器工具欄的標(biāo)題
當(dāng)網(wǎng)頁添加到收藏夾時(shí)，顯示在收藏夾中的標(biāo)題
顯示在搜索引擎結(jié)果頁面的標(biāo)題
一個(gè)簡單的 HTML 文檔:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標(biāo)題</title></head><body>文檔內(nèi)容......</body></html>
HTML <base> 元素
<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:
<head>
<base target="_blank">
</head>
HTML <link> 元素
<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系。
<link> 標(biāo)簽通常用于鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> 元素
<style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你需要指定樣式文件來渲染HTML文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會(huì)被瀏覽器解析。
META元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta>一般放置于 <head>區(qū)域
<meta> 標(biāo)簽- 使用實(shí)例
為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網(wǎng)頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">
HTML <script> 元素
<script>標(biāo)簽用于加載腳本文件，如： JavaScript。
<script> 元素在以下章節(jié)會(huì)詳細(xì)描述。
HTML head 元素
| 標(biāo)簽 | 描述 |
|---|---|
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標(biāo)題 |
| <base> | 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 |
| <link> | 定義了一個(gè)文檔和外部資源之間的關(guān)系 |
| <meta> | 定義了HTML文檔中的元數(shù)據(jù) |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
tml5你了解了多少？如果你還是入門階段的話，或者還是一知半解的話 ，那么我們專門為你們收集的html5常用的標(biāo)簽大全對你就很有幫助了，你需要了解了html5有哪些標(biāo)簽?zāi)悴拍軌蚋玫摹ｑ{馭html5這門火熱而又充滿神秘的語言技術(shù)。下面是一些常用的html5標(biāo)簽。按字母順序排列的標(biāo)簽列表
?4: 指示在 HTML 4.01 中定義了該元素
?5: 指示在 HTML 5 中定義了該元素
標(biāo)簽 描述 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> 定義圖像映射中的區(qū)域。 4 5
<article> 定義 article。 5
<time> 定義日期/時(shí)間。 5
<title> 定義文檔的標(biāo)題。 4 5
<tr> 定義表格行。 4 5
<tt> HTML 5 中不支持。定義打字機(jī)文本。 4
<u> HTML 5 中不支持。定義下劃線文本。 4
<ul> 定義無序列表。 4 5
<var> 定義變量。 4 5
<video> 定義視頻。 5
<xmp> HTML 5 中不支持。定義預(yù)格式文本。 4
<aside> 定義頁面內(nèi)容之外的內(nèi)容。 5
<button> 定義按鈕。 4 5
<canvas> 定義圖形。 5
<caption> 定義表格標(biāo)題。 4 5
<center> HTML 5 中不支持。定義居中的文本。 4
<cite> 定義引用。 4 5
<code> 定義計(jì)算機(jī)代碼文本。 4 5
<col> 定義表格列的屬性。 4 5
<colgroup> 定義表格列的分組。 4 5
<command> 定義命令按鈕。 5
<audio> 定義聲音內(nèi)容。 5
<b> 定義粗體文本。 4 5
<base> 定義頁面中所有鏈接的基準(zhǔn) 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> 定義標(biāo)題 1 到標(biāo)題 6。 4 5
<head> 定義關(guān)于文檔的信息。 4 5
<header> 定義 section 或 page 的頁眉。 5
<hgroup> 定義有關(guān)文檔中的 section 的信息。 5
<hr> 定義水平線。 4 5
<del> 定義刪除文本。 4 5
<details> 定義元素的細(xì)節(jié)。 5
<dfn> 定義定義項(xiàng)目。 4 5
<dir> HTML 5 中不支持。定義目錄列表。 4
<iframe> 定義行內(nèi)的子窗口（框架）。 4 5
<img> 定義圖像。 4 5
<input> 定義輸入域。 4 5
<ins> 定義插入文本。 4 5
<keygen> 定義生成密鑰。 5
<isindex> HTML 5 中不支持。定義單行的輸入域。 4
<kbd> 定義鍵盤文本。 4 5
<label> 定義表單控件的標(biāo)注。 4 5
<legend> 定義 fieldset 中的標(biāo)題。 4 5
<div> 定義文檔中的一個(gè)部分。 4 5
<dl> 定義定義列表。 4 5
<dt> 定義定義的項(xiàng)目。 4 5
<em> 定義強(qiáng)調(diào)文本。 4 5
<embed> 定義外部交互內(nèi)容或插件。 5
<fieldset> 定義 fieldset。 4 5
<figcaption> 定義 figure 元素的標(biāo)題。 5
<figure> 定義媒介內(nèi)容的分組，以及它們的標(biāo)題。 5
<font> HTML 5 中不支持。 4
<footer> 定義 section 或 page 的頁腳。 5
<html> 定義 html 文檔。 4 5
<i> 定義斜體文本。 4 5
<li> 定義列表的項(xiàng)目。 4 5
<link> 定義資源引用。 4 5
<map> 定義圖像映射。 4 5
<mark> 定義有記號的文本。 5
<menu> 定義菜單列表。 4 5
<meta> 定義元信息。 4 5
<meter> 定義預(yù)定義范圍內(nèi)的度量。 5
<nav> 定義導(dǎo)航鏈接。 5
<noframes> HTML 5 中不支持。定義 noframe 部分。 4
<noscript> 定義 noscript 部分。 4 5
<object> 定義嵌入對象。 4 5
<ol> 定義有序列表。 4 5
<optgroup> 定義選項(xiàng)組。 4 5
<option> 定義下拉列表中的選項(xiàng)。 4 5
<output> 定義輸出的一些類型。 5
<p> 定義段落。 4 5
<param> 為對象定義參數(shù)。 4 5
<pre> 定義預(yù)格式化文本。 4 5
<progress> 定義任何類型的任務(wù)的進(jìn)度。 5
<q> 定義短的引用。 4 5
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。 5
<rt> 定義 ruby 注釋的解釋。 5
<ruby> 定義 ruby 注釋。 5
<s> HTML 5 中不支持。定義加刪除線的文本。 4
<samp> 定義樣本計(jì)算機(jī)代碼。 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> 定義強(qiáng)調(diào)文本。 4 5
<style> 定義樣式定義。 4 5
<sub> 定義下標(biāo)文本。 4 5
<summary> 定義 details 元素的標(biāo)題。 5
<sup> 定義上標(biāo)文本。 4 5
<table> 定義表格。 4 5
<tbody> 定義表格的主體。 4 5
<td> 定義表格單元。 4 5
<textarea> 定義 textarea。 4 5
<tfoot> 定義表格的腳注。 4 5
<th> 定義表頭。 4 5
<thead> 定義表頭。 4 5
文/丁向明
做一個(gè)有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833
http://dingxiangming.com
好，我是堅(jiān)持分享干貨的 EarlGrey，翻譯出版過《Python編程無師自通》、《Python并行計(jì)算手冊》等技術(shù)書籍。
如果我的分享對你有幫助，請關(guān)注我，一起向上進(jìn)擊。
瀏覽器不是用來瀏覽網(wǎng)頁、觀看網(wǎng)絡(luò)視頻的嗎？難道還可以在瀏覽器里碼代碼嗎？
沒錯(cuò)！真的可以。現(xiàn)在已經(jīng)有很多類似JSFiddle、JSBin這樣在線編輯代碼的網(wǎng)站，不過我們今天要分享的方法并不需要注冊第三方網(wǎng)站，只需要在瀏覽器的地址欄輸入一行代碼即可。我們首先來看一下具體的效果。
編輯器里的Python代碼
上面這幅圖中，我們發(fā)現(xiàn)在瀏覽器中可以輸入Python代碼，而且支持語法高亮和自動(dòng)縮進(jìn)功能。那么，這究竟是怎么實(shí)現(xiàn)的呢？
這其實(shí)可以追溯到2012年時(shí)，一位叫Jose Aguinaga的國外開發(fā)者在Coderwall上分享的一個(gè)小貼士。
將瀏覽器變成一個(gè)簡易文本編輯器
一開始的功能非常簡單，根本沒有語法高亮，也沒有自動(dòng)縮進(jìn)，僅僅是將瀏覽器變成一個(gè)文本編輯器而已。
Jose分享的代碼如下：
data:text/html, <html contenteditable>只需要將上面的代碼復(fù)制粘貼到瀏覽器的地址欄，然后按回車，就可以讓瀏覽器變成編輯器。是不是非常簡單？
背后的原理并不高深，只是用到了Data URI格式而已。這行代碼告訴瀏覽器渲染一個(gè)HTML頁面，而這個(gè)頁面具備一個(gè)H5屬性：contenteditable。
Data URI是由RFC 2397定義的一種把小文件直接嵌入文檔的方案。格式如下：data:[<MIME type>][;charset=<charset>][;base64],<encoded data>。其實(shí)整體可以視為三部分，即聲明：參數(shù)+數(shù)據(jù)，逗號左邊的是各種參數(shù)，右邊的是數(shù)據(jù)。
請想嘗試的朋友注意，這行代碼只適用于Chrome等現(xiàn)代瀏覽器。如果你還在使用IE8等過時(shí)瀏覽器的話，是沒有效果的。
出現(xiàn)各種衍生版本
由于上面這個(gè)小技巧的出現(xiàn)，激發(fā)了許多開發(fā)者的的激情，不斷分享自己的版本。
下面這段代碼，可以讓編輯器在你一邊打字時(shí)，一遍切換背景顏色：
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;'>
下面這段代碼可以將瀏覽器頁面變成一個(gè)筆記本的樣式，看上去很有感覺：
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上分享的。
事實(shí)上，我們只要簡單修改一下上面的代碼，就可以馬上將瀏覽器變成其他語言的編輯器，包括Markdown、C/C++、Javscript、Java等幾乎所有編程語言。你所要做的，只是將代碼中的ace/mode/python，修改成ace/mode/相應(yīng)的語言（如java）即可。
除了支持多種語言，它還支持更改頁面主題！Eclipse、Github、Textmate等眾多經(jīng)典主題，統(tǒng)統(tǒng)支持！
只需要將ace/theme/textmate中的textmate替換成你喜歡的主題即可，如monokai。
渲染Markdown文本
如果你習(xí)慣于用Markdown語法寫作，你或許會(huì)希望直接在頁面中查看渲染后的效果。只需要輸入下面這行代碼即可：
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，就可以將代碼轉(zhuǎn)換成HTML。
渲染Markdown代碼
背后的原理
看了這幾個(gè)例子之后，大家可能已經(jīng)明白了：這些示例都是通過Data URI格式讓瀏覽器渲染一段HTML代碼。而編輯器相關(guān)的樣式已經(jīng)寫在了代碼中。這與將相應(yīng)的HTML代碼放在單獨(dú)文件中打開的效果是相同的。
而在前兩個(gè)例子中，代碼中實(shí)際用到了一個(gè)叫ace.js的文件，不知道大家注意到?jīng)]有？據(jù)小編了解，Ace是一個(gè)用JavaScript編寫的可嵌入式代碼編輯器，據(jù)稱和Sublime、Vim和TextMate等原生編輯的功能和性能相當(dāng)。而且，它還可以非常容易滴嵌入到任意網(wǎng)頁或JavaScript應(yīng)用中。
而Ace也是一個(gè)叫Cloud9IDE的在線集成開發(fā)環(huán)境所使用的主要編輯器。具體效果請看下圖：
Cloud9IDE 編輯器效果
SlimText
程序員都是愛折騰的物種。有的開發(fā)者還是不滿足于上面那種手動(dòng)輸入代碼、將瀏覽器變成編輯器的方法，甚至是直接將真正的編輯器搬到了瀏覽器中運(yùn)行。這就是我們最后要介紹的SlimText，下面是具體截圖。
SlimText截圖
如截圖所示，SlimText是一個(gè)真正的瀏覽器端代碼編輯器，以Chrome插件的形式存在，文件結(jié)構(gòu)、文件搜索、文件保存等功能一應(yīng)具有。它是一位名叫tylerlong的國人開發(fā)的，支持Windows、Linux和Mac OS X等多個(gè)平臺。
- EOF -
文章已經(jīng)看到這了，別忘了在右下角點(diǎn)個(gè)“贊”和“在看”鼓勵(lì)哦~
告訴你更多細(xì)節(jié)干貨
歡迎圍觀我的朋友圈
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
