Web编程笔记（html+css）

最新推荐文章于 2024-10-18 19:19:52 发布

m0_57675110

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量217

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_57675110/article/details/128133657

版权

HTML是什么
超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。
它可以用来建立自己的WEB站点，最终HTML运行在浏览器上，由浏览器解析显示出来。

标签格式是：
<标签名属性名1="值1" 属性名2="值2" ... >
内容
</标签名>

meta 元数据：描述数据的数据

Class Student{
String name="小明";
int age=50;
String girlFriend;
}

</html>

在编程中，空格、回车都是控制的符号
<br> 是回车/换行
  是空格

   转义符如<xxx>要显示的话，需要转义符
   <xxx>
   <xxx>
< 小于号
> 大于号

<hr> 是一条线

标题：
标题1最大
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

内联标签:在行内
span、a、img、td、audio、vidio、 input、
行级标签:独占一行

div、h1~h6、P、ul、table ( tr ) h1~h6独占一行

外边距：margin

   <p>这是一个段落<p/>
   独占一行，有上下边距

   <div>这是一个块</div>
   独占一行，没有上下边距有上下边距

px像素

<span>文字1</span><span>文字2</span><span>文字3</span><br>
   <br>
   <span>文字1文字2文字3</span>
   可写在一起，但隔开的话，可以使用部分变红的操作。
   变成红字如<span style="color:red">文字2</span>

   <pre>里面的东西原封不动的展现出来有空格，回车</pre>



   <u>下划线</u><s>删除线</s> <b> 加粗</b><strong>加粗</strong>
   <i>斜体</i><cite>斜体</cite><em>斜体</em>

   <span style="font-weight:bold;">style加粗</span>
   用style加粗 style="font-weight:bold;"

   <img height="100" width="200" src="图片网址" />
   height="高度" width="宽度"
   str可以写本地路径相对路径放html一个文件夹吧
   关于相对路径 ../父路径 <img height="100" width="200" src="../美好的世界.png" />

路径
1、绝对路径
2、相对路径

<img src="D:\z\xxx\yyy\zhu. jpg">安全性问题
<img src=”/shop/com/qq/ttt/xxx/yyy/zhu.jpg"> 根路径，类似网址形式

超链接 a标签
<a>
<a href="http://www.baidu.com"> 去百度 </a>
href 填网址 http://
<a href="http://www.baidu.com" target="_blank"> 去百度 </a>
新窗口打开 target="_blank"

<span id="hello"> 锚点</span>
锚点相当于页面内部的链接、定位。

<html>
<head>
<meta charset="utf-8"/>
<title>我是标题</title>
   </head>

   <body>
   <a href="index2.html#hello"> 去实验锚点 </a>
   </body>
</html>

列表 list 可嵌套 <ul> <ul> </ul></ul> 下拉列表
<ul>水果列表
<li>苹果</li>
<li>葡萄</li>
<li>香蕉</li>
<li>草莓</li>
</ul>   黑心圆

   <ul style="list-style:square">水果列表
   </ul> 黑心方块
   <ul style="list-style:circle">水果列表
   </ul> 空心圆

ul 无序列表

有序列表 ol
   <ol>水果列表
<li>苹果</li>
<li>葡萄</li>
<li>香蕉</li>
<li>草莓</li>
</ol> 有数字标号，也可嵌套
   <ul style="list-style:lower-roman">生产它的国家罗马数字标号

表格
格子之间的距离
cellspacing="0" 间距为0

<caption>书籍列表</caption> 表题
<thead> 表头
<thead>
       <tr><th>

       rowspan='2' 竖向占两行
       colspan="4" 横向占四列


       结尾
<tfoot><tr><td colspan="4">这些都是购买的书籍</td></tr></tfoot>

