java easyexcel单元格红色字体

转载

mob64ca1418e88d 2024-10-31 09:59:01

文章标签 javascript 前端 java 选择器外边距 文章分类 Java 后端开发

<input type=“text” name=“username”
value=“lalala”
placeholder=“用户名”
maxlength=“10”
readonly=“readonly”>

性别:

<input type=“radio” name=“gender” id=“nan”

value=“nan”>

男

<input type=“radio” name=“gender” id=“nv”

value=“nv”>

女

<input checked=“checked” type=“radio” name=“gender” id=“qt”

value=“qt”>

其它

爱好：

<input checked=“checked” type=“checkbox” name=“hobby” id=“lq”

value=“lq”>

篮球

<input type=“checkbox” name=“hobby” id=“wz”

value=“wz”>

王者农药

<input checked=“checked” type=“checkbox” name=“hobby” id=“ldm”

value=“ldm”>

撸代码

生日：

靓照:

个人介绍：

这家伙很懒。。。什么都没留下!

出生地：

请选择北京上海广州

<input type=“hidden”

name=“id” value=“234234”>

input的使用:

-提交按钮submit:

-自定义按钮button:

-重置按钮reset: 清空内容使用

-复选按钮chekbox:

-禁用文本框:disabled=“disabled”

文本框是不能输入内容的，显示被禁用了。

-文本框显示内容placeholder: 文本框显示姓名内容输入内容时姓名自动消失

最大值：maxlength=“10”

自动登陆(复选框后面跟自定义命名)

-距离加宽不限制于按钮label: 自动登陆不添加label只能在自动登陆前面复选框里打勾，填了后点击文字也可以打勾（一般和复选按钮混合使用) 例：自动登陆

-文本框内文字显示placeholder: text是文本显示 password是用于密码显示内容为****

###CSS 层叠样式表

用于给页面中的元素添加显示样式
三种引入方式：

内联样式：在元素内部通过style属性添加样式，不能复用，只能作用于一个元素

<div style="border: 1px solid red">马上中秋节放假</div>

内部样式：在head标签内部添加style标签，在标签内部通过选择器找到页面中的元素，并添加样式，好处可以在页面内部复用，弊端：只能在当前页面复用
外部样式：在单独的css文件中写样式代码在head里面通过link标签引入

<link rel="stylesheet" href="first.css">

first是css的文件名，

———————————————————————————————————

###CSS

Cascading(层叠) Style（样式）Sheet(表)，层叠样式表用于美化页面。
引入CSS的三种方式：

内联样式：在元素中添加style属性添加样式，只能作用于当前元素，不能复用
内部样式：在head标签中添加style标签，可以在当前页面复用，不能多页面复用
外部样式：在单独的css文件中写样式代码在head中添加 link标签引入css文件，可以多个页面复用

三种引入方式的优先级

内联优先级最高
内部和外部优先级一样，后执行的覆盖前面执行的

###选择器

通过选择器可以灵活的选中页面中的某些元素，选中后给元素添加样式

标签名选择器格式：标签名{样式代码}
id选择器格式： #id{样式代码}
类选择器格式： .class{样式代码}

练习：创建demo04 在页面中添加5个div 让第1，3，5个背景颜色为绿色，让第4个添加紫色边框，让所有的div字体红色

任意元素选择器格式： *{样式代码} 优先级较低因为作用范围大
属性选择器格式：标签名[属性名=‘属性值’]
子孙元素选择器
子元素选择器
分组选择器

如果需要对页面中多种不相关的元素设置相同的效果，此时一个选择器如果选择不到的话可以使用分组选择器把多个选择器合并到一起

-格式： .class,#id,h3{样式代码}

伪类选择器用于选择元素的状态

