1.1HTML&CSS&JavaScript的作用
HTML 只要用于网页主题结构的搭建
CSS 主要用于美化界面
JS 添加一些提示
一,HTML入门
html
<!-- 1 html文件的根标签<html></html>所有子标签都要在这个标签中间 2 html根标签下有两个一级子标签
<head></head> 头标签 定义那些不直接展示在页面主体但很重要的
1.字符集<meta charset="utf-8"/> 告诉浏览器用什么字符集对文件解码 2.css引入 3.js引入 4.其他 <body></body> 体标签 1 定义要展示到页面主体的标签
-->
<html>
<head>
<title>Improve your concentration</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>15 ways to improve your concentration even when you are busy</h1>
</body>
</html>1 HTML概念词汇解释
标签 tag
- 一对<>就是一个标签
属性 attribute
- 对标签特征进行设置的一种方式 属性一般在开始标签中定义
文本 text
- 双标签中间的文字
元素 element
- 开始标签+属性+文本+结束标签 称之为一个元素
2 HTML语法规则
根标签有且只有一个
无论是单标签还是双标签都需要正确关闭
标签可以嵌套但不能交叉嵌套
注释语法为<!-- -->,注意不能嵌套
属性必须有值,值必须加引号,H5中属性名和值相同时可以省略属性值
HTML中不严格区分字符串使用单双引号
HTM标签不严格区分大小写,但是不能大小写混用
HTML中不允许自定义标签名,强行自定义则无效
二,HTML常见标签
标题,段落,换行
html
<body>
<!--
标题标签 h1-h6
段落标签 p
换行标签 br
水平线标签 hr
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<p>nihao</p>
<br><br>
<p>....</p>
</body>有序列表,无序列表
html
<body>
<!--
有序列表：ol
无序列表：ul
列表项：li
-->
<!-- 有序列表 -->
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>java</li>
<!-- 嵌套 -->
<ol><li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li></ol>
<li>python</li>
<li>php</li>
<li>javascript</li>
<li>go</li>
</ul>
</body>超链接
html
<body>
<!--
超链接标签
<a href="链接地址">点击文字</a>
1 完整的url
2 相对路径 以当前资源的所在路径为出发点去找目标资源
./ 当前路径
../ 上一级路径
3 绝对路径
无论当前资源在什么位置，都以根目录为出发点去找目标资源
以/开头
<a href="链接地址" target="_blank">点击文字</a>
_self 默认值 在当前页面打开
_blank 在新页面打开
-->
<a href="https://www.yuanshen.com/#/">你的最爱</a>
<a href="04hyperlink.html" target="_blank">04hyperlink</a>
<a href="/demo1-html/01firstoage.html" target="_blank">01firstoage</a>
</body>图片标签
html
<body>
<!--
img
src:图片路径
url:网络路径
相对路径：相对于当前html文件
绝对路径：从盘符开始
alt:图片加载失败时显示的文本
title:鼠标悬停时显示的文本
width:宽度
height:高度
-->
<img src="/demo1-html/img/微信图片_20240831230858.jpg" alt="美女图片" title="美女图片" width="300px" />
<br/>
<img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=C76E76BD64F2D317F87C437F092D343DCDB041C6"
alt="图片加载失败时显示的文本" title="风景" width="300px" />
</body>表格标签
html
<!--
table:表格标签
tr:行标签
td:单元格标签
th:表头标签 自带加粗居中
caption:表格标题标签
thead:表头标签
tbody:主体标签
tfoot:底部标签
colspan:跨列
rowspan:跨行
-->
<table border="1" cellspacing="0" width="500" align="center">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张小明</td>
<td>100</td>
<td rowspan="6">
前三名升职加薪
</td>
</tr>
<tr>
<td>2</td>
<td>李小黑</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>王小东</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">2000</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">90</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">80%</td>
</tr>
</tbody>
</table>
表单标签、表单的提交方式、表单项
html
<body>
<!--
form标签
action: 定义数据提交的地址
1 url
2 相对路径
3 绝对路径
method: 定义数据提交的方式
1 get
参数会以键值对形式拼接到url后面
数据直接暴露在地址栏上,不安全
数据量有限制,最大不超过1kb
地址栏上,只能是字符,不能提交文件
相比于post,效率高,但是不安全
2 post
参数默认不放到url后面
数据不暴露在地址栏上,相对安全
提交数据量没有限制
可以提交文件
相比于get,效率低,但是相对安全
表单项标签
表单项标签一定要定义name属性,该属性用于明确提交时的参数名
还需要定义value属性,该属性用于明确提交时的参数值
input
type: 定义表单项的类型
1 text: 文本框
2 password: 密码框
3 submit: 提交按钮
4 reset: 重置按钮
5 button: 普通按钮
6 radio: 单选框
多个单选框使用相同的name属性,表示是同一个组
7 checkbox: 复选框
多个单选框使用相同的name属性,表示是同一个组
8 file: 文件上传
9 hidden: 隐藏域
不显示在页面上,但是可以提交
当我们需要用户提交一些特定信息,但是考虑安全问题,不希望用户看到,可以使用隐藏域
10 image: 图片按钮
11 date: 日期选择框
12 range: 滑动选择框
13 color: 颜色选择框
14 email: 邮箱输入框
15 tel: 电话输入框
16 textarea: 多行文本框
select
下拉列表
option
下拉列表中的选项
selected: 默认选中
-->
<form action="08welcome.html" method="get">
<!-- 添加表单标签 用户输入信息的标签 -->
<input type="hidden" name="id" value="1">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码"> <br/>
<input type="radio" name="sex" value="m" checked>男#默认
<input type="radio" name="sex" value="f">女 <br/>
爱好: <input type="checkbox" name="hobby" value="1">篮球
<input type="checkbox" name="hobby" value="2">足球
<input type="checkbox" name="hobby" value="3">羽毛球 <br/>
个人简介:<textarea name="intro" style="width: 300px;height: 100px;"></textarea><br>
籍贯:
<select name="locations" >
<option value="1" selected>北京</option>#默认
<option value="2">shanghai</option>
<option value="3">jiangxi</option>
<option value="4">guangdong</option>
</select>
<br>
选择头像:
<input type="file" name="photo"><br/>
<br>
<input type="submit" value="登录">
<input type="reset" value="清空"><br/>
</form>
<form>
</form>
</body>
页面布局
html
<body style="background-color: rgb(183, 255, 0);">
<!-- css 设置样式的
通过元素的style属性设置样式
style="属性名:属性值;属性名:属性值;..."
div: 块级元素
自己独占一行,块元素的css样式的宽,高等等,很多都是生效的
span: 行内元素
不独占一行, span的css样式的宽,高等等,很多都是不生效的
-->
<div style="border: 1px solid red;width: 200px;height: 200px;margin: auto; background-color: beige;">123</div>
<br>
<div style="border: 1px solid red;width: 200px;height: 200px;margin: auto; background-color:aquamarine">456</div>
<br>
<div style="border: 1px solid red;width: 200px;height: 200px;margin: auto;background-color: chocolate;">789</div>
<span style="border: 1px solid greenyellow;width: 200px;height: 200px;margin: 10px auto; background-color: rgb(139, 100, 0)">555</span>
</body>特殊字符
html
<body>
<!--
对于某些代码来说,某些符号是有特殊含义的,如果想显示这些字符,需要使用转义字符(字符实体) ,比如< > & " ' 等
空格
> 大于号
< 小于号
& 和号
" 双引号
' 单引号
© 版权符号
® 注册商标符号
-->
<h1><一级标题></h1>
</body>三,CSS的使用
css的引入方式
| Method | Pros | Cons |
|---|---|---|
| 行内式 | Quick and easy for small changes | Difficult to maintain and reuse styles |
| 内部式Internal | Centralized for a single document | Not reusable across multiple documents |
| 外部式External | Reusable, maintainable, and scalable | Requires an extra HTTP request |
引入方式：
1.行内样式
通过元素的style属性，直接给元素添加样式
缺点：代码复用度低，不便于维护
css样式代码和html代码混合在一起,影响阅读,影响性能
2.内部样式
通过在head标签中添加style标签，在style标签中编写css样式代码
需要通过选择器确定样式的作用元素
缺点：代码复用度低，不便于维护(相较于外部样式)
3.外部样式
将css样式代码单独编写到一个.css文件中，通过link标签引入到html文件中
需要通过选择器确定样式的作用元素
优点：代码复用度高，便于维护
对于少量的css样式，可以采用行内样式和内部样式
选择器
1.元素选择器
语法:标签页{}
缺点:同名的元素必须选择一种样式,某些不同名的元素也使用该样式则需要其他元素选择器
2.id选择器 根据id值确定样式的元素作用
一般每个元素都有id属性,但是在一个页面中,id的值不应该相同,id具有唯一性
语法:#id值{}
缺点:如果id值相同,则样式会覆盖
3.class选择器 根据class值确定样式的作用元素
元素的class属性值可以重复,而且一个元素的class属性可以有多个值,多个值之间用空格隔开
语法:.class属性值{}
html
<body>
<input id="btn1" class="shapeclass colorClass fontClass borderClass" type="button" value="按钮">
<input id="btn1" class="shapeclass" type="button" value="按钮">
<input id="btn3" type="button" value="按钮">
<input id="btn4" type="button" value="按钮">
</body>浮动
css的浮动使得元素脱离文档流，按照指定的方向（左或右发生移动），直到它的边缘碰到包含框或另一个浮动框的边框为止。
浮动后一定不会将文字挡住，文字会被挤到别的方向，就像水一样。
文档流是文档中可显示对象在排列时所占用的位置，脱离文档流就是在页面中不占位置了。
一个元素脱离文档流后，它在文档流中的下一个元素就会占用它的位置。
定位
position
static 默认值
relative 相对定位 相对于自身原来的位置
absolute 绝对定位
fixed 固定定位 相对于浏览器窗口
sticky 粘性定位
left
right
top
bottom
盒子模型
CSS盒子模型（Box Model）是网页布局和设计的基础概念之一。它描述了一个元素在网页中所占据的空间，包括内容、内边距（padding）、边框（border）和外边距（margin）
padding
内边距，指的是内容与边框之间的距离
margin
外边距，指的是边框与边框之间的距离
四,JavaScript
1.数据类型
1 js中的变量的声明 统统使用var关键字 int i = 10; var i = 10;
js是弱类型的,不是没有类型的,变量在声明式不指定类型,赋值时才确定类型
2 js中常见的数据类型
数值类型 number 整数 浮点数
字符串类型 string
布尔类型 Boolean
引用类型 Object
function类型 function
命名未赋值 undefined
空值 null 类型是Object
js中使用var关键字声明变量的特点
弱类型变量的声明,可以统一声明成var
var声明的变量可以再次声明
变量可以使用不同的数据类型多次赋值
4.js语句可以以;结尾,也可以不
5.变量标识符严格区分大小写
6.标识符的命名规则
1.标识符可以包含字母,数字,下划线,美元符号
2.标识符不能以数字开头
3.标识符不能是js的关键字
4.标识符不能包含空格
7.如果使用没有声明的变量,js会报错
8.如果一个变量只声明没有赋值,那么这个变量的值是undefined
2.运算符
1 算数 + - * / %
2 复合算数 ++ -- += -= *= /= %=
3 关系 > < >= <= == = != !==
4 逻辑 || &&
5 条件 条件表达式? 表达式1:表达式2
6 位 | & ^ << >> >>>
| 运算符 | 名称 | 是否进行类型转换 | 推荐使用场景 |
|---|---|---|---|
== |
宽松相等 | 是 | 一般不推荐 |
=== |
严格相等 | 否 | 推荐，更安全 |
!= |
宽松不等 | 是 | 一般不推荐 |
!== |
严格不等 | 否 | 推荐，更安全 |
3.js的流程控制和函数
分支结构
循环结构
<!--和java一样,除了foreach是in不是: -->
4.js常见对象-数组API测试
1. 数组创建与初始化
| 方法 | 描述 | 示例 |
|---|---|---|
Array() |
创建一个空数组或指定长度的数组（注意：指定长度时，数组是稀疏的）。 | let arr = new Array(5); 创建长度为 5 的空数组。 |
Array.of(...elements) |
创建一个新数组，包含传入的元素。 | let arr = Array.of(1, 2, 3); 创建数组 [1, 2, 3]。 |
Array.from(arrayLike) |
将类数组对象或可迭代对象转换为数组。 | let arr = Array.from("hello"); 创建数组 ['h', 'e', 'l', 'l', 'o']。 |
2. 添加元素
| 方法 | 描述 | 示例 |
|---|---|---|
push(...elements) |
将元素添加到数组的末尾，并返回新数组的长度。 | arr.push(4); 将 4 添加到数组末尾。 |
unshift(...elements) |
将元素添加到数组的开头，并返回新数组的长度。 | arr.unshift(0); 将 0 添加到数组开头。 |
3. 删除元素
| 方法 | 描述 | 示例 |
|---|---|---|
pop() |
删除并返回数组的最后一个元素。 | let last = arr.pop(); 删除并返回最后一个元素。 |
shift() |
删除并返回数组的第一个元素。 | let first = arr.shift(); 删除并返回第一个元素。 |
splice(start, deleteCount, ...items) |
从数组中删除或替换元素。 | arr.splice(1, 2); 从索引 1 开始删除 2 个元素。 |
4. 查找元素
| 方法 | 描述 | 示例 |
|---|---|---|
indexOf(element) |
返回元素首次出现的位置，如果没有找到返回 -1。 |
let index = arr.indexOf(2); 返回 2 的索引。 |
lastIndexOf(element) |
返回元素最后一次出现的位置，如果没有找到返回 -1。 |
let lastIndex = arr.lastIndexOf(2); 返回 2 的最后一次出现的索引。 |
includes(element) |
检查数组中是否包含某个元素，返回布尔值。 | let hasElement = arr.includes(2); 检查是否包含 2。 |
find(callback) |
返回第一个符合条件的元素。 | let result = arr.find(x => x > 2); 返回第一个大于 2 的元素。 |
findIndex(callback) |
返回第一个符合条件的元素的索引。 | let index = arr.findIndex(x => x > 2); 返回第一个大于 2 的索引。 |
5.事件的绑定
1.什么是事件
HTML时间可以是浏览器行为,也可以是用户行为. 当这些行为发生时,可以自动出发对应的JS函数的允许,我们称之为事件发生,JS的时间驱动指的就是行为触发代码运行的这种特点
2.常见的事件
鼠标事件 (Mouse Events)
| 事件类型 | 触发条件 |
|---|---|
click |
鼠标点击元素时触发 |
dblclick |
鼠标双击时触发 |
mouseover |
鼠标悬停在元素上时触发 |
mouseout |
鼠标移出元素时触发 |
mousedown |
鼠标按下时触发 |
mouseup |
鼠标松开时触发 |
mousemove |
鼠标在元素上移动时触发 |
键盘事件 (Keyboard Events)
| 事件类型 | 触发条件 |
|---|---|
keydown |
按下键盘上的键时触发 |
keyup |
释放键盘上的键时触发 |
keypress |
按下键（已废弃，尽量使用 keydown） |
表单事件 (Form Events)
| 事件类型 | 触发条件 |
|---|---|
focus |
元素获得焦点时触发 |
blur |
元素失去焦点时触发 |
change |
表单元素值变化时触发 |
input |
输入框内容发生变化时触发 |
submit |
表单提交时触发 |
窗口和文档事件 (Window & Document Events)
| 事件类型 | 触发条件 |
|---|---|
resize |
窗口大小发生变化时触发 |
scroll |
页面滚动时触发 |
load |
页面或资源加载完成时触发 |
unload |
页面卸载时触发（已废弃，尽量使用 beforeunload） |
beforeunload |
页面关闭前触发 |
error |
资源加载失败时触发 |
拖拽事件 (Drag Events)
| 事件类型 | 触发条件 |
|---|---|
drag |
拖拽元素时触发 |
dragstart |
开始拖拽元素时触发 |
dragend |
拖拽结束时触发 |
dragover |
拖拽到目标元素上时触发 |
drop |
拖拽元素释放时触发 |