一、HTML5常用元素和属性
1.HTML5保留的常用元素
1.1 基本元素
1.2 文本格式化
|
1.3 语义相关
| <abbr> ·属性:title | 表示一个缩写 | |
| <address> | | |
| <blockquote> | 定义一段很长的引用文本 | |
| <cite> | 作品的标题 | |
| <code> | 计算机代码 | |
| <dfn> | 定义专业术语 | |
| <del> | 删除的文本。 属性： cite:该URL对应的文本解释了删除原因。 datetime：删除的日期。 | |
| <ins>：定义文档中插入的文本 | 插入的文本。 属性： cite:该URL对应的文本解释了插入原因。 datetime：插入的日期。 | |
| <pre> | 该元素包含的文本以i经预格式化了。 | |
| <samp> | 定义示范文本内容 | |
| <kbd> | 定义键盘文本 | |
| <var> | 表示一个变量。 | |
| <q> | 定义一段短的引用文本。 | |
1.4 超链接和锚点
<body>
<!-- 在本窗口打开另一个资源 -->
<a href="http://www.crazyit.org"><b>Java联盟</b></a><br />
<!-- 在新窗口中打开另一个资源 -->
<a href="http://www.crazyit.org"
target="_blank"><em>Java联盟</em></a><br />
<!-- 为图像增加超链接 -->
<a href="http://www.crazyit.org"><img src="img/logo.jpg"
alt="Java联盟"/></a><br />
<!-- 基于相对路径指定另一个资源 -->
<a href="text.html">文本格式化标签</a><br />
</body>1.5 列表相关
<!-- 定义无序列表 -->
<ul>
<li>Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>Android讲义</li>
</ul>
<!-- 定义有序列表 -->
<ol start="2" type="I" reversed>
<li>Java讲义</li>
<li>轻量级Java EE企业应用实战</li>
<li>Android讲义</li>
</ol>
<!-- 定义列表 -->
<dl>
<!-- 定义标题列表项-->
<dt>Java体系</dt>
<dd>Java讲义</dd>
<dd>轻量级Java EE企业应用实战</dd>
<dd>Android讲义</dd>
<!-- 定义标题列表项-->
<dt>作者其他图书</dt>
<dd>Struts 2.1权威指南</dd>
<dd>基于J2EE的Ajax宝典</dd>
</dl>1.6 图像相关
<img src="images/logo.jpg" alt="Java的Logo" /><br />
<!-- 定义图片，指定高、宽 -->
<img src="images/logo.jpg" width="300" height="120"
alt="Java的Logo" /><br />
<!-- 定义图片，使用指定的图片映射 -->
<img src="images/logo.jpg" width="300"
height="120" border="0" usemap="#test"
alt="Java的Logo" /><br />
<!-- 定义图片映射 -->
<map name="test" id="test">
<!-- 为该图片映射定义2个区域 -->
<area shape="circle" coords="57,55,25"
href="http://www.fkjava.org" alt="fkjava.org" />
<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51"
href="http://www.crazyit.org" alt="crazyit.org" />
</map>1.7 表格相关
|
1.8 框架相关
2.HTML5新增的通用属性
2.1 contentEditable
<div contentEditable="true" style="width:500px;border:1px solid black">
Java讲义
<!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java讲义</td>
<td>Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</div>
<hr/>
<!-- 这个表格默认是不可编辑的
双击之后该表格变为可编辑状态 -->
<table id="target" οndblclick="this.contentEditable=true;"
style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java</td>
<td>Ruby</td>
</tr>
<tr>
<td>C/C++</td>
<td>Python</td>
</tr>
</table>2.2 designMode
<body οndblclick="document.designMode='on';">
<div>aaaa</div>
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java讲义</td>
<td>Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</body>
2.3 hidden
<div id="target" hidden="true" style="height:80px">
文字内容
</div>
<button οnclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">显示/隐藏</button>2.4 spellcheck
<!-- 指定执行拼写检查 -->
<textarea spelllcheck="true" rows="3" cols="40"> </textarea>3.HTML5新增的常用元素
3.1 文档结构
|
|
|
3.2 语义相关
mark:需要关注
|
| 目前只有Chrome支持 | |
| |
3.3 进度条
| |
| <meter> value:默认0 min：默认0 max：默认1 low: high: optimum:最佳值 | <progress> max value |
4.HTML5头部和元信息
5.HTML5拖放的API
<div id="source" style="width:80px;height:80px;
border:1px solid black; background-color: #bbb;" draggable="true">
软件教育
</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt)
{
// 让拖动操作携带数据
evt.dataTransfer.setData("text/plain" , "www.fkyva.org");
}
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
document.ondrop = function(evt)
{
source.style.position = "absolute";
source.style.left = evt.pageX + "px";
source.style.top = evt.pageY + "px";
// 取消事件的默认行为
return false;
}
</script>| ondragstart | 开始拖动 |
| ondrag | 拖动过程 |
| ondragend | 拖动结束 |
| ondragenter | 被拖动的元素进入本元素 |
| ondragover | 被拖动的元素进入本元素后,被拖动时触发 |
| ondragleave | 被拖动的元素离开本元素 |
| ondrop | 其他元素被放到了本元素中时 |
| dataTransfer.dropEffect | none,copy,link,move |
| dataTransfer.effectAllowed | none,copy,copyLink,copyMove,link,linkMove,move,all,uninitialized |
| dataTransfer.items | |
| dataTransfer.setDragImage | |
| dataTransfer.addElement(element) | |
| dataTransfer.types | |
| dataTransfer.getData(format) | |
| dataTransfer.setData(format) | |
| dataTransfer.clearData([format]) | |
| |
二、HTML5纲要
1.查看纲要
1.1 Chrome扩展
1.2 在线HTML纲要生成器
1.3 Opera扩展
https://addons.opera.com/zh-cn/extensions/details/html5-outliner/?display=en
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>HTML5 Feature Detection</title>
<script src="modernizr-2.0.6.js"></script>
</head>
<body>
<article>
<header>
<hgroup>
<h1>H1</h1>
<h4>H2</h4>
</hgroup>
<p>1235</p>
</header>
<div>
<script>
var result = document.getElementById("result");
if (Modernizr.draganddrop) {
result.innerHtml("Rejoice! Your browser supports drag-and-drop.");
}
else {
result.innerHtml("Sadly, your feeble browser does not support drag-and-drop.");
}
</script>
<span id="result"> </span>
</div>
<div>
<figure>
<img src="00007.jpg" alt="123">
<figcaption>
5-5
</figcaption>
</figure>
</div>
<div>
<p>Hello Chritmas</p>
<aside>
<hr/>
<img src="00007.jpg" alt="123">
ASIDE
<hr/>
</aside>
</div>
<div>
<aside>
<nav>
<h2>Article</h2>
<ul>
<li>CET-1</li>
<li>CET-3</li>
<li>CET-4</li>
</ul>
</nav>
<section>
<h2>Articles</h2>
<p>Desription</p>
</section>
</aside>
</div>
<div>
<details>
<summary>#1</summary>
<p>12345687654312456753432</p>
</details>
</div>
<div>
<time datetime="2013-12-25">April 21<sup>st</sup>.</time>
</div>
<div>
<form action="#" id="outPutForm">
<label for="feet inches">Height:</label>
<input name="feet" type="text"/>
<input name="inches" type="text"/>
<label for="pounds">Weight:</label>
<input name="pounds" type="text"/>
<input name="submit" type="submit" />
</form>
<p>
<output id="outPut_result" form="outPutForm" for="feet inches pounds"> </output>
</p>
</div>
<div>
<style type="text/css">
mark{
background-color:green;
color:red;
}
</style>
1<mark>2345</mark>6789
</div>
</article>
<div id="footer">
<img src="00007.jpg">
<footer>
<p>©CopyRights,All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