/*a 是超链接直接{}加颜色

未访问状态 a:link{ color:red; }
访问过状态 a:visited{color:yellow;}
鼠标悬停状态 a:hover{color:blue;}
鼠标点击时状态 a:active{color:green;}

####选择器回顾：

标签名选择器标签名{}

id选择器 #id{}

类选择器 .class{}

子孙选择器 div span a{}

子元素选择器 div>span>a{}

任意元素选择器 *{}

分组选择器 #id,.class,标签名{}

属性选择器 input[type=‘password’]{}

伪类选择器未访问a:link 访问过 a:visited 悬停 a:hover 点击时 a:active

####常用样式属性

color 字体颜色
border 边框
background-color 背景颜色

#####颜色的赋值方式

通过颜色名称赋值 red blue pink yellow green …
通过6位的16进制赋值，每两位表示一个颜色每个颜色的取值为0-255 三原色 rgb redgreenblue红绿蓝（了解）

举例：红色 #ff0000 蓝色 #0000ff 绿色 #00ff00

黄色 #ffff00 黑色 #000000 白色 #ffffff

通过3位的16进制赋值 #0f0 等效 #00ff00
通过三位10进制赋值 rgb(0-255,0-255,0-255); 红色 rgb(255,0,0);
通过四位10进制赋值 alpha：透明度 rgba(0-255,0-255,0-255,0-1); 透明度值越小越透明 background-color: rgba(255,0,0,0.2)

#####设置背景图片

/设置图片/

background-image:url(“…/imgs/a.jpg”)

控制属性背景图片的平铺效果:

background-repeat:repeat;

-repeat; 在垂直方向和水平方向重复，为重复值

-repeat-x; 仅在水平方向重复

· -repeat-y；仅在垂直方向重复

· -no-repeat；仅显示一次

/* 设置元素的宽高 _/

width: 500px;

height: 500px;

background-color: yellow;

/_ 设置背景图片 _/

background-image: url(“…/imgs/k.jpg”);

/_ 设置背景图片的尺寸

如果图片尺寸小于元素的尺寸

则会自动重复平铺 _/

background-size: 300px 300px;

/_ 禁止重复 _/

background-repeat: no-repeat;

/_ 控制背景图片的位置

1.横向位置 left/center/right左中右

2.纵向位置 top/center/bottom上中下

可以实现9宫格的9个位置

/_ background-position: center center; _/

/_ 通过百分比控制位置

第一个参数0代表左边缘 100%代表右边缘

第二个参数0代表上边缘 100%代表下边缘

background-position: 80% 80%;

####练习创建demo10 页面中添加三个div 第一个div尺寸300_300 设置背景图片正好填充，要求图片全部显示，第二个div尺寸500_500，背景颜色为红色背景图片尺寸100_100 要求图片只显示一张显示在正中间，第三个div尺寸200_200背景绿色图片100_100显示在div的左下角的位置（要求使用百分比方式控制位置）

———————————————————————————————————

###布局相关的样式

####盒子模型

盒子模型包括元素的宽高，外边距，内边距和边框。

#####元素的宽高

width/height 通过该属性设置元素的宽高
只能对块级元素设置宽高，行内元素的宽高只能受内容影响

#####外边距

指元素距离上级元素边框或相邻兄弟元素边框
如何设置外边距：

/* 给某个方向外边距单独赋值 */

/* margin-top: 20px; 上

margin-left: 20px; 右

margin-bottom: 10px; 下

margin-right: 20px; */ 左

/* 批量赋值外边距 */

/* margin: 30px; // 四个方向全是30 */

/* margin: 10px 30px; // 上下10 左右30 */

/* margin: 0 auto; // 水平居中 */

margin: 10px 20px 30px 40px;/* 上右下左 */

如果元素的上边缘和上级元素的上边缘重叠此时添加上外边距会出现粘连效果，通过给上级元素添加overflow:hidden解决
如果上下相邻两元素同时添加了下外边距和上外边距，取最大值。

####行内元素外边距相关

行内元素左右外边距生效，上下不生效
左右相邻两个元素同时存在右外边距和左外边距时取两个值相加之和

上下取最大，左右相加

#####边框

/1.粗细 2.样式 3.颜色/

/border: 19px solid blue;实线/

/border: 10px dashed read;虚线/

/border: 10px groove green;凹槽线/

/border: 10px inset yellow;嵌入式线/

/* 单独给元素的某一个方向添加边框 _/

border-top: 12px solid green; 上

border-left: 12px solid blue; 右

border-bottom: 12px solid pink; 下

border-right: 12px solid yellow; 左

/_ 值越大越圆 */

border-radius: 4px;

块级元素：四个边加边框全部生效并且全部影响元素所占宽高
行内元素：四个边加边框全部生效，但是左右边框会影响元素所占宽度上下边框不影响元素所占高度

#####内边距

什么是内边距：元素边框距内容的距离

/* 内边距会影响元素的宽高 _/

/_ padding-left: 20px;

padding-top: 20px; _/

padding: 10px; /_ 四个边的内边距都是10px _/

padding: 10px 20px; /_ 上下10 左右20 _/

padding: 10px 20px 30px 40px; /_ 上右下左 */

