目录
Web、Js知识整理
8.14
HTML简介
常用标签
- input标签的type属性
- input标签的name属性尤为重要
| 标签名 | 作用 | 类型 | 标签名 | 作用 | 类型 |
|---|---|---|---|---|---|
<h1></h1>~<h6></h6> | 标题，逐渐变小 | 块级元素 | <p></p> | 段落 | 块级元素 |
<ul></ul>/<ol></ol> | 无序/有序列表 | 块级元素 | <li></li> | 列表中的项 | 块级元素 |
<span></span> | 行内文字 | 行内元素 | <a href=""></a> | 超链接 | 行内元素 |
<img src="资源路径" alt="提示文字"/> | 图片 | 行内元素 | <input type=""/> | 表单元素 | 行内元素 |
<form action="提交路径" method="提交方式"></form> | 表单 | 块级元素 | <select><option value="实际值">显示文字</option></select> | 下拉菜单 | 行内元素 |
<div></div> | 块 | 块级元素 | <table><tr><th></th></tr><tr><td></td></tr></table> | 表格相关 | 块级元素 |
<button></button> | 按钮 | 行内元素 | <br/> | 换行 | 块级元素 |
<iframe></iframe> | 浮动框架 | 块级元素 |
HTML介绍
HTML(HyperText Markup Language) ，超文本标记语言，用于描述网页的一种语言
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫web 页面
HTML标签
HTML标记标签通常被称为HTML标签(HTML tag)
HTML标签是由尖括号包围的关键词，比如 < html >
HTML 标签通常是成对出现的，比如 < b > 和 < /b >
标签对中的，第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
标签中间可放文本内容，例如：<标签>内容</标签>
HTML元素
严格来讲, 一个 HTML 元素包含了开始标签与结束标签以及内容
例，HTML元素：< p >这是个HTML元素< /p >
Web浏览器
Web浏览器，是用于读取HTML文件，并将其作为网页显示
Web浏览器：谷歌浏览器，Internet Explorer，Firefox，Safari
浏览器，并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户
HTML网页结构
只有 < body > 区域 才会在浏览器中显示
<!DOCTYPE> 声明
< !DOCTYPE >文档类型声明(Document Type Declaration)，用于告知 Web 浏览器页面当前页面使用的HTML文档版本是哪个
即使网络上有很多不同的软件，若能够正确声明HTML版本，浏览器就能正确显示出来
doctype声明不区分大小写
以下声明均可，
< !DOCTYPE HTML > 声明的版本是，HTML5文档，通用声明
<!DOCTYPE HTML>
<!doctype HTML>
<!doctype html>
<!Doctype html>
声明位于文档中的最前面的位置，处于 < htm l> 标签之前
< !DOCTYPE > 声明不是一个 HTML 标签，因此不需要关闭标签
< !DOCTYPE > 声明一个HTML文档的版本。添加声明确，保浏览器能够预先知道文档类型
中文编码(mate)
< meta > 元素来描述HTML文档的描述，关键词，作者，字符集
目前在大部分浏览器中，直接输出中文会出现中文乱码，需要在头部将字符声明为 UTF-8
< meta charset=“UTF-8” >
HTML基础
HTML元素
HTML 文档由 HTML 元素定义
HTML元素=<开始标签>元素内容</结束标签>
嵌套的 HTML元素
HTML文档，由相互嵌套的HTML元素构成
大多数HTML元素可以嵌套
即，HTML 元素可以包含其他 HTML 元素
HTML 空元素
没有内容的 HTML 元素被称为空元素
空元素是在开始标签中关闭，在开始标签中添加斜杠
< br />，是关闭空元素的正确方法
< br > 在所有浏览器中都是有效的
但使用 < br / > 其实是更长远的保障
HTML提示：推荐小写标签
HTML 标签对大小写不敏感，< P > 等同于 < p >
万维网联盟(W3C)，在 HTML 4 中推荐使用小写
HTML属性
HTML属性，是 HTML 元素提供的附加信息
HTML属性常用引用属性值
属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题
在某些个别的情况下，若属性值本身就含有双引号，那么就必须使用单引号
例如：
name=‘John “ShotGun” Nelson’
HTML提示：推荐小写属性
属性和属性值对大小写不敏感
万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值
HTML常用属性
HTML标题 h
标题（Heading）是通过 < h1> - < h6> 标签进行定义的
< h1> 定义最大的标题， < h6> 定义最小的标题
浏览器会自动地在标题的前后添加空行
HTML 标题 标签只用于标题
不要仅仅是为了生成粗体或大号的文本而使用标题
搜索引擎使用标题，为该网页的结构和内容编制索引
标题来呈现文档结构,用户通过标题来快速浏览该网页
HTML分隔线[水平线] hr
< hr> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容
![HTML分隔线[水平线]](https://img-blog.csdnimg.cn/img_convert/edfbe9bca435bb500f2e1cdfb56bf749.png)
HTML注解< !-- 内容 -->
< !–…–>注释标签，用来在源文档中插入注释，且注释不会在浏览器中显示
快捷键：ctrl+/
HTML段落 p
HTML可以将文档分割为若干段落， < p> …< /p>标签定义段落
HTML换行 br
在不产生一个新段落的情况下进行换行（新行），请使用 < br> 标签
< br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签
HTML 输出- 使用提醒
对于 HTML，不能在 HTML 代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行
所有连续的空格或空行都会被算作一个空格
HTML 代码中的所有连续的空行或换行，被显示为一个空格
HTML文本格式化
标签 < strong> 替换加粗标签 < b> 来使用, < em> 替换 < i>标签使用
标签的含义是不同的：
< b> 与< i> 定义粗体或斜体文本
< strong> 或者 < em>意味着呈现的文本是重要的，要突出显示
字符实体(特殊字符)
例空格、大于、小于、and等
格式：&+英文+；
nbsp 空格：& nbsp
lt 小于号：<
gt 大于号：>
amp 与：&
yen 人民币：¥
copy 版权：©
reg 注册商权：®
div与span
容器div：控制内容块的标签,用于布局< div>内容块< /div>
span文字标签，设置文字样式< span>内容块< /span>
HTML链接 a
超链接可以是一个字，一个词，或一组词，或一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分
标签< a> 中使用了href属性来描述链接的地址
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示
HTML 链接语法
< a href=“url”>链接文本</ a>
超链接a 点击标签体进行页面跳转[href中写跳转至哪]
<a href="http://www.baidu.com">百度[标签体]</a>
HTML链接- target 属性
target属性指定打开页面方式，默认在当前窗口创建
_self：当前窗口
_blank：打开一个新窗口
_parent：父窗口
_top：最顶层窗口
<a href="http://www.hqyj.com" target="_blank">华清软件</a>
HTML链接-锚点#+id
锚点， href属性用**#开头，后面跟上id的值**，点击这个连接，则网页显示第一行就会调转到id标签位置
<!-- 点击"连接到本页的锚点"，跳转至id为num1的地方-->
<h1 id="num1">首页，锚点</h1>
<a href="#num1">连接到本页的锚点</a>
HTML头部
HTML < head> 元素
< head> 元素包含了所有的头部标签元素
在 < head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息
添加在头部区域的元素标签: < title >， < style >， < meta >，< link >， < script >
HTML < title> 元素
< title> 标签定义了不同文档的标题
< title> 在 HTML/XHTML 文档中是必需的
< title> 元素
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
HTML < link> 元素
< link> 标签定义了文档与外部资源之间的关系
< link> 标签通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML < style > 元素
< style> 标签定义了HTML文档的样式文件引用地址
在< style> 元素中，可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
HTML< meta>元素
meta标签描述了一些基本的元数据。
< meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析
charset=UTF-8，中文编码
<meta charset="UTF-8">
name=“keywords”，为搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
name=“description”，为网页定义描述内容
<meta name="description" content="免费Web&编程教程">
http-equiv=“refresh” 每隔定时时间刷新当前页面
<!--每30秒钟刷新当前页面 -->
<meta http-equiv="refresh" content="30">
HTML < script> 元素
< script>标签用于加载脚本文件，如： JavaScript
HTML < base> 元素
< base> 标签描述了基本的链接地址/链接目标
该标签作为HTML文档中所有的链接标签的默认链接
HTML图像
HTML 中，图像由< img> 标签定义
< img> 是空标签，意思是说，它只包含属性，并且没有闭合标签
需要使用源属性src(source)，其的值是图片资源的路径，即是网上的图片，也可以是工程中的一个文件图片(本地图片)
HTML中的路径两种方式：相对路径、绝对路径
相对路径：./img/boy.jpg 或 img/boy.jpg
绝对路径：根目录(/)开始，通常根目录(/)代表ulr到端口的位置；即一个项目的开始
[.]是当前目录、[. .]是上级目录
<!-- 相对路径：./img/boy.jpg 或 img/boy.jpg -->
<img src="./img/boy.jpg" alt="男孩1相对路径" height="200px"/>相对路径
<!-- 绝对路径：根目录(/)开始，通常根目录(/)代表ulr到端口的位置 即一个项目的开始-->
<!-- http://127.0.0.1:8848/day1/first.html 根目录：http://127.0.0.1:8848 -->
<!-- .是当前目录、..是上级目录 -->
<img src="/day1/img/boy.jpg" alt="男孩2绝对路径" width="200px"/>绝对路径
<img src="http://i2.chinanews.com.cn/simg/hnhd/2023/08/14/1/3894139818873583181.jpg" width="800px" alt="风景秀美的安吉余村"/>网上的图片
alt属性
若图片显示有问题，则在图片位置会显示alt内容
width,height属性
指定图片的宽高，默认图片大小为本身大小
建议只设置一个属性，另一个属性等比例缩放
HTML列表
无序列表ul-li
无序列表是一个项目列表，默认小黑圆圈进行标记
无序列表始于< ul> 标签,每个列表项始于 < li> 标签
无序列表的几种序号，在ul类 type：
square：方形图标
circle：空心圆点
disc：实心圆点，默认值
ist-style-image：自定义图行
ul自定义序号图标list-style-image
list-style-image：url(‘图片路径’)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>评分组件</title>
<style type="text/css">
.star{
width: 200px;
list-style-image: url(img/star1.png);
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<ul class="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
let star = document.querySelector('.star')
let lis = star.children
let index
for(let i=0;i<lis.length;i++){
// mouseover时把鼠标位置之前的星点亮
lis[i].addEventListener('mouseover',()=>{
noLight()
for(let j=0;j<=i;j++){
lis[j].style.listStyleImage = "url(img/star3.png)"
}
})
// mouseout时评分的星点亮
lis[i].addEventListener('mouseout',()=>{
noLight()
for(let j=0;j<=index;j++){
lis[j].style.listStyleImage = "url(img/star3.png)"
}
})
// click事件设置评分
lis[i].addEventListener('click',()=>{
index = i
}
)
}
function noLight(){
for(let i=0;i<lis.length;i++){
lis[i].style.listStyleImage = "url(img/star1.png)"
}
}
</script>
</body>
</html>
有序列表ol-li
序列表也是一列项目，列表项目使用数字进行标记
有序列表始于 < ol > 标签,每个列表项始于 < li> 标签，列表项使用数字来标记
有序列表的几种序号，在ol类type：
1:阿拉伯数字,默认值
A:大写的英文字母
a:小写的英文字母
I:大写的罗马数字
i:小写的罗马数字
列表嵌套
列表的嵌套,有序无序均可嵌套
无序套无序，有序套有序
无序套有序，有序套无序
HTML样式CSS
CSS (Cascading Style Sheets)， 用于渲染HTML元素标签的样式
内联样式，直接写在标签；在HTML元素中使用"style" 属性
内部样式：写在head里，用style标签；在HTML文档头部 < head> 区域使用< style> 元素 来包含CSS
外部引用，使用外部 CSS 文件；单独写为一个css文件
HTML样式常用属性
| 文本与字体 | 边框与尺寸 | 位置 | 背景 | 边距 |
|---|---|---|---|---|
| font-size | width:50px/50%/50vw | position:relative/absolute/fixed | background-color:#fcc | margin-left:20px |
| font-family | height:50px/50%/50vh | left/right/bottom/top:20px | background-image:url() | margin:10px auto |
| font-weight:bold/light | border:1px solid red | background-size:cover | padding:10px 20px 30px | |
| color | border-radius:50%/5px | 显示方式 | background-position | |
| text-decoration | border-collapse:collapse | display:block/inline-block/inline/flex/none | ||
| list-style-type |
字体相关样式
color，字体颜色
background-color，背景颜色
font-size，字体大小
font-family，字体类型
text-align，文字对齐方式 [center居中对齐]
边框相关样式
span无高宽
width，宽度
height，高度border，边框线[组合样式 ]
border: 3px solid red;
3px：边框粗细，
solid：边框类型：实线solid，虚线dotted，
red：线条颜色border-radius，边框圆角 单位px，控制弧度
若是正方形，设为高宽像素的一半即为圆，或百分比可以百分比：50%表示一个圆；
若是正方形，设为高宽像素的一半即为椭圆，可以百分比：50%表示一个椭圆；
颜色的三种写法
- 颜色名字[英文名]
- rgb(红,绿,蓝)
每颜色的数值是0~255，[0是无,255最深]
rgb(0,0,0) 黑色,rgb(225,225,225) 白色
- 十六进制表示方式
每两位表示一种颜色[依次为：红绿蓝]
0：00；255：FF
<style type="text/css">
/*id选择器*/
#sp1{
/*颜色名字 */
color: red;
}
/* class选择器*/
.b{
color: rgb(0 155, 0);
/*
rgb(红,绿,蓝),每颜色的数值是0~255,[0是无,255最深]
rgb(0,0,0) 黑色,rgb(225,225,225) 白色
*/
}
/* 标签名选择器 */
p{
color: #0000FF;
/*
十六进制表示方式，每两位表示一种颜色[依次为：红绿蓝]
0：00；255：FF
*/
}
</style>
内联样式(标签style属性)
当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用内联样式的方法是在相关的标签中使用样式属性
样式属性可以包含任何 CSS 属性
内部样式(head,style标签)
当单个文件需要特别样式时，就可以使用内部样式表;在< head> 部分通过 < style>标签定义内部样式表
id选择器：以#开头，后面紧跟id的值
以#开头，后面紧跟id的值，一般用于单个标签设置样式，因为id不能重复
class选择器：以.开头，后面紧跟class的名字即值
以.开头，后面紧跟class的名字即值；class选择器可重复使用，只要标签加上该class名字，就会受影响
标签名选择器：用标签名作为选择器
标签名选择器，用标签名作为选择器,对该页面上所有的同名标签起作用
外部引用(外部 CSS 文件)
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
使用外部样式表，通过更改一个文件来改变整个站点的外观
三种样式优先顺序
三种样式优先顺序：内联样式，内部样式、外部样式
当三个同时存在三个时，以就近原则为准
选择器分组和class组合
class组合：标签的class可以写多个，用空格分割
选择器分组：写样式时，常把公共的样式抽出来单独写，特有的样式另外再写一个，设置class属性用多个样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1,.p2,.p3{
color: red;
}
.font20{
font-size: 20px;
}
.font30{
font-size: 30px;
}
.font40{
font-size: 40px;
}
</style>
</head>
<body>
<!-- 标签class 可以写多个 用空格分割
写样式时，常把公共的样式抽出来单独写，特有的样式另外再写一个，设置class属性用多个样式
-->
<p class="p1 font20">第一个p标签</p>
<p class="p2 font30">第二个p标签</p>
<p class="p3 font40">第三个p标签</p>
</body>
</html>
其他选择器
-
后代选择器：两个选择器之间存在空格符号(’ ')；
-
子元素选择器：两个选择器之间存在大于符号(‘>’)
-
相邻兄弟选择器：两个选择器之间存在加号符号(‘+’)
-
后续兄弟选择器：两个选择器之间存在波浪号符号(‘~’)
-
伪类选择器：link、visited、hover、active
link：未访问之前的样式
visited：已访问的样式
hover：鼠标移到链接上的样式；hover必须要放在link和visited之后才生效
active：鼠标键按下时的样式；active必须要放在hover之后
后代选择器：两个选择器之间存在空格符号(’ ')；
在标签box1下的，p标签文本文字全文红色
.box1(class选择器)+空格+p(标签选择器)
第一个选择器限定范围
第二个选择器在第一个选择器中的所有后代(子子孙孙)标签中再次筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 在box1下的标签，p标签文本文字红色
.box1(class选择器)+空格+p(标签选择器)
两个选择器之间存在空格 表示后代选择器
第一个选择器限定范围 第二个选择器在第一个选择器中的所有后代(子子孙孙)标签中再次筛选
*/
.box1 p{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<p>box1下的p标签</p>
<div class="box2">
<p>box2下的p标签</p>
<div class="box3">
<p>box3下的p标签</p>
<span>box3下的span标签</span>
<p>box2下的p2标签</p>
</div>
</div>
</div>
</body>
</html>
子元素选择器：两个选择器之间存在大于符号(‘>’)
子元素选择器 .box1(class选择器)+>+p(标签选择器)
只能在下一层的标签受到影响[儿子会受到影响，孙不会]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 子元素选择器 .box1(class选择器)+>+p(标签选择器)
只能在下一层的标签受到影响[儿子会受到影响，孙不会]
*/
.box2>p{
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<div class="box1">
<p>box1下的p标签</p>
<div class="box2">
<p>box2下的p标签</p>
<div class="box3">
<p>box3下的p标签</p>
<span>box3下的span标签</span>
<p>box2下的p2标签</p>
</div>
</div>
</div>
<div class="box2">
<p>外部，box2下的p标签1</p>
<p>外部，box2下的p标签2</p>
</div>
</body>
</html>
相邻兄弟选择器：两个选择器之间存在加号符号(‘+’)
相邻兄弟，用+分隔
紧挨它的后续的第一个兄弟标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 相邻兄弟，用+分隔
紧挨它的后续的第一个兄弟标签
*/
.first-p+p{
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<div class="boxb">
<p class="first-p">boxb下的第一个p标签</p>
<p >boxb下的第二个p标签</p>
<p >boxb下的第三个p标签</p>
</div>
</body>
</html>
后续兄弟选择器：两个选择器之间存在波浪号符号(‘~’)
后续兄弟，用~分隔
它后面的所有兄弟标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后续兄弟，用~分隔
它后面的所有兄弟标签
*/
.first-p~p{
font-size: 28px;
color: rebeccapurple;
}
</style>
</head>
<body>
<div class="boxb">
<p class="first-p">boxb下的第一个p标签</p>
<p >boxb下的第二个p标签</p>
<p >boxb下的第三个p标签</p>
</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的伪类选择器</title>
<style type="text/css">
/* hover必须放在link与visited后面才生效
active必须放在hover之后才生效
*/
/*link 未访问之前的样式 */
a:link{
color: orange;
}
/* visited已访问的样式 */
a:visited{
color: gainsboro;
}
/* hover鼠标移动到链接上的样式 */
a:hover{
color: green;
}
/* active鼠标按下去且不放的样式 */
a:active{
color: red;
}
</style>
</head>
<body>
<a href="index.html">首页</a>
</body>
</html>
标签的显示和隐藏
display:none，隐藏标签
display:block，显示标签
cursor: pointer，光标为手形
hover：悬停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过hover让标签显示出来</title>
<style type="text/css">
.box1{
height: 100px;
width: 100px;
/* 隐藏标签 */
background-color: red;
/* 隐藏标签：none隐藏 ；block显示 */
display: none;
}
/* hover 悬停 */
/* .show:hover+.box1 兄弟选择器 */
.show:hover+.box1{
/* 显示标签 */
display: block;
}
/* cursor 设置光标变成手形状pointer
默认为：文本输入形状
*/
.show{
cursor: pointer;
}
</style>
</head>
<body>
<span class="show">显示</span>
<div class="box1">
</div>
</body>
</html>
标签页切换-其他选择器运用
当光标移动到第一页上，显示div1, 以此类推
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签页切换</title>
<style type="text/css">
.box1,.box2,.box3{
height: 400px;
width: 400px;
border: 1px solid red;
display: none;
}
/* 空格 影响子子孙孙 第一个限制范围，第二个在第一个范围里筛选影响 */
/* > 影响儿子 第一个限制范围，第二个在第一个范围里中只影响下一层 */
/* ~后续所有该兄弟，+相邻的一个该兄弟*/
.f1:hover~.box1,.f2:hover~.box2,.f3:hover~.box3{
display: block;
}
</style>
</head>
<body>
<span class="f1">第一页</span>
<span class="f2">第二页</span>
<span class="f3">第三页</span>
<div class="box1">
<p>第一页内容</p>
</div>
<div class="box2">
<p>第二页内容</p>
</div>
<div class="box3">
<p>第三页内容</p>
</div>
</body>
</html>
8.15
表格table
HTML 表格，是一种用于展示结构化数据的标记语言元素；由 < table> 标签来定义
border：边框线，0-无边框；
cellspacing：单元格之间的间距
cellpadding：单元格的内边距，边框与文字的距离
style属性：border-collapse样式，让边框双线重叠在一起变单线
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
子标签
caption：表格名称，显示在表格上面； < caption>内容< /caption>
tr (table row) ：行，表示表格的一行；< tr>行< /tr>
th ( table header)：列，表示表格一个数据单元格；< th>列< /th>
td (table data)：列，表示表格的表头单元格；< td>列< /td>
[th：表头的列，文字粗体；td：数据行的列]
< table>元素表示整个表格，主要包含< thead> 与< tbody>
当有thead和tbody时，标签的顺序无关；
不管thead放在什么位置，都会把thead显示在第一行
行列合并
同行上的，为列合并；不同行的，为行合并
对此代码进行行列合并:
rowspan 行合并
在第一行的列加上rowspan属性 ，值是要合并行数；其次把后面行对应重复的列都删掉
行合并，列与后面行均要变
列合并colspan
在第一行的列加上rowspan属性，值是要合并行数；其次把后面行对应重复的列都删掉
只会影响一行，不会影响后面行
行列合并练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
td,th{
border: 1px solid orangered;
}
th{
height: 30px;
text-align: left;
background-color: coral;
}
td{
width: 120px;
height: 25px;
text-align: center;
}
table{
height: 30px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="margin: auto;">
<caption style="font-size: 24px;"><b>个人简历</b></caption>
<tr>
<th colspan="7">求职意向</th>
</tr>
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>出生日期</td>
<td></td>
<td rowspan="5"></td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td>籍贯</td>
<td></td>
<td>婚姻状况</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>现所在地</td>
<td></td>
<td>健康状况</td>
<td></td>
</tr>
<tr>
<td>外语水平</td>
<td colspan="2"></td>
<td>计算机水平</td>
<td colspan="2"></td>
</tr>
<tr>
<td>外语水平</td>
<td colspan="2"></td>
<td>计算机水平</td>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="7">工作经历</th>
</tr>
<tr>
<td>工作时间</td>
<td colspan=2"">工作单位</td>
<td>职务</td>
<td colspan="2">主要职责</td>
<td>离职原因</td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<th colspan="7">主要职业培训经历</th>
</tr>
<tr>
<td>培训时间</td>
<td colspan=2"">培训机构名称</td>
<td>培训地点</td>
<td colspan="3">培训内容</td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan=2""></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<th colspan="7">获得证书及职称情况</th>
</tr>
<tr>
<td colspan="2">获得证书/职称名称</td>
<td colspan=2"">评定专业</td>
<td>获得/注册时间</td>
<td colspan="2">颁发/注册时间</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan=2""></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>个人爱好</td>
<td colspan="6"></td>
</tr>
<tr>
<td>个人特长</td>
<td colspan="6"></td>
</tr>
<tr>
<td>自我评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
表单form
表单，是在网页上填表格，在数据的修改，新增等时候用到表单
表单类型的输入框，包含文本，单选，复选，下拉框，提交按钮
表单提交后，会把输入的数据发送给服务器
基本表单
action属性：后台接受数据的接口URL
method属性：提交方式，get与post
-
post：数据隐藏提交，长度无限制；
-
get-把数据附加在url上提交，长度有限制;
http 😕/127.0.0.1:8848/add?userName=aaa&userPwd=123
url之间是?分割；参数名与值之间是=分割；多个参数之间用&分割
enctype=“multipart/for-data”， 若上传文件，form标签需要添加这个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 表单 在网页上填写表格，数据修改、新增等用到表单
表单类型 输入框包含文本、单选、复选、下拉框、提交按钮
表单提交把输入数据发送给服务器-->
</head>
<body>
<!-- 表单
action属性：后台接受数据的接口URL
method属性：提交方式
get-把数据附加在url上提交，长度有限制;
例如：http://127.0.0.1:8848/add?userName=aaa&userPwd=123
url之间是?分割；参数名与值之间是=分割；多个参数之间用&分割
post-数据隐藏提交，长度无限制；
enctype="multipart/for-data" 若上传文件，form标签需要添加这个属性
-->
<form action="/add" method="get">
<!-- input默认输入文本框
input type="text",name="usrName"文本框 字符文字数字均可
input type="password" name="" 密码框，输入的内容以星号显示 -->
用户名：<input type="text",name="userName">
密码：<input type="password" name="userPwd" >
<!-- 提交按钮，点击时form提交到后台服务
点击按钮，提交至/add网页
按钮type="submit"、按钮名字value="提交" -->
<input type="submit" value="提交" />
</form>
</body>
</html>
form 标签
表达标签的公共的属性
id: 标签唯一识别码，每个页面上不能有重复的id
name: 标签名，后台根据name来获取输入值
value: 输入的值
autocomplete: 是否显示历史记录, 设为off就不显示
常用类型
- input type=“text”，文本框
- input type=“password”，以星号显示
- input type=“number”，只能输入数字
- input type=“radio”，单选框
- input type=“checkbox”，复选框
- select option 选项，下拉框
- input type=“checkbox”，文本域
- input type=“file”，上传照片
- input type=“submit”，提交按钮，全页更新
- input type=“button”， 按钮，局部更新
input type=“text”，文本框
input type=“text”，文本框，输入字符文字数字均可
学生姓名：<input type="text" name="setName" value="三",autocomplete="off">
input type=“password”，输入的内容以星号显示
密码：<input type="password" name="userPwd" >
input type=“number”，只能输数字
学生年龄：<input type="number" name="setAge">
input type=“radio”，单选框
同一组单选框name要一样，value值是后台获取数据需要必写；checked：默认选择中，
<!-- 单选框：radio；同一组的单选框name要一样，才能触发单选 -->
<!-- checked属性表示选中，单选复选框均可使用此属性 -->
学生性别：<input type="radio" name="stuSex" value="男">男
<input type="radio" name="stuSex" value="女" checked>女
input type=“checkbox”，复选框
可多选或不选，同一组复选框name要一样、value值是后台获取数据需要必写；checked：默认选择中
<!-- 复选框：checkbox； 可多选或不选-->
学生爱好：<input type="checkbox" name="stuHobby" value="唱歌">唱歌
<input type="checkbox" name="stuHobby" value="跳舞">跳舞
<input type="checkbox" name="stuHobby" value="运动"checked>运动
<input type="checkbox" name="stuHobby" value="旅游" checked>旅游
select option 选项，下拉框
value值是后台获取数据需要必写；默认选中第一个，设置selected：默认选中
option标签的value是提交到后台的值；标签体是显示的内容
selected属性，当前选项被选中
select标签上添加：multiple属性，则下拉框可多选值
<!--下拉框select option 选项 不占用屏幕空间
选中selected，默认选中第一个
option标签的value是提交到后台的值；标签体是显示的内容
selected属性，当前选项被选中
select标签上添加：multiple属性，则下拉框可多选值 -->
学生籍贯： <select name="stuBirthplace" multiple>
<option value="">请输入...</option>
<option value="重庆">重庆</option>
<option value="四川">四川</option>
<option value="贵州">贵州</option>
<option value="云南">云南</option>
</select>
input type=“checkbox”，文本域
input type=“checkbox”，文本域，可写入一大段文字
cols：宽度(列)；rows：高度(行)
自我评价：<textarea name="stuDescript" cols="30" rows="10"></textarea>
input type=“file”，上传照片
input type=“file”，上传文件标签，会打开文件浏览器让你选择文件
上传照片：<input type="file" name="stuPhoto">
input type=“submit”，按钮
input type=“submit”，提交按钮，点击时form提交到后台服务
<input type="submit" value="提交"/>
input type=“button”， 按钮
input type=“button”， 按钮，与submit类似
<input type="button" value="按钮">
背景-图片
background-image：url(‘图片路径’)，背景图片
background-size：cover、contain，背景图片大小
cover：直接把图片拉伸与容器高宽一致(填满整个容器)，图片可能会变形
contain：等比例放大图片，直到高或宽一边跟容器相等
background-repeat：no-repeat，背景图片不会重复(平铺)
background-position：center，背景图片位置居中
opactity：0~1，背景图片透明度；0：不透明、1：透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style type="text/css">
.box1{
background-image: url("img/彭于晏.jpg");
width: 400px;
height: 500px;
/*contain：图片放大[宽度或长度热任意一边一致] 等比例方法
cover：图片放大，直接把图片拉伸跟容器的高宽一致(填满整个容器),图片可能变形
*/
background-size: contain;
/* 背景图片不会重复 */
background-repeat: no-repeat;
/*背景图片居中显示 */
background-position: center;
/* 透明度，0~1 1为不透明 0为完全透明 */
opacity:0.5;
}
</style>
</head>
<body>
<!-- 对区域标签设置背景 -->
<div class="box1">
</div>
</body>
</html>
边框
border
boder：1px solid red ；[三个属性值]
第一个属性值：border-width，单位px
第二个属性值：border-style，边框线的虚实：solid实线、
第三个属性值：border-color，边框线的颜色；transparent 透明
一个div有四条边，可以通过border-width、border-style、border-color，单独对四条边设置；[四条边的顺序：上、右、下、左 、顺时针方向]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
.box1{
height: 100px;
width: 100px;
/* border: 1px solid darkgoldenrod; */
/* 可以对border四条边进行设置 上、右、下、左[顺时针]
设置一个值：代表上右下左
设置两个值：代表上下、左右
设置四个值：代表上、右、下、左[顺时针]
*/
border-width: 1px 3px 5px 7px;
border-style: dashed dotted solid ridge;
border-color: red green blue palevioletred;
/*border-radius：设置四个角的弧度*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
用div边框实现三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现标注框</title>
<style type="text/css">
.box1{
height: 400px;
width: 400px;
margin: auto;
border: 1px solid red;
}
.box2{
height: 100px;
width: 200px;
border-radius: 12%;
margin: auto;
background-color: blue;
}
.box3{
height: 0px;
width: 0px;
border-width:20px;
border-style: solid;
border-color: blue transparent transparent transparent;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
box-shadow 阴影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style type="text/css">
.box3{
width: 200px;
height: 60px;
background-color: red;
/* 阴影 第一个参数是长，第二个参数是宽 第三个参数颜色 */
box-shadow: 10px 3px dodgerblue;
}
</style>
</head>
<body>
<div class="box3"></div>
</body>
</html>
盒子模型
盒子包括的元素
- Margin(外边距)，边框的外边空白部分
- Border(边框)，边框的宽度
- Padding(内边距)，成内容的部分和外边框之间的框
- Content(内容)
元素总宽高度计算
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
8.16
display样式
- none，隐藏
- inline，行内元素(不换行，高宽无效)
- inline-block，不换行的块元素
- block，块元素(独占一行，可设宽高) / 显示
- flex，弹性布局
<!DOCTYPE html>
<html>
<head>
<!-- display样式几种值
none，隐藏
inline，行内元素
inline-block 不换行的块元素
block，块元素或显示
-->
<meta charset="utf-8">
<title>块元素和行内元素</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: aqua;
}
.span1{
width: 100px;
height: 100px;
border: 1px solid red;
/* 行内元素
display: block，就会转换为块标签；可调宽高等，且自动换行
display: inline-block，不换行的块标签；可调宽高等，但不换行
display: inline，行内标签
*/
display: inline-block;
}
</style>
</head>
<body>
<!-- 行内元素[行内标签]
在一行显示(不换行)、高宽无效
<input type="text">可设置，比较特殊
display:inline
-->
<!-- <h2>行内元素，在一行显示(不换行)、高宽无效</h2> -->
<a href="">首页</a>
<img src="./img/boy.jpg" alt="">
<span >scan标签</span>
<span class="span1">scan标签2</span>
<input type="text">
<!-- 块元素[块标签]
每一盒标签独占一行
可一个设置高宽
display:block
-->
<!-- <h2>块元素，每一盒标签独占一行，可一个设置高宽</h2> -->
<p>p标签</p>
<div class="box1"></div>
</body>
</html>
流式布局(默认)
inline-block实现横向布局
<!DOCTYPE html>
<html>
<head>
<!-- 流式布局，一个接一个往下排列，默认布局
横向布局，一个接一个从左往右排，添加属性display: inline-block;
inline-block不换行的块元素-->
<meta charset="utf-8">
<title>流式布局、横向布局</title>
<style type="text/css">
.box1,.box2,.box3{
width: 100px;
height: 100px;
/* 横向布局，一个接一个从左往右排 */
display: inline-block;
}
.box1{background-color: red;}
.box2{background-color: green;}
.box3{background-color: blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div><!--
--><div class="box2"></div><!--
--><div class="box3"></div>
</body>
</html>
inline-block横向布局中间有间隙问题
定位布局
相对定位
参考点是标签默认所在的位置，标签移走之后，原来的位置不会释放（其它标签不能占用这个位置）
<!DOCTYPE html>
<html>
<head>
<!-- 相对定位：
必须添加属性position:relative;
移动left，top；参考点为容器原本位置的左上角为(0,0)点
标签移走之后，原来的位置不会被释放(其他标签不能占用)
-->
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1,.box2,.box3{
width: 100px;
height: 100px;
/* 相对定位 position: relative
相对位置[参考点]为：标签原本所在位置
*/
position: relative;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
/* 相对位置[参考点-容器的左上点]为：标签原本所在位置
点向上移、右移为负；点向下移、右移为正；
*/
left: 100px;
top: -100px;}
.box3{
background-color: blue;
left: 200px;
top: -200px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
sdcfwsf
<!--相对定位，即使移动了位置，相对位置原本的位置也不会被释放 -->
</body>
</html>
绝对定位
参考点统一为父容器的左上角顶点，标签移走之后，它原来所占的位置可以被其它标签补位
定位坐标可以用： left + top、left + bottom 、top + right、right + bottom
绝对定位：
首先必须要放在一个容器中[父类]，且需要将父类的地位方式为相对定位(即添加属性position:relative)
在子类容器中加入，即：position:absolute;
<!DOCTYPE html>
<html>
<head>
<!-- 绝对定位：
首先必须要放在一个容器中[父类]，且需要将父类的地位方式为相对定位(即添加属性position:relative)
在子类容器中加入position:absolute;
标签移走之后，它原来的位置会被释放(即该位置可被其他元素占用)
letf+top; letf+bottom; top+right; right+bottom
-->
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
margin: auto;
border:1px solid black;
/* 绝对定位，要求把父类容器的定位方式设为relative
参考点为父类的左上角
*/
position: relative;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
/* 子类容器的定位方式设为absolute */
position:absolute;
left:100px;
top:0px;
}
.box3{
background-color: blue;
/* 子类容器的定位方式设为absolute */
position:absolute;
left:200px;
top:0px;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!-- 标签移走之后，它原来的位置会被释放(即该位置可被其他元素占用) -->
aaaaa
</div>
</body>
</html>
z-index，重叠时显示顺序
当两个div位置重叠时，默认谁后放谁显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.out{
height: 300px;
width: 300px;
border:1px solid red;
position:relative
}
.box1,.box2{
width: 100px;
height: 100px;
position:absolute;
left:0px;
top:0px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
</style>
</head>
<body>
<div class="out">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
z-index 设置重叠时显示顺序
z-index 重叠时显示顺序，值大的显示在最前面 ，值小的会被覆盖；若未设置值，则默认0，相等选择最后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.out{
height: 300px;
width: 300px;
border:1px solid red;
position:relative
}
.box1,.box2{
width: 100px;
height: 100px;
position:absolute;
left:0px;
top:0px;
}
.box1{
background-color: red;
z-index:1;
}
.box2{
background-color: blue;
z-index:0;
/* z-index 重叠时显示顺序，值大的显示在最前面 ，值小的会被覆盖
若未设置值，则默认0，相等选择最后一个
*/
}
</style>
</head>
<body>
<div class="out">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
浮动布局float
float：left 左浮动、right 右浮动，第一个标签排最右边
clear: 清除浮动
标签设置浮动之后，后续标签也会跟着浮动
为了避免对后续标签的影响，要对后续第一个标签设置清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮点布局</title>
<!-- 浮动 float
属性值有:left:左浮动;right:右浮动，第一个标签在最右边
清除浮点
标签设置浮动之后，后续标签也会跟着浮点，为了避免对后续标签的影响，对浮点后面第一个紧挨的标签进行clear清除浮动
-->
<style type="text/css">
#outer{
width: 500px;
height: 500px;
margin: auto;
border:1px solid black;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
text-align: center;
line-height:100px;
color:white;
float:left;
/* 浮动 float
left:左浮动
right:右浮动,第一个标签在最右边
*/
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
/* 清除浮点：
标签设置浮动之后，后续标签也会跟着浮点
为了避免对后续标签的影响，对后续第一个标签设置清除浮动
对浮点后面紧挨的标签进行clear清除浮动 */
p{
clear:both;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 浮动会影响后的所有标签 -->
<p>fsdfegsfd</p>
</div>
</body>
</html>
弹性布局
所有的样式都在父容器里面设置
display：flex
flex-direction：排列方向
justify-content：对齐方式
align-items：跟排列方向垂直的方向上的对齐方式
flex-wrap：换行方式
flex-direction：排列方向
row，横向排列，默认值
row-reverse， 横向排列，右对齐，顺序反转
column，竖向排列
column-reverse 竖排，底边对齐，顺序反转
justify-content：对齐方式
在排列方向对齐方式。横排时，水平方向对齐方式；竖排，垂直方向的对齐方式
以下说明都是按row方向排列:
center，水平居中
flex-start，左对齐
flex-end，右对齐
space-around ，中间等距间隔，两边的间距时中间间距的一半
space-between，中间间隔等距，两边靠边
space-evenly，完全等距间隔排列(两边和中间都等距)
align-items：跟排列方向垂直的方向上的对齐方式
如果时横向排列，这个样式就是垂直对齐方式； 如果纵向排列，这个样式就是水平 方向的对齐方式
以下说明都是按row方向排列:
center，居中
flex-start，顶对齐，默认
flex-end，底边对齐
flex-wrap：换行方式
nowrap，不换行， 压缩标签的宽度，在一行显示完所有标签
wrap，换行
wrap-reverse，换行，顺序反转 （
注意： 换行之后的行距由align-content样式决定
弹性布局实现上下左右居中显示
display:flex;
justify-content:center
align-items:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex实现上下左右居中</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
.outer{
/* vm视口宽度单位，
全屏宽度100vm，等价于width 100%*/
width: 100vm;
/* vh视口高度，全屏宽度100vm
*/
height: 100vh;
/* 高度无100%，宽度有限制可100% */
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
布局练习
练习一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局练习</title>
<style type="text/css">
.out{
width: 450px;
height: 280px;
margin: auto;
background-color: darkgray;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.box1,.box2,.box3,.box4{
width: 210px;
height: 130px;
background-color: rgb(108, 198, 162);
display: flex;
}
.box2{
background-color: rgb(227, 215, 141);
}
.box3{
background-color: rgb(69, 158, 162);
}
.box4{
background-color: rgb(159, 116, 100);
}
.prd-left{
width:80px;
height:130px;
overflow: hidden;
}
.prd-right img{
width:130px;
height:128px;
}
.prd-right:hover{
border: 1px solid black;
}
.line{
width: 60px;
height: 40px;
margin: auto;
border-width: 4px 4px 1px 4px;
border-style: solid;
border-color: white transparent white transparent;
margin: auto;
font-size: 14px;
text-align: center;
line-height: 40px;
color: white;
}
.prd-left span{
display: inline-block;
margin-top: 30%;
font-size:10px;
color: white;
}
</style>
</head>
<body>
<div class="out">
<div class="box1">
<div class="prd-left">
<div class="line">
新品发布
</div>
<span>小米发新机,手法享好礼</span>
</div>
<div class="prd-right">
<img src="img/new1.jpg" alt="">
</div>
</div>
<div class="box2">
<div class="prd-left">
<div class="line">
新品发布
</div>
<span>小米发新机,手法享好礼</span>
</div>
<div class="prd-right">
<img src="img/new2.jpg" alt="">
</div>
</div>
<div class="box3">
<div class="prd-left">
<div class="line">
新品发布
</div>
<span>小米发新机,手法享好礼</span>
</div>
<div class="prd-right">
<img src="img/new3.jpg" alt="">
</div>
</div>
<div class="box4">
<div class="prd-left">
<div class="line">
新品发布
</div>
<span>小米发新机,手法享好礼</span>
</div>
<div class="prd-right">
<img src="img/new4.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
margin问题
子标签设置margin后，父容器也会存在margin，可能会导致布局出错：方案一，父容器设置边框；方案二：父容器设置overflow:hidden，超出部分隐藏
overflow属性
overflow:visible ：默认值，超出容器的内容也会展示出来
overflow:hidden ：超出容器部分的内容会被隐藏
overflow:scroll ：设置滚动条，对于超出部分使用滚动条查看
overflow:auto ：如果超出，则超出部分设置为滚动条查看剩余内容
overflow:inherit：从父元素继承overflow属性值
标签固定宽高
padding：设置边框与边距
box-sizing:border-box
标签固定宽高，设置边框边距，压缩内容区域
padding和border的值就不会在影响元素的宽高
box-sizing:border-box
padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里
盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
标准盒子模型，一般浏览器均默认标准盒子模型，即：box-sizing:content-box
怪异盒子模型，一般根据实际项目需要自行设置，即：box-sizing:border-box
练习二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局练习</title>
<style type="text/css">
.out{
height: 400px;
width: 1100px;
background-color: antiquewhite;
display: flex;
justify-content: space-around;
align-items:center;
}
.left img{
width:200px ;
height: 380px;
}
.mid{
height: 380px;
width: 650px;
background-color: white;
}
.right{
height:380px;
width: 240px;
background-color: white;
}
.mid-top{
height: 50px;
width: 95%;
display:flex;
justify-content:space-between;
border-width: 0,0,1px,0;
border-style: solid;
border-color: transparent transparent black transparent;
}
.mid-top span{
display: block;
}
.mid-bottom{
width: 95%;
height: 300px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.prd{
width: 300px;
height: 150px;
/* background-color: blue; */
display: flex;
}
.prd-left{
height: 150px;
width: 150px;
position: relative;
}
.prd-left img{
height: 150px;
width: 150px;
background-color: rgb(251, 249, 246);
}
.prd-left .disc{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: sandybrown;
color: white;
line-height: 50px;
text-align: center;
position: absolute;
right: 10px;
bottom: 10px;
}
.prd-right{
height: 150px;
width: 180px;
}
.subox2p1{
font-size:16px;
}
.subox2p2{
color: red;
}
.subox2p3{
font-size: 13px;
color: grey;
}
.subox2p4{
height: 25;
color: white;
background-color: red;
line-height: 25px;
text-align: center;
}
.subox2p2 span{
font-size: 25px;
}
.list{
height: 160px;
width: 240px;
margin-top: 20px;
}
.title{
width: 240px;
height: 50px;
display: flex;
justify-content: space-between;
}
.item{
width: 240px;
height: 80px;
display: flex;
}
.item-left img{
width: 60px;
height: 60px;
}
.item-right{
width:160px ;
height: 80px;
}
.item-right .item-right-bottom{
width: 100px;
height: 80px;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="out">
<div class="left">
<img src="img/3551973afb9d667529a2b0ff1d10485b.jpg" alt="">
</div>
<div class="mid">
<div class="mid-top">
<span>今日特价</span>
<span class="span1">查看全部></span>
</div>
<div class="mid-bottom">
<div class="prd">
<div class="prd-left">
<img src="img/6d07d4a90abe065daf453beb37534cd7.png" alt="" class="subox1i1">
<div class="disc">8.8折</div>
</div>
<div class="prd-right">
<p class="subox2p1">女士精梳全棉T恤</p>
<p class="subox2p2">限时价 ¥<span>43.1</span></p>
<p class="subox2p3"><del>¥49</del></p>
<p class="subox2p4">立即抢购</p>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="" class="subox1i1">
<div class="disc">8.8折</div>
</div>
<div class="prd-right">
<p class="subox2p1">男士清凉牛仔裤</p>
<p class="subox2p2">限时价 ¥<span>169</span></p>
<p class="subox2p3"><del>¥199</del></p>
<p class="subox2p4">立即抢购</p>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="img/ed7ddda3c952401a747eb5ea9e7eef58.png" alt="" class="subox1i1">
<div class="disc">8.8折</div>
</div>
<div class="prd-right">
<p class="subox2p1">男士清凉牛仔裤</p>
<p class="subox2p2">限时价 ¥<span>169</span></p>
<p class="subox2p3"><del>¥199</del></p>
<p class="subox2p4">立即抢购</p>
</div>
</div>
<div class="prd">
<div class="prd-left">
<img src="img/6d07d4a90abe065daf453beb37534cd7.png" alt="" class="subox1i1">
<div class="disc">8.8折</div>
</div>
<div class="prd-right">
<p class="subox2p1">女士精梳全棉T恤</p>
<p class="subox2p2">限时价 ¥<span>43.1</span></p>
<p class="subox2p3"><del>¥49</del></p>
<p class="subox2p4">立即抢购</p>
</div>
</div>
</div>
</div>
<div class="right">
<div class="list">
<div class="title">
<span>量贩囤货</span>
<span class="p2">全部></span>
</div>
<div class="item">
<div class="item-left">
<img src="img/c518ce0acbb71dba6e186e1e2d845ef8.png" alt="">
</div>
<div class="item-right">
<span style="font-size: 14px;">3盒装 韩国制造</span>
<div class="item-right-bottom">
<span style="font-size: 18px;color: red;"><b>¥55</b></span>
<img src="./img/love.jpg" alt="" style="height:30px;">
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<img src="img/0c5b29ebae99dabe4c1036c83a99ecdc.png" alt="">
</div>
<div class="item-right">
<span style="font-size: 14px;">严选.颐和园组合茶</span>
<div class="item-right-bottom">
<span style="font-size: 18px;color: red;"><b>¥55</b></span>
<img src="./img/love.jpg" alt="" style="height:30px;">
</div>
</div>
</div>
</div>
<div class="list">
<div class="title">
<span>今日特价</span>
<span class="p2">全部></span>
</div>
<div class="item">
<div class="item-left">
<img src="img/f8fcc85a87e1bcb9d3bcf77cf06ef796.png" alt="">
</div>
<div class="item-right">
<span style="font-size: 14px;">超薄婴儿拉拉裤学</span>
<div class="item-right-bottom">
<span style="font-size: 18px;color: red;"><b>¥55</b></span>
<img src="./img/love.jpg" alt="" style="height:30px;">
</div>
</div>
</div>
<div class="item">
<div class="item-left">
<img src="img/cf86ce7b36cc90f5c9b1cbbc5eafd737.png" alt="">
</div>
<div class="item-right">
<span style="font-size: 14px;">网易智造蒸沐足</span>
<div class="item-right-bottom">
<span style="font-size: 18px;color: red;"><b>¥55</b></span>
<img src="./img/love.jpg" alt="" style="height:30px;">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
8.17
JavaScript
ECMA核心语法
JS(JavaScript)，解释型脚本语言，运行在浏览器、处理网页上行为(动作)
JS书写位置
标签的事件、script标签、外部文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入一个css文件：link href
导入一个js文件：script scr -->
<!-- 3.外部文件:
用script标签导入外部js文件，即放置head中 -->
<script src="./js/my.js"></script>
</head>
<body>
<!--1.标签的事件:
onXXXX是标签的事件，事件里面可以直接写js代码 -->
<!-- alert() 弹出警告框 -->
<input type="button" value="点我" onclick="alert()">
<!-- js是解释型脚本语言，运行在浏览器、处理网页上行为
边翻译边执行，一般放在/body之前，最后的位置-->
<!-- 2.script标签:
一般放置最后的位置，即放在body末尾，-->
<script type="text/javascript">
// 模态对话框，会堵塞程序；只有结束该对话框后，程序才会继续往下执行
//alert()
</script>
</body>
</html>
注释
//单行、/* 多行 */
输出信息
alert()，弹出警告框
console.log()，控制台输出；浏览器调试窗口的控制台输出
document.write()，浏览器窗口输出；浏览器文档输出，即输出任意html的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 输出信息
alert() 弹出警告框
console.log() 控制台输出；浏览器调试窗口的控制台输出
document.write 浏览器窗口输出；浏览器文档输出，即输出任意html的内容
-->
<!-- 注释 单行 //..
多行 /*..*/
-->
<script type="text/javascript">
alert()
console.log("hello js")//控制台输出
document.write("<h1>啦啦啦啦</h1>")//浏览器文档输出，即输出任意html的内容
// 单引号、双引号均可用；但不能混用
</script>
</body>
</html>
变量和函数定义
六种数据类型
string、number、boolean、object、function、symbol
三种对象类型
object、data、array
变量定义
js是弱类型语言，不必指定类型，通用var或let
var i=10;
var s=‘abc’
var arr=[]，数组
var obj={}，对象；一个对象由一个或多个属性和值组成，根据键获取值
let a=5;
const pi=3.14; //常量 不可修改
组合使用变量
var b1={属性：[] }
var b2=[值,{对象}，值]
var与let的区别
var只有全局变量和函数变量，let还支持代码块局部变量
var可被重复定义，let不可以被重复定义
函数定义
参数无数据类型，函数返回值可无，需返回值就return
function 方法名(参数可有可无){…返回值可有可无}
DOM文档对象模型
获取节点[获取标签对象]
获取节点、操作节点[操作属性、绑定事件]
document.getElementById()，根据id获取标签，id是唯一的
document.getElementsByTagName()，根据标签名获取标签
document.getElementsByClassName()，根据class获取标签
document.querySelector()，根据选择器获取标签
getElements返回的是一个标签对象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取对象标签</title>
</head>
<body>
<div id="box1"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
//document.getElementById()，根据id获取标签
let box1=document.getElementById('box1')
console.log("根据id获取标签对象")
console.log(box1)
//document.querySelector()，根据选择器获取标签
let box2=document.querySelector('#box1')
console.log("根据选择器获取标签对象")
console.log(box2)
//document.getElementsByTagName()，根据标签名获取标签
let boxs=document.getElementsByTagName('div')
console.log("根据标签名获取标签对象")
console.log(boxs)
// getElements返回的是一个标签对象集合
//可取其中的某一个、也可遍历
console.log("取标签对象集合其中一个");
console.log(boxs[0]);
console.log("遍历标签对象集合");
for(let i=0;i<boxs.length;i++){
console.log(boxs[i])
}
// document.getElementsByClassName()，根据class获取标签
let boxs2=document.getElementsByClassName('box')
console.log("根据class获取标签对象")
console.log(boxs2);
</script>
</body>
</html>
操作节点
操作属性[节点.属性=值]
-
节点.style.xxx，设置或读取样式
节点.style.color=“red”
-
节点.innerText，设置或读取标签的文本内容
节点.innerText=“文字”
-
节点.innerHTML，设置或读取标签的所有子标签
节点.innerHTML=“
<h1>sdfsf</h1>” -
节点.value，读取或设置输入框的内容(input)
-
节点.href=“xxxx.html”
style.xxx、innerText、innerHTML
标签的样式名称在css中用-连接多个单词，在js中用驼峰命名
如background-color，在js中用驼峰命名，如backgroundColor
innerText改标签的文字内容，改标签的文字内容，将原来标签有的文字内容给覆盖掉
innerHTML改变标签的子标签，也会将原来标签有的值给覆盖掉
若向保留原有的标签属性值：对象.innerText+=新内容、对象.innerHTML+=新内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变标签的样式或内容</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<input type="button" value="修改标签的样式与内容" onclick="change()">
<div id="box">
<!-- 文本内容 -->
fsdgdxfgh
</div>
<script type="text/javascript">
function change(){
// style.xxx设置或读取样式
// innerText 设置或读取文本内容
//innerHTML 设置或读取子标签内容
//value 设置或读取输入框的内容
let box=document.getElementById('box')
//标签的样式名称在css中用-连接多个单词，如background-color
//在js中用驼峰命名，如backgroundColor
//改属性
box.style.backgroundColor='blue'
box.style.width='200px';
box.style.height='200px';
box.style.left='500px';
box.style.top='200px';
//innerText 改标签的文字内容
//改标签的文字内容，将原来标签有的文字内容给覆盖掉
//box.innerText="JS改变内容"
//box.innerText+="JS改变内容" 追加内容，确保之前的未被覆盖
box.innerText+="JS改变内容"
box.style.color='white'
// 改变标签的子标签 会将原来标签有的值给覆盖掉
//box.innerHTML='<p>p1</p><p>p2</p>'
//box.innerHTML+='<p>p1</p><p>p2</p>' 追加内容
box.innerHTML+='<p>p1</p><p>p2</p>'
}
</script>
</body>
</html>
value 读取或设置输入框的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="读取输入框的值" onclick="read()">
<input type="button" value="输入框赋值" onclick="setValue()">
<br>
<input type="text" id="txt1" />
<script type="text/javascript">
let txt1=document.getElementById('txt1')
function read(){
console.log(txt1.value)
}
function setValue(){
//new Date() 创建日期对象
txt1.value=new Date;
}
</script>
</body>
</html>
加法器
NaN，Not a Number， 有时数字运算方法不能返回数字时，就可能返回NaN
isNaN()方法，可以判断一个变量是否是数字
undefined，当一个变量未定义，它就是undefined
debugger，断点调试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加法器</title>
<style type="text/css">
span{
cursor:pointer;
font-size: 25px;
}
</style>
</head>
<body>
<!--NaN(Not a Number 数字运算方法不能返回数字时，就返回NaN 未
undefined 当一个变量未定义时，它就是undefined)
isNaN判断是否是数字-->
<input type="text" id="op1"> +
<input type="text" id="op2">
<span onclick="sum()">=</span>
<input type="text" id="sum">
<script type="text/javascript">
function sum(){
//断点 debugger
//debugger
//parseInt() 把字符串转换为int，默认转成10进制
//+ 对字符串为拼接、对数字为相加
let op1=document.getElementById("op1");
let op2=document.getElementById("op2");
let valuesum=document.getElementById("sum")
//valuesum.value=parseInt(op1.value)+parseInt(op2.value)
valuesum.value=add(parseInt(op1.value),parseInt(op2.value))
//isNaN(value) 返回值：true、false
//isNaN 判断是否是个数字 'abc123'返回true；'123'返回false
if(isNaN(valuesum.value)){
valuesum.value="输入有误"
}
// 若什么都不写，返回 NaN(undefined 未定义)
}
function add(v1,v2){
return v1+v2
}
</script>
</body>
</html>
改变标签的属性
节点.属性=修改值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改标签的属性</title>
<style type="text/css">
#pic{width: 200px;}
</style>
</head>
<body>
<input type="button" value="修改图片" onclick="chaPic()">
<img src="./img/boy.jpg" alt="" id="pic">
<script type="text/javascript">
let i=0;
let imgs=['img/animal1.jpeg','img/animal2.jpg','img/animal3.gif','img/animal4.jpg']
function chaPic(){
let pic=document.getElementById('pic');
//修改标签属性
pic.src=imgs[(i++)%4];
}
//setInterval() 定时器函数，单位毫秒
// 第一个参数是要执行的方法
//第二个参数是定时时间，单位毫秒
setInterval(()=>{
chaPic()
},2000)
</script>
</body>
</html>
绑定事件[节点.事件=函数]
- 节点.οnclick=function(){}，点击事件
- 节点.οnchange=function(){}，内容改变事件，一般用于输入框；当离开框后，事件函数就被触发
- 节点.οnmοuseοver=function(){}， 鼠标滑过事件，类似于hover
- 节点.οnlοad=function(){}， 页面加载事件
- 节点.οnfοcus=function(){}，获得焦点事件，一般用于输入框
onclick 点击事件
function代码在页面初始化时，不会被执行；只是会预处理，在被调用是执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" onclick="show()">
<input type="button" value="隐藏" onclick="dishow()">
<div class="box" id="b">
</div>
<script type="text/javascript">
let box=document.getElementById('b')
// function代码在页面初始化时，不会被执行；只是会预处理，在被调用是执行
// 让div标签显示
function show(){
// 获取标签对象 document.getElementById
// 通过id获取标签对象
//let box=document.getElementById('b')//具有返回值，需要接收
//访问标签属性与样式并设置样式
box.style.display='block'
}
function dishow(){
//let box=document.getElementById('b')
box.style.display='none'
}
</script>
</body>
</html>
onchange 内容改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击添加</title>
</head>
<body>
<!--onchange内容改变事件、当离开框后，事件函数自动被触发 -->
<input type="text" id="in" onchange="add()">
<ul id='list' type="circle">
<li>Java</li>
<li>HTML </li>
</ul>
<script type="text/javascript">
function add(){
let text=document.getElementById("in")
if(text.value==""){
alert("添加不能为空")
}
else{
let list=document.getElementById('list')
text.value="";//加入后清空输入框里的内容
}
}
</script>
</body>
</html>
onmouseover 鼠标滑过事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜图游戏</title>
<style type="text/css">
#outer{
background-image: url(./img/animal4.jpg);
width: 600px;
height: 600px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.box{
width: 30px;
height: 30px;
float: left;
}
.box_color{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="outer"></div>
<script type="text/javascript">
let outer=document.getElementById('outer')
let i=400
while(i>0){
let box=document.createElement('div')
box.className='box box_color'
outer.appendChild(box)
i--;
}
outer.addEventListener('mouseover',(e)=>{
debugger
let box=e.target
console.log(box)
//box.style.opacity=0;
box.className='box'
})
</script>
</body>
</html>
onload 页面加载事件
onload属性，在文档对象加载完成后触发
onload通常使用于 < body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>load</title>
<script>
function load()
{
alert("页面已经载入！");
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
onfocus 获得焦点事件
onfocus属性，在元素获得焦点时触发
onfocus 通常用于 < input>, < select>, 和 < a> 元素
onfocus 属性相反的属性事件为 onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onfocus</title>
<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
<p>当输入域获得焦点时setStyle函数被触发。该函数改变输入域的背景色</p>
第一个名字: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
最后一个名字: <input type="text" id="lname" onfocus="setStyle(this.id)">
</body>
</html>
广告轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广告轮播图</title>
<style type="text/css">
#box{
width: 600px;
height: 600px;
margin: auto;
position: relative;
}
#pic{
width: 600px;
height: 600px;
}
#list li{
float: left;
margin: 20px;
cursor: pointer;
font-size: 30px;
}
#point{
position: absolute;
right: 0;
bottom:0;
}
span{
display: block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 25px;
color: white;
background-color: coral;
border-radius: 50%;
cursor: pointer;
}
#left{
position: absolute;
left: 0;
top: 50%;
}
#right{
position: absolute;
right:0;
top: 50%;
}
.active{
color: red;
}
</style>
</head>
<body>
<div id="box">
<img src="./img/boy.jpg" alt="" id="pic">
<div id="point">
<ul id="list" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 一个函数控制上下翻页 -->
<span id="left" onclick="page(-2)"><</span>
<span id='right' onclick="page(0)">></span>
</div>
<script type="text/javascript">
let i=0;
let imgs=['img/animal1.jpeg','img/animal2.jpg','img/animal3.gif','img/animal4.jpg']
let lis=document.getElementsByTagName('li')
let pic=document.getElementById('pic')
//setInterval() 定时器函数，单位毫秒
// 第一个参数是要执行的方法
//第二个参数是定时时间，单位毫秒
//清除之前变化的点，为再次变化点做铺垫
function clearPionter(){
for(let j=0;j<lis.length;j++){
lis[j].className=""
}
}
function chaPic(){
//修改标签属性
let index=(i++)%4
pic.src=imgs[index];
lis[index].className="active"//为该对象添加一个class属性值
}
setInterval(()=>{
clearPionter()
chaPic()
},3000)
// 监听每一个li,若放在某个li上则触发事件
for(let a=0;a<lis.length;a++){
//事件需要赋值函数
//事件可传入可获取当前值
//给标签添加自定义属性n,用来记录标签序号
//onmouseover这是个事件，只有在触发的时候才会执行
lis[a].n=a
lis[a].onmouseover=()=>{
//清除之前变化的点，为再次变化点做铺垫
clearPionter()
pic.src=imgs[i=a]
lis[i].className="active" //停留轮翻图时间的*2
}
}
function page(b){
clearPionter()
i=i+b
console.log(i)
if(i<0){
i=imgs.length-1;
}
let index=(i++)%4
pic.src=imgs[index];
lis[index].className="active" //为该对象添加一个class属性值
}
</script>
</body>
</html>
8.18
增删节点[增加和删除标签]
-
document.createElement(标签名)， 创建标签对象，参数是标签名
-
document.createTextNode(文字内容) ，创建标签的文字内容，参数是文字内容
-
父标签对象.appendChild(child) ，添加子标签，child要添加标签对象、文本内容对象
-
父标签对象.insertBefore(新标签，子标签[插入位置])
第一个元素是插入的新标签，第二个元素是父类已存在的子标签，即将新元素插入该子标签位置之前
-
父标签对象.removeChild(子标签)，删除父标签中的子标签
-
标签.remove()，删除标签自己
document.createElement(标签名)
<script type="text/javascript">
//创建标签对象 document.createElement(标签名)
let box1=document.createElement('div')//返回一个空的新的div标签对象
</script>
document.createTextNode(文字内容)
<script type="text/javascript">
//创建标签的文本对象document.createTextNode(文本内容)
let txtNode=document.createTextNode('int')//文本内容可以是，数字、字符串等
</script>
父标签对象.appendChild(child)
<script type="text/javascript">
//把文本对象对象添加到容器中对象.appendChild(文本对象/标签对象)，即在innerHTML后面追加
//txtNode是一个文本对象、box1是一个div标签对象、outer是一个div标签对象
box1.appendChild(txtNode) //把文本对象放入box1的div标签对象中
outer.appendChild(box1)//把box1的div标签对象放入outer的div标签对象
</script>
父标签对象.insertBefore(新标签，子标签[插入位置])
<script type="text/javascript">
//父对象.insertBefore(新标签,插入的位置[子对象，在它之前加])
//outer是一个div标签对象、box1是一个div标签对象、p2是outer中一个p子标签对象
outer.insertBefore(box1,p2)//将box1标签插入到outer标签的p2子标签之前
</script>
父标签对象.removeChild(子标签)、标签.remove()
<script type="text/javascript">
//删除容器的子标签，父对象.removeChild(子标签对象)
//outer是一个div标签对象、p1是outer中一个p子标签对象、p2也是一个p标签对象
outer.removeChild(p1) //删除outer标签中的p1子标签
//删除标签对象自身，标签对象.remove()
p2.remove() //删除p2标签
</script>
代码用法
存在两个触发事件
新增标签：在容器第二个p标签之前，插入一个创建属性class=box的div，该div中添加了一个文本标签
删除标签：删除两个p标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>增加、删除标签</title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
border: 1px solid red;
overflow: scroll;
/* 超出范围之后的处理方式
hidden:不显示
scroll: 超出后滚动条
*/
}
.box{
width: 100px;
height:100px;
border: 1px solid red;
/* float: left;
margin: 10px; */
}
</style>
</head>
<body>
<input type="button" value="新增标签" onclick="add()">
<input type="button" value="删除标签" onclick="del()">
<div id="outer">
<p id="one">第一个p标签</p>
<p id="two">第二个p标签</p>
</div>
<script type="text/javascript">
let i=1;//设置全局变量
let outer=document.getElementById("outer")
let p1=document.getElementById("one")
let p2=document.getElementById("two")
function add(){
//创建对象[标签与文本]
// 创建标签对象document.createElement(标签名)
let box1=document.createElement('div')
box1.className='box'//给创建div标签,添加一个class:对象.className赋值
//创建标签的文本对象document.createTextNode(文本内容)
let txtNode=document.createTextNode(i++)
//将对象添加至容器(标签)，即在innerHTML后面追加对象
//把文本对象、标签对象添加到容器中，对象.appendChild(文本对象/标签对象)
box1.appendChild(txtNode)
//将对象插入至容器指定位置
//父对象.insertBefore(新标签,插入的位置[子对象，在它之前加])
outer.insertBefore(box1,p2) //在第二个p标签前面插入
}
function del(){
//删除容器的子标签，父对象.removeChild(子标签对象)
outer.removeChild(p1)
//删除标签对象自身，标签对象.remove()
p2.remove()
}
</script>
</body>
</html>
遍历节点[标签的遍历]
在页面上，只要能得到任意一个标签，就可以通过兄弟、父子关系去访问到页面的所有标签
对象.parentElement ，获取该对象的父标签
对象.childNodes[] 子标签，获取该对象的子标签，且返回值是一个对象数组，需要用序号访问，数组[index]
对象.firstElementChild， 获取该对象的第一个子标签
对象.lastElementChild，获取该对象的最后一个子标签
对象.nextElementSibling，获取该对象的下一个兄弟标签(弟弟，同级标签)
对象.previousElementSibling，获取该对象的上一个兄弟标签(哥哥，同级标签)
包含文本对象
children[] 子标签，子标签是数组，需要用序号访问
firstChild
lastChild
nextSibling
previousSibling
代码用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历标签</title>
<style type="text/css">
.outer{
width: 300px;
height: 300px;
border: 1px solid red;
margin: auto;
}
.mid{
width: 200px;
height: 200px;
border: 1px solid green;
margin: auto;
}
.inner1,.inner2{
width: 50px;
height: 50px;
border: 1px solid blue;
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
outer
<div class="mid" id="mid">
mid
<div class="inner1">
inner1
</div>
<div class="inner2">
inner2
</div>
</div>
</div>
<script type="text/javascript">
let mid=document.getElementById("mid")
//获取父标签：对象.parentElement
let outer1=mid.parentElement
console.log("获取mid父标签parentElement")
console.log(outer1)
//获取子标签： 对象.children
let inner=mid.children
console.log("获取mid子标签children")
console.log(inner)
let inner2=mid.children[1]
console.log("获取mid子标签第二个元素mid.children[1]")
console.log(inner2)
//获取第一个子标签： firstElementChild
inner1=mid.firstElementChild
console.log("获取mid第一个子标签firstElementChild")
console.log(inner1)
//获取最后个子标签： lastElementChild
inner2=mid.lastElementChild
console.log("获取mid最后个子标签astElementChild")
console.log(inner2)
//获取兄弟姐妹
//获取下一个nextElementSibling
inner2=inner1.nextElementSibling
console.log("获取inner1下一个nextElementSibling")
console.log(inner2)
//获取上一个previousElementSibling
inner1=inner2.previousElementSibling
console.log("获取inner1上一个previousElementSibling")
console.log(inner1)
</script>
</body>
</html>
事件
在事件方法中用event对象获取事件对象，它的target属性就是触发事件的标签
事件的写法：
- 在标签中用onXXXX事件名上写一个方法
- 用标签对象的οnclick=function(){}，或者标签对象的οnclick=()=>{}
- 用addEventListener()方法绑定事件
当对一个button按钮添加onclick()事件
在标签中用onXXXX事件名上写一个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" onclick="print()">
<script type="text/javascript">
function print(){
//event.target，直接获取触发事件的对象
console.log(event.target)
}
</script>
</body>
</html>
用标签对象的οnclick=function(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" id='btn'>
<script type="text/javascript">
let btn=document.getElementById('btn')
btn.onclick=function(e){
//e就是事件对象
console.log(e.target)
//绑定事件用function，可以通过this获取触发事件的对象对象
console.log(this)
}
</script>
</body>
</html>
标签对象的οnclick=()=>{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" id='btn'>
<script type="text/javascript">
btn.onclick=((e)=>{
//e就是事件对象
console.log(e.target)
})
</script>
</body>
</html>
用addEventListener()方法绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" id='btn'>
<script type="text/javascript">
let btn=document.getElementById('btn')
btn.addEventListener('click',(e)=>{
console.log(e.target)
})
</script>
</body>
</html>
使用对象.事件=函数：同一个对象只能绑定一个事件，若同一个对象多次绑定同一事件，则后面会把前面覆盖
使用对象.addEventListener(事件，函数)方法可以同个对象绑定多个
事件的冒泡机制
当一个标签触发某个事件时，它的所有的父标签也会以此触发这个事件，实际代码中有时候绑定事件时会绑在父标签上
代码用法
点击”编辑“按钮， 获取此行的文字内容， 并控制台打印；
点击”删除“按钮，删除当前行；
对行上的按钮添加对应的触发事件
这样不利于批量触发事件，且后续新增的行无法被事件触发；
因此一般采用事件冒泡机制，将触发事件绑在不变的父标签上，
修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上
动态表格增删修
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格增删修</title>
<style type="text/css">
table{
border-collapse: collapse;
margin-top: 10px;
}
th,td{
width: 150px;height:30px;
text-align: center;
line-height: 30px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="name" placeholder="姓名">
<input type="text" id="sex" placeholder="性别">
<input type="number" id="age" placeholder="年龄">
<input type="button" value="新增" id='add'>
<table id='tbl'>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>选项</th>
</tr>
<!-- <tr>
<td>张三</td>
<td>男</td>
<td>12</td>
<td>
<input type="button" value="修改" id='cmodify'>
<input type="button" value="删除" id='del'>
</td>
</tr> -->
</table>
<script type="text/javascript">
let addBtn=document.getElementById("add")
let tbl=document.getElementById("tbl")
//新增按钮事件
addBtn.addEventListener("click",()=>{
//获取input框的value
let name=document.getElementById("name").value
let sex=document.getElementById("sex").value
let age=document.getElementById("age").value
//table追加一行内容
tbl.innerHTML+="<tr>"
+"<td>"+name+"</td>"
+"<td>"+sex+"</td>"
+"<td>"+age+"</td>"
+"<td>"
+"<input type='button' value='修改'>"
+"<input type='button' value='删除' >"
+"</td>"+"</tr>"
})
//修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上
tbl.addEventListener('click',(e)=>{
let btn=e.target
//=== 全等 类型与值均相等；
//== 相等 值相等就可
if(btn.value=='修改'){
let tdAge=btn.parentElement.previousElementSibling
let tdSex=tdAge.previousElementSibling
let tdName=tdSex.previousElementSibling
console.log(tdName.innerText+','+tdSex.innerText+','+tdAge.innerText)
//修改代码
}else if(btn.value=='删除'){
//删除按钮
btn.parentElement.parentElement.remove()
}
})
</script>
</body>
</html>
[外链图片转存中...(img-XHvOIPnQ-1693645962257)]
#### 标签对象的onclick=()=>{}
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" id='btn'>
<script type="text/javascript">
btn.onclick=((e)=>{
//e就是事件对象
console.log(e.target)
})
</script>
</body>
</html>
用addEventListener()方法绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="按钮事件" id='btn'>
<script type="text/javascript">
let btn=document.getElementById('btn')
btn.addEventListener('click',(e)=>{
console.log(e.target)
})
</script>
</body>
</html>
使用对象.事件=函数：同一个对象只能绑定一个事件，若同一个对象多次绑定同一事件，则后面会把前面覆盖
使用对象.addEventListener(事件，函数)方法可以同个对象绑定多个
[外链图片转存中…(img-5WOj3aKq-1693645962257)]
事件的冒泡机制
当一个标签触发某个事件时，它的所有的父标签也会以此触发这个事件，实际代码中有时候绑定事件时会绑在父标签上
代码用法
点击”编辑“按钮， 获取此行的文字内容， 并控制台打印；
点击”删除“按钮，删除当前行；
对行上的按钮添加对应的触发事件
这样不利于批量触发事件，且后续新增的行无法被事件触发；
因此一般采用事件冒泡机制，将触发事件绑在不变的父标签上，
[外链图片转存中…(img-70coFqht-1693645962258)]
修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上
[外链图片转存中…(img-fJ1bKPok-1693645962258)]
动态表格增删修
[外链图片转存中…(img-ZXiyqFho-1693645962259)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格增删修</title>
<style type="text/css">
table{
border-collapse: collapse;
margin-top: 10px;
}
th,td{
width: 150px;height:30px;
text-align: center;
line-height: 30px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="name" placeholder="姓名">
<input type="text" id="sex" placeholder="性别">
<input type="number" id="age" placeholder="年龄">
<input type="button" value="新增" id='add'>
<table id='tbl'>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>选项</th>
</tr>
<!-- <tr>
<td>张三</td>
<td>男</td>
<td>12</td>
<td>
<input type="button" value="修改" id='cmodify'>
<input type="button" value="删除" id='del'>
</td>
</tr> -->
</table>
<script type="text/javascript">
let addBtn=document.getElementById("add")
let tbl=document.getElementById("tbl")
//新增按钮事件
addBtn.addEventListener("click",()=>{
//获取input框的value
let name=document.getElementById("name").value
let sex=document.getElementById("sex").value
let age=document.getElementById("age").value
//table追加一行内容
tbl.innerHTML+="<tr>"
+"<td>"+name+"</td>"
+"<td>"+sex+"</td>"
+"<td>"+age+"</td>"
+"<td>"
+"<input type='button' value='修改'>"
+"<input type='button' value='删除' >"
+"</td>"+"</tr>"
})
//修改和删除按钮事件，利用事件冒泡机制把事件绑定在table标签上
tbl.addEventListener('click',(e)=>{
let btn=e.target
//=== 全等 类型与值均相等；
//== 相等 值相等就可
if(btn.value=='修改'){
let tdAge=btn.parentElement.previousElementSibling
let tdSex=tdAge.previousElementSibling
let tdName=tdSex.previousElementSibling
console.log(tdName.innerText+','+tdSex.innerText+','+tdAge.innerText)
//修改代码
}else if(btn.value=='删除'){
//删除按钮
btn.parentElement.parentElement.remove()
}
})
</script>
</body>
</html>
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