表单
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <link href="bootstrap460/css/bootstrap.css" rel="stylesheet" />
       <div class="container">
           <form action="#" method="post">
               <div class="form-group">
                   <label for="username">账号</label>
                   <input type="text" id="username" class="form-control" placeholder="手机号/邮箱号/QQ号">
               </div>


               <div class="form-group">
                   <label for="password">密码</label>
                   <input type="password" id="password" name="password" class="form-control" placeholder="密码不得少于6位">
               </div>
       <div class="form-group">
                   性别（单选）：
                   <label><input type="radio" name="sex" value="1">男</label>   
                   <input type="radio" name="sex" value="0" id="xxx"> <label for="xxx">女</label>
               </div>
               <div class="form-group">
                   爱好（多选）：
                   <input type="checkbox" name="like" value="1" />足球
                   <input type="checkbox" name="like" value="2" />唱歌
                   <input type="checkbox" name="like" value="3" />篮球
               </div>
               <input type="submit" class="btn btn-info" >
               <button type="button" class="btn btn-primary">登录</button>

           </form>

       </div>
   </body>
</html>

媒体查询：响应式（根据屏幕的尺寸的变化而自动变化改变排版）
栅格化

表单

<form action="#" method="get"> get方法
get/post: query String parameter

url 网址
urlEncoding 编码

<b> 加粗</b><strong>加粗</strong>
又有数据有外观（加粗）

css:层叠样式表修饰网页外观


缩写 #ff6600 -> #f60 （有两个数字相同可缩写） css颜色图谱与颜色大全

<span id="xxx">我是一些文字</span>
看到xxx就找到了它的样式

<html>
<head>
<meta charset="utf-8"/>
<title>我是标题</title>
   </head>

   <body>
   <pre>
   css:层叠样式表
   </pre>

   <style>
   #xxx{
   color:red;background-color:pink;font-weight:bold;font-size:50px
   }
   </style>

   <div>
   <span style="color:red">我是一些文字</span>
   </div>
   <br><br><br>
   <div>
   <span id="xxx">我是一些文字</span>
   </div>
   </body>
</html>

@import url(default.css); //存样式文件导包 default.css文件
#xxx{
color:red;
background-color:pink;
font-weight:bold;
font-size:50px
}

css选择器
<html>
<head>
<meta charset="utf-8"/>
<title>我是标题</title>
   </head>

   <body>
   <pre>
   css:选择器
   1. id选择器
2.class选择器:物以类聚，人以群分
   3.标签选择器
   </pre>

margin:0; 外边距等于0 padding:0; 内边距

<html>
<head>
<meta charset="utf-8"/>
<title>我是标题</title>
   </head>

   <body>
   <pre>
   css:选择器
   1. id选择器 #
2.class选择器:物以类聚，人以群分
   3.标签选择器
   4.属性选择器
   5.* 通配选择器
   6.伪类选择器
   </pre>

   <style>
   *{margin:0; color:blue;} 
   .person{color:green;}
   .person[country=chinese] {font-size:50px;} 
.person[country=usa] {font-style:italic;} 
   div{background-color: yel1ow;} 
   li{color:red;}
   .fruit{color:red;}
   </style>
   <p>一段文字</p>

   <div>这是一些人的名字
   <div id="xxx" class="person" country='chinese'>张三</div>
       <div id="yyy" class="person" country='usa'>李四</div>
   </div>
   <div>呵呵</div>

   <ul>
   <li class="fruit">苹果</li>
   <li class="fruit">西瓜</li>
   <li class="fruit">香蕉</li>
   <li class="fruit">草莓</li>
   <ul>
   </body>
</html>

伪类选择器

a:visited从使用意义来说，是指用户访问过某一个链接之后，该链接的a标签将呈现对应:visited属性定义的样式。
1、a：link 英文link就是链接的意思，代表当一段文本为链接时的属性。
2、a：visited英文visited就是访问过的意思，代表这段文本被点击之后的属性。
3、a：hover英文hover就是悬停的意思，代表鼠标指针放在这个链接上时的属性。
4、a：active英文active就是有效的、快速的意思，代表鼠标按下时一瞬间的属性。
<html>
<head>
   <meta charset="utf-8" />
   </head>

   <body>
   <style>
       a:link{fongt-style;italic; font-size:20px;} 
       a:visited{color:red;}   
       a:hover {font-size:40px;} 
       a:active{color:green;}       
       </style>
       <a href="http://www.taobao.com/">去淘宝</a><br>
       <a href="http://www.xxx.com/">去未知xxx</a><br>
       <a href="http://www.yyy.com/">去未知yyy</a><br>
   </body>
