标签 web 下的文章 - 自我成长

登录

标签搜索

少年

累计撰写 189 篇文章
累计收到 24 条评论

搜索到 3 篇与的结果

2022-03-06
vue学习一、vue的基本使用<!DOCTYPE html> <head> <title>vue的基本使用</title> </head> <body> <div id="app">   <h1>{{msg}}</h1> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: '黄瓜' }, template: '<div><h5>{{msg}}</h5></div>' }); </script> </body> </html>二、vue指令<!DOCTYPE html> <head> <title>vue指令</title> <style> .box{ width: 300px; height: 300px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:function(){ return{ msg: 'vue指令', msg2: 'vue的3种{{}}插值，1、{{}} 2、v-text="" 3\v-html=""', isShow: true, isActive: true, frut: [ {id:1,name:"苹果",price:20}, {id:2,name:"火龙果",price:40}, {id:3,name:"西瓜",price:30}, {id:4,name:"荔枝",price:60} ], person:{ name:"zhangsan", age:30, sex:"boy" } } }, template: '<div>{{msg}} <p v-text="msg"></p> <p v-html="msg2"></p> <div v-if="isShow">v-if的使用</div> <div v-if="Math.random()>0.5">显示</div><div v-else>隐藏</div> <div v-show="true">v-show显示</div> <div class="box" v-on:click="clickHander" v-bind:class="{active:isActive}"></div> <ul><li v-for="(item,index) in frut"><h1>{{index}}</h1><h3>{{item.id}}</h3><h2>{{item.name}}</h2><h1>{{item.price}}</h1></li></ul> <ul><li v-for="(value,key) in person">{{value}}==={{key}}</li></ul> </div>', methods:{ clickHander(e){ console.log(this); this.isActive=!this.isActive; } } }); console.log(vm); </script> </body> </html>三、vue的双向绑定<!DOCTYPE html> <head> <title>vue的双向绑定</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <h3 >{{msg}}</h3> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#app", data:function(){ return{ msg:"Hello World" } }, template:'', methods:{ } }); </script> </body> </html>四、局部组件的创建<!DOCTYPE html> <head> <title>vue局部组件的创建</title> </head> <body> <div id="app"><h1>{{msg}}</h1></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var App={ data(){ return { } }, template:'<div>VUE Hello </div>' } new Vue({ el:"#app", data(){ return{ msg:"Hello ---- World" } }, template:'<App/>', methods:{ }, components:{ App } }); </script> </body> </html>五、全局组件<!DOCTYPE html> <head> <title>vue全局组件的创建</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button>全局组件按钮</button></div>' }); var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件</h2><Vquanju/></div>' } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>六、通过prop往子组件通信<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ } }, template:'<div><p>我是子组件<p/><input type="text" v-model="bdata" ></input></div>', props:['bdata'] }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :bdata="bmsg"/></div>' }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>七、通过事件向子组件发送消息<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ newData: '' } }, template:'<div><p>我是子组件{{childData}}<p/><input type="text" v-model="newData" @input="changeValue(newData)" /></div>', props:['childData'], methods:{ changeValue(val){ this.$emit('childHandler',val); } } }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :childData="bmsg" @childHandler="childHandler"/></div>', methods:{ childHandler(val){ console.log(val+"-------------------") } } }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>八、全局组件的使用<!DOCTYPE html> <head> <title>vue全局组件的创建</title> <style> .buttons{ display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .successs{ color: #fff; background-color: #67c23a; border-color: #67c23a; } .defaults{ color: #fff; background-color: #409eff; border-color: #409eff; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button class="buttons" :class="type">全局组件按钮<slot></slot></button></div>', props:['type'] }); //利用父向子传值，自己封装组件，例如按钮 var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件 </h2><Vquanju>slot覆盖内容</Vquanju> <Vquanju type="successs">默认</Vquanju > <Vquanju type="defaults">成功</Vquanju></div>', } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>
- 2022年03月06日
- 257 阅读
- 0 评论
- 2 点赞
2022-03-06
ES6语法 ES6语法一、let<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // { // //var 声明的变量往往会跨域 // //let 声明的变量有严格局部作用域 // var a = 1; // let b = 2; // } // console.log(a); //1 // console.log(b); //Uncaught ReferenceError: b is not defined // //var 可以声明多次 // //let 只能声明一次 // var m = 3; // var m = 4; // let n = 5; // // let n=5; // console.log(m); //3 // console.log(n); //Identifier 'n' has already been declared // //var 会变量提升 // //let 不存在变量提升 // console.log(x); //undefined // var x = 10; // console.log(y); //Cannot access 'y' before initialization // let y = 20; // // const 用于定义常量 // //1、声明之后不允许改变。 // //2、一旦声明必须初始化，否则会报错 // const a = 1; // a = 3; //Assignment to constant variable. </script> </body> </html>二、解构表达式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //数组结构 // let arr =[1,2,3]; // // let a = arr[0]; // // let b = arr[1]; // // let c = arr[2]; // //快速复制 // let [a,b,c] = arr; // console.log(a,b,c); // //对象结构 // const person = { // name: "jack", // age: 21, // language: ['java','js','css'] // } // // const name = person.name; // // const age = person.age; // // const language = person.language; // //新语法 // const {name:abc, age, language} = person; // console.log(abc,age,language); // //字符串扩展 // let str ="hello.vue"; // console.log(str.startsWith("hello")); // console.log(str.endsWith(".vue")); // console.log(str.includes("e")); // console.log(str.includes("hello")); // //字符串模板 // let ss = // ` // <div> // <span>Hello World</span> // </div> // `; // console.log(ss); //字符串插入变量和表达式。变量名写在${}中，在${}中可以放入JavaScript表达式。注意符号是·不是单引号 function fun(){ return "这是一个函数"; } let abc = "zhangsan"; let age = 20; let info = `我是${abc},今年${age+10}岁了，我想说:${fun()}`; console.log(abc,age,info); </script> </body> </html>三、函数优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //在SE6，我们无法给一个函数参数设置默认值，只能采用变通写法； // function add(a, b){ // //判断是否为空，为空就给默认值1 // b = b || 1; // return a + b; // } // console.log(add(10)); // //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值 // function add2(a, b = 1){ // return a + b; // } // console.log(add2(10)); // //不定参数 // function fun(... values){ // console.log(values.length); // } // console.log(fun("1111","22",33)); // //箭头函数 // // var print = function (obj){ // // console.log(obj); // // } // // console.log(print("Hello")); // //现在写法，一个参数 // var print = obj => console.log(obj); // print("China") // //多个参数 // var sum = function(a, b){ // return a + b; // } // console.log(sum(1,9)); // var sum2 = (a, b) => a+b; // console.log(sum2(1,9)); // //以前写法 // var sum3 = function(a, b){ // c = a +b; //多了一步操作 // return a + c; // } // console.log(sum3(1,9)); // //新写法 // var sum4 = (a, b) =>{ // c = a + b; // return a + c; // } // console.log(sum4(1,9)); //实战：箭头函数结合解构表达式 const person = { name: "jack", age: 20, language: ['java','js','css'] }; function hello(person){ console.log("你好："+person.name); } hello(person); var hello2 = (person)=>console.log("你好哟："+person.name); hello2(person); //箭头函数+解构表达式 var hello3 = ({name})=>console.log("你好哟："+ name); hello3(person); </script> </body> </html>四、对象优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // const person = { // name: "jack", // age : 20, // fun : ['jva','css','html'] // }; // console.log(Object.keys(person)); // console.log(Object.values(person)); // console.log(Object.entries(person)); // const a ={aa: 1}; // const b ={bb: 2}; // const c ={cc: 3}; // console.log(Object.assign(a,b,c)); // //声明对象简写 // const name ="zhangsan"; // const age =10; // const person = {name, age}; // console.log(person); // //对象大的函数属性简写 // let person = { // name: "jack", // //以前 // eat: function(food){ // console.log(this.name+ "在吃"+ food); // }, // //箭头函数this不能使用 // eat2: food => { // console.log(this.name+ "在吃"+ food); // }, // eat3: food => { // console.log(person.name+ "在吃"+ food); // }, // eat4(food){ // console.log(person.name+ "在吃"+ food); // } // } // person.eat("香蕉"); // person.eat2("苹果"); // person.eat3("草莓"); // person.eat3("芒果"); //对象拓展运算符 //1、拷贝对象(深拷贝) let p1 = {name: "zhangsan", age: 19}; let p2 = {... p1}; console.log(p2) //2、合并对象 const a ={name: "lisi"} const b = {age: 20}; //后面的name会覆盖之前的name let person = {name: "wangwu"}; person = {...a, ... b}; console.log(person); </script> </body> </html>五、map和reduce<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //数组中新增了map和reduce方法。 //map():接收一个函数，将原数组中的所有袁术用这个函数处理后放入新数组返回。 let arr = ['1','2','-3','4']; // arr = arr.map((item)=>{ // return item * 2; // }); arr = arr.map(item => item*2); console.log(arr); //reduce()为数组中的每一个袁术一次执行回调函数，不包括数组中被删除或从未被赋值的元素。\ //arr.reduce(callback,[initialValue]) /** * 1、previousValue(上一次调用回调返回的值，或者是提供的初始值(initialValue)) * 2、currentValue（数组中当前被处理的元素） * 3、index（当前元素在数组中的索引） * 4、array（调用reduce的数组） **/ let result = arr.reduce((a,b )=>{ console.log("上一次处理后："+a); console.log("当前正在处理："+b); return a+b; },100); console.log(result); </script> </body> </html>六、promise<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body>  <script> //原始写法 // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // $.ajax({ // url: `mock/user_corse_${data.id}.json`, // success(data) { // console.log("查询到课程：", data); // $.ajax({ // url: `mock/corse_score_${data.id}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); //promise写法 // const promise = new Promise(function (resolve, reject) { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // const promise = new Promise((resolve, reject) => { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // promise.then(function (value) { // // 异步执行成功后的回调 // }).catch(function (error) { // // 异步执行失败后的回调 // }) // new Promise((resolve, reject) => { // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }).then((userId) => { // return new Promise((resolve, reject) => { // $.ajax({ // url: `mock/user_corse_${userId}.json`, // success(data) { // console.log("查询到课程：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // }).then((corseId) => { // console.log(corseId); // $.ajax({ // url: `mock/corse_score_${corseId}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // promise优化处理后写法 let get = function (url, data) { // 实际开发中会单独放到common.js 中 return new Promise((resolve, reject) => { $.ajax({ url: url, type: "GET", data: data, success(result) { resolve(result); }, error(error) { reject(error); } }); }) } // 使用封装的get 方法，实现查询分数 get("mock/user.json").then((result) => { console.log("查询用户~~：", result); return get(`mock/user_corse_${result.id}.json`); }).then((result) => { console.log("查询到课程~~：", result); return get(`mock/corse_score_${result.id}.json`) }).then((result) => { console.log("查询到分数~~：", result); }).catch(() => { console.log("出现异常了~~：" + error); }); </script> </body> </html>七、模块化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  </body> </html>
- 2022年03月06日
- 272 阅读
- 0 评论
- 1 点赞
2022-02-27
html学习 1、HTML基本格式<html> <head> <title>HTML入门</title> </head> <body> <h1>Hello World</h1> </body> </html>html：根标签，只有一个（网页所有内容都应该写在根标签里面）head：子标签，用来设置头部内容body：子标签，网页主体,所有要显示的内容放这里面title：网页的标题标签，也就是网页显示名字。搜索引擎检索页面时，会首先检索titlte中的内容。元素：一个完整的标签<></>标签<>2、HTML后缀名将编写好的文件保存为.html网页格式文件显示文件格式名3、HTML注释<！-- 这是一个注释的格式，可以直接换行继续写注释。 -->注释中的内容，不会显示在页面。可以写注释来对代码进行描述，便于后期的维护。要养成良好的编写注释习惯。4、标签属性<html> <head> <title>HTML入门</title> </head> <body> <h1>Hello <font color="red">World</font> ！</h1>  </body> </html>属性只能在开始标签中设置属性名 ="属性值"怎么知道有哪些属性，可以参考W3C5、文档申明主要用于申明网页版本最新为html5html5的文档申明，申明当前的网页是按照HTML5页标准编写的一定要放在网页的最上边，不申明，则会导致有些浏览器有些页面无法正常显示，所以为了避免，一定要写文档申明.<!DOCTYPE html> <html> <head> <title>HTML入门</title> </head> <body> <h1>Hello <font color="red">World</font> ！</h1>  <h1>怎么知道有哪些属性？</h1> <p>可以参考<a href="http://www.w3school.com.cn/">W3C</a></p> </body> </html>6、进制二进制满2进1 0 1 。。。。十进制满10进1 0 1 2 3 4 5 6 7 8 9 10 11 12 。。。。十六进制满16进1 只能用10 11 12 13 14 15标志使用a b c d e f 分别表示10 11 12 13 14 15 0--f八进制满8进1 0 1 2 3 4 5 6 7 10 11 12 13 。。。。常用十进制、二进制、十六进制7、乱码问题用PC自带记事本可以写html，但是效率不高。常用html编写工具：Sublime、notepad++等等。1. 在计算机中保存的任何内容，都需要转为为0 1这种二进制来保存，包括在读取内容时，需要将二进制彪马，在转换为正确的内容。 2. 编码：一句一定的规则，将字符转换为二进制编码的过程。 3. 解码：一句一定的规则，将二进制编码转换为字符的过程。 4. 字符集：编码和解码所采用的规则，我们称为为字符集 5. 产生乱码原因：编码和解码采用的字符集不同。 6. 常用字符集：ASCII（最早）、IOS-8859-1、GBK（英文）、GB2312（中文）、UTF-8(万国码) 注意：中文系统浏览器，默认使用的是GBK进行解码设置网页编码字符集meta:用来这是网页的一些元数据，比如网页的字符集、关键字、简介meta：是单标签<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>HTML入门</title> </head> <body> <h1>Hello <font color="red">World</font> ！</h1>  <h1>怎么知道有哪些属性？</h1> <p>可以参考<a href="http://www.w3school.com.cn/">W3C</a></p> </body> </html>ANSI:自动编码。我们一般使用的是UTF-8。8、标题标签<h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6>使用HTML标签时，关心的是标签的语义，我们使用的标签时语义化标签，所有表现都使用CSS来设置。h1：对搜索引擎，重要性仅次于title标签，非常重要，会影响搜索引擎中的排名，页面中最好只能用一个h1。一般只使用h1、h2、h3。9、段落标签使用P标签，用于表示内容的一个自然段。<p>我的一个p段落标签</p>p标签默认会占一行，端与端之间有间距。表现的都用css，html不关心。html都是语义标签。10、换行标签空格：  换行标签(换行，是一个单标签（自结束标签）)<br />横线(水平线，是一个自结束标签)<hr /> 11、实体特殊字符（实体）&lt；小于 > 大于版权©参考W3c实体12、图片支持图片格式：jpeg、gif、png。1、jpeg不支持透明，常用于保存图片颜色丰富的图片 2、gif支持的颜色少，支持动态图。支持简单透明。图片颜色单一用gif。 3、png支持的颜色多，并且支持复杂透明，可以用来显示颜色复杂的透明图片。实际开发中常用png多一点。图片使用原则：效果不一致，使用效果好的，效果一致的，使用小的。<img src="1.gif" alt="图片" width="200px" height="120px"/>alt：图片不能显示时，才显示，百度搜索只识别alt。注意：只设置width或height时，高度或宽段会按比例自动变化。如果同时制定宽度和高度，图像比例会发生变化。13、路径问题一般使用相对路径：返回上级目录../ 访问上级目录绝对路径：直接在目录下面全路径14、mate标签<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="keywords" content="html5,JavaScript,前段，Java"/> <title>html学习</title> <meta name="description"content="发布html5、js等前段相关信息"/> <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> </head> <body> <a href="https://ww.baidu.com" target="_blank" style="text-decoration:none">百度一下</a>   <a href="https://www.taobao.com" target="_blank" style="text-decoration:none">淘宝</a>   <a href="https://www.jd.com" target="_blank" style="text-decoration:none">京东</a> <hr /> <img src="../img/01.gif" alt="这是一个动态图片" width="600px"></img> <hr />  a < b <br /> c > d <br /> ©ichating先生 </body> </html>name：名字content：内容使用meta标签还可以用来设置网页的关键词。还可以用来制定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名。可以用来做请求的重定向。<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>content:5:时间秒数url：重定向连接地址15、HTML语法规范XHTML：语法相对更严格1. HTML中不区分大小写的，但是我们一般都使用小写。有些情况还是使用大写。 2. HTML中注释不能嵌套。 3. HTML标签必须结构完整，要么成对出现，要么自结束标签。 4. HTML标签可以嵌套，不能交叉嵌套。 5. HTML标签中的属性必须有值，且必须加引号。16、内联框架一个页面引入另一个外部页面，现实开发中不推荐使用，因为内联框架中网页，搜索引擎不会搜索。src：只想一个外面页面的相对路径<iframe src="html.html" name="show"></iframe>name：可以为内联框架制定一个name属性，通过该名字使用超链接标签时，可以将跳转页面显示在内联框架中。17、超链接使用超链接可以一个页面跳转到另一个页面。代码：<a href="https://ww.baidu.com" target="_blank">百度一下</a>href：指向连接跳转的目标地址，可以写一个相对路径，也可以写一个绝对路径。默认访问过的连接和没有访问过的连接，颜色有区别。如果href值设置为#,连接会回到顶部，设置为哪个#id值，就回到哪个id位置。<a href="#foot">回到底部</a> <a href="#">回到顶部</a> <center id="foot">我会居中显示哦</center>联系我们，自动打开发送邮件应用程序。没有邮件应用程序，就不会打开，有会自动填充发送人邮箱地址。设置href值为mailto:邮件地址<a href="mailto:batis@foxmail.com">联系我们</a>target：设置在哪里打开连接（默认值为_self)_blan: 在新页面中打开连接。_self: 在当前窗口中打开。<ul> <li><a href="https://www.baidu.com/" target="windows">主页</a></li> <li><a href="http://news.baidu.com/" target="windows">公司简介</a></li> <li><a href="https://tieba.baidu.com/index.html" target="windows">产品介绍</a></li> <li><a href="https://wenku.baidu.com" target="windows">联系方式</a></li> </ul> <iframe src="html.html" name="windows" width="100%" height="80%"></iframe>18、居中标签center内容居中，不赞成使用，表现形式的最后都使用css来实现。<center>我会居中显示哦</center>19、ID属性所有标签都可以使用id属性，用于标志标签，id不能数字开头，不能重复。通过id来设置、操作该元素，例如：超链接中通过id回到底部。
- 2022年02月27日
- 293 阅读
- 0 评论
- 3 点赞