目录
一,HTML超文本标记语言
(1)标题标签(h1-h6):
(2)段落标签(p)
(3)换行标签(br)
(4)图片标签(img)
(5)超链接(a)
(6)表格标签
(7)列表标签
(8)表单标签
input标签:
select标签/textarea标签:
form标签:
(9)无语义标签(div&span)
(10)练习:用户注册
二,CSS
1,基本语法
2,css选择器
(1)标签选择器
(2)class选择器
编辑
(3)id选择器
(4)通配符选择器
(5)复合选择器
(1)空格 表示后代
(2)没空格 表示交集
(3)逗号 表示并集
(4)>表示相邻厚后代
3,常用的css
(1)color颜色
(2)font-size字体大小
(3)border边框
(4)width/height
(5)padding内边距
(6)margin外边距
三,JavaScript
1,引入方式:
2,变量
3,数据类型
4,运算符
5,数组
6,函数
7,对象
1. 使⽤ 字⾯量 创建对象 [常⽤]
2. 使⽤ new Object创建对象
3,使⽤ 构造函数 创建对象
8,JQuery
(1)基本介绍
(2)jQuery基本语法
(3)jQuery选择器
(4)jQuery事件
(5)操作元素
a,获取/设置元素内容
b,获取/设置元素属性
c,获取/设置css属性
d,添加元素
e,删除元素
四,综合练习
案例一:猜数字
案例二:表白墙
一,HTML超文本标记语言
通过链接和交互的方式来组织和呈现文本的形式(包含音频,图片...)
(1)标题标签(h1-h6):
(2)段落标签(p)
p 标签描述的段落, 前⾯没有缩进. ⾃动根据浏览器宽度来决定排版. html 内容⾸尾处的换⾏, 空格均⽆效. 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格. html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格
(3)换行标签(br)
br 是⼀个单标签
换行标签个段落标签的行间距不同
(4)图片标签(img)
属性可以有多个, 不能写到标签之前 2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏. 3. 属性之间不分先后顺序 4. 属性使⽤ "键值对" 的格式来表⽰.
src 属性. 表⽰图⽚的路径,可以写相对路径,也可以用绝对路径来表示
(5)超链接(a)
• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.
• target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开
超连接可以是一个外部链接,网络路径,可以是一个内部链接,两个HTML之间进行跳转,也可以用一个'#'在进行占位,当填入一个文件的时候,就会自动下载这个文件
(6)表格标签
• table 标签: 表⽰整个表格 • tr: 表⽰表格的⼀⾏ • td: 表⽰⼀个单元格 • thead: 表格的头部区域 • tbody: 表格的主体区域
align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
• border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.
• cellpadding: 内容距离边框的距离, 默认 1 像素
• cellspacing: 单元格之间的距离. 默认为 2 像素
如果将 align="center"这样的形式来写:<table border="1px" cellspacing="0" width="300px" cellpadding="20px" align="center">效果如下,(表格进行了居中)
(7)列表标签
ul为无序列表,ol为有序列表
(8)表单标签
input标签:
select标签/textarea标签:
form标签:
描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中
提交到test1,html
(9)无语义标签(div&span)
div:独占一行,相当于一个大盒子
span:不独占一行,相当于一个小盒子(用于网页布局)
(10)练习:用户注册
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title>
</head>
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" name="" id="" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="tel" name="" id="" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" name="" id="" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账户?</span><a href="#">登录</a></div></body>
</html>二,CSS
1,基本语法
选择器 + {⼀条/N条声明},css要写到style标签里面,• style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内,CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换)
引入方式:
行内样式:在标签内使⽤style属性，属性值是css属性键值对
<span style="color: green;">你好</span>
内部样式:定义<style>标签，在标签内部定义css样式
外部样式:定义<link>标签，通过href属性引⼊外部css ⽂件
2,css选择器
(1)标签选择器
(2)class选择器
class可以被多个元素使用
<style>.red {color: #ff0000;}.blue {color: #0008ff;}.green {color: green;}</style>
<body><p class="red">hi</p><p class="blue">hi</p><p class="green">hi</p><p>hi</p><span class="red">span red</span><span class="blue">span blue</span>
</body>
(3)id选择器
id只能被一个元素使用,不能重复
#aa {color: #8b538b;}<span><ul><li id="aa">aaa</li><li>bbb</li><li>ccc</li></ul><ol><li id="aa">aaa</li><li>bbb</li><li>ccc</li></ol></span>(4)通配符选择器
设置⻚⾯所有元素, 颜⾊为黑色
(5)复合选择器
有多个单选择器组合到一起,标签选择器,类选择器,id选择器
(1)空格 表示后代
也可以跨代写
(2)没空格 表示交集
(3)逗号 表示并集
(4)>表示相邻厚后代
>两边必须是儿子,不能隔代
3,常用的css
(1)color颜色
(2)font-size字体大小
px:像素 (多数的浏览器的像素是16px)
(3)border边框
是一个复合属性
(4)width/height
只有块级元素可以设置宽高
display: block 改成块级元素, display: inline 改成⾏内元素
(5)padding内边距
(6)margin外边距
三,JavaScript
1,引入方式:
行内样式:直接嵌⼊到 html 元素内部
<input type="button" value="点我⼀下"οnclick="alert('haha')">
内部样式:定义<script>标签，写到 script 标签中
<script> alert("hello JavaScript") </script>
外部样式:定义<script>标签，通过src属性引⼊外部js ⽂件
<script src="hello.js"></script>
2,变量
var:早期JS中声明变量的关键字, 作⽤域在该语句的函数内
let;ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块 内
const:声明常量的，声明后不能修改
JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态),随着程序的运⾏, 变量的类型可能会发⽣改变.
3,数据类型
分为number,boolean,undefined,string四种
4,运算符
其余运算符和Java相似就不过多进行赘述了,只有==和===略有不同,==仅表示数值相等则为真,===表示数值和数据类型都要相同才为真.
5,数组
1. 使⽤ new 关键字创建,var arr = new Array()
2. 使⽤字⾯量⽅式创建 [常⽤]var arr2 = [1, 2, 'haha', false]
6,函数
如果声明的参数和调用的参数不匹配,那么调用的时候多余的被舍弃.如果调用的时候参数少了会返回,就会发生如下几种状况:
意为:Not a Number
缺失的参数是undefined类型的
另外一种写法:
var add = function () {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}console.log(add(10, 20));
console.log(add(1, 2, 3, 4));
7,对象
1. 使⽤ 字⾯量 创建对象 [常⽤]
2. 使⽤ new Object创建对象
3,使⽤ 构造函数 创建对象
8,JQuery
(1)基本介绍
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能 代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从 ⽽减少了开发⼈员编写的代码量，提⾼了开发效率, 它提供的 API 易于使⽤且兼容众多浏览器，这让诸 如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简 化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为
开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险 参考地址 https://releases.jquery.com/
(2)jQuery基本语法
$(selection).action()
$()是一个函数,它是jQuery提供的全局函数,用来选择和操作HTML元素
selection是一个选择器,用来查询HTML元素
action操作,执行对元素的操作
通常我们的代码要写在document ready函数中,这是为了防止在文档在完全加载之前运行jQuery代码,即在文档加载完成之后才可以对页面进行操作,如果在文档加载完成之前就运行函数,操作可能会失败
<body><button type="button">点我消失</button><script src="jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$('button').click(function () {$(this).hide();});});</script>
</body>
</html>(3)jQuery选择器
我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作. JQuery选择器 基于已经存在的CSS选择器,
(4)jQuery事件
常见的事件:
⽂档就绪事件(完成加载):$(document).ready(function)
点击事件:$(selector).click(function)
双击事件:$(selector).dblclick(function)
元素的值发⽣改变:$(selector).change(function)
⿏标悬停事件:$(selector).mouseover(function)
(5)操作元素
a,获取/设置元素内容
text()无参数取值,有参数取值,只能获取/修改文本信息
<body><div id="content"><h1>我是一个文本</h1></div><button id="btn">点击</button><script src="jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$("#btn").click (function () {// $(this).hide();$("#content").text("我是修改后的文本框");});let content=$("#content").text();console.log(content);});</script></body>html()无参数取值,有参数取值,可以获取/修改里面的html标签
两者相同赋值的时候,html()设置标签会正常进行解析,但是如果是text的时候,html标签就会被作为文本进行处理
<body><div id="content"><h1>我是一个文本</h1></div><button id="btn">点击</button><script src="jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$("#btn").click (function () {// $(this).hide();// $("#content").text("我是修改后的文本框");$("#content").html("<h1>我是修改后的文本框<h1>");});let content=$("#content").text();console.log(content);let content2=$("#content").html();console.log(content2);});</script></body>var:想要获取/修改表单控件用这个
<body><div id="content"><h1>我是一个文本</h1></div><button id="btn">点击</button><input type="text" value="我是一个文本框" id="txt"><input type="text" value="我是一个文本框2" id="txt2"><script src="jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$("#btn").click (function () {$("#txt2").val("修改我的文本框");});let inputval=$("#txt").val();console.log(inputval);});</script></body>b,获取/设置元素属性
<body><a href="https://www.baidu">百度</a><script>let href=$("a").attr("href");console.log(href);$("a").attr("href","https://youdao.com");</script>
</body>c,获取/设置css属性
参数只有样式名称的名称,则返回样式,如果,既有样式的名称,又有改后的样式,则修改样式
<body><div style="color: red;">你好</div><script>let color=$("div").css("color");console.log(color);$("div").css("color","blue");</script>
</body>d,添加元素
1. append() : 在被选元素的结尾插⼊内容
2. prepend() : 在被选元素的开头插⼊内容
3. after() : 在被选元素之后插⼊内容
4. before() : 在被选元素之前插⼊内容
<body><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><script>$("ol").append("append元素的结尾");$("ol").prepend("prepend");$("ol").after("after");$("ol").before("before");</script></body>
e,删除元素
1. remove() : 删除被选元素（及其⼦元素）
整个元素清空.
$("ol").remove();
2. empty() : 删除被选元素的⼦元素。
$("ol").empty();
四,综合练习
案例一:猜数字
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title>
</head><body><button id="reset">重新开始游戏</button><br>请输入要猜的数字: <input type="text" id="guessNum"><input type="button" value="猜" id="guessBtn"><br>已经猜的次数: <span id="count">0</span> <br>结果: <span id="result"></span><script src="jquery-3.7.1.min.js"></script><script>//生成随机数 1-100let rightNumber = Math.floor(Math.random() * 100) + 1;console.log(rightNumber);let count = 0$("#guessBtn").click(function () {//猜的次数count++;$("#count").text(count);//猜的结果let guessNum = $("#guessNum").val();if (guessNum > rightNumber) {$("#result").text("猜大了");$("#result").css("color","red");} else if (guessNum < rightNumber) {$("#result").text("猜小了");$("#result").css("color","red");} else {$("#result").text("猜对了");$("#result").css("color","green");}});$("#reset").click(function () {rightNumber = Math.floor(Math.random() * 100) + 1;console.log(rightNumber);count = 0;$("#guessNum").val("");$("#result").text("");$("#count").text(count);})</script>
</body>案例二:表白墙
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;/*居中*/}h1 {text-align: center;padding: 20px 0;}p {color: gray;text-align: center;padding: 10px 0;font-size: 14px;}.raw {height: 40px;display: flex;align-items: center;justify-content: center; }span {width: 100px;line-height: 40px;}#from,#to,#say {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;border-radius: 5px;}.html {display: flex;align-items: center;justify-content: center; }</style></head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交,会将信息显示在表格中</p><div class="raw"><span>谁:</span><input type="text" id="from"></div><div class="raw"><span>对谁:</span><input type="text" id="to"></div><div class="raw"><span>说什么:</span><input type="text" id="say"></div><div class="raw"><input type="button" class="submit" value="提交" onclick="submit()"></div></div><script src="jquery-3.7.1.min.js"></script><script>function submit() {let from=$("#from").val();let to=$("#to").val();let say=$("#say").val();if (from==""||to==""||say=="") {alert("信息没有填全!!");return;}let html='<div class="html" >'+from+" 对 "+to+" 说: "+ say +"<div>";$(".container").append(html);$(":text").val("");}</script></body>
</html>