</html>

css后代选择器
   1.无空格：代表且的关系，满足条件不止一个
2.有空格:代表选取子孙节点 
3.大于符号:选择直接子节点 
4.相邻后一个元素 +
5.相邻后方所有元素 ~



字体回退族
. food{ color : orange;
font- -size: 40px ;
font- weight :bolder ;
font- family: "serif" , "sans-serif" , "cursive", '微软雅黑' , "宋体" ;
}
.grape {color :orange;
font- -size: 40px ;
font- weight :bolder;
font- family:"华文彩云", '微软雅黑' , "宋体" ;

<html>
<head>
<meta charset="utf-8"/>
   </head>

   <body>
   <pre>
   字的css属性
   </pre>
   <style>
   .food{color:orange;
   font-size:40px;
   font-weight:bolder;
   font-family:"serif","sans-serif",'微软雅黑';
   }
   .grape{color:orange;
   font-size:40px;
   font-weight:bolder;
   font-family:"华文彩云","sans-serif",'微软雅黑';
   }
   </style>

<ul>水果列表
<li class="fruit food">apple 苹果</li>
<ul>国家名
   <li>china</li>
   <li>usa</li>
   <li>japan</li>
   <li>american</li>
   </ul>
<li class="grape">apple 葡萄</li>
<li class="fruit">梨</li>
<li class="fruit">西瓜</li>
</ul>
   </body>
</html>

背景图
CSS 里的 no-repeat是针对背景图来说的。当你设置了no-repeat这个属性后，你的背景图将不会被重复，再换一种说法，你在网站上所看见的背景图就是你所增加的图，不会出现平铺或重复的现象
repeat-y 在方向重复

<html>
<head>
<meta charset="utf-8"/>
   </head>

   <body>
   <pre>
   字的css属性
   </pre>
   <style>
   #food{
   height:800px;
       background:yellow url(美好的世界.png) no-repeat 50px 50px; 
       /*
       background-color:yellow;
       background-image:url(美好的世界.png);
       background-repeat:no-repeat;
       background-position:100px 200px;
   */
   }
   </style>

<ul id="food">水果列表
<li class="fruit food">apple 苹果</li>
<ul>国家名
   <li>china</li>
   <li>usa</li>
   <li>japan</li>
   <li>american</li>
   </ul>
<li class="fruit">apple 葡萄</li>
<li class="fruit">梨</li>
<li class="fruit">西瓜</li>
</ul>
   </body>
</html>

内联元素：即便设置高度也不起作用（不具有高度height）
       块级元素：拥有高度
   display可以有哪些值:
   block:转换成块级元素
   inline:转换成内联元素
       inline-block:行中的块
       none: 不显示 <div style="display:none">我是一个不显示的div标签</div>
<span> 是内联标签
display
<html>
<head>
<meta charset="utf-8"/>
   </head>

   <body>
   <pre>
   内联元素：不具有高度height
       块级元素：拥有高度
   display可以有哪些值:
   block:转换成块级元素
   inline:转换成内联元素
   </pre>
   <style>
   span{display:black;}
   div{display:inline;}
   </style>

   <span>这是一些文字</span>
   <span>这是一些文字</span>
   <span>这是一些文字</span>
   <span>这是一些文字</span>

   <div>我是div标签</div>
   <div>我是div标签</div>
   <div>我是div标签</div>
   <div>我是div标签</div>
   </body>

外边距:margin 离别的元素的距离

浏览器 f12 No matching property 最左端箭头符号选中即可显示属性值

border: 5px solid red;/*solid dashed*/
边框

border-top: 50px red solid;
border-right: 50px blue solid;
上右边框

盒模型:
外边距:margin 离别的元素的距离
边框 : border
内边距: padding

   宽度: width
高度: height

box-sizing 盒子的尺寸

1. content-box width不包含padding,border
2.boder-box width包含padding,border

box-sizing: border-box;
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高
=================================================================================

上下两个盒子的margin以大的为准。左右不管

