HTML—超文本标记语言
W3C标准：网页主要由三部分组成
HTML：用来制作网页基础内容和基本结构
CSS：用于网页样式美化效果
JavaScript：用来制作数据验证、交互行为效果，可以动态操作网页的元素增删改查。
HTML基础语法
文本标签
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文本标签</title></head><body><!--h1~h6: header 标题标签,变大加粗,h1最大align属性:对齐方式, 有3种 left(左对齐，默认), center(居中), right(右对齐)--><!-- 选中内容 -> ctrl + alt + t 可以让内容包裹一个标签 --><h1 align="center">我是h1</h1><h2 align="right">我是h2</h2><h3 align="center">我是h3</h3><h5>我是h5</h5><h6 align="center">哈哈哈哈</h6><!--hr:水平分割线color:颜色size:宽度 px:像素，1px就是一个点--><hr/><hr color="yellow" size="5px"/><!--font: 字体标签, font在H5版本中已经不使用,有其他替代方案:CSScolor: 颜色size: 文字大小 1~7级 1最小, 7最大face: 设置字体--><font color="#7fffd4" size="1">HTML真好学</font><font color="#f5f5dc" size="7" face="华文新魏">加油</font><!--b: 加粗 bold--><b>加粗</b><!--i: 倾斜 italic--><i>倾斜</i><!--br: -->我是一行<br/>我是一行<br/>我是一行<br/><!--p: 表示段落--><p>第一段</p><p>第二段</p></body></html>
写标签的方式不要手打<>，选择内容之后，用快捷键ctrl + alt + t
有序列表和无序列表
特殊字符
div和span
span是内联标签，不带换行功能
div是块标签，自带换行功能
图像标签
在img文件夹中放图片
img: 表示图片标签,显示图片。
src: 设置图片的路径, 图片的路径不能使用绝对路径, 为了安全考虑,为了安全考虑，网页的相对 路径以网页所在文件夹作为参照（起始点）。
width:图片的宽度。
height:图片的高度。
alt:图片找不到时提示的文本。
超链接标签
a: 超链接标签, 可以跳转到其他页面, 如果是跳转到其他网站需要http://开头
href: 跳转的目的地
target: 打开方式
self: 在本页面打开 默认的
_blank: 在新页面打开
例子2： 
例子1：
——表示一个空超链接
表格标签
table标签: 表示表格 是一个容器,它里面会包含其他标签
border属性: 表格的边框
cellspacing: 单元格之间的间距
cellpadding: 内容到边框的距离
tr标签: 表示一行,也是一个容器,包含其他标签 table row
th标签: 表示列标题,会加粗居中 table header
td标签: 表示普通的单元格
align:
加在td上,这个单元格居中
加在tr上,这行居中
加在table,table自己在网页中居中
rowspan: 跨几行
colspan: 跨几列 column
caption标签: 表格标题
thead,tbody,tfoot 是不可见的,多表格进行逻辑划分.方便后续的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩表</title>
</head>
<body>
<table border="1px" width="500px" cellspacing="0px" cellpadding="8px" align="center">
<caption>学生成绩表</caption>
<thead><!--头标签-->
<tr> <!--表示一行-->
<th>编号</th><!--th标签: 表示列标题,会加粗居中 table header-->
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody align="center"><!--表内容,整体居中-->
<tr><!--第二行-->
<td>100</td><!--td标签: 表示普通的单元格-->
<td>潘金莲</td>
<td>女</td>
<td>80</td>
</tr>
<tr><!--第三行-->
<td>200</td>
<td>武大郎</td>
<td>男</td>
<td rowspan="2">90</td><!--rowspan: 跨几行,指90占两行-->
</tr>
<tr><!--第四行-->
<td>300</td>
<td>红太狼</td>
<td>女</td>
</tr>
</tbody>
<tfoot align="center"><!--表尾，居中-->
<tr><!--第五行-->
<td>总成绩</td>
<td colspan="3">900</td><!-- colspan: 跨几列,表示900占三列-->
</tr>
</tfoot>
</table>
</body>
</html>
表单标签
作用：接收用户输入数据，并提交数据给服务器。
input标签
placeholder属性: 占位文字
type=”radio”: 单选按钮name属性要相同,才能选中其中一个value的值提交给服务器
type=”checkbox”: 复选框,可以同时选中多个
type=”date”: 日期选择框
type=”file”: 文件域, 选择一个文件
type=”reset”: 清空表单的输入内容,回到初始状态
type=”image”: 图片按钮
type=”button”: 普通按钮,现在点击没有效果,等后面学习了JS就可以处理按钮点击
checked=”checked”: 表示选中
select标签: 下拉框
每个选项都是一个option标签
option标签的选中使用: selected=”selected”
textarea标签: 文本域, 让我们输入一段问题
rows=”10”: 行数
cols=”60”: 列数
表单get/post提交数据区别：
get方式：明文提交，地址栏提交格式：?name1=value1&name2=value2…, 提交数据大小 有限制。
post方式：非明文提交，请求体提交，提交数据大小没有限制。
综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
</head>
<body>
<h1>用户注册</h1>
<hr/>
<form action="register" method="get">
<table><!--10行2列表格-->
<tr><!--第一行-->
<td>用户名:</td>
<td>
<input name="username" placeholder="请输入用户名"/>
</td>
</tr>
<tr><!--第二行-->
<td>密码:</td>
<td>
<input name="password" type="password" placeholder="请输入密码"/>
</td>
</tr>
<tr><!--第三行-->
<td>邮箱：</td>
<td>
<input name="email" type="email" placeholder="请输入邮箱"/>
</td>
</tr>
<tr><!--第四行-->
<td>性别:</td>
<td>
<!--type="radio":单选框 checked="checked":默认选中-->
<input name="sex" value="man" type="radio"/>男
<input name="sex" value="woman" type="radio" checked="checked"/>女
</td>
</tr>
<tr><!--第五行-->
<td>爱好:</td>
<td>
<!--type="checkbox"多选框-->
<input name="hobby" value="swimming" type="checkbox" checked="checked"/>游泳
<input name="hobby" value="surfing" type="checkbox"/>上网
<input name="hobby" value=" movie" type="checkbox" />电影
<input name="hobby" value="read" type="checkbox" checked="checked"/>看书
</td>
</tr>
<tr><!--第六行-->
<td>学历:</td>
<td>
<!--select:下拉框，多个里面选择一个 selected="selected":默认选中-->
<select name="edu">
<option value="xx">小学</option>
<option value="cz">初中</option>
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">硕士研究生</option>
<option value="bs">博士研究生</option>
</select>
</td>
</tr>
<tr><!--第七行-->
<td>出生:</td>
<td>
<input type="date" name="birthday" value="1999-02-09"/>
</td>
</tr>
<tr><!--第八行-->
<td>照片:</td>
<td>
<input type="file" name="photo"/>
</td>
</tr>
<tr><!--第九行-->
<td>个人简介:</td>
<td>
<!--textarea:文本域，可以输入多行多列的文字，没有value属性
cols:列数,row:列数-->
<textarea name="resume" cols="30" rows="5" placeholder="请输入个人简历"></textarea>
</td>
</tr>
<tr><!--第十行-->
<td></td>
<td>
<input type="submit" value="注册"/>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
css-渲染html元素进行样式控制的语言
CSS的选择器
CSS三种引入方式
在学习中多应用内部样式，在工作中多应用外部样式。
外部样式：可以在多个HTML中重用。
CSS选择器
CSS常见样式
文本样式
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本样式</title>
<style> /*内部样式:定义<style> 标签，在标签内部定义css样式*/
div{
width: 400px;/*设置标签选择器大小*/
margin: auto;/*将外边距设置为自动*/
}
h1{
font-size: 18px;/*设置大小*/
color: #06F;
text-align: center;/*文本对齐*/
}/
#wen{ /*id选择器*/
color: #999;
font-size: 12px;
font-weight: normal;/*设置粗细*/
}
p{
text-indent: 2em;/*文本首段空两格*/
}
.mei{/*类选择器*/
color: #f36;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h1>初相遇<span id="wen">文/席慕容</span></h1>
<p><span class="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
<p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，
所有被浪费的时光竟然都能重回时的狂喜与感激。胸怀中满溢着幸福，只因你就在我眼前，对我微笑，一如当年。</p>
<p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>
JavaScript
JavaScript 是一门跨平台、面向对象的脚本语言，运行在浏览器端。
JavaScript作用：
表单数据校验；
页面元素标签动态增删改查操作等。
window.alert一次只会执行一行。
JavaScript 编写位置：
<!--内部位置, 本网页有效(经常使用)-->
<script>
document.write("Hell01 <br/>");
</script>
<!--引入外部的JS文件,
src:指定JS文件的位置
注意:
如果引入了外部JS文件,这个标签中的JS代码是无效的
<script>不能提前结束,不能写成这样: <script src="js/out.js"/>, 影响后面的JS执行
-->
<script src="js/out.js"></script>
1.同一个HTML中可以有多个script标签，每个标签都会执行(从上往下运行)；
2.script标签可以出现在网页中任何的位置；
3.
4.type=”text/javascript” ，设置内部代码类型，这里代表内部是文本JavaScript代码，可以省略。
JavaScript基础语法
定义变量
区别:
1.ES5 方式语法不严谨，使用范围不受代码块限制，代码块外依然可以使用，造成内存浪费;
2.ES6 新增了 let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明;
3.ES6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
注：let可以随意改变数据类型
五种数据类型
<script>
// number: 数值型, 整数和小数都行
let n1=6;
document.write(n1+":"+typeof(n1)+"<br/>");
let n2=8.88;
document.write(n2+":"+typeof(n2)+"<br/>");
// boolean: true/false
let b=true;
document.write(b+":"+typeof(b)+"<br/>");
// string: 字符串 在js中""包裹的内容和''包裹的内容都是字符串.
let s1='哈哈哈哈';
document.write(s1+":"+typeof(s1)+"<br/>");
// object: 对象类型
// 自定义JS对象: {键1:值1, 键2:值2}
let obj1={
name:"刘",
age:62
}
// null表示对象类型, null是对象类型的默认值.
// undefined: 未定义 没有给变量赋值
</script>
运算符
1.在JS中整数相除/会得到小数；
2.==的优先级低于=+；
3.==: 字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较;
4.=== 恒等于,既比较类型也比较值(js中为了严谨建议使用===);
5.JS中建议使用 && ||，不要使用&和|, &|会变成数字,1表示true，0表示false。
流程控制语句
1.JS非boolean作为if的条件:
number: 非0为true, 0为false;
string: 字符串有内容为true, 字符串没有内容(“”)为false;
undefined: 为false;（没有赋值）
object: 对象不为null是true, 对象为null是false。
2.增强for循环: for…of。
浏览器调试JavaScript代码
JavaScript函数
JavaScript 常用对象
Array
注意：JS数组类似于Java集合，长度，类型都可变。
1.修改数组数据: 数组名[索引]=新的值;
2获取数组数据: 数组名[索引]；
3.push: 添加数据方法；
4.splice:删除数据方法 splice(开始位置, 删除的数量)。
String
中间空格 不会去掉
自定义对象
<script>
// JS自定义对象
let person={
name:"迪丽热巴",
age:18,
eat:function (){
document.write(this.name+"在吃饭"+"<br/>");
}
}
// 使用对象, 和 Java一样的格式 (点语法) 对象.成员变量 或 对象.成员方法()
document.write(person.name+","+person.age+"<br/>");
person.eat();
</script>
BOM
Window：浏览器窗口对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<img id="myImage" border="0" src="img/off.gif"/>
<script>
// alert提示框 (只有确定按钮)
//window.alert("啊哈哈哈");
// 输入框 prompt(提示的文字，默认输入的内容), 点击确定得到输入的内容, 点击取消得到null
//let a=window.prompt("你喜欢我什么？","帅");
//document.write("用户输入了:"+a+"<br/>");
// 确认框 (只有有确定和取消按钮), 点击确定得到true, 点击取消得到false
//let b = window.confirm("你真的喜欢我吗？");
// window.可以省略
//alert("你喜欢我吗?");
//confirm("你真的喜欢我吗");
// 定时器
// setTimeout(函数名, 间隔毫秒数) 过指定时间后执行一次函数
//setTimeout(refresh,1000);
// setInterval(函数名, 间隔毫秒数) 每隔指定的时间都会执行前面的函数(反复执行)
setInterval(refresh,1000);
//setInterval("refresh()",1000);
// 每隔一秒钟给img标签切换图片
let num=1;
function refresh() {
//document.write(new Date()+"<br/>");
num++;
if (num%2==0){
document.getElementById("myImage").src="img/on.gif";
}else{
document.getElementById("myImage").src="img/off.gif";
}
}
</script>
</body>
</html>
location地址栏对象
_// location的href属性: 获取地址栏内容
_document.write(location.href+”
“);
_// location的href属性: 修改地址栏内容，跳转
_location.href=”http://www.baidu.com“;
history历史记录
DOM
文档对象模型(浏览器显示的内容)，DOM用来操作网页中各种元素(标签)，个组成部分封装成了对象。
DOM查找元素的四个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<img id="light" src="img/off.gif"> <br>
<div>传智教育</div> <br>
<div>黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<br>
<div class="cls">Java</div> <br>
<div class="cls">PHP</div> <br>
<script>
// 1.getElementById：通过id找到一个元素
document.getElementById("light").src="img/off.gif";
// 2.getElementsByTagName:通过标签名找到一组元素
// innerHTML：修改标签里面的内容
let divs = document.getElementsByTagName("div");
for (let div of divs) {
div.innerHTML="广州黑马";
}
// 3.getElementsByName：通过name属性的值获取一组元素
let hobbies = document.getElementsByName("hobby");
for (let hobby of hobbies) {
//在HTML标签中通过checked="checked" 属性可以选中
hobby.checked=true;//在JS中hobby.checked=true 就会选中这个复选框
}
// 4.getElementsByClassName：通过class属性的值获取一组元素
let divs2 = document.getElementsByClassName("cls");
for (let div of divs2) {
div.innerHTML="哈哈哈哈";
}
</script>
</body>
</html>
事件监听
什么是事件：
单击，双击，鼠标移动等这些操作就称为事件。事件通常与函数配合使用，这样就可以通过发生的事件来驱动JavaScript函数执行。
设置事件的两种方式
得到焦点和失去焦点案例
<body>
<!--onfocus: 得到焦点 onblur:失去焦点-->
用户名: <input id="in1" name="user" onfocus="inputFocus()"> <span id="sp1">请输入</span>
<script>
// 命名函数设置事件
function inputFocus() {
//1.找到span标签
//2.设置内容正在输入
document.getElementById("sp1").innerHTML = "正在输入";
}
// 匿名函数设置失去焦点的事件
//1.找到input输入框
//2.使用匿名函数设置事件
document.getElementById("in1").onblur=function () {
//1.找到span标签
//2.设置内容为请输入
document.getElementById("sp1").innerHTML="请输入";
}
</script>
</body>
onfocus: 得到焦点 onblur:失去焦点
效果：
常见事件:
单击事件：onclick
失去焦点事件：onblur
获得焦点事件：onfocus
鼠标移动到元素之上事件：onmouseover
鼠标移出事件：onmouseout
表单提交事件：onsubmit
JS中使用正则表达式
创建正则表达式的两种方法：
<script>
// 1.创建正则表达式
//let reg1=new RegExp("1[3-9]\\d{9}");
let reg2=/^1[3-9]\d{9}$/;//^表示开头，$表示结尾
// 2.匹配 在JS中正则表达式默认是部分匹配
let b = reg2.test("13838389438");
alert(b);
</script>
对表单进行数据验证
1.得到输入框的内容；
2.创建正则表达式；
3.使用正则表达式验证内容；
4.如果符合正则表达式，隐藏错误提示；
5.如果不符合正则表达式，显示错误提示。
<script>
// 校验用户名
document.getElementById("username").onblur=function (){
//1.获取表单输入框内容
let username = document.getElementById("username").value.trim();
//2.判断是否符合规则(6-16个字符)
let reg=/^\w{6,16}$/;
let b = reg.test(username);
if (b){
//3.如果符合规则，隐藏提示
document.getElementById("username_err").style.display="none";
}else{
//4.如果不符合规则，显示提示
document.getElementById("username_err").style.display="";
}
return b;
}
//验证密码
document.getElementById("password").onblur=function (){
let password = document.getElementById("password").value.trim();
let reg=/^\w{6,20}$/;
let b = reg.test(password);
if (b){
document.getElementById("password_err").style.display="none";
}else{
document.getElementById("password_err").style.display="";
}
return b;
}
// 校验手机号
document.getElementById("tel").onblur=function (){
let phone = document.getElementById("tel").value.trim();
let reg=/^1[5-9]\d{9}$/;
let b = reg.test(phone);
if (b){
document.getElementById("tel_err").style.display="none";
}else{
document.getElementById("tel_err").style.display="";
}
return b;
}
// onsubmit事件:当点击提交按钮表单准备提交时执行,return true:表单会被提交，return false:表单不提交
document.getElementById("reg-form").onsubmit=function () {
//用代码模拟输入框失去焦点
let b1 = document.getElementById("username").onblur();
let b2 = document.getElementById("password").onblur();
let b3 = document.getElementById("tel").onblur();
return b1 && b2 && b3;
}
</script>
若有收获，就点个赞吧
0 人点赞