块级元素：内边距全部生效并且会影响元素的所占宽高
行内元素：内边距全部生效但是左右内边距会影响元素所占宽度上下内边距不影响元素所占高度

#####块级元素和行内元素关于盒子模型的总结

块级元素：可以设置宽高，外边距全部生效，边框全部生效并且全部影响宽高，内边距全部生效并且全部影响宽高
行内元素：不可以设置宽高，外边距左右生效上下不生效，边框全部生效但是左右影响宽，上下不影响高，内边距全部生效但是左右影响宽上下不影响高

####文本相关属性

/* 文本对齐方式 left/center/right 左中右*/

text-align: center;

/* 文本修饰

underline下划线

overline上划线

line-through删除线

none 无

删除线使用

text-decoration: line-through;*/

/*去掉ul的点

ul{list-style:none;*/

/*去掉超链接的下划线指向a

text-decoration: none;*/

/* 文本颜色 */

color: green;

/* 文本阴影

1 阴影颜色

2和3 代表阴影偏移坐标

4 阴影模糊程度值越大越模糊

text-shadow: red 5px 5px 5px;

/* 行高用于实现上下居中 */

line-height: 50px;

####字体相关属性

/* 字体大小单位像素*/

font-size: 10px;

/* 字体粗细 bold加粗

normal 默认效果 */

font-weight: bold;

/* 斜体 */

font-style: italic;

/* 字体名称可以赋值多个依次检测

哪个可用用哪个 */

font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;

###课程回顾：

盒子模型：外边距内边距边框宽高
宽度计算公式：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距

####学子商城首页练习：

段落标签p自带上下外边距，如果不需要可以设置成margin：0;
display：block;是把行内元素改成块级元素
float:left/right; 浮动元素明天会细讲

####溢出设置 overflow

超出范围隐藏 overflow:hidden;
超出范围显示 overflow:visible;
超出范围滚动显示 overflow:scroll;

4.解决粘连问题:

####显示方式 display

block：块级元素的默认值，可以设置宽高盒子模型相关没有任何限制，但是元素必须独占一行
inline: 行内元素的默认值，可以和多个行内元素共占一行，不能修改宽高，而且盒子模型相关的上下(外边距，内边距，边框)不能赋值或没有效果
inline-block: 行内块，可以修改宽高也可以共占一行

———————————————————————————————————

浮动:float: left;左浮动 float:right; 右浮动

###定位

####position定位

#####文档流定位（静态定位）

默认是文档流定位元素如果是文档流定位则显示的位置会从上到下从左向右排列
设置方式： position:static；

#####相对定位

相对定位元素不会脱离文档流，不影响其它元素的位置，相对定位通过上右下左让元素相对于元素初始位置做偏移
设置方式： position：relative；

直接top,right,left,bottom上右左下调位置 left:10px;(右移用左，下移用上)

应用场景：存在于页面中的元素如果需要做位置移动，但是不希望页面中的其它元素跟着移动，此时使用相对定位
总结：不脱离文档流，相对于初始位置

#####绝对定位

元素脱离文档流，后面的元素会往上顶，上下左右的值相对于窗口或相对于做了非static定位(推荐相对定位)的祖先元素，如果多个祖先元素做了相对定位则就近原则。
设置方式： position：absolute；

直接top,right,left,bottom上右左下调位置 top:10px;(右移用左，下移用上)

应用场景：当元素需要层叠显示并且不希望元素存在于文档流中时使用
总结：脱离文档流，相对于窗口或相对定位的祖先元素

#####固定定位

元素固定在窗口的某个位置，不会因为内容位置的改变改变自身位置
设置方式： position:fixed;
总结：脱离文档流，相对于窗口

####浮动定位

元素脱离文档流，元素可以在当前所在行左侧或右侧浮动，当撞到父元素边框或行内其他浮动元素时停止

如果一行浮动元素装不下会自动换行，换行时有可能会被卡住
如果元素上面的元素浮动了则元素会往上顶，如果不希望元素往上顶可以设置元素两侧不允许有浮动 clear:both
当元素的所有子元素全部浮动时此时自动识别的高度为0，

通过overflow：hidden解决

应用场景：把纵向排列的元素改成横向时使用

####行内元素的垂直对齐方式

vertical-align:默认baseline/top/middle/bottom

###CSS的三大特性

继承性：子元素可以继承祖先元素中的部分样式，只能继承color/font-开头/text-开头的属性

有个别标签自带效果，不能继承自带效果的样式比如：超链接，h1-h6

