1. html
1.1 什么是html：
html(Hyper Text Markup Language)是用来创建网页的标记语言;
1.2 网页基本结构：
<!--声明为html5-->
<!DOCTYPE html>
<!--html是一整个人-->
<html lang="en">
<!--相当于人的头-->
<head>
<!--指定html'的编码格式-->
<meta charset="UTF-8">
<!--描述文档的标题-->
<title>这是第一个html文档</title>
</head>
<!--相当于人的身体， 可见的页面内容-->
<body>
</body>
</html>
1.3 常见文本标签：
换行： <br/>
标题标签： h1-h6
段落标签： p
加粗： b/strong
斜体： i
下划线： u
删除线： s
预文本标签： pre
文本从右向左展示： <bdo dir="rtl">hello</bdo><br/>
下角标： x<sub>1</sub>
上角标： x<sup>2</sup>
依照原格式显示： <pre>
hello1
hello2
</pre>
1.4 超链接标签：
1.4.1 跳转到指定的url地址：
<a href="http://www.baidu.com">百度一下</a>
1.4.2 新建一个浏览器窗口并跳转：
<a href="http://www.baidu.com" target="_blank">百度一下</a>
1.4.3 跳转到当前页面的指定位置(锚点)：
1.4.3.2 设置锚点：
<a href="#C1"> 人工智障</a>
1.4.3.1 设置name：
<h1><a name="C1">人工智障</a></h1>
1.5 图片标签：
1.5.1 设置图片地址：
<a ><img src="图片地址"></a>
1.5.2 设置图片大小及图片不存在时显示的文字内容：
<img src="图片地址" width="1000px" height="1000px" alt="这是一个图片">
1.6 无序列表及有序列表：
1.6.1 定义列表：
<dl>
<dt>这是一个汽车</dt> #所要定义的事物
<dd>方向盘</dd> #事物所包含的属性及内容
<dd>轮胎</dd>
<dd>仪表盘</dd>
</dl>
1.6.2 有序列表：
<ol type = "i"> #type可以设置索引样式，"i"为罗马数字，"1"为阿拉伯数字，"a"为i小写字
母，"A"为大写字母
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
</ol>
1.6.3 无序列表：
<ul type = "square"> #"none"为无标记符号，"disc"为实心小黑点，"circle"为空心小园
圈，"square"为小方框
<li>苹果1</li>
<li>苹果2</li>
<li>苹果3</li>
</ul>
1.7 表格标签：
<table border="1px" width="50%" cellpadding="10" cellspacing="0"
align="center"> #border设置边框线条宽度，align设置表格位置，cellpadding设置表格内边距
（表格里面的文字和边框的距离），cellspacing设置表格的外边距（当值为0时表示
表格边框为实线）
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td> #rowspan向下合并两列
</tr>
<tr>
<td colspan="2">7</td> #colspan向右合并两列
</tr>
</table>
1.8 表单标签：
1.8.1 form表单：
文本域 ： <input type="text">
<textarea rows="10" cols="100"></textarea>
密码域： <input type="password">
提交文件： <input type="file">
选择日期： <input type="date">
单选按钮： <input type="radio" name="gender"> 女<input type="radio"
name="gender"> #name是为了确保用户单选的范围
多选按钮： <input type="checkbox" name="chose">
下拉列表： <select>
<option>selects</option>
<option>select1</option>
<option>select2</option>
<option>select3</option>
</select>
围绕数据的标签： <fieldset>
<legend>helloword</legend>
</fieldset>
2. CSS：
2.1 什么是CSS：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应
用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网
页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.2 设置样式表的三种方法：
2.2.1 行内样式表：
<h1 style="color: green">行内样式表</h1>
2.2.2 内部样式表：
<style>
h1{
color: red;
font-size: 24px;
}
</style>
2.3 外部样式表：
<h1>外部样式表</h1>
<link rel="stylesheet" href="main.css">
在样式表文件main.css中写入样式信息：
h1{
color: red;
font-size: 24px;
}
3. javascript
3.1 什么是javascript：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的
解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标
准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
3.2 如何对网页添加javascript：
<head>
<script>
function 函数名(){
函数
}
</script>
</head>
- 示例1：登陆信息校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm() {
// # 1. 获取用户名提交的内容;[object HTMLInputElement]
var user = document.getElementById('user').value;
// alert(user);
// 2. 判断用户名是否为6～8个字符;
var userLen = user.length;
// alert(userLen >=6 && userLen<=8);
if (userLen <= 6 || userLen >= 8) {
alert("用户名不合法");
return false;
}
}
</script>
</head>
<body>
<!--
1. 需求:
1). 用户登录时， 会填写一些信息, 如果所有的请求都提交给服务器处理， 服务端压力较大;
2). 在前端先校验， (防君子不防小人);
- 后端也需要校验
-->
<!--
2. 实现步骤:
1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2. 对这个事件绑定一个函数(执行的操作写在函数里面);
3. 函数的核心功能: 校验用户名是否为空?
1). 获取输入用户名标签提交的内容；
2). if判断用户名是否为空?
3). 如果数据合法， 继续执行， 提交表单；
4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->
<!--当提交信息的时候， 执行函数checkForm()-->
<form onsubmit="return checkForm()">
<input type="text" name='user' id="user" placeholder="用户名(6~8个字符)">
<input type="password" name='passwd' id="passwd" placeholder="密码(6位)">
<input type="submit" value="登录">
</form>
</body>
</html>
- 示例2：聚焦与离焦事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkUser() {
// # 1. 获取用户输入夫人用户名;
var user = document.getElementById('user').value;
// 2. 判断用户名长度;
var userLen = user.length;
if (userLen <= 6 || userLen >= 8) {
// document.getElementById('userTip').innerText = "用户名不合法";
document.getElementById('userTip').innerHTML = "<span style='color: red'>用户名不合法</span>"
} else {
document.getElementById('userTip').innerHTML = ""
}
}
function checkPwd() {
// # 1. 获取用户输入密码;
var pwd = document.getElementById('passwd').value;
// 2. 判断密码长度;
var pwdLen = pwd.length;
// === 值和类型都相等时返回true; == ---> '8' == 8 (true)
if (pwdLen !== 6) {
// document.getElementById('userTip').innerText = "用户名不合法";
document.getElementById('pwdTip').innerHTML = "<span style='color: red'>密码不合法</span>"
}
else {
document.getElementById('pwdTip').innerHTML = ""
}
}
function showUserTip() {
document.getElementById('userTip').innerHTML = '<span style="color: darkgray"> ' +
'用户名为6～8位</span>'
}
function showPwdTip() {
document.getElementById('pwdTip').innerHTML = '<span style="color: darkgray"> ' +
'密码必须为6位</span>'
}
</script>
</head>
<body>
<form>
<!--onblur---离焦事件-->
<input type="text" name='user' onfocus="showUserTip()" onblur="checkUser()" id="user" placeholder="用户名(6~8个字符)">
<span id="userTip"></span><br/>
<input type="password" name='passwd' onfocus="showPwdTip()" onblur="checkPwd()" id="passwd" placeholder="密码(6位)">
<span id="pwdTip"></span>
<br/>
<input type="submit" value="登录">
</form>
</body>
</html>
- 示例3：实现图片转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// # 获取图片对象;
var imgObj = document.getElementById('img');
// 2. 当点击下一页的时候， i+1, 图片变成img2.jpg;
i += 1;
//3. 修改图片对象里面的src属性;img/img2.jpg
imgObj.src = 'img/img' + i + '.jpg';
//4. 如果轮播图片结束， 从头开始轮播;
if (i===6){
i = 0;
}
}
</script>
</head>
<body>
<div>
<!--
思路:
1). 确定事件的类型onclick事件;
2). 并给对应的事件绑定函数changeImg();
-->
<img id='img' src="img/img1.jpg"><br/>
<input type="button" onclick="changeImg()" value="下一页">
</div>
</body>
</html>
- 示例4：实现轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// # 获取图片对象;
var imgObj = document.getElementById('img');
// 2. 当点击下一页的时候， i+1, 图片变成img2.jpg;
i += 1;
//3. 修改图片对象里面的src属性;img/img2.jpg
imgObj.src = 'img/img' + i + '.jpg';
//4. 如果轮播图片结束， 从头开始轮播;
if (i===6){
i = 0;
}
}
</script>
</head>
<body "setInterval('changeImg()', 1000);">
<div>
<!--
思路:
1). 确定事件的类型onload事件;
2). 并给对应的事件绑定函数changeImg();
-->
<img id='img' src="img/img1.jpg"><br/>
<!--<input type="button" onclick="changeImg()" value="下一页">-->
</div>
</body>
</html>
- 示例5：表格的全选与全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
//1. 获取全选框对象;
var checkAllEle = document.getElementById('checkAll');
// alert(checkAllEle.checked);
//2. 判断当前的复选框状态;
// 如果状态为选中, 设置所有的单选框为选中;
var checkOnes = document.getElementsByName('checkOne');
if (checkAllEle.checked) {
// 依次遍历所有的单选框， 设置状态为选中;
for (var i = 0; i < checkOnes.length; i++) {
checkOnes[i].checked = true;
}
} else {
// 依次遍历所有的单选框， 设置状态为选中;
for (var j = 0; j < checkOnes.length; j++) {
checkOnes[j].checked = false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>
- 示例6：动态添加城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity() {
// 1). 获取用户在input表单输入框中填写的信息;
var city = document.getElementById('city').value;
if (city) {
// 2. 创建一个城市的文本节点;
var textNode = document.createTextNode(city); // "shanghai"
// 3. 创建一个li的元素节点;
var liEleNode = document.createElement('li'); // <li></li>
// 4. 将文本节点添加到li元素节点里面去;
liEleNode.appendChild(textNode); // <li>Shanghai</li>
// 5. 将li的整体对象添加到ul标签里面去;
var ulEleNode = document.getElementById("ul_city");
ulEleNode.appendChild(liEleNode);
}
}
</script>
</head>
<body>
<!--
1. 需求:
点击一个按钮， 动态实现添加城市;
2. 实现步骤:
1. 确定事件类型onclick
2. 对于事件绑定一个函数addLiElement()
1) 获取到用户在input输入框中填写的信息;
city = document.getElementById("city").value
city = document.getElementsByName("city")[0].value
2). 创建一个城市的文本节点；document.createTextNode('xxxx')
3). 创建一个li的元素节点; document.createElement('xxxx')
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;
使用appendChild()来添加子节点;
-->
<div class="main">
<form>
<!--required表单必须填写内容-->
<input type="text" id='city' placeholder="请输入添加的城市" required>
<input type="button" value="添加城市" onclick="addCity()">
</form>
<ul id="ul_city">
<li>上海</li>
<li>北京</li>
<li>西安</li>
</ul>
</div>
</body>
</html>
- 示例7：省市信息二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity() {
// 1. 如何存储省份与城市之间的关系(数组);
// cites = [["xian", ""], [], []]
var provinces = new Array(3);
provinces[0] = new Array("西安", "咸阳", "宝鸡");
provinces[1] = new Array("成都", "乐山", "绵阳");
provinces[2] = new Array("济南", "青岛", "威海");
// 2. 获取用户选择的省份;
var choiceProvince = document.getElementById('province').value;
// 8. 获取用户选择的城市的select节点;
var selectEleNode = document.getElementById('city');
// 3.遍历用户选择省份对应的城市;
// 0 1 2
// 9. 清空上一次对于城市添加的所有option元素;
selectEleNode.length = 0;
for (var i = 0; i < provinces.length; i++) {
// 4. 判断用户选择的省份;
// alert(type(choiceProvince), type(i));
if (choiceProvince == i) {
// 如果相同， 便利该省份下的所有城市;
for (var j = 0; j < provinces[i].length; j++) {
// 5. 创建城市文本节点;
var textNode = document.createTextNode(provinces[i][j]);
// 6. 创建option的元素节点;
var optionEleNode = document.createElement("option");
// 7. 将城市的文本节点追加到option节点中;
optionEleNode.appendChild(textNode);
// 9. 添加option节点到select城市节点中;
selectEleNode.appendChild(optionEleNode);
}
}
}
}
</script>
</head>
<body>
<!--
1. 需求:
点击一个按钮， 动态实现添加城市;
[root@foundation0 day25]# cat /tmp/hello
## 1. 需求分析
省市的二级联动
## 2. 技术分析
## 3. 步骤实现
- 1). 确定事件类型onchange, 并为其绑定一个函数;
- 2). 修改下拉列表内容;
- 2-1). 获取用户选择的省份;
- 2-2). 创建一个二维数组， 用来存储省份和城市的对应关系;
- 2-3). 遍历二维数组中的省份；
- 2-4). 遍历时省份编号和用户选择的省份编号进行比较，
- 2-5). 如果相同， 遍历该省份下的所有城市;
- 将每一个城市以<option>城市名</option>添加到select里面去;
- 2-6). 如果不相同， 继续循环遍历省份;
-->
<div class="main">
<form>
<span>籍贯： </span>
<select id="province" onchange="changeCity()">
<option>---选择省份---</option>
<option value="0">陕西省</option>
<option value="1">四川省</option>
<option value="2">山东省</option>
</select>
<!--选择城市-->
<select id="city">
<option>---选择城市---</option>
<!--<option>"西安"</option>-->
</select>
</form>
</div>
</body>
</html>
3.2 javascript总结：
3.2.1 ECMAScript(基础语法)
1). 定义变量:
var a = 1; --- 局部变量;
a = 2; --- 全局变量;
2). 使用的数据结构: (string, number, boolean<true, false>, array, null, undefined)
3). 比较:
== : 不判断数据类型 5 == '5' (返回true) 5 == 5(返回true)
=== ： 判断数据类型 5 === '5' (返回false) 5 === 5(返回true)
4). 如何定义函数?
function 函数名{
函数体;
}
匿名函数: "setInterval('changImg()', 1000);"
5). if . for, while,
3.2.2 BOM对象;
Windows: alert(), setInterval(), clearInterval()
location: href() -- 跳转到指定界面
3.2.3 DOM对象
事件: onload, onsubmit, onclick, onfocus, onblur, onchange,
警告信息实现的方式:
alert();
document.getElementById('').innerHtml = "<span style="color:red；">error</span>"
扫一扫
2209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
