HTML
<!-- 双标签 -->
<h1>我是一级标签</h1>
<h6>我是六级标签</h6>
<div>我是容器标签</div>
<p>我是一个段落标签</p>
<!-- 单标签 -->
<hr>
<img src="img/bullet01.png" alt="图片加载失败会显示">
<br>
<img src="img/suanbo01.png" alt="">
<!-- 带有属性的标签 -->
<a href="https://www.baidu.com">前往百度</a>
<!-- 无序列表标签 -->
<ul>
<li>苹果</li>
<li>桃子</li>
</ul>
<!-- 有序列表标签 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
<!-- 表格标签 -->
<table>
<!-- 表行 -->
<tr>
<!-- 表头 -->
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<!-- 表列 -->
<td>张三</td>
<td>男</td>
</tr>
</table>
<!-- 表单标签 -->
<form>
<p>
<!-- for根据id名给指定id设置光标 -->
<label for="uname">用户名</label>
<input type="text" name="" id="uname">
</p>
<p>
<label for="psw">密码</label>
<input type="password" name="" id="psw">
</p>
<p>
<label>性别</label>
<input type="checkbox" name="" id="">男
<input type="checkbox" name="" id="">女
</p>
<p>
<label>照片</label>
<input type="file">
</p>
<p>
<label>描述</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label>居住地</label>
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">福建</option>
<option value="">深圳</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
</form>
1. 表单
方式GET,是以查询参数的方式提交数据给web服务器
<form action="www.baidu.com" method="GET"></form>
方式POST,数据会放到web服务器里面
<form action="www.baidu.com" method="POST"></form>
CSS
使用方式
<!-- 外链式 -->
<link rel="stylesheet" href="main.css">
<!-- 内嵌式 -->
<style>
</style>
<!-- 行内式 -->
<p style="color:red">我是一个段落标签</p>
css选择器总类
- 标签选择器
- 类选择器
- 层级选择器
- id选择器
- 组选择器
- 伪类选择器
/* 标签选择器 标签 {}*/
p {
color: yellow;
}
/* 类选择器 .类名 {}*/
.myp {
color: red;
}
/* 层级选择器 层级关系 {}*/
div div {
color: seagreen;
}
div .box {
color: seagreen;
}
table tr th {
color: snow;
}
/* id 选择器 #id名 {} */
#name {
background-color: crimson;
}
/* 组选择器 */
.box1, .box2, .box3 {
width: 50px;
height: 50px;
border: 1px solid black;
}
/* 伪类选择器 选择器添加效果 */
.box1:hover {
width: 55px;
height: 55px;
}
盒子真实大小
盒子真实宽度 = width + padding左右 + border左右
盒子真实高度 = height + padding上下 + padding上下
javaScript
使用方式
<!-- 外嵌式 -->
<script type="text/javascipt" src="index.js"></script>
<!-- 内嵌式 -->
<script>
/script>
<!-- 行内式 -->
<input type="button" value="按钮" onclick="alert('你点我了')" >
定义变量
// 定义数据类型的变量
var iNum1 = 1;
var fNum1 = 12.2
// 定义字符串
var sName = "王五"
// 定义布尔(boolean)类型
var bIsOK = true;
// 定义undefind类型
var unData;
// 定义空对象
var oDada = null;
// 定义对象类型
var oPerson = {
name:"张三",
age:18
}
// 定义多个变量
var iNum = 3, sStr = "夏娜";
// 查看数据类型
alert(typeof(iNum1));
// 弹窗输出
alert(iNum1);
alert(sName);
alert(oPerson.name);
// 后台输出
console.log(oPerson.age);
高级语法
// 函数定义 function
function fnSum(iNum1, iNum2){
var iresult = iNum1 + iNum2;
return iresult;
// return 之后的函数不再执行
}
var iSum = fnSum(1,2);
console.log(iSum);
alert(iSum);
// 局部变量和全局变量的使用
// 全局变量
iResult=0;
function fnShow(){
// 局部变量
var iNum1 = 6, iNum2=8;
iResult = iNum1 + iNum2;
alert(iResult);
}
fnShow();
// 判断语句 if
if(true){
console.log("if循环语句");
}else if(true){
console.log("else if");
}else{
console.log("else");
}
// 循环语句 while
while (true) {
console.log("while循环语句");
}
// 循环语句 for
for(var index=0; index<iArray; index++){
console.log("for循环语句");
}
// 循环语句 do..while
do {
console.log("do..while循环语句");
}while(true)
标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// js的内置对象,html的文档对象
// window.onload 加载完页面在执行
window.onload = function () {
// 根据标签的id获取标签对象
var oP = document.getElementById("p1");
// 获取标签内容
alert(oP.innerHTML);
alert(oP.innerText);
// 设置标签内容
oP.innerText = "我是新标签"; //或 oP.innerHTML = "我是新标签";
var oBtn = document.getElementById("btn1");
// 获取标签属性
alert(oBtn.type);
// 设置标签属性
oBtn.name = "button";
oBtn.style.background="red";
// 通过设置class类选择器添加样式
oBtn.className="btnstyle";
};
</script>
</head>
<body>
<p id="p1">我是一个段落标签</p>
<input type="button" value="按钮" name="按钮" id="btn1">
</body>
</html>
数组
语法:var 数组名 = [元素1, 元素2, 元素3…]
多维数据:var 数组名 = [[元素1, 元素2, 元素3…], [元素1, 元素2, 元素3…]]
功能 | 属性 | 描述 |
---|---|---|
增 | 数组名.splice(index, 删除个数, “添加元素”) | array.splice(1, 0, “元素”) |
删 | array.splice(1, 2) | 从第1个下标删除两个元素 |
改 | 数组名[index] = 数据 | 根据下标修改数据 |
查 | 数组名[index] | 根据下标获取数据 |
查数组长度 | 数组名.length | |
追加数据 | 数组名.push(‘hello’) | |
删除最后一个元素 | 数组名.pop() |
定时器
function fnSum(iNum1, iNum2){
var iresult = iNum1 + iNum2;
// 销毁定时器setTimeout
clearTimeout(tid)
// 销毁定时器setInterval
clearInterval(tid2)
}
// 根据时间间隔调用一次函数的定时器
// 1.定时器要执行的函数
// 2. 时间间隔
// 3.参数,多个参数使用逗号进行分割
// 返回值表示创建定时器返回的id,通俗理解就是创建的第几个定时器
// 单次执行 setTimeout
var tid = setTimeout(fnSum, 2000, 3, 4)
// 重复执行
var tid2 = setInterval(fnSum, 2000, 3, 4)