admin管理员组文章数量:1588129
-
HTML的编辑器:DreamWeaver
鼠标的移入和移出方法:hover()
在jsp中用<%%>就可以写Java代码了,而html没有<%%>
在W3C指定的HTML5规范中,对于HTML5在语法结构上的规格限制是较松散的,<HTML><htmL>不区分大小写,标记不一定必须有结束标记
- 各大浏览器与HTML5的兼容:各浏览器对HTML的标准支持不同,对HTML5新增功能支持程度也不同,导致使用同样的网页不同浏览器有不同表现。所以要制定web标准,为了解决兼容性问题
- web标准规定的内容:结构(xml(可扩展标记语言)),表现(css样式),行为(DOM)
- <head></head>:是html的头部标记,头部信息不显示在网页中,里边的<title>显示在浏览器左上角的标题栏中
- 特殊字符文本添加:html中,特殊符号以&开头,如空格 
- 重要文本:<b>粗体</b>,<i>斜体</i>,HTML中这些已过时,这些标记应该使用CSS样式来实现
- 换行:<br>单标记,没有结束标记,break意思
- 标记<h1-6>:headline
- 列表:ul可以嵌套使用
- 插入图像:<img src='路径或者网络图片路径'></img>
<a href="URL(网址需加http://,)">网页元素(页面显示的内容)</a>
图片超链接:<a href='.html'><img src=''/></a>,文件中的图片和网页文件在同一目录下,链接的网页可以不加http://,绝对URL和相对URL
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
</table>
合并单元格clospan/rowspan:就是丢掉一些单元格
<from action='url' method='post'>
<input type='text' name='' value='' size=''></input>
name属性定义文本框的名称,为保证数据的准确采集,必须定义一个独一无二的名称,用于表单提交和回显,value是 val()的值
- 单选<input type='radio' name='' value=''>,name必须一致,表示同一个组
- 通过name传value值,就是两者的区别,单击提交,有name属性的才能传值value
- Type="file"用作上传文件
- 音频解码器:音频解码器定义了音频数据流编码和解码的算法,其中,解码器主要对数据流进行编码操作,用于存储和传输,音频播放器主要是对音频文件进行解码,然后进行播放操作
- style标记:即为使用css样式
- 单行文本输入框text:
- 排列单元格中的内容:align,如<td align='left'>
- <form>表单:表单主要用于收集网页上的相关信息,基本格式
- href属性:超链接的目标地址,设置为#,表示为空链接
- <table>
- 网页超链接:<a></a>,超链接最重要的要素有两个:超链接的网页元素和超链接指向的目标地址
- css总结
CSS3总结
(1) 设置文本的溢出效果:text-overflow属性用来定义当文本溢出时是否显示省略标记
Text-overflow:clip 不显示省略标记(…)而是简单的裁剪
Text-overflow:ellipsis当对象文本溢出时显示省略标记(…)
注意:要实现溢出时产生省略好的效果还须定义:强制文本在一行内显示 white-space:nowrap
及溢出时内容为隐藏 overflow:hidden
即这三个属性要同时显示:text-overflow:ellipsis;over-flow:hidden;white-space:nowrap
(2) 设置字符之间的间隔:letter-spacing:normal | length
(3) 垂直对齐方式:vertical-align:
(4) 文本的水平对齐方式: 在css中,使用text-align设置
(5) 文本的空白处理:white-space:
(6) 字体为什么在别的电脑上不显示:并不是所有电脑上安装有这些字体
(7) 图片缩放:网页上显示一张图片时,默认以图片的原始大小显示,对其缩放
a. 可以使用width和height
b. 使用css3种的max-width和max-height,如果图片超过max,则使用max缩放
c. 使用css3的width和height属性,即使用style标记,使用style标记即为css3属性
注意:当只设置了图片的width属性,没有设置height属性,图片会自动等比例缩放
(8) 图片对齐:使用css3属性定义对齐方式
a. img本身没有对齐属性,需使用父标签的text-align
b. 纵向对齐:img中定义style,使用vertical-align
(9) 图文环绕:在css3中,使用float,float属性主要定义元素在哪个方向上浮动,一般情况下这个属性总应用于图像,使文本环绕,浮动元素会生成一个块级框,而不论其本身是何种元素,如果浮动非替换元素,则要指定一个明确的宽度,float:left | right,只有这两个属性
设置文字环绕时,float元素为什么会失去作用:很多浏览器在显示未指定width的float元素时会有错误,所以不管float元素内容如何,一定要为其指定width属性
如垂直列表菜单<ul><ol>可以通过css的float属性水平显示
(10) 背景色设置:是在body标签里,包括背景图片等,都是在body标签里
(11) 背景图片显示:backgroup-attachment:scroll|fixed,背景图片随页面滚动还是固定在可见区域
(12) 每一个元素的边框都可以从样式,宽度,颜色来描述,宽度=0也会被浏览器解析,也会占资源
(13) 超链接
a. 设置带有提示信息的超链接:title属性
(14) 使用css3控制鼠标箭头:cursor属性:定义在标签里,使用style即可
(15) 制作图片列表:在<ul>或者<ol>中使用list-style-image,可以将列表前的项目符号替换成任意图片
List-style-image:url(路径)
(16) 块级元素和行内级元素
通过块元素可以把html中的p,h1之类的文本标签定义成类似于div分区的效果,而通过内嵌元素可以把元素设置成行内元素
a. 块元素:在没有css样式作用下,新的块元素会另起一行,块元素使用css中的display:block定义,特点如下:
i. 总在新的一行显示
ii. 行高和边距可控制
iii. 如果用户不设置宽度的话,则默认容器的100%
常用的块元素:div,p,h1,ul,li,form
b. 行内元素:css的display:inline把元素定义为行内元素,行内元素特点如下:
i. 和其他元素都在一行上
ii. 行高和边距不可改变
iii. 宽度不可改变
常见的行内元素:<span><a><label><input><img><button>等
(17) 盒子模型,F12
网页上的每个html元素都认为是长方形的盒子,是网页设计的一大创新,熟练掌握盒子模型的各个属性,css3中,所有页面元素都包含在一个矩形框中,称为盒子,盒子由margin,border,padding,content组成,盒子的实际高度是相加,可以通过width和height来控制content的大小
a. 盒子的定位:
网页中的各个元素都要有自己合理的定位,在css3种,使用position进行定位
position:static | relative | fixed | absolute
Static:默认值,静态定位,没有任何移动效果的定位(即设置了left,right也没有效果),无特殊定位,对象遵循html定位规则
relative:相对定位,元素相对于它本身的原始起点进行移动
fixed:固定布局,相对于浏览器窗口进行定位,参照物不是上级元素而是浏览窗口
absolute:相对于父元素定位,绝对定位是参照浏览器的左上角,绝对定位的坐标原点是上级元素的原点,与上级元素有关,相对定位的坐标原点是本身,与上级元素无关
b. 盒子的浮动float:left | right,浮动float只能在水平方向,不能在垂直方向浮动,用来改变块元素的显示方式
float属性不但可以改变元素的显示位置,也会对相邻元素造成影响,如果不想float下面的其他元素浮动在周围,可以使用css3的clear,语法:clear:none | left | right | both,其中none表示允许两边有浮动对象,both不允许,left不允许左边有浮动对象
c. 溢出定位overflow:如果框被指定大小,内容显示不下overflow:visible | hidden | scroll |auto
d. 空间定位z-index:z-index属性用于调整定位时重叠块的上下位置,值大的在上方
position设置对css布局的影响:left,right,top,bottom属性必须配合使用position才有用,如position:relative,上述css的4个属性表示各个边界和原来位置的距离,position:absolute,上述css4个属性表示块的边界和页面边框的距离,position:static,上述css的4个属性不能生效,子块的位置也不会发生变化
3.jQuery
JQuery函数
(1) 文档加载完成执行函数
$(document).ready(function(){
});
(2) 添加删除css类
$("#id").addClass("cssClass");
$("#id").removeClass("cssClass");
(3) 选择符
$('p'):根据标签名,选择文档中所有的段落
$("#id"):根据id
$('.class'):根据类
(4) 绑定事件
$("#id").bind("click", function(){});
$("#id").unbind("click", functionName);
$("#id").click(function(){});
(5) 模仿用户触发某一事件
$("#id").trigger("click");//触发某特定元素的click事件
(6) 为元素添加效果
$("#id").css("property");//读取样式值
$("#id").css("property", value);//设置样式值
$("#id").css('per1' :val1, 'per2' : val2);//设置多个样式值
(7) DOM操作
$("#id").attr('perp');//获取属性
$("#id").attr('perp', val);//设置属性
$("#id").attr('perp1' : val1, 'perp2' : val2);//设置多个属性
(8) 包装元素
$("#id").wrap('<li></li>');//将特定元素包装到li中,即在特定元素外围加li
(9) 给元素设置值
$("#id").html();//获取元素的内容
$("#id").html('<b>aaa</b>');//给元素设置内容
$("#id").text();//获取元素的文本
$("#id").text(value);//设置元素的文本
$("#id").val();//获取元素的内容
$("#id").val(value);//设置元素的值
(10) 键盘和鼠标
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
Jquery
(1) 前端中如何使用java代码
a. 在jsp中第一行<%@page import="java类">
b. <%=%>如<p><%=StringUtil.get()%></p>,也可以使用<%=%>获取session中保存的userInfo等
c. javaScript中对回车键的处理
i. $("#id").keydown(function(event){
If(event.keycode=13){
}
})
d. alert使用:$.message.alert("提示信息","用户名不能为空","info")
e. Ajax传递的范例
$.ajax({
Type:"post",
Url:url,
ContentType:"text/html",
Error : function(){},
Succuss : function(){}
});
f. 浏览器的调试模式
i. 只针对javascript的代码块
ii. 在代码块中写上debugger
iii. 然后打开IE的开发人员工具,单击脚本,单击启动调试,可看到在debugger处停了下来
g. 页面时间更新:setInterval(要执行的方法,1000),每秒执行一次
(2) Ajax是什么:
a. 全称Asynchronous javaScript and xml
b. 前端提交数据:通过表单提交,通过ajax提交
c. 在没有ajax之前,页面必须通过表单提交,重载整个页面,用户体验差
d. Ajax技术更像把整个页面分成若干块,需要哪一块与后端服务器交互时,只需要专注那一块即可
e. XMLHttpRequest是ajax的核心,是javaScript的对象
f. Ajax的JQuery语法:通过学习xmlHttpRequest,我们成功尝试了ajax请求的完整过程,但通过这种方式,整个代码冗余,JQuery以简洁著称,在处理ajax请求的时候,也对传统的xmlHttpRequest对象方式进行了简化,实现了符合Jquery语法的ajax的创建方法,只是简写
$.ajax({}),里边的async,默认情况下,所有请求都是异步,设置为false,则为同步请求,同步请求将锁住浏览器,用户的其他请求必须等待请求完成才可以执行
g. MVC,前端发送的请求都会被控制器接收,然后转发具体action,struts2扮演控制器
h. 前端的数据,在java中可以通过request.get方式获得,不一定非要注入
版权声明:本文标题:[Web]Web前端知识点总结 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728026067a1142677.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论