7、表格相关元素
<body>
<table style="width:400px;" border="1">------表示宽度为400像素 边框为1的表
<caption>定义表格标题</caption>
<tr>----行
<th>表头单元格</th>----表头字体加粗
<td>单元格</td>
</table>
</body>
代码执行结果为:
<table style="width:240px" border="1">
<tr>
<td rowspan="2">跨两行的单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
</tr>
<tr>
<td colspan="2">跨两列的单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table>
运行结果为:
<colgroup style="background-color:white;">
<col style="width:160px"/>
<col span="2" style="width:100">
</colgroup>
批量操作,了解
8、iframe元素
<body>
<iframe src="img.html" width="200" height="120"></iframe>
</body>
iframe装载了html网页
代码实现为:
9、html的通用属性
id HTML制定唯一标识
style HTML元素指定CSS样式
class 匹配CSS样式的class选择器
<body>
<div id="show" style="width:400px;height:120px"background-color:red;>
<a href="#" onclick="change()">改变颜色</a>
<script>
var change=function(){
var div=document.getElementById("show");
div.style.backgroundColor=div.style.backgroundColor=='red'?
''green:(div.style.backgroundColor=='green'?'blue':'red');
}
</script>
</body>
点击时棕色变为红色,松开后重新变回棕色。
dir设置元素内容排列方向,一般有 ltr 和rtl。
title为元素指定时额外信息。
lang告诉浏览器或者搜索引擎内容所使用的语言
accesskey快捷键激活元素
10、html5头部和原信息
使用link元素载入CSS样式表
<link href="css.css" rel="stylesheet" type="text/css">
java.ico为网页上最顶端的图标,添加方法为
<link href="java.ico" rel="shirtcut" icon type="image/x-icon"/>
11、meta元素
定义页面元信息
name指定元名称
content 指定元名称的值
charest 指定页面的字符集
如:<meta charest="utf-8"/>
pragma:禁止浏览器访问磁盘中缓存的内容
refresh浏览器多长时间自动刷新页面
set-cookies:网页过期,cookies就会被删除
content-type:设置页面类型和所用字符集
12、可自由拖动的div
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>可自由拖动</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;
border:1px solid black;
background-color:#bbb;
draggable="true">aaaaa</div>
<script type="text/javascript">
var source=document.getElementById("source");
source.ondragstart=function(evt){
evt.dataTransfer.setData("text","www.baidu.com");
}
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>
执行后可拖动: