目录
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注解< !-- 内容 -->
< !–…–>注释标签,用来在源文档中插入注释,且注释不会在浏览器中显示
快捷键: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>