HTML 5保留的常用元素
!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table cellpadding="10" cellspacing="10" style="400px" border="1" >
<caption><b>dasd</b></caption>
<tr>
<th>ds</th>
<th>dad</th>
</tr>
<tr>
<td>fsfsd</td>
<td>sdfsrf</td>
</tr>
</table>
</body>
</html>
呈现效果为
使用a元素添加超链接和锚点
- href：制定超链接所连接的另一个资源。
- target：如果在一个 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
添加超链接,在本窗口打开另一个资源
<body>
<a href="http//www.baidu.com">百度</a>
</body>
添加超链接，在新窗口打开另一个资源
<body>
<a href="http//www.baidu.com" target="-blank">百度</a>
</body>
添加一个锚点
<body>
<a id="a01">aaa</a>
<a id="a02">bbb</a>
<a id="a03">ccc</a>
<a id="a04">ddd</a>
<a id="a05">eee</a>
<a id="a06">fff</a>
<a href="#a01">aaa</a>
<a href="#a02">bbb</a>
<a href="#a03">ccc</a>
<a href="#a04">ddd</a>
<a href="#a05">eee</a>
<a href="#a06">fff</a>
</body>
列表相关元素
无序列表
无序列表的父元素为 ul元素，列表项为 li元素。如：
<body>
<ul>
<li>表项1</li>
<li>表项3</li>
<li>表项2</li>
</ul>
</body>
有序列表
有序列表的父元素为 ol元素，列表项为 li 元素。
<body>
<ol>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ol>
</body>
使用img元素添加图片
无重点但需注意可以使用相对路径添加图片， 绝对路径是指文件在硬盘上真正存在的路径，相对路径，就是相对于自己的目标文件位置。
注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“”或“/”字符作为目录的分隔字符。
<body>
<img src="images/2.jpg" width="300px" usemap="#test" alt="tu" /><br>
</body>
HTML 5 增强的iframe元素
基本语法：<iframe src="文件路径"></iframe>
height可以设置框架显示的高度
width可以设置框架显示的宽度
name可以定义框架的名称
frameborder用来定义是否需要显示边框，取值为1表示需要边框
scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto
src用于设置框架的地址，可以使页面地址，也可以是图片地址
align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom
<body>
<iframe src = "iframe-content.html" width ="400px" height= "150px" frameborder= "0"
scrolling= "no">
</iframe>
</body>
HTML 5 保留的通用属性
id 属性用于为HTML元素制定唯一标识,当程序使用javascrip时可通过该属性获取HTML元素.
style 为HTML指定css样式.
class 属性用于匹配css样式的class选择器. (不一定)
dir 用于设置元素中内容的排列顺序,支持ltr(从左到右)和rtl(从右到左).
title 用于为HTML元素指定额外信息.(鼠标悬停在该元素上时显示title信息).
accesskey 指定快捷键来激活元素.
lang 指定该界面元素的语言.
HTML 5 新增的属性
contentEditable 若该元素设置为ture浏览器允许开发者编辑该HTML元素中的内容.
contentEditable 有可继承特点若父元素是可编译的那子元素也默认可编译.
HTML 5 新增的拖放API
拖放有两个动作组成
启动拖
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 />
<title></title>
</head>
<body>
< div id="sorcer" style="100px;
border:1px soild black;
background-color:#aaa;
dragggable="ture">bulabula</div>
<a href="http://www.baidu.com">baidu</a>
<img src="logo.jpg" alt="crazyit"/>
<script type="text/javascript">
var source=document.getElementById("source");
source.ondragstart=function(evt)
{
evt.dataTransfer.setData("text" ,"faerf");
}
return false;
}
</body>
接收放
doucument.ondragover=function(evt){
return false}
上面代码可以取消默认行为(此时允许拖放)
组合为
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="YeeKu.h.lee(CrazyIt.org)/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8 " />
<title>可拖动的div</title>
<style tyoe="text/css">
div>div{
display:inline-block;
padding:10px;
background-color:#aaa;
margin:3px;
}
</head>
<body>
<div id="source" style="80px;height:90px;
border:1px soild black;
background-color:#bbb;"
draggable="true">
</div>
<script type="text/javascript">
var source=document.getElementById("source");
source.ondragstart=function(evt)
{
evt.dataTransfer.setData("text" ,"faerf");
}
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>
</body>
</html>