居中
text-align: center; 让内部的内联元素，相当于自己水平居中
   margin: 0 auto 让自己（块级元素）相对于父元素水平居中


   vertical-align: 垂直对齐一幅图像
   文字、图片


   使段落生出行内框 display

布局{

定位position
   static .
   fixed:固定(针对于浏览器窗体)
   relative:相对于自己的原始位置进行位移。原先的空间不会释放 (相对定位)
   absolute: 绝对. (1) 如果父元素有定位的元素，那就针对父进行位移否则 (2)针对浏览器进行位移
   原先的位置释放了

英文单词是以空格间隔为一个单词

       position: fixed;
       top: 20px;right: 30px; 居在右侧有点像广告网页滑动该弹窗在网页中的位置不变

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

   浮动
   display可以有哪些值:
   block:转换成块级元素
   inline:转换成内联元素
   inline-block: .
   行中的块
   none :
   不显示

盒模型
   float .
   float属性定义元素在哪个方向浮动:从左到右、
   宽度、高度有效(块级标签) 节约空间
   紧密摆放

   把向右浮动： float:right; 向左浮动 float: left;
   拖动页面的大小会变化像浮起来一样

浮动环绕一般用于文字包围图片之类的，改变页面大小，环绕效果变化。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另-个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
(从正常的文档流中抽出来了)
清除浮动 clear:both意思就是清除浮动 clear:both,right,left
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

浮动使父元素失去了高度

圆角 <button
}

script脚本放可执行语句 console 输出 console.log(a); 输出a

