<img src ..../>.我是单标签
<div>我是双标签</div>
其实DOCTYPE写成小写的就是 Doc Type，翻译过来就是文档类型，后面接了一个html，所以就是声明该文档类型是HTML格式
但有几点需要注意：
1、声明必须是 HTML 文档的第一行，位于 标签之前。
2、声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
3、所有的浏览器都支持，所以一定要注意添加此声明，以方便告知浏览器文档类型
他们组成了一对标签，所以是双标签
此元素可告知浏览器其自身是一个 HTML 文档。
限定了文档的开始点和结束点，在它们之间是文档的头部（head）和主体（body）
在html的后面还有一个 lang="en" ,意思是此网页可以被翻译成英语，将带有lang属性的网页扔到谷歌上显示，明显可以看到d出的提示翻译框框
head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
base ,link, meta,script,style,title
而title则是head里唯一必须的标签，用于定义标题。
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
定义文档的标题，它是 head 部分中唯一必需的元素。
, , 以及 。
定义文档的标题，它是 head 部分中唯一必需的元素。
定义文档的标题，它是 head 部分中唯一必需的元素。
我把第一列目录变成了三级结构，代码如下：<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) &&document.getElementById(picId)){
obj=document.getElementById(str)//obj 为 DIV 对象
pic=document.getElementById(picId)//pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""//就将 display 的样式清空
pic.src = "0001.jpg"//更改图片对象的路径
}else{
obj.style.display = "none"
pic.src = "0000.jpg"
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand
width: 100px
}
.div1_1{
cursor: hand
width: 100px
color: #666666
font-size: 14px
}
.div2 {
color: #666666
font-size: 12px
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）