CSS
内部样式：
标签选择器：直接应用于HTML标签
类选择器：可以在页面当中多次使用
id选择器：同一个id选择器在同一页面中只能调用一次
选择器优先级：id选择器>类选择器>标签选择器
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">/* style 标签选择器 */
h1{color: red;
font-size: 300px;}
</style>
</head>
<body>
<h1>你好</h1>
</body>
</html>外部样式：
css
/* 外部样式 写在css中*/
/* style 标签选择器 */
h1{color: red;
font-size: 100px;}
/* 类选择器 */
.A{color: orange;
font-size: 50px;}
/* id选择器 */
#a{color: pink;
font-size: 10px;}行内样式：
html
<body>
<span style="color: aqua;font-size: 50xp;">木舟</span><!-- 行内样式 一般不用-->
</body>样式优先级：行内样式>内部样式>外部样式
开发常用：
css
*{/* 清除内外边距 */
margin: 0xp;
padding: 0xp;
}
span{
color: green;/* 设置颜色 */
font-size: 50xp;/* 设置字体大小 */
text-align: center;/* 字体居中 */
text-indent: 20xp;/* 首行缩进 */
line-height: 25xp;/* 行高 */
text-decoration: underline;/* 添加下划线 */
text-decoration: line-through;/* 添加删除线 一般商品打折时使用 */
}
a{text-decoration: none;}/* 去掉下划线 */超链接样式：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../css/超链接样式.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<a href="#" >点击跳转页面</a><p/>
<ul>
<li>木</li>
<li>舟</li>
<li>日</li>
<li>记</li>
</ul>
</body>
</html>css
a:active{
color: blue;/* 鼠标点击未释放变色 */
}
body{
background-color: burlywood;/* 添加背景颜色 */
background-image: url(../images/a.png);/* 添加背景图片 默认图片平铺*/
background-repeat:no-repeat;/* 不平铺 repeat-x或-y 是横纵方向平铺*/
/* background: white url(../images/a.png) 205px 10px no-repeat; *//* 简写 */
}
li{
font-size: 100px;
color: red;
/* list-style: none; *//* 去除列表前的点 */
list-style-image:url(../images/QQ图片20240809205429.gif) ;/* 列表前的点替换为图片 */
}盒子模型：
独占一行
边框 内边距 外边距 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/* border-color:red; *//* 设置边框颜色 */
/* border-color:red blue orange greenyellow; *//* 边框顺序为上右下左 */
/* border-style:solid; *//* 设置边框为实线 虚线为dashed*/
/* border-width:20px; *//* 设置边框粗细 */
/* border-width:20px 25px 30px 35px; *//* 顺序为上右下左 */
border: 9px red solid;/*简写 先设置粗细 然后颜色 最后虚线实线 */
margin: 10px;/* 外边距 */
margin: 0px auto;/* 网页居中对齐 */
padding-left:200px ;/* 内边距 */
}
</style>
</head>
<body>
<div>你好</div>
<div>你好</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子</title>
<style type="text/css">
div{
border: red 1px solid;
display: inline;/* 将div变成内部属性 */}
strong{
border: blue 1px solid;
display: block;/* 将strong转为块级元素 */
}
li{
list-style: none;/* 去除圆点 */
float: left;/* 让标签向右飘 */
background-color: red;/* 添加标签背景 */
margin-left: 20px;/* 标签间距 */
}
</style>
</head>
<body>
<div>盒子</div>
<strong>内部属性</strong>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
<div>
<ul>
<li>蔬菜</li>
<li>水果</li>
<li>肉类</li>
</ul>
</div>
</body>
</html>JS
JS全称JavaScript 是一种基于对象，事件驱动的脚本语言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("这是第一个js小页面<br/>")
document.write("Hello,javascript!<p/>")
document.write("<h1>Hello,javascript!</h1>")
</script>
</body>
</html>弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
<script type="text/javascript">
function dianji(){
alert('你好')
}
</script>
</head>
<body>
<input type="button" value="弹出消息框" onclick="javascript:alert('你好啊')" />
<input type="button" value="弹出消息框" onclick="dianji()" />
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
prompt("提示信息","输入框的默认信息");
</script>
</body>
</html>typeof的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>typeof的使用</title>
</head>
<body>
<script type="text/javascript">
var width,height=10,name="rose";
var date=new Date();/* 声明时间 */
var arr=new Array();/* 获取数组 */
document.write("width:"+typeof(width)+"<br/>");/* width:undefined width没有赋值 返回undefined */
document.write("height:"+typeof(height)+"<br/>");/* height:number 返回number类型*/
document.write("name:"+typeof(name)+"<br/>");/* name:string 返回string类型*/
document.write("date:"+typeof(date)+"<br/>");/* date:object */
document.write("arr:"+typeof(arr)+"<br/>");/* arr:object 返回object类型 */
document.write("true:"+typeof(true)+"<br/>");/* true:boolean 返回boolean类型 */
</script>
</body>
</html>分割
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分割</title>
</head>
<body>
<script type="text/javascript">
var fruit="apple,orange,peach,banana";
var arrList=fruit.split(",");
var str=arrList.join("-");
document.write("分割前："+fruit+"<br/>");
document.write("使用\"-\"重新连接后："+str);
</script>
</body>
</html>string
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>string</title>
</head>
<body>
<script type="text/javascript">
var str="abc defg hijkl mn opqrst uvwxyz";
var len=str.length;
document.write(len);/* 获取字符串长度 空格也算 */
document.write(str.charAt(5));/* 获取索引为5的字符 */
document.write(str.substring(4,15));/* 截取索引4-15的字符 */
</script>
</body>
</html>循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环</title>
</head>
<body>
<script type="text/javascript">
var t=prompt("请输入一个整数：");/* 网页提示相当于Scanner */
if(t>5){
for(var i=t;i>0;i--){
for(var j=0;j<i;j++){
document.write("* ");
}
document.write("<br/>")
}
}
</script>
</body>
</html>转型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转型</title>
</head>
<body>
<script type="text/javascript">
var op1=prompt("请输入第一个数字：");
var op2=prompt("请输入第二个数字："," ");
var p1=parseInt(op1);/* 将数字转为Int */
var p2=parseInt(op2);
var result=p1+p2;
document.write(p1+"+"+p2+"="+result)
</script>
</body>
</html>无参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无参函数</title>
</head>
<body>
<input type="button" value="点击显示5次欢迎学习js" onclick="study()"/><!-- onclick="study()"无参函数 -->
<script type="text/javascript">
function study(){
for(var i=0;i<5;i++){
document.write("<h4>欢迎学习js</h4>")
}
/* var i=1;
while(i<2){
alert("你觉得你能杀死我？");
} */
}
</script>
</body>
</html>有参函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有参函数</title>
</head>
<body>
<input type="button" value="点击显示5次欢迎学习js" onclick="study(prompt('请输入显示多少次',''))"/><!-- onclick="study()"无参函数 -->
<script type="text/javascript">
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习js</h4>")
}
}
</script>
</body>
</html>作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作用域</title>
</head>
<body onload="second()">
<script type="text/javascript">
var i=20;
function first(){
var i=5;
for(var j=0;j<i;j++){
document.write(" "+j)
}
}
function second(){
var t=prompt("请输入一个数字：","")
if(t>i){
document.write(t);
}else{
document.write(i);
first()
}
}
</script>
</body>
</html>foreach遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>foreach遍历数组</title>
</head>
<body>
<script type="text/javascript">
var fruit=["apple","banana","peach","orange"];
for(var i in fruit){
document.write(fruit[i]+"<br/>");
}/* foreach */
</script>
</body>
</html>js输出图片
document.write("<img src='images/th.jpg'>");四则运算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>四则运算</title>
</head>
<body>
<input type="button" value="计算两数运算结果" onclick="account()"/><!-- 无参函数 -->
<script type="text/javascript">
function account(){
var op1=prompt("请输入第一个数字：","");
var sign=prompt("请输入运算符号:","");
var op2=prompt("请输入第二个数字：","");
var result;
var p1=parseInt(op1);
var p2=parseInt(op2);
switch(sign){
case "+":
result=p1+p2;
break;
case "-":
result=p1-p2;
break;
case "*":
result=p1*p2;
break;
case "/":
result=p1/p2;
break;
case "%":
result=p1%p2;
break;
default:
alert("运算符有误！")
break
}
alert("两数运算结果是："+p1+sign+p2+"="+result)
}
</script>
</body>
</html>验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证邮箱</title>
</head>
<body>
<script type="text/javascript">
function validateEmail(email){
var indexs=email.indexOf("@");
if(email.length>0){
if(indexs==-1||email.indexOf(".")==-1){
alert("邮箱地址必须包含@和.")
}else{
var name=email.substring(0,indexs);
alert("邮箱名称正确，邮箱名："+name);
}
}else{
document.write("邮箱不能为空");
}
}
validateEmail(prompt("请输入正确的邮箱地址：","muzhou@163.com"))
</script>
</body>
</html>省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
<script type="text/javascript">
var provinces=[
["沈阳市","大连市","鞍山市","营口市"],
["吉林市","长春市","四平市","辽源市"],
["齐齐哈尔市","哈尔滨市","大庆市","佳木斯市"],
];
function selectProvince(){
var province=document.getElementById("province");
var value=province.value;
//从数组中取出相对应的城市
var citys=provinces[value];
var citySelect=document.getElementById("city");
//清空select中的option
citySelect.options.length=0;
for(var i=0;i<citys.length;i++){
var cityText=citys[i];
//创建option节点
var option1=document.createElement("option");
//创建城市文本
var textNode=document.createTextNode(cityText)
//将option节点与城市文本关联
option1.appendChild(textNode);
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<select onchange="selectProvince()" id="province">
<option value="-1">请选择</option>
<option value="0">辽宁省</option>
<option value="1">吉林省</option>
<option value="2">黑龙江省</option>
</select>
<select id="city">
</select>
</body>
</html>图片轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<script type="text/javascript">
var index=0;
function changeImg(){
//获取要切换的图片元素
var img=document.getElementById("img1");
//计算当前要切换到第几张图片
var curIndex=index%4+1;//0 1 2 3
img.src="images/"+curIndex+".jpg";//1 2 3 4
index++;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="./images/QQ图片20240809205429.gif" id="img1"/>
</body>
</html>Jquery
使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>你好</h1>
</body>
<script type="text/javascript">
/* $ 取值 ()里可以是单引号 也可以是双引号*/
$('h1').css("background-color","red");
</script>
</html>省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var provinces=[
["沈阳市","大连市","鞍山市","营口市"],
["吉林市","长春市","四平市","辽源市"],
["齐齐哈尔市","哈尔滨市","大庆市","佳木斯市"],
];
$(function(){
$("#province").change(function(){
var citys=provinces[this.value];
//清空
$("#city").empty();
//遍历
$(citys).each(function(i,n){
$("#city").append("<option>"+n+"</option>")
});
});
});
</script>
</head>
<body>
<select id="province">
<option value="-1">请选择</option>
<option value="0">辽宁省</option>
<option value="1">吉林省</option>
<option value="2">黑龙江省</option>
</select>
<select id="city">
</select>
</body>
</html>隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("tr:even").css("background-color","pink")/* even偶数 */
$("tr:odd").css("background-color","chartreuse")/* odd奇数 */
});
</script>
</head>
<body>
<table border="1" width="75%">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
