<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淘,我喜欢</title>
<!--样式表是从上往下读的,所以样式表要写在上边-->
<!--样式表的引入方式
1.行内样式 即写在标签当中 标签当中有个style属性 <h3 style="color: #FF0000;">这是一个标题</h3> 特点作用域小,但优先级最高
2.写在head头部,使用如下格式,对所有相应标签都有效,如果某行有特殊需求,可以使用行内样式,作用域当前页面
3.外联 <link rel="stylesheet" href="css/demo.css" type="text/css"/> 3个属性写全,要不浏览器有的好使有的不好使
作用域最大,哪个html网页连接哪个有效,哪个用的多,看网站风格是否是一样的,一样的用外联
选择器 a.元素选择器(指标签名)
b.id选择器#(在标签上添加id属性)具有唯一性,整个网页id的属性是唯一的,不唯一的话,此id的样式全变
但为了配合js的getElementById(),将只能找到一个(前面的)
c.class选择器.(在标签上添加class属性) id优先级高于class高于元素
d.input[type="text"]{background-color:red;} 属性选择器,多用于表单
e.后代选择器 选择器 空格 后代{} 包括子孙 p font{}
f.组合选择器 div,p,font{} 如果写成 div p font是找后代
g.伪元素选择器 作用于超链接 a:link{color:red;} a:visited{color:green;} a:hover{color:yellow} a:active{color:pink;}
l_v_h_a是有顺序的 否则没有效果
举例 div{width:200px;height:200px;border} border有四个边 border-left right up bottom
border:2px red solid;属性值无顺序 但要写全 dotted dashed 虚线 double 双实线
字体 font-family 字体大小 font-size font-weight:bold;
背景 background-color 背景图 background-image:url(img/btn.jpg);颜色和图片放一块显示图
backgroung-repeat:repeat-x;
浮动设置 float clear:both 清除浮动两边的,他就不会上去了
盒子模型 外边距margin 内边距 padding-->
<!--<span></span> 行级元素 写多大占行内多少 span{display:none;} display:block;独占一行 display:inline;修饰div的-->
<style type="text/css">
/*注意这样都写换行的话,每一个换行两个字节,所以太多不要换行,手机骗流量用注释,浏览器显示注释*/
p{
color:red;
font-size: 100px;
}
.lunbo img{
width: 100%;
height: 843px;
}
</style>
</head>
<body>
<div id="adId" style="display: none;">
<img src="img/ad.jpg" />
</div>
<div class="lunbo">
<img id="imgId" src="./img/1.jpg" />
</div>
<font color="red">这是一个HBuilder项目网页</font>
<!--get 请求参数提交在浏览器的地址栏 地址栏是有限的 不适合发送大数据 地址栏内容全部显示 安全性不高 但是超链接就是get,避免不了-->
<!--属性 readonly disable multiple下拉菜单多选-->
<form action="#" method="get" onsubmit="return check()">
<table width="900" border="1" style="margin: 0 auto; line-height: 40px;">
<tr>
<td width="200">帐号:</td>
<td width="400"><input type="text" id="zhanghao" name="textname" value="" placeholder="请输入你的帐号"/></td>
<td width="300"><span id="kong" style="display: none;color:red">帐号不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="passwordname" placeholder="请输入你的密码"/></td>
<td></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="radio" checked="checked">男
<input type="radio" name="radio">女</td>
<td></td>
</tr>
<tr>
<td>爱好:</td>
<td>抽烟:<input type="checkbox" />
喝酒:<input type="checkbox" />
烫头:<input type="checkbox" /></td>
<td></td>
</tr>
<tr>
<td>喜欢的音乐</td>
<td>
<select>
<option>like dying in the sun</option>
<option>anything but ordinary</option>
<option>chocolate ice</option>
<option>don't cry</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="image" src="./img/regbtn.jpg" style="margin-top: 10px;">
</td>
</tr>
</table>
</form>
<!--div+css是网页布局的主流 灵活性要好,
table有弊端,必须把/table读完才能全部显示
div有个特点,独占一行,不能完成复杂内容,要借助样式表
语法:
选择器{属性:属性值;属性:属性值;}
注意选择器严格区分大小写
最后一个属性可以不写; 也可以写
注释使用/* */
font-size: 100 px; 注意值额单位之间不能用空格分开
-->
<div>这是一个div的标签1</div>
<div>这是一个div的标签2</div>
这里不是div标签
<p> 这是一个段落 </p>
<!-- <script type="text/javascript" src="外部JS文件相对路径"></script>注意引入外部事件后内部事件将被屏蔽 所以用1行
alert(typeof 变量)查看变量数据类型 有number string boolean null object undefined 定义变量用var +字符串表连接 -*/表示运算
=== 为全等表示数据类型也要相同 if()判定时除0外数值都为真 除空外字符串都为真 null false为假 对象都为真
for循环注意不能再用int for(var i=0;i<2;i++)
匿名函数较常用 var fu=function(i,j){return i+j;} 使用fu(3,4);
事件源 事件 绑定事件与源 处理方式
事件有两种鼠标事件(点击双击移入移出),键盘事件(按下弹起)按住不放
绑定:事件和事件源绑定在一起,事件发生了如何去处理使用函数
事件:onload 与body绑定<body onload="fun()"></body>
事件:onsubmit 与表单绑定<form onsubmit="blu()"></form>
事件:onchange 与select下拉菜单绑定<select onchange="blu()"></select>
事件:onclick 与鼠标事件绑定<input type="button" onclick="blu()"></input>
js BOM 对象 a.window
弹框
表示浏览器窗口 弹框 alert 弹出一个警告框 window.alert(""); window可以省略 调试程序用
var con=confirm("确认删除吗?");有两个按钮 确认返回true与取消返回false
var pro=prompt("请输入内容"); 取消返回null
定时器
setTimeOut(执行任务,毫秒值); function fun(){alert("定时器.")} setTimeOut(fun,2000)
setInterval(执行任务,毫秒值);function fun(){alert("定时器.")} var id=setInterval(fun,2000)
匿名函数 setInterval(function(){alert("定时器")},2000);
clearInterval(id);
eval("alert(123)") 把字符串解析成函数
b.location
function fnhei(){
location.href="http://www.itheima.com";
}
<a href="#" onclick="fn()">点我进入淘宝</a> 或者使用函数名不加双引号
c.history
history.go(-1);后退一步 history.go(1);前进一步 意义不大
d.图片轮播
一段时间把img标签的src属性图片名称改变
e.验证
span.innerHTML("加入内容");
-->
<input type="button" onclick="f()" value="点我关闭定时器"/>
<!--定时器 跳转网页 开始-->
<script type="text/javascript">
function fun(){alert("定时器.")}
var id=setInterval(fun,40000);
function f(){
clearInterval(id);
}
function fnhei(){
location.href="https://www.taobao.com/";
}
function myblog(){
window.alert("操作成功\r\n5秒后跳转主页.")
setTimeout(fnhei,5000);
}
</script>
<!--定时器 结束-->
<!--轮播和广告 开始-->
<script type="text/javascript">
var i=1;
var lunboId=setInterval(function(){
var imgId=document.getElementById("imgId");
imgId.src="img/"+i+".jpg";
i++;
if(i>4){
i=1;
}
},5000);
var adId=document.getElementById("adId");
setTimeout(function(){adId.style.display="block";},0);
setTimeout(function(){adId.style.display="none";},5000);
</script>
<!--轮播和广告 结束-->
<script type="text/javascript" src="js/close_lunbo.js"></script>
<br/><a href="#" onclick="myblog()">点我进入淘宝,实际是5秒后进入我的博客</a>
<center><button onclick="closeLunbo()">点我结束轮播</button></center>
<script type="text/javascript" src="js/checked.js"></script>
</body>
</html>