1、HTML是由标志和属性组成的，它们一起被用来告诉浏览器应该如何显示一页文档。标志用来引用一段文字或是一幅图片等文档部件，属性是标志的选项，在标志中修饰，如颜色，对齐方式，高度和宽度等；
2、一般统一在CSS中设置样式，你可以随便打开网站查看源码，基本上看不到HTML中有设置样式的；
3、html是用来写网页内容的，像网页上文字、图片内容等都是用html来写；
4、css是用来写样式表的，给html写的内容加上各种样式，使网页更美观。像文字的颜色，页面的布局，一些按钮边框的样式是用css来控制的；
5、html调用样式的时候分为三种类型：内联样式，内部样式，外部样式。
1）内联样式：就是写在html的标签上；
2）内部样式：就是写在heml的头部head中；
3）外部样式：就是写在外部，另外建一个css文件
这三种调用样式的权重值是：内联样式>内部样式>外部样式。
即：先文件加载的时候先调用内联样式，如果没有内联样式其次才是内部样式，最后才是外部样式。
html如果有属性的话就称为内联样式。这样的话内联样式权限大于CSS中的样式
也就是HTML属性会被显示出来的CSS中相同属性所覆盖
html 选项卡切换内容方法：
工具/原料
网页编辑器dreamweaver
javascript中的getElementById和getElementsByTagName方法
操作步骤：
1、三个DIV形成的版块只会显示第三个汽车的内容。
二、制作过程
1、 制作HTML结构框架
2、完成对应CSS的输入，使页面形成特定布局
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px
height: 32px
line-height: 32px
background-color: #ccc
font-size: 24px
}
div {
display: none
width:200px
height: 200px
font-size: 72px
color:#ddd
background-color: green
border:1px solid black
}
</style>
</head>
<body>
<button style="background-color: yellow">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var buttonArr = document.getElementsByTagName("button")
var divArr = document.getElementsByTagName("div")
for(var i = 0 i < buttonArr.lengthi++) {
buttonArr[i].index = i
// buttonArr[i].setAttribute("index",i)
buttonArr[i].onclick = function() {
for(var j = 0 j < buttonArr.length j++) {
buttonArr[j].style.backgroundColor = "#ccc"
buttonArr[this.index].style.backgroundColor = "yellow"
divArr[j].style.display = "none"
divArr[this.index].style.display = "block"
}
}
}
</script>
</body>
</html>
3、输写javascript代码，对选项卡标头分别注册相应的事件
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0 margin:0}
button {
background-color: #ccc
width:80px
height: 30px
}
.btn-active {
background-color: yellow
font-weight:bold
font-size: 14px
}
div{
width:200px
height: 200px
font-size: 64px
background-color: #0c0
display: none
color:#fff
}
.div-active {
display: block
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button")
var divList = document.getElementsByTagName("div")
//2.添加事件
for(var i = 0 i < buttonList.length i++) {
buttonList[i].index = i
buttonList[i].onclick = function() {
for(var j = 0 j < buttonList.lengthj++) {
buttonList[j].className = ""
divList[j].className = ""
}
this.className = "btn-active"
divList[this.index].className = "div-active"
}
}
</script>
</body>
</html>
4、完整代码：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8">
<title> 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{padding:0px margin:0px}
a{ text-decoration:none color:black}
a:hover{text-decoration:none color:#336699}
#tab{width:270px padding:5pxheight:150pxmargin:20px}
#tab ul{list-style:none display:height:30pxline-height:30px border-bottom:2px #C88 solid}
#tab ul li{background:#FFFcursor:pointerfloat:leftlist-style:none height:29px line-height:29pxpadding:0px 10px margin:0px 10px border:1px solid #BBB border-bottom:2px solid #C88}
#tab ul li.on{border-top:2px solid Saddlebrown border-bottom:2px solid #FFF}
#tab div{height:100pxwidth:250px line-height:24pxborder-top:none padding:1px border:1px solid #336699padding:10px}
.hide{display:none}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var myTab = document.getElementById("tab") //整个div
var myUl = myTab.getElementsByTagName("ul")[0]//一个节点
var myLi = myUl.getElementsByTagName("li") //数组
var myDiv = myTab.getElementsByTagName("div") //数组
for(var i = 0 i<myLi.lengthi++){
myLi[i].index = i
myLi[i].onclick = function(){
for(var j = 0 j < myLi.length j++){
myLi[j].className="off"
myDiv[j].className = "hide"
}
this.className = "on"
myDiv[this.index].className = "show"
}
}
}
</script></head><body><!-- HTML页面布局 --><div id = "tab">
<ul>
<li class="off">房产</li>
<li class="on">家居</li>
<li class="off">二手房</li>
</ul>
<div id="firstPage" class="hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab/a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div></div></body></html>
<div id="b" onclick="clickMe()">我的班组
</div>
<div id="a" style="display:blockborder:1px solid #dd0000width:200pxheight:200px">
</div>
<script>
function clickMe(){
var d=document.getElementById("a")
if(d.style.display=='none'){
console.log(1)
d.style.display="block"
}else{
console.log(2)
d.style.display="none"
}
}
</script>
