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 href="http://www.runoob.com/images/" 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小时内与您取得联系。