层叠性：通过不同的选择器可以多次指向同一个元素如果设置的属性不一样则所有的效果全部生效,如果作用相同的属性则根据选择器的优先级决定
优先级：当多个选择器选择同一个元素并且设置相同的属性时会根据以下规则

直接选中优先级高于间接选中(继承)
如果是相同选择器：后执行的覆盖前面执行的
如果是不同选择器：根据选择器的作用范围决定优先级，范围(id<class<标签名<继承<元素默认样式)越小优先级越高 (id>class>标签名>继承>元素默认样式 )

———————————————————————————————————

###JavaScript 简称JS

用于给页面添加动态效果或动态内容的
JS历史：1995年由网景(NetScape)公司发布 LiveScript 同年改名为JavaScript，和Java没有关系，为了蹭热度。
语音特点：属于脚本语言不需要编译，由浏览器解析执行，JavaScript可以嵌套在html中，基于面向对象，弱类型的语言, 交互性：可以用户直接交换，安全性：该语言只能访问浏览器里面的内容

###如何在html页面中引入JavaScript

在元素的事件属性中，如按钮的点击事件

<input type=“button” value=“点我试试！”

οnclick=“alert(‘试试就试试！’)”>

在script标签中写js代表 script标签可以写在页面的任何位置推荐写在head里面
在单独的js文件中写js代码通过script标签中的src属性引入，引入过文件的script标签不能在标签体中继续写js代码

###JavaScript语法

数据类型，变量，运算符，语句，方法（函数）

####数据类型

数值类型(number)

NaN (Not a Number) isNaN(18)= false isNaN(“abc”)=true

字符串类型(string)
布尔值类型(boolean)
未定义类型(undefined)
对象类型(object)

####变量的声明和赋值

var x = 18; //类型为number 值 18

var name = “张三”; //类型string 值张三

var b = true/false; //类型Boolean 值 true/false

var y; //类型是undefined 值 undefined

var p = new Person();

####数据类型之间的隐式转换

js中数据类型会根据不同的场景进行自动类型转换

数值类型

转字符串：直接转 18->“18” “abc”+18 = “abc18” （只有加法会把数值转字符串）
转布尔值: 0和NaN转false 非0即真(true)

字符串类型

转数值: 能转直接转不能转则转成NaN；（NaN和任何数值进行任何运算结果都是NaN） “35”->35 “abc”->NaN
转布尔值: 只有空字符串(“”) 转false 其它true “”->false, “a”->true

布尔值类型

转数值： true=1 false=0 30+true=31 30+false=30
转字符串：直接转 “abc”+true = “abctrue”

undefined类型

转数值： NaN
转字符串： “undefined”
转布尔值： false

null

转数值：0 28+null=28
转字符串： “null” “abc”+null = “abcnull”
转布尔值： false

###运算符

JS语言中的运算符和Java中大致相同
和，==会先将等号两端的类型统一然后再比较值，===先判断类型是否相等如果不等则直接false如果相等再比较值是否相等
typeof typeof 66+6 =“number6”
两数相除结果会自动生成整数或小数 5/2=2.5 4/2=2

###语句 if else while do while for switch case

JS语言中的语句和Java中大致相同

语句中写条件的括号中如果不是布尔值类型会自动转成布尔值
for循环中 int i 改成 var i 不支持增强for循环（foreach)

###函数(方法)声明

Java中声明函数的写法

public String run(int age,String name){

return “abc”;

}

JS中写法

function run(age,name){

return “abc”;

}

格式一： function 方法名(参数列表){ return xxx; }
格式二： var 方法名 = function(参数列表){ return xxx; }

###和页面相关的函数

通过id得到页面中元素的函数

var input = document.getElementById(“myinput”);

从文本框中获取内容和设置内容

input.value = “abc”;

alert(input.value);

给div设置文本内容

d.innerText=“abc”;

给div设置html内容

d.innerHTML+= “

abc

”;

———————————————————————————————————

String 数组日期对象正则

###String相关内容

创建字符串的两种方式

var s1 = “abc”; //单引号和双引号都可以

var s2 = new String(“abc”);

把字符串转成数值

parseInt(str)//把字符串转成整数，还可以把小数转成整数

parseFloat(str)//把字符串转成小数

Number(str)//等效parseFloat

字符串转大小写

str.toUpperCase()//转大写 str.toLowerCase()//转小写

获取字符串出现的位置从0开始

var str = “abcdefgem”;

