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>
时间： 2024-10-09 15:47:42