if (expression)
//语句1
else {
//语句2
JavaScript的if语句中，表达式expression不仅支持用布尔值，还可以是其它值。
1、当expression是true，非0数值，存在的对象，则会执行“语句1”部分。
2、当expression是false, 0，null, 空字符串，则会执行else的部分。

==：仅比较字面
===：类型也必须一样

单字母和多字母都是 String 类型 null->object undefined->undefined
function fff(){}
       a=fff;
       console.log("fff的类型"+typeof(fff));
       console.log("a的类型"+typeof(a));
       function


       parseInt() 转换成数字
       字符串转数字
       数字转字符串数字+""

       substr 包含end substr 方法返回一个从指定位置开始的指定长度的子字符串。
       substring 方法将返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串。

弹窗函数
       <!DOCTYPE html>
       <html>
           <head>
               <meta charset="utf-8">
               <title></title>
           </head>
           <body>


               你好

               <script>
               var result=prompt("请输入一个数字：");
               console.log("你输入的是"+result);
               /* alert("呵呵");
               var result=confirm("你真的要删除吗？");
               console.log(result); //f12 true 得知用户点的是true
               if(result){
                   //
               }else{
                   //
               } */
               </script>

           </body>
       </html>

函数

       <!DOCTYPE html>
       <html>
           <head>
               <meta charset="utf-8">
               <title></title>
           </head>
           <body>
               函数
               <button οnclick="add();">按钮</button>
               
               <script>
               function add(xxx,yyy){
                   /* console.log(xxx + yyy);
                   console.log("add()被调用");
                   //return 100; 返回值 */
                   return xxx+yyy;
               }

               var result =add(111,222);
               console.log("result="+result);
               //add();
               </script>
           </body>
       </html>

函数就像变量一样

       <!DOCTYPE html>
       <html>
           <head>
               <meta charset="utf-8">
               <title></title>
           </head>
           <body>
               函数像变量一样
               (1)函数可以作为参数
               (2)函数可以作为返回值
               (3)匿名函数
               匿名函数在定义时直接被调用
               (4)可变长度参数
               <script>
           /* function add(xxx,yyy){
               return xxx+yyy;
           }
           var n=add;
           console.log(n(222,333));
           function f(m){
               console.log(m(111,222));
           }
           f(add); */

           /* function a(){
               console.log("a()被执行");
           }
           function b(){
               return a;
           }
           function c(){
               return b;
           }
           c()()(); */

           /* var ttt = function(x,y){
               return x+y;
           }
           console.log(ttt(111,444)); */

               /* (function(x,y){
                   console.log("匿名函数111直接调用");
                   return x+y;
               }(333,444));

               (function(x,y){
                   console.log("匿名函数222直接调用")
                   return x+y;
               }(333,444)) */

               /* function add(x,y,z=0,h=0){
                   return x+y+z+h;
               }
               console.log(add(111,222)); //111+222+nul 没法计算
               console.log(add(111,222,333));
               console.log(add(111,222,333,444)); */

               //法1 ...运算符
               function add(...arr){
                   var sum=0;
                   for(i=0;i<arr.length;i++){
                       sum=sum+arr[i];
                   }
                   return sum;
               }
               console.log(add(111,222)); //111+222+nul 没法计算
               console.log(add(111,222,333));
               console.log(add(111,222,333,444));
               console.log("============================")

               //法2 arguments代表所有参数形成的数组
               function add(){
                   var sum=0;
                   for(i=0;i<arguments.length;i++){
                       sum=sum+arguments[i];
                   }
                   return sum;
               }
               console.log(add(111,222)); //111+222+nul 没法计算
               console.log(add(111,222,333));
               console.log(add(111,222,333,444));
               </script>
           </body>
       </html>

数组



   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title></title>
       </head>
       <body>
           学习数组

           <script>
           //遍历的四种写法
           //一、普通的for
           var arr=[100,200,300,400,500];
           for(i=0;i<arr.length;i++){
               console.log(arr[i]);
           }
           console.log("=========================");
           // 二、 for-in
           for(index in arr){
               console.log(index,"-->",arr[index]);
           }
           console.log("=========================");
           //三、 for-of
           for(var one of arr){
               console.log(one);
           }
           console.log("=========================");
           //四、 forEach()函数
           console.log("forEach()函数")
           arr.forEach(function(item){console.log(item)});
           /*
           var arr=[100,200,300,400,500];
           var result=arr.splice(2,2);   //指定删除的开始位置和数量
           console.log(arr);
           console.log(result); */
           /* var arr=[100,200,300,400,500];
           arr.shift(); //首位弹出
           console.log(arr);
           arr.unshift("汤姆"); //首位压入
           console.log(arr); */
           /*
           var arr=[100,200,300,400,500];
           arr[arr.length]='Tom';
           console.log(arr);
           console.log("=============================")
           arr.push("小明"); //尾部压入
           console.log(arr);
           console.log("======================")
           var one=arr.pop(); //弹出弹出尾部的数据
           console.log(arr);
           console.log("弹出的数据是："+one);
           console.log("====================="); */
           /*
           var arr=[100,200,300,400,500];
           var brr=["张三","李四","王五","赵六"];
           var crr=arr.concat(brr); //连接两个或更多的数组，返回结果集
           console.log(crr);
           var drr=arr.join("#@"); //用指定的符号去串联每一个元素
           console.log(drr);
           var err=arr.reverse(); //翻转颠倒数组中元素的顺序，改变原数组，返回该数组
           console.log(arr);
           console.log(err); */
           /*
           //这里不能用name 会出错用其他变量都行有一个window.name 会冲突
           var names=[100,200,300,400,500];
           console.log(names[3]);
           console.log(names[10]);
           names[10]=998;
           console.log(names[10]);
           console.log(names);
           console.log("==============")
           for(i=0;i<names.length;i++){
               console.log(names[i]);
           } */
           /* //数组 object类型
           //1. 括号内给出每个元素
           var names=new Array(100,200,300,400,500);
           console.log(names[3]);
           console.log(typeof names);
           console.log("=========================")
           //2. 给出长度
           var names=Array(10);
           console.log("长度"+names.length);
           console.log(names[3]);
           console.log(typeof names);
           console.log("=========================")
           //3. 方括号内给出元素
           var names=[100,200,300,400,500];
           console.log(names[3])
           console.log(typeof names); */
           </script>
       </body>
   </html>

filter函数
   作用
   对数组的所有元素进行过滤，得到一个新的满足条件的数组。
   语法形式： oneArray.filter( function(item){...})
   具体：对每个元素进行指定函数处理，如果得到的结果是true，则该元素将作为filter()结果数组的元素。

   作用
   对数组的所有元素进行过滤，得到一个新的满足条件的数组。
   语法形式： oneArray.filter( function(item){...})
   具体：对每个元素进行指定函数处理，如果得到的结果是true，则该元素将作为filter()结果数组的元素。

   slice()函数
   语法
   arrayObject.slice(start,end)

   对比splice()
   splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

数组map()用法

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       映射 x -> y
       <script>
       var arr=[100,200,300,400,500];
       var brr=arr.map(function(item){
           console.log(item);
           return item*item});
       console.log(brr);
       </script>
       <script>
       var m=new Map([
           ['zhansan',10000],
           ['lisi',40000],
           ['wangwu',90000],
           ['zhaoliu',160000],
       ]);
       </script>
   </body>
</html>

箭头函数 (最简写法)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       箭头函数
       <script>
       //普通函数
       function add(x,y){
           return x+y;
           }
           //箭头函数
           var f=(x,y) => {return x+y;}
       var result=f(111,222);
           console.log(result);
           console.log("==============")
           //箭头函数：当参数只有一个的时候就业可以省略小括号
       var f2= x => {return x*x};
           var result2=f2(9);
           console.log(result2);
           //箭头函数：当函数体只有一个返回语句的时候就可以省略花括号和return
           var f3= x => x+x
           var result3=f3(9);
           console.log(result3);
       </script>
   </body>
</html>

数组filter()

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       filter() 过滤
       <script>
       //年龄
       var arr=[70,15,30,50,9,60,45,20,5,25,93];
       /* //大于30岁的年龄
       var brr=arr.filter(function(item){return item>30});
       //保留大于30 的
       console.log(brr); */
       console.log("==箭头函数，函数体只有一个返回语句可省略花括号和return===")
       var brr=arr.filter(item => item>20)
       console.log(brr);
       </script>

   </body>
</html>

数组排序_sort()

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <script>
       /* //年龄
       //选择排序
       var arr=[50,20,15,30,60,45];
       for(i=0;i<arr.length-1;i++){
           for(j=i;j<arr.length;j++){
               if(arr[j]<arr[i]){
                   T=arr[j];
                   arr[j]=arr[i];
                   arr[i]=T;
               }
           }
       }
       console.log(arr); */
       /* //冒泡排序
       var arr=[50,20,15,30,60,45];
       for(i=0;i<arr.length-1;i++){
           for(j=arr.length-1;j>i;j--){
               if(arr[j]<arr[j-1]){
                   T=arr[j];
                   arr[j]=arr[j-1];
                   arr[j-1]=T;
               }
           }
       }
       console.log(arr); */
       //person
       //x.height-y.height 身高
       //x.age-y.age 年龄
       var brr=[23,5,34,1,54,6,9,43,22,17,3,45,90];
       //告诉sort() 两个元素怎么比
       var crr=brr.sort(function(x,y){return x-y});
       console.log(crr);
       </script>
   </body>
</html>

浏览器里面的对象 BOM:
浏览器对象模型
1、属性
2、行为: 方法
3、事件属性
window对象
loqation对象: 当前所处的网址

window对象
location对象: 当前所处的网址
DOM:文档对象模型 document object Model
把文档看成对象，它拥有属性、行为。可以用代码去操纵文档

   html、xml、 xhtml javascript、 java.php、C

   document.write

节点 Node node.parent 取父节点 node.child 子节点
标签 Tag
元素 Element

window 对象
window.setInterval(function(){//周期性执行
window.setTimeout(function(){ //延迟执行

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       时钟控制
       <button οnclick="h()">延迟执行</button>，<button οnclick="k()">周期性执行</button>
       <script>
       function h(){
           //setTimeout 延迟五秒执行
           window.setTimeout(function(){
               console.log("你好小明");
           },5000);
       }
       function k(){
           window.setInterval(function(){//周期性执行
               console.log("天气不错!");
               },3000);
       }
       </script>
       <hr>
       <a href="http:\\www.taobao.com" target="_blank">去淘宝</a>
       打开poen() close()
       <button οnclick="f()">打开淘宝</button>
       <button οnclick="g()">关闭淘宝</button>
       <script>
       var child;
       function f(){
           child=window.open("http://www.taobao.com");
       }
       function g(){
           child.close();
       }
       </script>
   </body>
</html>

location对象
锚点 #xxx location.hash
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       location.reload(); 
       <button οnclick="f()">去淘宝</button>
       <script>
       function f(){
           window.location.href="http://www.taobao.com/"
       }
       </script>
   </body>
</html>

history.back() 回退 history.forward() 前进
history.go(-1) 回退一条页面 history.go(1) 前进一个(一次)页面

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

xi.setAttribute("title","宁夏西瓜");
鼠标移到附近会显示小字

event.srcElement从字面上可以看出来有以下关键字：事件,源他的意思就是：当前事件的源，
我们可以调用他的各种属性就像:document.getElementById("")这样的功能

event.target返回最初触发事件的DOM对象。

事件处理 onclick
1.    事件 Event 也是一个对象
2. 事件源 Scource 什么东西发生了事件左键点击鼠标
3. 事件处理函数 handler 发生了事件后，决定去调用某个函数

规律：事件发生时，事件对象本身会作为第一个参数传递给事件



onfocus函数指获取焦点时触发事件，onblur函数则是指失去焦点时触发的事件。
触发焦点：
$("Element").focus()
触发每一个匹配元素获得焦点事件。
$("Element").focus(function)
事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。
失去焦点：
$("Element").blur()
触发每一个匹配元素失去焦点事件。
$("Element").blur(function)
事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，并且绑定一个处理方法。

一个.是当前目录两个.是父目录
<script src="js/handler.js"></script>


1.更简洁
2.容错性更高
3.链式调用
4、很多方法支持json对象作为参数
5、支持css选择器
jQuery 更简洁容错性高
6、 addClass ()和removeClass ()
7、text()、html ()
8.事件处理
9.动画 Animate()
10. 操作DOM
11.
//jQuery对象：是将页面的中满足条件的元素纳入进入形成了一个数组复杂的jQuery对象

json 数据 : javascript天生支持json

{} 对象
[] 数组
var person={name:"小明",sex:"女",age:84}
var score=[12,23,43,43,3434,3,4334,3]

7、text()、html ()
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <style>
       .fruit{color: red;}
       </style>
       <button οnclick="f()">点击</button>
       <ul id="food">
           
           <li>苹果</li>
           <li>苹果1</li>
           <li>苹果2</li>
           <li>苹果3</li>
           <li>苹果4</li>
           <li class="fruit">苹果1</li>
           <li class="fruit">苹果2</li>
           <li class="fruit">苹果3</li>
           <li class="fruit">苹果4</li>
           <script src="js/jquery-3.6.0.js"></script>
           <script>
           function f(){
               //$("fruit:od").css("color","red");
           //$(".fruit:first").css("color","red");
               //$("#food li").css("color","red");
               //$("#food li").addClass("fruit");   //为选中的元素添加给food 加上class fruit
               $("#food li").removeClass("fruit");
           }
           </script>
       </ul>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <button οnclick="f()">点击</button>
       <ul id="food">
           <li>苹果</li>
           <li>苹果1</li>
           <li>苹果2</li>
           <li class="xxx">苹果3</li>
           <li class="xxx">苹果3</li>
           <li>苹果4</li>
           <script src="js/jquery-3.6.0.js"></script>
           <script>
           function f(){
               //$("#food").remove(); 不加标签删除全部
               //$("li").remove();
               //$("li").remove(".xxx");
               $("#food").empty();//清空内部
           }
           /* function f(){
               //原生
               document.createElement("li");
               node.innerText("水蜜桃");
               $("#food").appendChild(node);
               //$("#food").append("<li>水蜜桃</li>"); //追加到内部的最后
               $("<li>水蜜桃</li>").appendTo("#food"); //追加到内部的最后
               //$("#food").prepend("<li>水蜜桃</li>"); //追加到内部的最前
           }*/
           </script>
       </ul>
   </body>
</html>

remove
//$("#food").remove(); 不加标签删除全部
//$("li").remove();
$("li").remove(".xxx");
$("#food").empty();//清空内部

1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值
注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
2.removeAttr(name)
删除属性节点
注意点:
会删除所有找到元素指定的属性节点

children() 方法返回返回被选元素的所有直接子元素。
找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：
$("div").children(".selected").css("color", "blue");