-从前面找

str.indexOf(“e”);

-从后面找

str.lastIndexOf(“e”);

截取字符串从0开始

str.substring(start,[end]);

替换字符串

str.replace(old,new);

color

var x = “

”;

x.replace(“[c]”,color);

拆分字符串

str.split(“.”); //返回值是个数组

####数值相关：四舍五入

18.23456.toFixed(4); // 18.2346

###数组相关

创建数组数组内部可以添加任意类型的数据

var arr1 = [“小明”,18,true];

var arr2 = new Array();

往数组中添加内容

arr2.push(“张学友”);

arr2.push(28);

arr2.push(true);

修改数组的长度

arr1.length = 2;

遍历数组

for(var i=0;i<arr1.length;i++){

alert(arr1[i]);

}

数组反转

arr.reverse();

数组排序默认排序方式是以字符串的形式进行排序排序规则是通过Unicode编码进行排序

arr.sort();

自定义排序：

//自定义排序需要准备一个自定义的排序方法

function sortfn(a,b){

return a-b;//升序

//return b-a;//降序

}

alert(arr.sort(sortfn));

###日期相关函数

服务器时间和客户端时间

获取客户端时间

var d1 = new Date();

2018/9/30 14:35:32 把字符串时间转成时间对象

var d2 = new Date(“2018/9/30 14:35:32”);

从时间对象中获取和设置时间戳（距离1970年1月1日 08：00：00）

d2.getTime();

d2.setTime(1000); 1970/1/1 08:00:01

获取时间分量单独的年月日时分秒星期几

d1.getFullYear();

d1.getMonth();//从0开始

d1.getDate();

d1.getDay();//星期

d1.getHours();

d1.getMinutes();

d1.getSeconds();

获取年月日获取时分秒

d1.toLocaleTimeString();

d1.toLocaleDateString();

###正则表达式

. :匹配任意字符除了换行

\w:匹配任意数字、字母、下划线

\d:匹配任意数字

\s:匹配空白

^: 开头

$: 结尾

应用场景：1. 查找内容 2. 校验文本

//第一种创建方式：第一个/代表的是规则
//第二个参数表示模式
//（i:忽略大小写 g:全局查找）
var reg1 = /^a/i; //以a开头 忽略大小写
//以m结尾
reg1 = /m$/;
//包含两个数字
reg1 = /\d{2}/;
//以3个数字开头
reg1 = /^\d{3}/;
//以y开头m结尾中间包含5位数字
reg1 = /^y\d{5}m$/;
//6-10位数字字母下划线
reg1 = /^\w{6,10}$/;
//第二种创建方式第一个参数是格式，第二个是模式
//第二个参数如果没有值可以省略
var reg2 = new RegExp(“^\w{6,10}$”);
//和正则相关的方法
//1. 查找内容
var str = “you can you up no can no b b”;
var reg = /no/g;
//查找内容 如果全局查找 每执行一次查找一个
//执行第二次查找下一个 找不到时得到null
//alert(reg.exec(str));//no
//alert(reg.exec(str));//no
//alert(reg.exec(str));//null
//2. 校验方法
//reg = /^You/i;
//alert(reg.test(str));
//字符串和正则相关的方法
//3. 查找内容 一次性得到所有查找内容
//var arr = str.match(reg);
//alert(arr);
//4. 查找替换 替换所有
alert(str.replace(reg,“bu”));

———————————————————————————————————

###事件取消

-在事件属性中如果直接return false 则会把当前事件取消掉

###DHTML

-Dynamic(动态) HTML，着并不是一个新的技术只是HTML+CSS+JS得到的一个

动态页面称为DHTML

-BOM：Browser(浏览器) Object(对象) Model(模型) ，包含浏览器相关的各种对象

-DOM：Document(文档) Object(对象) Model(模型)，包含和页面相关的各种对象

###BOM 浏览器对象模型

###window(窗口)

window里面的属性和方法称为全局属性或全局方法，调用时可以省略掉 window.

-window下常用的属性和函数

parseInt()和paseFloat()

alert() 弹出框

confirm() 确认框

prompt() 弹出文本框

isNaN()

-location:位置

-href 获取和设置浏览器访问的地址

-reload() 页面重新加载（刷新）

history：历史

-次历史代表的是当前窗口的历史

-history.length获取当前窗口访问的页面数量

-history.back()返回上一页面

-history.forward()前往下一页面

-history.go(num) 前往某个页面 0代表当前页面 1代表下一个页面 -1代表上一个页面 2代表下两个页面

