HTML
Hyper Text Markup Language 超文本标记语言
超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等
标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。
网页基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>常用标签
文字
| 标签名 | 作用 |
| h1~h6 | 块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3 |
| p | 块级元素，段落 |
| span | 行内元素 |
| pre | 块级元素，预处理标签 |
| i | 行内元素，倾斜 |
| u | 行内元素，下划线 |
| b | 行内元素，加粗 |
| sub | 行内元素，文字下标 |
| sup | 行内元素，文字上标 |
图片
img:单标签，行内元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <img src="图片路径" alt="无法显示图片时显示的文字"
title="鼠标悬停时提示的文字" width="宽" height="高"/> -->
<img src="../Saved Pictures/风景.jpg"/ width="100" height="100" title="风景" alt="无法显示">
</body>
</html>列表
有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- disc 默认，实心圆
circle 空心圆
square 正方形
none 去掉修饰符号 -->
<ul type="circle">
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</body>
</html>运行结果
有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号 -->
<ol type="1">
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>
</body>
</html>运行结果
表格 table
| 表格中的标签 | 作用 |
| tr | 表格中的行 |
| td | 每行中的单元格 |
| th | 特色的单元格，表头，文字加粗居中 |
<table border="1">
<tr>
<th>课表</th>
<th>昨天</th>
<th>今天</th>
<th>明天</th>
</tr>
<tr>
<!-- colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行 -->
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>数学</td>
<td colspan="2">语文</td>
</tr>
</table>运行结果
a标签
超链接，可以通过a标签访问任何一个地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- target可以控制要访问的资源在哪里打开
_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>运行结果
表单form
表单元素
| 常用表单元素 | 作用 |
| input | 单标签，行内元素。通过修改关键属性type，变化为不同的组件 |
| select | 双标签，行内元素。下拉菜单 |
| textarea | 双标签，行内元素。文本域 |
| input标签type属性的值 | 作用 |
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| data | 日历组件 |
| number | 数字组件 |
| hidden | 隐藏域 |
| submit | 提交按钮 |
| reset | 重置按钮 |
<form>
<!-- **placeholder用于设置输入框的提示文字 **required用于设置输入框为必填项-->
用户名： <input type="text" name="username" required placeholder="请输入用户名"/><br />
密码：<input type="password" name="password" required placeholder="请输入密码"/><br />
<!--checked 用于设置单选按钮和复选框的默认选中 -->
性别：<input type="radio" name="radio" value="男" checked/>男<input type="radio" name="radio" value="女"/>
<br />
爱好：<br /><input type="checkbox" checked name="hobby" value="游泳" />游泳
<br />
<input type="checkbox" name="hobby" value="打游戏" />打游戏
<br />
<input type="checkbox" name="hobby" value="看小说" />看小说
<br />
职业：<select name="job" >
<!-- disabled使某个主键失效 不可用状态-->
<option disabled selected>--请选择--</option>
<option value="1">教师</option>
<option>律师</option>
<option>厨师</option>
<option>催眠师</option>
</select><br />
生日：<input type="date" name="birthday" value="2022-12-01"/>
<br />
数量：<input type="number" name="career" step="1" value="1" min="0" max="50"/><br />
描述：<textarea rows="5" cols="20"></textarea><br />
<!-- submit 提交按钮 默认文字为“提交” value修改默认文字-->
<input type="submit" value="登陆"/>
<!-- reset 重置按钮 -->
<input type="reset" />
</form>
运行结果
div标签
块级元素，双标签，没有任何特点。
页面布局时采用div布局。
CSS
Cascading Style Sheets 层叠样式表
样式名：样式值；例如：
color:red;
font-size:20px;
选择器
元素/html/标签选择器：直接通过标签名获取
class选择器：1.给标签添加class属性，对其命名 。 2.在style标签中通过.class名获取
id选择器：1.给标签添加id属性，对其命名。2.在style标签中通过#id名获
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 元素/html/标签选择器 */
div{
}
/* id选择器 */
#text{
}
/* class选择器 */
.sum{
}
</style>
</head>
<body>
<div></div>
<div id="text"></div>
<div class="sum"></div>
</body>
</html>层次选择器
通过空格或>获取某个元素的子元素：
"元素A 元素B" 表示获取元素A下的所有元素B
""元素A > 元素B" 表示获取元素A下的第一层元素B
<style>
#father div {
获取其中的所有子元素
}
#father>div {
获取其中的第一层子元素
}
</style>
</head>
<body>
<div id="father">
<div>
<div>使用>无法获取该div</div>
</div>
<div></div>
</div>
</body>常用样式
尺寸
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
背景background
边框border
字体font
文本text
列表list
伪类
用于对某些元素在不同的情况下呈现不同的效果。
如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
鼠标样式cursor
浮动float
让某个元素脱离原本的位置，朝某个方向对齐。
盒子模型
溢出overflow
定位position
动画animation
/* 定义关键针 */
@keyframes myanimate{
from{
left: 0px;
top: 300px;
}
25%{
transform: rotate(45deg);
left: 150px;
top: 300px;
}
50%{
transform: rotate(90deg);
left: 150px;
top: 450px;
}
75%{
transform: rotate(135deg);
left: 0px;
top: 450px;
}
to{
transform: rotate(180deg);
left: 0px;
top: 300px;
}
}
.tate{
position: absolute;
width: 150px;
height: 150px;
background-color: aqua;
/* 要执行的动画 */
animation-name: myanimate;
/* 执行动画所需要的时间 */
animation-duration: 1s;
/* 执行动画的次数 infinite表示无限 */
animation-iteration-count: 4;
/* 动画延时 */
animation-delay: 2s;
/* 动画时间函数 linear表示匀速，*/
animation-timing-function: ease-in;JavaScript
JavaScript通常简称为JS，由网景(NetScape)公司推出。 是一门面向对象、轻量级、弱类型的解释型脚本语言。
弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。
解释型：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。
js的组成
1.ECMAScript
简称为ES，是JS的标准，也是JS的核心语法
数据类型
原始类型
引用类型
如对象、数组、函数等都是引用类型
定义变量和初始化
var name;
name = "Tom";
var age = 22;
//可以不用var定义，但不建议
sex = "男";
//都可以正常输出
console.log("name:" + name + ",age:" + age + ",sex:" + sex);数组Array
//定义数组
// 1.默认没有给某个位置赋值时，是undefined
// 2.最大下标决定了数组长度
// 3.可以保存不同类型的数据
var list1 = new Array();
list1[0] = 123;
list1[3] = "hello";
list1[10] = true;
console.log(list1[3]);数组遍历
// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}
常用方法
日期Date
创建Date对象：var now = new Date();
正则表达式
正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符。。。）的工具，一般用于 表单输入数据的校验
参考网址： https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
Math
floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 取绝对值
random() 产生[0, 1)的随机数
产生随机数的公式
[m, n]的随机数： Math.floor(Math.random() * (n - m + 1)) + m
[m, n) 的随机数：Math.floor(Math.random() * (n - m)) + m
函数 function
函数的定义
<script>
fun1(); //函数调用
// js代码执行时有一个预处理过程，函数在预处理时候就能识别，
// 函数调用可以放在任意位置（不要求函数的调用一定要在函数定义之后）
function fun1() {
console.log("fun1 被调用");
}
fun1(); //函数调用
// 有参数，无返回值
function fun2(name) {
console.log("你好，" + name);
}
fun2("HQYJ");
fun2(); //js函数调用可以传参数，也可以不传，不会报错
function fun3(a, b) {
return a + b;
}
var sum = fun3(3, 2);
console.log(sum);
</script>2.BOM
Browser Object Mode
浏览器对象模型可以通过JS获取浏览器信息和控制浏览器的行为。
弹框
警告框，带有提示文字和确认按钮
alert("提示文字")
输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容。
prompt("提示文字")确认框，带有确认取消按钮，点击确认返回true，否则返回false
confirm("提示文字")
window对象
表示浏览器窗口对象，可以获取浏览器相关信息，调用浏览器的某些行为
screen对象
用于获取屏幕相关信息
location对象
用于设置或获取地址栏相关信息
history对象
3.DOM
Document Object Model
文档对象模型
获取节点
获取设置节点文本
innerText： 读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示
innerHTML： 读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有HTML元素会识别HTML元素
// innerText用于设置或读取标签中的文本，不会识别HTML元素
document.getElementById("mp1").innerText = "<h1>xxxx</h1>";
// innerHMLT用于设置或读取标签中的文本，会识别HTML元素
document.getElementById("mp2").innerHTML = "<h1>xxxx</h1>";
获取设置节点属性
创建添加删除节点
创建节点
//document.createElement("标签名");
document.createElement("div");添加子节点
//父节点.appendChild(子节点);
var md=document.createElement("div");
document.body.appendChild(md);删除子节点
//父节点.removeChild(子节点)
var md=document.getElementById("md")
document.body.removeChild(md);
事件
某个节点的某个行为。
给节点添加事件
<script>
节点.事件 = function(){
//触发事件时执行的内容
}
</script>常用事件
event对象
在某个函数中传入一个参数，通常为e或event，就可以监听对应的事件。
jQuery
jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。
在页面中导入jQuery.js文件
<script src="jQuery.js文件路径"></script>.在页面中加入另一个script标签，在该标签中写jQuery代码
<script src="jQuery.js文件路径"></script>
<script>
//文档就绪函数
jQuery(document).ready(function(){
//jQuery代码
});
//简化版文档就绪函数
$(function(){
//jQuery代码
});
</script>Query对象转换为dom对象
jQuery对象[0]
jQuery对象.get(0)
dom对象转换为jQuery
$(dom对象)
jQuery中的选择器
基本选择器
层次选择器
过滤选择器
普通过滤
表单元素过滤
属性过滤选择器
操作节点
获取、设置节点内容
获取、设置节点样式
获取、设置节点属性
添加节点
移除节点
复制节点
通过节点获取节点
事件
jquery中的事件绑定方式为：
//jquery节点.事件(function(){});
$("#md").click(function(){
});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){
})
总结
经过这俩周的学习，我们初步学习了前端的基本内容，但都是浅尝即止，并没有过多的时间去巩固，但我们要学会让自己适应这种学习进度，上课不能开小差，不能认为我看一眼知道这个的含义就不跟着老师走，这样是绝对不行的，一不注意就会跟不上进度。
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
