HTML5新增属性
[sourcecode language="plain"]
<!DOCTYPE html>
<html
manifest="cache.manifest">
<!--
manifest属性定义离线应用文件,详见:http://www.haojianhua.com/2015/07/29/html-5-manifest/
-->
<head>
<meta
charset="UTF-8">
<!--
charset属性:规定页面字符集
-->
<meta
http-equiv="pragma"
content="no-cache">
<!--
http-equiv属性:不是html5新增属性,禁止浏览器缓存,详见:http://www.haojianhua.com/2015/07/30/http-equiv/
-->
<title>新增属性</title>
<link
rel="icon"
type="text/css"
href="test_icon.png"
type="imgage/png"
sizes="16*16">
<!--
sizes属性: 规定icon大小。
-->
<base
href="http://test.com/i/"
target="_blank">
<!--
base标签:标签为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对
URL 中的空白。使用 <base>
标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括
<a>、<img>、<link>、<form>
标签中的 URL。<base> 标签必须位于 head
元素内部。
如: img标签的src属性为“http://test.com/i/test.jpg”,
base的href为:http://test.com/i/,
img标签的src属性为: test.jpg.
新增target属性:规定在何处打开页面上的所有链接。可以在每个链接中使用 target 属性来覆盖该属性。如果没有为 base
元素规定 href 属性,则 target 属性是必需的。
-->
<script defer
type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"
onload="console.log('a');"></script>
<script saync
type="text/javascript"
src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"
onload="console.log('b');"></script>
<!--
defer属性:规定当页面已完成加载后,才会执行脚本。仅适用于外部脚本(只有在使用 src 属性时)。
async属性:异步执行,仅适用于外部脚本(只有在使用 src 属性时).
如果
async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且
defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
先输入b,再输出a
-->
</head>
<body>
<a
media="handheld"
href="#">手持</a>
<a media="tv"
href="#">电视</a>
<!--
media属性: 规定目标 URL 是为什么类型的媒介/设备进行优化的。该属性可接受多个值。只能在 href
属性存在时使用。
-->
<a
href="http://test.com"
hreflang="zh"
ref="external">测试</a>
<!--
hreflang属性: 在链接中规定文档的语言.仅在使用 href 属性时才可以指定 hreflang 属性。和 lang
属性类似,hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是,hreflang
属性不会指定标签中的内容所使用的语言,而是指定被 href 属性调用的文档所使用的语言。
ref属性:规定当前文档与被链接文档之间的关系。仅在 href 属性存在时使用。
-->
<ol start="50"
reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!--
start属性: 规定有序列表中首个列表项起始值。
reversed属性:它规定列表属性为降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。目前只有 Chrome 和
Safari 6 支持 reversed 属性。
-->
<menu
type="list"
label="Menu">
<li>
<input
type="checkbox"
/>Red
</li>
<li>
<input
type="checkbox"
/>Blue
</li>
</menu>
<!--
在HTML5中,重新定义了 menu 元素,且使用用于排列表单控件。
-->
<div>
<style scoped>
div{ border: 10px solid green; min-height: 50px; }
</style>
<div></div>
<div style="border-color:
pink;">
<style scoped>
div { border: 10px solid blue; }
</style>
<div></div>
</div>
</div>
<!--
scoped属性:具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高,所以,最好避免使用inline样式。
老式的浏览器上不支持这个属性的,需要使用jQuery插件(https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin)来弥补这种问题。
-->
<iframe sandbox
src="http://www.baidu.com"></iframe>
<!--
seamless属性:规定了 <iframe>
看上去像是包含文档的一部分(无边框或滚动条)。
srcdoc属性:规定页面的 HTML 内容显示在行内框架中。该属性与 sandbox 和 seamless
属性一同使用。如果浏览器不支持 srcdoc 属性,则相应地会显示在 src 属性(若已设置)中规定的文件
sandbox属性:如果被规定为空字符串(sandbox=""),sandbox
属性将会启用一系列对行内框架中内容的额外限制。
值 描述
"" 应用以下所有的限制。
allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。
-->
</body>
</html>
[/sourcecode]
HTML5新增属性的更多相关文章
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- HTML5新增属性data-*和js/jquery之间的交互
HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...
- HTML5新增属性学习笔记
1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...
- HTML5 新增属性和废除属性
删除的属性大多都是可以用CSS替代的一些样式属性 设置网页标题前面的小图标的大小:size <link rel="icon" href="demo_icon.gif ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增表单验证
HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
随机推荐
- USACO Section 2.3: Controlling Companies
这题的dp里的check里的函数要考虑k control i control j和i control j control k的情况 /* ID: yingzho1 LANG: C++ TASK: co ...
- php 传址
在php 中引用的意思是:不同的名字访问同一个变量内容. 变量的引用 PHP 的引用允许你用两个变量来指向同一个内容 例一: <?php $a="2010"; $b =&am ...
- openwrt(路由器)的源码地址
https://dev.openwrt.org/wiki/GetSource 路由器的源码地址
- 19.allegro过孔设置[原创]
一.根据线宽设置过孔 在规则管理器下 --- --- ---- --- --- 二.设置原点 法1: -- -- 法二: 然后鼠标点选 ---option栏目在哪? --- 三:过孔问题1 当一个过孔 ...
- HDU 4638 Group(分组)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4638 题意:给出一个数列,若干询问.每次询问区间[L,R]的最少有多少段?每一段是连续的一段且这段内的 ...
- BZOJ 3170 松鼠聚会(XY坐标)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3170 题意:给出二维平面上n个点 (xi,yi).求一点t(1<=t<=n) ...
- 第四篇 在中国做ERP系统实施你必须知道的一些常识
1. ERP实施要特别从参与全球竞争的视角指引系统建设.中国社会经历了一个从计划经济体制到市场经济体制的转变.中国加入WTO后,要与国际接轨,要按照世界贸易组织有关的贸易规则开展国际贸易.中国的关税与 ...
- Hadoop集群(第3期)_VSFTP安装配置
1.VSFTP简介 VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP 从此名称可以看出来,编制者的初衷是代码的安全. 安全性是编写VSF ...
- Javascript学习-闭包
看的这篇 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 各种专业文献上的"闭包" ...
- POJ 3628 Bookshelf 2【01背包】
题意:给出n头牛的身高,以及一个书架的高度,问怎样选取牛,使得它们的高的和超过书架的高度最小. 将背包容量转化为所有牛的身高之和,就可以用01背包来做=== #include<iostream& ...