HTML基础2

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装载了html网页

代码实现为：

9、html的通用属性

扫描二维码关注公众号，回复： 3369519 查看本文章

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样式表

java.ico为网页上最顶端的图标，添加方法为

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>

执行后可拖动：

猜你喜欢