笔记之_Java的html整理
Posted 莫轩ASL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了笔记之_Java的html整理相关的知识，希望对你有一定的参考价值。
border: 1px solid #000000 表格要边框不要内部的线 A标签禁止跳转，执行javascript的方法 href="javascript:void(0)" onclick="javascript:$(‘#dd‘).dialog(‘close‘)" 输入框不可编辑： 方法1: onfocus=this.blur() 当鼠标放不上就离开焦点 <input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="中国" readonly> <input type="text" name="input1" value="中国" readonly="true"> 方法3: disabled <input type="text" name="input1" value="中国" disabled="true"> Java中返回本地IP：InetAddress.getLocalHost().getHostAddress() abstract位置在class之前，也在返回值之前 for(1;2;3){4}执行顺序为，1243且1只执行一次 多张表连接，直接在后面加上inner join 表名 on筛选条件即可 html：预定义标记语言，页面的源码，开源的 浏览器：解释和执行源码的工具 标签：以<>包裹的，成对出现，类似于类，具有默认的属性，可以更改属性值 标签本身不区分大小写，规范小写 后缀：html或htm，为页面文件 W3c：页面开发的标准，解决不同浏览器于源码的兼容性问题 浏览器的内核是不同的 没有编译过程，不会报错，从上到下，从左到右执行 页面上通用的字体为微软雅黑 格式： <html> <head> <meta charset=”utf-8”/> <title></title> </head> <body> </body> </html> 注释： <!—注释--> <meta name=’keyword’ content=”商品，交易”>关键字 <meta name=’description’ content=”商品，交易”>描述 <meta charset=”utf-8”/> 转码方式的设置 Body标签分类： 块级标签：前后换行，宽高有效 行级标签：前后不换行，宽高无效 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 标准文档流：从前到后从左到右顺序执行 高没有百分比设置，只可以设像素值大小 <h?></h?>：字体大小，?代表1-6，字体从大到小 <b></b>：字体加粗 <i></i>：字体斜体 <br/>换行标签 <pre></pre>：预格式标签，可以调整格式，之间的空格、换行符都有效，不规范的标签 <p></p>：段落，前后换行不能嵌套 <div></div>：能够嵌套，和p标签功能相同 <hr/>：水平分割线标签，以百分比显示，默认100%显示 <ol><li></li></ol>：有序列表 <ul><li></li></ul>：无序列表 Type：属性 Style：做细节调整 图片格式： jpg：清晰度最高，体积最大 gif：动态图，多张图循环展示 png：镂空图，没有背景 bmp：传输效率最高的图片 ico：图标图片 <dl><dt></dt><dd></dd></dl>：自定义标签，用于图文混搭 <img src=”图片地址” title=”鼠标悬停时的显示文字” alt=”无法正常显示时的提示文字”>：插入图片，src必须出现 A标签： <a href=”路径”></a>：a标签必须有href，路径位置为#时，代表刷新访问本页 瞄链接： <a href=”#dibu” name=”dingbu”></a> <a href=”# dingbu” name=” dibu”></a> 功能性链接： <a href=mailto:邮箱地址 ></a> 禁止跳转：<a href=”javaScript:”></a> align=”center”：纵向居中对齐 区域标签： <span>文本等行级内容</span>：隔离效果，对一行中某个字符做特殊处理时 颜色：红绿蓝RGB #FF0000：使用十六进制 Html中的特殊字符： 空格： 大于：> 小于：< 版本符号：© 人民币符号：¥ 双引号：" 表单：接受用户输入的核心 表格：表格布局结构体系复杂 table 做布局，border边框属性，只能设置粗细，为数字，像素 tr：行 td：列 逻辑划分：thead tbody tfoot ，特殊单元格th 加粗、居中效果放在thead 后 caption 设置表的标题 单元格td后才能存放内容 设计单元格合并的表格处理 数行列 找位置：跨行、 跨列 进行操作： 设置跨行跨列属性，在td后 跨列：colspan=”列数” 跨行：rowspan=”行数” 删除多余的单元格 表单 <form ></form> 必须存在的两个属性： action ：表单提交的位置，目前我们只能提交到自己的页面 method=(get/post)：提交方式 get ：提交数据量有限 15-18kb 数据暴露在外 Post：提交的数据量无限 数据安全隐藏 get用于测试，发布前要换成post 在表单中用于提供给用户输入内容的标签被称为表单元素 文本框 <input type="text" maxlength="6" name="loginId" value="请输入账号" /> 密码框 <input type="password" id="pwd" name="" /> 单选按钮： <input type="radio" checked="checked" value="man" name="sex" />男 <input value="woman" checked="checked" name="sex" type="radio" />女 多选按钮： <input type="checkbox" name="hobby" value="篮球" /> <input type="checkbox" checked="checked" name="hobby" value="排球"/ 文件域： <input type="file" name="f" /> 隐藏域： <input type="hidden" name="隐藏域" value="123" /> 按钮： <input type="submit" value="注册" />：提交 <input type="reset" />：重置 <input type="button" /> <input type="image" src="图片路径" /> 下拉列表： <select name="choose"> <option value="a">1</option> <option selected="selected" value="b">2</option> <option value="c">3</option> </select> 文本域： <textarea cols="40" rows="20"></textarea> Css样式：样式是用于控制页面元素外观，位置等属性的一组参数 样式的种类 行内：在标签内使用 style =”样式1=样式值1;样式2=样式值2;...”; 优先级最高，效果以此为参照 页面太过冗余，作用域过小 <a style=”color:green;text-decoration:none; href=”#”>刷新本页</a> 内部：出现在页面的头部<head></head>中 <style> a{ color:green;text-decoration:none;}标签选择器 .a{ color:red;}类选择器 #id{ text-decoration:overline}id选择器 </style> 外部：是一个单独.css的文件 需要使用link标签来建立两个文件的关联 <link href=”css/index.css” rel=”stylesheet” type=”text/css”/> 复用性高 用*代表所有元素 Css文件中： a{ color:green;text-decoration:none;}标签选择器 .a{ color:red;}类选择器 #id{ text-decoration:overline} id选择器 选择器的划分 标签选择器：与标签名一致，类名{ } 类选择器：不同标签可以分到同一类中，在标签中加class=”a b”，.类名{ } Id选择器：id不能重复，在标签中加class=”a b id”，#类名{ } 后代选择器：#父类名 #子类名{ } 所有标签皆盒子 块级标签默认占满一行，下次直接换行 行级标签占满一行后换行 body左上角为页面的(0,0)点，向右x值增大，向下y值增大 CSS盒子模型(布局方案) 在html中 所有的标签都视作盒子 标准文档流 Border：边框：粗细、样式、颜色 border:1px solid black或者 border-width:1px; boder-style:dashed; boder-color:green;或者 border-left: 1px solid black border-left -width:1px; border-left -style:dashed; border-left -color:green; padding：填冲（内距）定位，以body为基准，改变自己的宽度、高度，会改变body的大小 <style=”padding-left:10px;”> margin外距定位，以元素为基准 <style=”margin-left:10px;”> margin:10px 20px 10px 20px; 上、右、下、左 margin: 10px 20px; 上下、左右 margin: 10px; 四个方向 margin:0px auto; 自动居中 background-color:#f5f5f5; 背景色 内容 块级元素 宽度100% 高度由内容决定 行级元素 宽高都由内容决定 Width：宽度 ：px 、% Height：高度：px float 浮动：打破标准文档流，块级元素不再具备自动换行的效果 参与元素后都要设置float Left元素向左浮动 Right元素向右浮动 None默认值，元素不浮动 Inherit规定应该从父元素继承 float 属性的值 之后要清除浮动：<div style=”clear:both” ></div> 字体样式 Font-weight: 字体的粗细程度 100-500 细 600-900加粗 bold bolder 都可以实现文字的加粗效果 h Font-size: 字体的大小、以像素为单位 Font-family: 字体的字型 Font-style: 字体的修饰（斜体） Color: 前景色rgb(200,200,0), rgba(200,200,0,0-1),单词，#16进制 文本样式 Text-decoration: 文本修饰 下划线：underline、上划线：overline 、中划线：line-through、闪烁效果 Text-indent ：文本缩进、在块级标签内可用，以像素为单位 Letter-sapcing: 字间距，给像素值 Line-height: 文本的行高，如果行高和容纳文本的块级容器一样大，则文字自动纵向居中，这个样式是实现纵向居中的一套有效手段 Text-align: 横向对齐的方式，left 左对齐、center居中对齐、right 右对齐 背景样式 Background-color: 背景色 Background-image: 背景图，url(图片地址); Background-size：背景图大小 Background-repeat: 调整背景图平铺方式，横向平铺：repeat-x、纵向平铺：repeat-y 、不平铺：no-repeat Background-position: 背景图的位移，background-position: xpx ypx 其它样式 元素不显示： Display: 设置元素显示或隐藏，隐藏不占据空间位置 none不显示； block 以块级方式显示； inline 以行级方式显示； inline-block行块级显示，可以调整宽高，前后不换行 visibility：visible显示，hidden不显示，隐藏时占据空间位置 hidden：直接写就行，在xhtml中赋值为hidden Position: 元素的定位方式，relative 相对定位，作为定位参照、absolute 绝对定位、fixd填充定位,后面用left、righ、top调整位置 Z-index: z柱 ，用来调整绝对布局的多个元素的叠放次序 List-style-image: 设置列表项的图片 Cursor设置鼠标外观的，pointor小手、help箭头加问号、ceil加好、text输入、wait等待 -moz-user-select:none层内容不能被选中 Overflow:hidden超出显示范围的内容隐藏 Overflow:scroll超出显示范围出现滚动条 伪类样式：出现顺序固定，可以省略，只能出现在内部和外部，不能出现在行内 a:link{ }默认 a:hover{ }悬浮 a:active{ }点击时 a:visited{ }点击后 书写顺序：L、V、H、A 其他标签：默认用div、悬浮用div: #newsList>ul>li{ }：子选择器 #newsList ul{ }：后代选择器 交集选择器,相交的部分就是要设置属性值的标签 1,格式: 选择器1选择器2...{ 属性:值; } 2,注意点: (1),选择器之间没有任何的连接符号 (2),选择器可以是标签名称,也可以是id、class名称 并集选择器 1,格式: 选择器1,选择器2,...{ 属性:值; } 2,注意点: (1),选择器之间利用,连接 (2),选择器可以是标签名称,也可以是id、class名称 兄弟选择器,只选中同级的标签 1,相邻兄弟兄弟选择(css2) 格式: 选择器1+选择器2{ 属性:值; } 注意点: (1),相邻选择器必须用+链接 (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签 2,通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中 格式: 选择器1~选择器2{ 属性:值; } 点击事件：放在头部中 <script type="text/javascript"> window.onload=function(){ document.getElementById("button").onclick=function(){ document.getElementById("f").submit(); } } </script> list-style-img:url(图片路径) javascript：是嵌入在html文档中的逻辑代码，是一种脚本语言 ，用来制作页面上标签的动态效果的。 构成 Ecmascript Js可以放置在html的任意位置 w3c 标准规范:要么放置在头部，要么放置在最后 外部js：是一个单独的文件，后缀名是.js ，使用script标签的src属性来引入 <script type="text/javascript" src="js/demo.js" ></script>> 内部js：是放置在头部的一对 <script></script> <script type="text/javascript" ></script> 行内js：是在事件中 使用javascript: 逻辑代码 Js是一个弱类型语言，唯一的类型是var，声明变量 面试题 ：请阐述var 和 object的区别 Objec：是万物宗源类型 是一个足够大的容器 所以可以保存各种类型的数据 Var ：是反射类型 数据值来决定了类型 类型其实是明确的 Bom History：代表浏览器的访问历史， window.history.go(); Go()：0 代表刷新本页；1 去下一页；-1 返回上一页 Back()：返回前一个页面 Forword()：前进到历史进入过的下一个页面 Location：代表浏览器的浏览地址 url ，window.location.href=’连接的地址’ Href()：跳转到一个页面 Reload()：重新载入当前页面，刷新 Document：是用于查找和动态控制页面中标签元素的模型 Referrer：返回前一个跳转页面的url url：返回当前文档的url 如何查找页面中的标签元素 document.getElementById(‘要查找的元素id’); 找到文档中唯一的一个元素对象 document.getElementsByName(‘要查找的元素id’); 根据名称返回对象集合 document.getElementsByTagName(‘要查找的元素id’); 根据标签名称返回对象集合 document.getElementsByclassName(‘要查找的元素id’); 根据类名称返回对象集合 Js中的方法 常规的方法 function show(){ } 匿名方法 Windows.onload=function(){ } Js中的事件 当x元素受到y 操作刺激时执行z方法 X 事件源：页面中任意的标签对象(自己选择)，在绑定的方法中使用this就指代事件源 Y 触发时机：onclick 被点击，ondbclick 被双击，onchange 内容改变、onmouseover鼠标悬停、onmouseenter鼠标进入的瞬间、onmouseleave鼠标离开后、onmouseout鼠标离开的瞬间、onfocus元素获取焦点元素、onblur元素失去焦点事件、onkeypress键盘按下并释放，触发的是上一次的内容、onkeydown键盘按下、onkeyup键盘释放，及时内容 Z 触发操作：一个包含逻辑代码的方法 Dom 3种弹出消息框的方式 输入： prompt(弹框的消息,输入框的默认值) 返回用户输入在输入框中的内容 返回的是字符串类型，转型要用到parseInt()、parseDouble() 输出： alert(弹框的消息信息)； 无返回值 confirm(弹框的消息信息)；返回boolean值 innerHtml=sum：刷新显示内容 NaN：not a number不是一个数字 Docment.write()执行时有现有的文档流就在现有文档流中打印，如果没有就新开一个全新的文档流覆盖现有的文档流 事件发生在文档流加载之后 Js中字符和字符串赋值时单双引号不分的，当外层用了双引号内层就用单引号 Js中运算符和逻辑控制语句和Java一样，制表位、换行符、转移符无效 Js时弱类型，由值决定类型 相对路径：不以盘符为起点 绝对路径：以盘符为起点 JavaScript：Java脚本语言 This指代事件源 Js严格区分大小写 Js中可以加入自定义属性 设置：setAttribute("test","aaa"); 取值：getAttribute("test") attributes["test"].nodeValue; Js中没有短横线-，直接连接首字母大写backgroundColor Js获取系统时间：new Date(); getYear()：年，只有两位 getFullYear()：年，四位数的 getMonth()：月，值为0-11 getDate()：日 getDay()：星期 getHours()：小时 getMinutes()：分 getSeconds()：秒 getMiliseconds()：毫秒 内容比较用== 数组元素的拼接用join(“-”) Js中方法不写参数类型的，直接写变量名 Document.getElementAttribute(“zhangxin”)：取属性值，前提是该属性在标签中显示的出现过 Document.getElementById(“zhangxin”).value()：取属性值，实时更新的值 Document.setElementAttribute(“zhangxin”,”baiyun”)：设置属性值 innerHtml设置标签显示内容 innerText设置标签内容，加入的标签标识会被认为内容，取出内容时也会取出标签 标签名. InnerHtml：取得显示内容 Document.getElementById(“zhangxin”).style.样式名:样式值：这种方法只能一对一的设置 Is nan()：判断是否为一个数值 This.checked：判断是否被选中，选中为TRUE，没选中为FALSE parentNode：查找父节点便签 childNodes：从父级找到子级，返回子级集合 nextNode找下一个兄弟，priviousNode找前一个兄弟，兼容性不太好 表格属性和方法： Rows[]：得到集合 InsertRow()：参数为下标位置的整数，返回对象 deleteRow()：参数为下标位置的整数 表格行的属性和方法： Cells[]：返回所在行的所有列的集合 rowIndex()：行的下标 InsertCell()：参数为下标位置的整数，返回对象 deleteCell()：参数为下标位置的整数 计时器 window.setInterval(要调用的方法名称，计时的时间间隔)：开启计时器 每隔多少时间自动调用方法一次 产生了循环调用的效果 window.clearInterval(计时器对象名)：关闭计时器 延时器 window.setTimeOut(要调用的方法名称, 延时多久)：开启延时器 延迟多少时间后调用方法一次 没有循环效果 window.cleartTimeout(延时器对象名)：关闭延时期 正则表达式：简洁代码，严谨的验证 /…./：代表模式的开始和结束 ^：匹配字符的开始 $：匹配字符的结束 \s：任意空白字符 \S：任意非空字符 \d：匹配数字字符，等价于[0-9] \D：除了数字之外的任意字符，等价于[^0-9] \w：匹配一个数字、下划线或字母字符等价于[A-Za-z0-9?_] \W：任意非空字符、等价于[^A-Za-z0-9_] .：除了换行符外的任意字符 {n}：匹配前一项n次 {n,}：匹配前一项n次或多次 {n,m}：匹配前一项至少n次，但不能超过m次 *：匹配前一项0次或多次，等价于{0,} +：匹配前一项一次或多次，等价于{1,} ?：匹配前一项0次或一次 具体写正则表达式的时候不用写开始^和结束$ []中的内容我们自己定义，一个[]只能描述一个字符 正则表达式的使用： 普通方式：var reg=/^表达式$/附加参数 构造函数：var reg=new RegExp(“表达式”); reg.test(要测试的字符串)，返回真假值 禁用提交按钮： 禁用：document.getElementById(“sub”).setAttribute(“disabled”,”disabled”); 启用：document.getElementById(“sub”).removeAttribute(“disabled”); 被禁用的按钮即不可用又不可点击 offsetLeft与style.left的区别： offsetLeft获取的是相对父级的左边距位置 style.left获取的是相对设置的position定义为relative的左边距位置 style.left 返回的是字符串、offsetLeft返回的是数值 style.left是读写的，offsetLeft是只读的 style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里、offseLeft则没有限制 省市级联 Js中的数组 声明方式 Var 数组名=new Array(size); Var 数组名=new Array(元素列表); Var 数组名=[元素1,元素2,元素3....]; 赋值方式 数组名[index]=?; 数组名[自定义的数组键]=值; select 对象和option对象的使用 Select 对象 事件：onchange当改变选项时调用事件 方法：add ( 一个option对象)产生option对象的方式 new Option(‘显示的值’,’value存的值’); 属性： options[]：返回包含下拉列表中所有选项的一个数组 selectedIndex ：设置或返回下拉列表中备选项的下标 length：数组长度 事件处理： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" > window.onload=function(){ document.getElementById("btn").onclick=function(){ var n=parseInt(document.getElementById("num").value); var sum=0; for(var i=1;i<=n;i++){ sum=sum+i; } document.getElementById("result").innerHTML=sum; } } </script> </head> <body> 请输入最大数:<input type="text" id="num" /><input type="button" id="btn" value="计算" /> <BR /><span id="result"></span> </body> </html>
以上是关于笔记之_Java的html整理的主要内容，如果未能解决你的问题，请参考以下文章