【PHP】QueryList安装与使用（快速简单学采集） 示例 采集百度搜索结果列表的标题和链接。 **采集代码** $data = QueryList::get('https://www.baidu.com/s?wd=QueryList', null, [ 'headers' => [ 'User-Agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36', 'Accept-Encoding' => 'gzip, deflate, br', ] ])->rules([ 'title' => ['h3', 'text'], 'link' => ['h3>a', 'href'] ]) ->range('.result') ->queryData(); print_r($data); 采集结果 Array ( [0] => Array ( [title] => QueryList|基于phpQuery的无比强大的PHP采集工具 [link] => http://www.baidu.com/link?url=GU_YbDT2IHk4ns1tjG2I8_vjmH0SCJEAPuuZN ) [1] => Array ( [title] => PHP 用QueryList抓取网页内容 - wb145230 - 博客园 [link] => http://www.baidu.com/link?url=zn0DXBnrvIF2ibRVW34KcRVFG1_bCdZvqvwIhUqiXaS ) [2] => Array ( [title] => 介绍- QueryList指导文档 [link] => http://www.baidu.com/link?url=pSypvMovqS4v2sWeQo5fDBJ4EoYhXYi0Lxx ) //... ) QueryList安装：https://querylist.cc/docs/guide/v4/installation好用的工具：八爪鱼后羿火车头文章摘要：https://querylist.cc/docs/guide/v4/exampleQueryList手册：https://querylist.cc/docs/guide/v4

【JavaScript】JavaScript基础-ES6新语法 const 变量不变 let 变量可变 箭头函数,支持默认设置参数 const fn=(a=1,b=2)=>{return a+b;} const fn1 = (a,b)=>a+b; //简写,当返回值可省略括号 字符模板,不再使用+链接字符串 const a = 20; const b = 30; const string = `${a}+${b}=${a+b}`; 解析结构 const obj={ a:1, b:2, c:3 } const {a,b}=obj; 对象解析结构 let [a, b, c] = [1, 2, 3];数组的解析结构 let [a, ...b] = [1, 2, 3]; 剩余运算 a=1 b=[2,3] 简写,当属性和值相同 const person = { name, age,fn(){ return this.name; } }等价 var person = { name: name, age: age , fn:function fn(){ return this.name; } }; 类 class Person { //构造方法 constructor(name, age) { this.name = name; this.age = age; } getName() { return this.name } } 模块 接口定义可以是变量,函数,类 var m=1 export {m} export default默认方法或变量 import {m} from 'm';

【JavaScript】JavaScript基础-本地存储 sessionStorage 支持IE8+ 火狐,chrome等用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 sessionStorage.setItem('testKey','这是一个测试的value值'); sessionStorage['testKey'] = '这是一个测试的value值'; sessionStorage.getItem('testKey'); sessionStorage['testKey']; sessionStorage.setItem('user', JSON.stringify(userEntity)); 存储对象 var userJsonStr = JSON.parse(sessionStorage.getItem('user')); sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。 sessionStorage.clear() localStorage 即本地存储，可用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除数据比较大的临时保存方案。如在线编辑文章时的自动保存。多页面访问共同数据 localStorage.setItem('testKey','这是一个测试的value值'); localStorage['testKey'] = '这是一个测试的value值'; localStorage.getItem('testKey'); localStorage['testKey']; localStorage.setItem('user', JSON.stringify(userEntity)); var userJsonStr = JSON.parse(( localStorage .getItem('user')); localStorage.removeItem(string key) localStorage.clear()

【JavaScript】JavaScript基础-语言基础 数据类型 undefined,null,boolean,number,string,Array基本数据类型 Object复杂数据类型 类型转换 parseInt("666" ) 非数字返回NaN parseFloat("2.45"); (1).toString(); (10).toString(2);//二进制 String(undefined); null也会输出字符串 !!"3.5" true typeof null; object 字符串 "123我爱你".charAt(3) 返回我,3是位置 "123我爱你".indexOf("我") 返回3 找不到-1 "123我爱你".match(/爱(.*)/) 返回数组 ["爱你", "你"] 没有找到返回 null "我爱你中国美国英国".substring(1,4); 返回爱你中,从第1到4不包括4 "我爱你中国美国英国".substr(3,5) 第三个开始截取5个字符 "我爱你中国人".replace(/中国/,"美国"); "我爱你中国人".search(/中国/); 找到返回下标 没找到返回-1 "123我爱你".split(""); 返回数组 支持正则 "aA".toLowerCase();转小写 toUpperCase大写 var string = (2).toString(); var string = 2+''; 数组 var arr =Array(1,2,3); var arr =[1,2,3]; var arr ={"31536000":"年","2592000":"个月","604800":"星期","86400":"天","3600":"小时","60":"分钟","1":"秒"}; [1,2,3].join(',')//数组转换字符串 '1,2,3'.split(',')//字符串转换数组 $.isArray([]);// 是否数组 返回true arr.push("white","test");//尾部插入数组值 返回长度 arr.unshift("first"); //头部插入 arr.pop();//尾部删除 返回被删除元素 arr.shift();//头部删除 arr.reverse();//颠倒数组 arr.sort(function(num1, num2) { return num1 > num2;});//排序 返回排序后 arr.concat(["ccc","bbbb"],'3333',['vvccxx',['oolll','lll']]);//合并数组 返回新数据 arr.slice(1,3); //复制数组 从第一个开始第三个结束 返回新数组 arr.splice(0,2);//删除前两个 arr.splice(1,1,100,200);//从第二个删除1个 并添加2个新元素 var max = Math.max.apply(Math, arr) //3 var min = Math.min.apply(Math,arr) //1 arr.indexOf(str);//查找元素位置 字符操作 var arr=["中国","美国","日本","韩国"]; arr.forEach(function(v,k){ log(k)无返回值 }) arr.map(function(value,index,array){ 　　return XXX }) json与对象 var str = '{"a":"2a","b":true,"c":34,"d":[1,2,"a"]}';//json操作 JSON.parse(str);//json字符串转换成对象 var obj = eval('(' + str + ')');//3种方法 var k1 = {a:1,b:[1,2]};//对象 var k2 = {"k1":1,"k2":"中国"};//json标准格式 或者是关联数组 JSON.stringify(k1) //json对象转换成字符串 时间戳13位长 +new Date() 当前时间戳 +new Date('2014/12/24 02:08:01'); 转换时间戳 Date.now() 当前时间戳 new Date(Date.parse("2012-12-15 09:41:30".replace(/-/g,"/"))); Date对象 new Date(1419184274000) Date对象

【JavaScript】JavaScript基础-浏览器对象 弹出框 alert(1); var ret = prompt("请输入内容！",""); var v = confirm('此操作不可恢复，确认吗？'); 返回true可操作 window.close();关闭当前窗口 window.print();打印 计时器 function fn() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("a1").innerHTML=t; } var t = setTimeout("fn()",5000); 执行一次 clearTimeout(t); 提前结束 var id=setInterval("fn()",1000);//每1秒执行一次 clearInterval(id); 取消定时 读写localStorage,长时间存储 sessionStorage关闭后删除 localStorage.setItem("key1", "123"); localStorage.removeItem("bar"); var foo = localStorage.getItem("bar"); 选择器 var id=document.getElementById("id"); var id = document.querySelector("#k"); 支持标签,.class,a[target=_blank]属性 var id = document.querySelectorAll("li"); window document.write("123") 输出 console.log("控制台") var url = location.href; location.href='http://www.baidu.com'; var domain = document.domain;//不含http var url = (window.location.href).substring(0,(window.location.href).indexOf(document.location.pathname));//包含http var from = document.referrer;来源 location.reload(true);刷新 history.go(0); history.go(1);前进 history.go(-1);后退 document.title; document.title = "标题"; document.querySelector('#c').dataset.sex = "男";data属性 document.querySelector('#c').dataset.sex; document.getElementById('demo1').setAttribute('role', 'button'); 设置获取属性 document.getElementById('foo').removeAttribute('role'); document.getElementById('foo').innerHTML = 'Goodbye!';设置值 逻辑 if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<16) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); } switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 } for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); } while (条件) { 需要执行的代码 } 监听事件 var el= document.querySelector('#btn'); el.addEventListener('click',function(){ document.getElementById('loading1').classList.add('loading1'); })

【Vue】Vue基础语法 简单例子 <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: '测试vue!' } }) </script> <div id="app"> <ul><li v-for="rs in todos"> {{rs.text}}</li></ul> </div> var app = new Vue({ el: '#app', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) 模板语法 一次插值,后面不会改变 v-once 输出原始值 <span v-html:style="msg">你好</span> 输出属性 <span v-bind:style="msg">你好</span> if语句 <span v-if="msg">true看见我</span> <h1 v-if="msg=='ok'">是</h1> <h1 v-else-if="msg=='ok1'">是1</h1> <h1 v-else>否</h1> 管理重复数据 key="username-input" 监听事件 <a v-on:click="alert(1)">123</a> v-bind缩写 : v-on 缩写@ 数组方式调用class <div v-bind:class="[activeClass, errorClass]"></div> 绑定内联样式 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 显示隐藏 <h1 v-show="msg=='ok'">是</h1> 不支持<template>和else,是display显示隐藏 列表渲染 <li v-for="item in items"> {{ item.message }} </li> 带索引 <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> 对象也支持三个参数 <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> 唯一性 <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 方法 <button v-on:click="fn">创建</button> var app = new Vue({ el: '#app', data: {msg:'ok1' } ,methods:{ 'fn':function(event){ alert("q"+this.msg) } } }) 事件修饰符 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 表单 <input v-model="message" placeholder="edit me"> <input type="checkbox" id="checkbox" v-model="checked"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > <input v-model.number="age" type="number"> <input v-model.trim="msg">

【JavaScript】JS获取时间 //获取时间 <script type="text/javascript"> function time(){ var vWeek,vWeek_s,vDay; vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); hours = date.getHours(); minutes = date.getMinutes(); seconds = date.getSeconds(); vWeek_s = date.getDay(); document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes +":" + seconds + "\t" + vWeek[vWeek_s] ; }; setInterval("time()",1000); </script>

【jQuery】ajax使用方法 $.ajax({ url:"http://www.xxx",//请求的url地址 dataType:"json",//返回的格式为json async:true,//请求是否异步，默认true异步，这是ajax的特性 data:{"id":"value"},//参数值 type:"GET",//请求的方式 beforeSend:function(){},//请求前的处理 success:function(req){},//请求成功的处理 complete:function(){},//请求完成的处理 error:function(){}//请求出错的处理 }); $.get("http://8688web.com/a.php", { action:"get",name:"xph" },function(data, textStatus){ $("#result").html(data); //alert(this); //alert(data); //alert(textStatus); }); $.post("http://8688web.com/a.php", { action:"post",name:"xph" },function(data, textStatus){ $("#result").html(data); });

【Web】CSS常用内容及解释 CSS 选择器 基本选择器grif *通配符：匹配所有的html标记，所有吊机都会改变的 标签选择器：将其匹配指定的html标记 class选择器：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有 id选择器：给指定id的元素添加样式。网页中HTML标记的id属性的值，必须是唯一的。 组合选择器 多元素选择器：给多个元素加同一个样式，多个选择器之间用“，”隔开 后代选择器 给某个标签的某个后代元素加样式，选择器之间用空格隔开 子元素选择器：给某个元素的子元素添加样式举例：div > h1.title{color:red;} css尺寸属性 width：元素宽度，一定要加px单位 height：元素高度 css字体属性 font-size:字体大小 font-family:字体 font-style:斜体，取值：italic font-weight:粗体，取值，bold css文本属性 color:文本颜色 text-decoration:文本修饰线，取值：none(无)，underline(下划线)，overline(上划线)，line-through(删除线) text-align:文本水平对齐方式，取值：left,center,right line-height:行高，可以用固定值，也可以用百分比 text-indent:首行缩进 letter-spacing:字间距 CSS选择器——基本选择器(单个选择器) 1，通配符“*”：将匹配所有的HTML标记，只要<body>中存在的标记都会生效。 2,标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的标签选择器。如：p{color:red;} 3，类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news{} 4，Id选择器：给HTML标记中，具有id属性的元素，添加样式。唯一性。命名以“#”开头。如：#news{} CSS选择器——组合选择器(多个选择器) 1，多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“,”分开。如：p,h1,#box{} 2，后代元素选择器：给某个元素的所有后代元素，添加样式。用空格隔开。如：#box h1{} 3，子元素选择器：给某个元素的子元素添加样式。用“>”隔开。如：#box > h1{} 一个超链接，有四个状态： 正常状态(:link)：鼠标没放上之前链接的样式。 放上状态(:hover)：鼠标放到链接上时的样式。 激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。 访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。 在平常工作中，会使用以下写法，来给链接加不同的样式： a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。 a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果 list-style:列表样式，取值：none。去掉项目符号或者编号前面的各种符号 ul li{list-style:none;/*去除前面的符号*/} css边框属性 border-left:左边框线 格式：border-left：粗细 线型 线的颜色 线型：none(无线) solid（实线） dashed(虚线) dotted(点状线) 举例：border-left:5px dashed red; border-right:有边框 border-top:上边框 border-bottom：下边框 /*行内元素没有width和height属性 块级元素才有width和height的属性 */ css内边距属性 padding-left:左内填充距离，左边先到内容间的距离 padding-right:右内填充距离，右边线到内容间的距离 padding-top:上内填充距离，上边线到内容间的距离 padding-bottom：下内填充距离，下边线到内容间的距离 缩写形式 padding：10px;//四个边的内填充分别为10px padding:10px 20px;//上下为10px,左右为20px padding:5px 10px 20px;//上为5px,左右为10px,下为20px padding:5px 10px 15px 20px; //循序是：上右下左（顺时针） css外边距属性 margin-left:左边线往外的距离 margin-right：右边线往外的距离 margin-top:上边线往外的距离 margin-bottom；下边线往外的距离 简写形式 margin:10px;//四个外边距分别为10px margin:10px 20px;//上下外边距10px,左右外边距20px margin:5px 10px 15px;//上外边距5px,左右外边距10px,下外边距15px margin:5px 10px 15px 20px;//上右下左（顺时针方向） css背景属性 background-color:背景颜色 background-image:背景图片 例：background-image:url(路径) background-repeat:背景平铺方式。取值no-repeat(不平铺)，repeat-x(水平方向)，repeat-y(垂直方向) background-position:背景定位，格式：background-position:水平方向定位，垂直方向定位 英文单词定位：background-position:left|center|right top|center|bottom; 用固定值定位：background-position:50px 50px;//背景距离容器的左边50px，容器的顶端50px 用百分比定位：background-position:50% 50%;//水平居中，垂直居中 用混合定位：background-position：left 10px;//背景靠左边齐，距离容器顶端10px 简写方式： background:背景色 背景图 平铺方式 定位方式 举例：background:url(images/bg.gif) no-repeat center center;  举例：background: #ccc url(images/bg.gif) no-repeat left 10px; css浮动和清除 float:让元素浮动，取值：left(左浮动)，right(右浮动) clear:清除浮动，取值：left(清除左浮动)，right(清除右浮动)，both(同时清除上面的左右浮动) 1、CSS浮动  浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。  浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素。  浮动的元素，一定是“块元素”。不管它原来是什么元素。  如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。 一行的多个元素，要浮动一起浮动 2、CSS清除浮动  CSS清除浮动的功能有两个：(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。  有浮动，就得有清除。 如果包围元素指定了高度了，那么可以不使用清除功能。 css优先级 行内样式》id选择器》class选择器》标签选择器 display属性 功能：规则网页元素如何显示的问题 取值：none(隐藏)，block（一块级元素显示），inline(以行内元素显示) block:可以实现将行内元素转换成块级元素 inline:可以实现将块级元素转换成行内元素 overflow属性：当内容溢出时，该如何显示 取值：visible(可见)，hidden（隐藏），scroll(出现滚动条)，auto（自动） cursor光标类型 取值：text(文本)，help(帮助)，wait（等待），pointer(手型)等。 css定位 position：元素定位方式 static:静态定位（默认状态，不定位）； fixed:固定位置 relative:相对定位 absolute:绝对定位 定位方式要与定位属性配合使用 定位坐标：指定定位的元素，偏移目标元素多远的距离 left:定位元素，距离目标元素左边的距离 top:定位元素，距离目标元素上边的距离 right:定位元素，距离目标元素右边的距离 bottom：定位元素，距离目标元素下边的距离 css表格属性 border-collapse:表格边框线合并，取值：collapse 全局css设置 1、清除所有的标记的内外边距 body,ul,li,a,img,p,input{ margin:0; padding:0; } 2、去除项目符号或编号前面的符号 ul,ol,li{ list-style:none; } 3、全局链接效果 a:link , a:visited{color:#444;text-decoration:none;} a:hover{color:red;} 4、网页中所有的文字大小颜色 body{ font-size:12px; font-family:宋体; color:#ccc; } 5、去除图片的链接边框线 img{border:0;} 6、全局的类样式 .floatL{ float:left; } .floatR{ float:right; } .clear{clear:both;} .blank10{ height:10px; clear:both; } .red{ color:red; } .blue{ color:blue; }

【Web】HTML标签大全及使用方法 body常用属性： <body bgColor="#123123" background=""></body> html文本标记 <b></b>:加粗 bold <i></i>:斜体 italic <u></u>:下划线 underline <s></s>:删除线 strike :上标 :下标 <font></font>字体标记 size：文子大小1-7,1小，7大 color：颜色值 face： 字体 <p></p>:表示一个段落 align：水平对齐方式，left,center,right <br>:换行标记 <hr>:水平线标记 size：水平线的粗细，单位为px color：水平线的颜色 width：水平线的宽度 noshade:去掉水平线的阴影 <pre></pre>:原封不动的输出 <h1>......<h6>:标题标记 HTML字符实体 空格：&nbsp; < :&lt; > :&gt; & :&amp; ¥ :&yen; × :&times; ÷ :&divide; HTML项目符号 无序列表 <ul type="disc(小黑点)|circle(空心圆)|square(实心方块)"> <li>内容</li> <li>内容</li> <li>内容</li> </ul> 有序列表 <ol type="A" start="6">//type:编号类型，取值1，a，A,i,I | start:从第几个开始编号 <li></li> <li></li> <li></li> <li></li> </ol> <marquee></marquee>:滚动字母标记 属性： direction:滚动方向，up,down,left,right width:滚动宽度 height：滚动高度 bgColor:滚动背景颜色 scrollAmount:滚动步长值，值越大，滚动越快 scrollDelay:两步之间的停留时间，以毫秒为单位，一秒=1000毫秒 loop:循环滚动的次数 图片标记：行内元素，单边标记 width:图片宽度 height:图片高度 border：图片边框粗细 src:图片路径（相对路径） align:图片水平对齐方式，取值left,center,right hspace:图片与左右文字之间的距离（水平距离） vspace:图片与上下文字间的距离（垂直距离） 注意： 如果图片相等比例缩放，只需要指定width或者height其中的一个 align属性只能让文本居中，不能让图片单独居中 align可以是实现，图文混排效果，align = "left|right" 超链接:行内元素 常用属性 href:目标文件地址url， target：目标文件显示窗口 _blank:在新窗口中打开目标文件 _self:在当前窗口中打开目标文件（默认） _parent:在父级窗口来打开目标文件 _top:在最顶级窗口来打开目标文件 绝对地址URL 远程绝对地址：如：http://www.baidu.com 本地绝对地址：file:///C:/ 特殊链接 下载链接<a href="images/winrar.rar">下载WinRAR解压缩文件</a> 邮箱链接<a href="mailto:3584685883@qq.com">请给我发邮件</a> 普通空连接<a href="#">普通空连接</a> js链接：添加JS功能代码<a href="javascript:window.close()">关闭窗口</a> 锚点链接：定义记号 命名规则：可以包含字母，数字，下划线，但只能以字母开头 <a href = “文件名#锚点名称”>……</a> 文件名：可有可无。如果是同一个网页的不同部分跳转，不需要文件名；如果是跳到另一个网页的不同部分，这时必须要有文件名。 <meta>标记 http-equiv属性 设置网页的字符<meta http-equiv="Conten-Type" content="text/html;charset=utf-8" /> 网页自动刷新 <meta http-equiv="refresh" content="2">//每隔两秒钟，自动刷新 <meta http-equiv="refresh" content="2;url=http://www.baidu.com">//两秒钟后，调到百度 name属性 <meta name="keywords" content="设置网页搜索的关键字" /> <meta name="direction" content="描述网页信息" /> 表格结构 <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> table属性： width：表格宽度，单位可以是百分比，也可以是固定值 height:表格高度 align:表格水平对齐方式，取值：left,center,right border:边框粗细 bordercolor：边框颜色 bgcolor:表格背景色 background：背景图片url cellpadding:单元格变现到内容间的距离（填充距离） cellspacing:单元格与单元格之间的距离（间距） rules:合并单元格边框线，取值：all tr属性 bgcolor:行的背景色 height:行的高度 align：行中的文本水平居中，取值left,center,right valign:垂直居中，取值：top,middle,bottom <td>或<th>属性 td:普通的单元格，th标题单元格，居中加粗显示 width：单元格宽度 height：单元格高度 bgcolor:单元格背景色 background：单元格背景图片 align：水平对齐 valign:垂直对齐 rowspan:上下单元格合并，合并属性必须放在第一个单元格中 colspan:左右单元格合并，合并时，有增就得有减，要保证每行单元格的个数不变 表单 <form>标技属性-块元素 name:给表单起个名字，对js用来做表单验证 method：表单提交方式，取值get,post action:指表单的处理程序，一般是PHP文件 enctype:指定标点数据的编码方式，这个属性只能用在method="post"的情况下 application/x-www-form-urldecoded//默认的加密方式 multipart/form-data//如果你上传文件，该值必须他自己 get方法和post方法 get方式不能提交敏感数据 get方式只提交少量数据，长度受限 get方式不能上传附件 post提交数据相对安全 post方式可提交海量数据 post方式可以上传附件 单行文本域：<input type="text" 属性="值"> 单行密码域:<input type="password" 属性="值"> name:文本框的名字。可以使字母数字，下划线，只能以字母开头 type：表单元素的类型 value:文本框中的值 size:文本框的长度，以字符为单位 maxlength:最多可以输入多少字符 readonly:只读属性，可以先种，但不能修改readonly="readonly" disabled：禁止属性,不能选中，不能修改disabled="disabled" 单选按钮<input type="radio" 属性="值"> name:元素名称 value:元素值，该value中数据将发往服务器 checked:默认选择那一项 注意：一组单选按钮，只能选择一个，但name的值必须一致。 复选框<input type="checkbox" 属性="值"> name:元素名称 value：元素的值 checked:默认选中 注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。复选框可以同时选多个，也可以一个都不选 下拉列表 <select>:标记的属性，只有一个name属性 <option>:标记的属性有两个：value属性，selected属性 selected:默认选中：selected="selected" 文本域<textarea name="名称" cols="宽度" rows="高度"></textarea> name:元素名称 cols:宽度，是指多少个字符宽 rows:高度，指行高 各种按钮 提交按钮：<input type="submit" name="提交表单" /> 重置按钮：<input type="reset" name="重新填写" /> 图片按钮：<input type="image" src="路径" />//功能就是提交表单，与submit按钮功能一样 普通按钮：<input type="botton" onclick="javascript:window.close()" value="关闭窗口" /> 隐藏域：<input type="hidden" name="名称" value="默认值" /> 长传文件域<input type="file" 属性="属性"> name：表单元素的名称 value：表单元素的值，这个值其实就是上传的文件名 <caption>表格标题 <caption>标记是<table>的子标记，<caption>放在<table>开始标记之后 图片热点（图像地图） 标记结构 <img src="图片地址" usemap="#map" /> <map id="map" name="map"> <area shape="热区形状" coords="热区坐标" href="链接地址" /> <area shape="热区形状" coords="热区坐标" href="链接地址" /> <area shape="热区形状" coords="热区坐标" href="链接地址" /> </map> <area>标记常用的属性 shape:热去的形状，取值：rect(矩形)，circle(圆形)，polygon(多边形) coords:执区的坐标（位置） 如果shape=rect时，那么，coords="x1,y1,x2,y2",例如：coords="50,50,200,150" (x1,y1)为矩形左上角的坐标值，（x2,y2）为矩形右下角的坐标值 如果shape=circle时，那么，soords="x,y,r",其中（x,y）为圆心坐标，r为半径 <frameset>属性 cols:划分左右型框架 cols = “200,*” //左框架的宽度为200px，剩下的都是右框架的  cols = “180,*,180” //左框架和右框架的宽分别为180px，剩下都是中间框架  cols = “20%,*” //划分框架时，可以用百分比来表示 rows:划分上下行框架 rows = “200,*” //上框架的高度为200px，剩下都是下框架的  rows = “180,*,180” //上框架和下框架高分别为180px，剩下都是中间框架 注意：cols属性和rows属性，每个框架只能用其中一个，不能两个同时用。 frameborder:是否显示框架的边框线，取值：1或0，yes或no border:边框线的粗细 bordercolor:边框颜色 <frame>框架页的属性 src:该小窗口中，默认显示的网页地址 noresize:不能调整小窗口的大小，如：noresize="noresize" scrolling:是否显示滚动条，取值：auto，yes,no name:给当前小窗口起个名字，这个name就是给<a>标记target属性来用的 <noframes>:IE6不支持框架，高版本都支持。 <noframes>对不起，你的电脑太老了，该砸了，换新的！</noframes> 内嵌框架（行内框架，浮动框架）：<iframe 属性 = “值”>对不起，你的浏览器版本太低！</iframe> 内嵌框架，相当于在现有的网页中，挖了一个“窟窿”，透过这个“窟窿”可以看见里面内容。 与普通框架的区别：<iframe>是<body>的子标记，因此，它应该放在<body> src:引入文件地址 width:框架的宽度 height:框架的高度 frameborder:是否显示框架的边框线，取值：yes或no scrolling:是否显示滚动条，取值：auto，yes,no name:指定当前小窗口的名称，该名称也是给<a>标记的target属性来用 align：框架在网页中的对齐方式，取值：left,center,right 注意：src引入的文件只能是html文件或php文件，不能是其它文件。 &#10; 在placeholder里面进行换行 例如：<textarea placeholder="有限公司&#10;服务中心" class="layui-textarea" name="one"></textarea>