HTML学习笔记

说明

这是在学习HTML中遇到的问题记录、解决及一些笔记。可能有些用法不够简洁，毕竟是初学……

知识储备

这里记下一些在菜鸟教程里面没有详细说，或者是经常用的东西，以及自己犯的错误。

引入jquery

<script type="text/javascript" src="JavaScript/jquery.min.js"></script>

jquery选择器
可以依靠id、class、或者是标签名来定位，可以仿照css的层级来定位，要关联多个html标签得用逗号分开

$("#id")	//id
$(".class")	//class
$("elementname")	//html标签名
$("elementname")	//html标签名
$("#pre_music,.pre_music")	//两个或多个标签，分别是id和class
$("#background_img ul li:nth-child(1) span")	//首先定位id为background_img，再往下的ul标签，再往下的第一个ul标签，再往下的ul标签

css伪元素
ul标签下的第一个和第三个li标签，在css里面分别可以用：

ul li:first-child{}	//第一个
ul li:nth-child(1){}	//第一个
ul li:nth-child(3){}	//第三个

jquery修改CSS样式
这里需要注意的是，在JS里面修改css，结果上是在html里面嵌入css样式，所以这样绝对会覆盖原有的css。如果要还原原有的css，只能在JS里面再次修改css赋予的属性为空字符串即可。

$(selector).css("background-image","url(\'1.jpg\')");

JS里的本地绝对路径
直接在图片链接里面写好像是没有问题的：

<img class="img_thum" height="200" src="C:\Users\zfy\Desktop\1\1.jpg">

但是，假设页面有这个路径，通过JS获取再处理，拿来用，有可能报错：
GET file:///C:/Userszfy%C3%9Esktop%01%01.jpg net::ERR_FILE_NOT_FOUND
这时，将绝对路径里的斜杠改用转义符：

C:\\Users\\zfy\\Desktop\\1\\1.jpg

网页动态背景

参考了一个网站的源码，用CSS的animation得以实现。原理很简单，首先在body下面新建几个标签，这里用的是span

<div id="background_img">
	<ul>
		<li><span>背景图</span></li>
		<li><span>背景图</span></li>
		<li><span>背景图</span></li>
		<li><span>背景图</span></li>
		<li><span>背景图</span></li>
		<li><span>背景图</span></li>
	</ul>
</div>

考虑到代码的可移植性(或者说方便性)，在JavaScript里面给每个span添加背景图：

var bgimagelist_var = ["bg01.png","bg02.png","bg03.jpg","bg04.jpg","bg05.png","bg06.png"];
$(document).ready(function(){
	var aa = "";
	for (var i = bgimagelist.length-1; i >=0; i--) {
		aa = "#background_img ul li:nth-child(" + (i+1).toString() + ") span";
		$(aa).css("background-image","url(\'"+"images/"+bgimagelist[i]+"\')");
	}
});

接下来添加css

#background_img ul li span{
	width: 100%;
	height: 100%;
	z-index: -99;
	top: 0;
	left: 0;
	position: fixed;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	opacity: 0;	
}

重头戏，在css里面继续添加动画效果(这里没考虑浏览器兼容性，我只用Chrome)，延时部分和动画部分的参数是直接搬用那个网站的(也稍微做了点调整)。
原理大概是：每一张背景都在不断地改变透明度(opacity)和大小(scale)，某一张透明度从1变到0时总有另一张的透明度从0变到1，所以出现了切换图片的效果。

#background_img ul li span{
	-webkit-animation: imageban 36s linear infinite 0s;	
	animation: imageban 36s cubic-bezier(0.38, 0.1, 0.59, 0.95) infinite 0s;	
}
/* 设置背景图动画延时 */
#background_img ul li:first-child span{	animation-delay: 0s;}
#background_img ul li:nth-child(2) span{ animation-delay: 6s;}
#background_img ul li:nth-child(3) span{ animation-delay: 12s;}
#background_img ul li:nth-child(4) span{ animation-delay: 18s;}
#background_img ul li:nth-child(5) span{ animation-delay: 24s;}
#background_img ul li:nth-child(6) span{ animation-delay: 30s;}
/* 动画 */
@-webkit-keyFrames imageban{
	0% {opacity: 0;-webkit-animation-timing-function: ease-in;}
	8% {opacity: 1;	-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out}
	17% {opacity: 1;-webkit-transform: scale(1.1) rotate(0deg);}
	25% {opacity: 0;-webkit-transform: scale(1.1) rotate(0deg);}
	100% {opacity: 0}
}

用CSS这样做的缺点在于：不能随意改变图片的张数，首先不说需要添加新的span标签(这个倒可以用JS解决)，而且改变图片的数量意味着动画总时间的改变，导致keyFrames里面的参数(百分比)也得调整。

导航栏及非跳转式页面切换

由于是初学，就用简单的标签可见性来实现。假设有四个页面，分别是：首页、相册、留言板、关于我。分别对应下面id为box1、box2、box3、box4的标签(因为一开始是首页，所以让其余三个box不可见)。提一下：Display(显示)与 Visibility(可见性)

<div id="top_box">
	<div id="no1" class="current">首页</div>
	<div id="no2" class="">相册</div>
	<div id="no3" class="">	留言板</div>
	<div id="no4" class="">关于我</div>
</div>
<div id="box1" style="display: block;"></div>
<div id="box2" style="display: none;"></div>
<div id="box3" style="display: none;"></div>
<div id="box4" style="display: none;"></div>

那么如果要显示页面2(相册)，这样实现：(这里附带了页面回滚到顶部的代码)

$(document).ready(function(){
  $("#no2").click(function(){
    $("#box1").hide();
    $("#box2").fadeIn("200");
    $("#box3").hide();
    $("#box4").hide();
    $('html,body').animate({scrollTop: 0}, 200);
  });
});

另外，导航栏里我想实现把当前栏目的文字背景色变一下的功能。比如说刚打开页面是首页，那“首页”两个字的背景色是红色，切换到“相册”时，“相册”两个字的背景色变为红色。
用到的办法是：给class为current的标签以红色背景色，切换到“相册”时，移除首页的class，并给“相册”标签添加class。

.current{
	background-color: rgba(80, 17, 17, 0.82);
}

$(document).ready(function(){
  $("#no2").click(function(){
    $('#no1').removeClass("current");
    $('#no2').addClass("current");
    $('#no3').removeClass("current");
    $('#no4').removeClass("current");
  });
});

这样修改display最大的缺点就是：如果网站上传到服务器，那么在加载网页时会特别慢。所以要实现不跳转切换页面，得做到点击菜单时向服务器提交post，服务器再响应的办法。