screen ：屏幕

-screen.width/height 屏幕宽高

-screen.availWidth/availHeight 屏幕可用宽度

navigator 导航/帮助

-navigator.userAgent 得到浏览器的版本信息
###和window相关的事件
onclick onblur onsubmit
-onclick:点击事件， 当点击页面内的任何位置的时候触发
<a href=“http://www.tmooc.cn”
οnclick=“return confirm(‘您确认离开吗？’)”>OO
οnclick=function(){
alert(“点击了窗口！”);
}
-onload: 加载完成事件，当页面加载完成的时候执行
onload = function(){
i1.value=“abc”;
}
-onfocus:获取焦点事件，当页面处于激活状态的时候执行
onfocus = function(){
console.log(“获取焦点”);
}
-onblur:失去焦点事件，当页面切换到非激活状态的时候执行
onblur = function(){
console.log(“失去焦点”)
}
####eval（)方法(函数)
-可以将传递到方法中的字符串参数以js代码的形式执行
####高级版计算器
-按钮边框不影响显示范围
-文本框边框影响显示范围
###通过js给元素添加样式
-获取和设置的样式为内联样式，不能获取非内联样式的值
###定时器
-setInterval(函数，时间间隔);
/每隔2秒执行函数体的内容/
setInterval(function(){
//console.log(x++);
x+=10;
i1.style.marginLeft=x+“px”;
},2000);/2000是2秒/
###假轮播图作业：
//通过元素名称获取元素对象 得到一个数组
-var arr = document.getElementsByTagName(“img”);
//让元素对象隐藏
-display:“none”;
//让元素对象显示
-display:“block”;
function myfn(div){
//通过div 得到里面的img图片
var img = div.getElementsByTagName(“img”)[0];
//alert(img);
//判断图片当前是否是隐藏状态
if(img.style.display==“none”){//隐藏
img.style.display=“block”;//让图片显示
}else{
img.style.display=“none”;//让图片隐藏
}
}

———————————————————————————————————

###定时器

-通过定时器可以实现每隔一段事件执行某段代码

-开启定时器：

var timeID = setInterval(函数，时间间隔)

-停止定时器

clearInterval(timeID);

-setTimeout(函数，时间);//这种方式只会执行一次

###DOM Document Object Model

-文档对象模型，学习DOM 主要学习的就是对页面中标签的增删改查操作

###查找元素

-通过id查找

var input = document.getElementById(“id”);

-通过标签名查找

var arr = document.getElementsByTagName(“标签名”)[0];

-通过标签的name属性查找

var arr = document.getElementsByName(“name属性的值”)[0];

-通过标签的class属性查找

var arr = document.getElementsByClassName(“class属性的值”)[0];

-获取body

document.body

####创建元素

var h1 = document.createElement(“h1”);

h1.innerText=“拉拉”;// 需要点击页面才会显示内容

###添加元素到某个元素中

父元素.appendChild(新子元素);

ul.appendChild(li);

###插入元素到某个元素的上面

父元素.insertBefore(新元素,弟弟元素);

ul.insertBefore(li,sh);

###删除元素

父元素.removeChild(被删除的元素);

ul.removeChild(sh);

背景

白色

上海
广州
li的父元素是ul，li的子元素是d1，li的弟弟元素是sh(和li同级别)例：

• <input type=“button” value=“添加” οnclick=“addfn()”>
<input type=“button” value=“插入” οnclick=“insertfn()”>
<input type=“button” value=“删除” οnclick=“removefn()”>

背景
上海
广州
———————————————————————————————————
###事件
-事件指一些特定的时间点事件包括：window相关的事件(状态改变事件)，鼠标
相关，键盘相关
-onclick点击事件，onload加载完成事件，onfoucs获取焦点事件，

里面

ul.appendChild(li);
}
function insertfn(){
//创建li元素对象
var li = document.createElement(“li”);
//设置显示内容
li.innerText = i1.value;
//得到ul
var ul = document.getElementsByTagName(“ul”)[0];
//li添加到ul里面的上海上面
ul.insertBefore(li,sh);
}
function removefn(){
//得到ul
var ul = document.getElementsByTagName(“ul”)[0];
ul.removeChild(sh);//删除
}
<input type=“button” value=“添加” οnclick=“addfn()”>
<input type=“button” value=“插入” οnclick=“insertfn()”>
<input type=“button” value=“删除” οnclick=“removefn()”>