[Web]Web前端知识点总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/suifeng629/article/details/89381135
  1. HTML的编辑器:DreamWeaver

    鼠标的移入和移出方法:hover()

    在jsp中用<%%>就可以写Java代码了,而html没有<%%>

     

     

     

    在W3C指定的HTML5规范中,对于HTML5在语法结构上的规格限制是较松散的,<HTML><htmL>不区分大小写,标记不一定必须有结束标记

    • 各大浏览器与HTML5的兼容:各浏览器对HTML的标准支持不同,对HTML5新增功能支持程度也不同,导致使用同样的网页不同浏览器有不同表现。所以要制定web标准,为了解决兼容性问题
    • web标准规定的内容:结构(xml(可扩展标记语言)),表现(css样式),行为(DOM)
    • <head></head>:是html的头部标记,头部信息不显示在网页中,里边的<title>显示在浏览器左上角的标题栏中
    • 特殊字符文本添加:html中,特殊符号以&开头,如空格&nbsp
    • 重要文本:<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>,超链接最重要的要素有两个:超链接的网页元素和超链接指向的目标地址
  2. 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方式获得,不一定非要注入

 

展开阅读全文

没有更多推荐了,返回首页