版权声明:欢迎评论交流,转载请注明原作者。 https://blog.csdn.net/m0_37809890/article/details/84112316
学这些太痛苦了,我一定要成为算法工程师!
HTML
简介
- Hyper Text Mark Language,超文本标记语言,使用一套标记标签来描述网页。
- 标签,开始标签,结束标签,标签内容,属性。开始标签后加
/
来结束,如<br/>
。推荐使用小写。 - 标题
<h1>
,注释<!-- 注释-->
,水平线<hr />
,段落<p>
。 - 样式
<style>
,直接修改样式的标签已被废弃。<p style="font-family:arial; color:red; font-size:20px;">A paragraph.</p>
. - 格式化:文本格式化,输出格式化,引用,留坑。
- 链接:
<a href="url">Link text</a>
,新窗口显示,target属性target="_blank"
,定义锚name="tips"
,指向锚<a href="#tips">
.注意:将正斜杠添加到子文件夹后。 - 图像:
<img>
,图像来源src
,替换文本(无法显示时)alt
。<map>
和<area>
可以定义图像地图,留坑。 - 表格:表格
<table>
,表头<th>
,行<tr>
,单元格<td>
,空单元格占位(空格)
。 - 列表:无序列表
<ul>
,<li>
,有序列表<ol>
,<li>
,自定义列表<dl>
,<dt>
,<dd>
. - 块元素
<div>
等,会换行;内联元素<span>
等,不换行。都可以设置类。div经常用于布局。
实例http://www.w3school.com.cn/html/html_layout.asp
. - 响应式设计Responsive Web Design,以可变尺寸传递网页,Bootstrap留坑。
- 框架
<frameset>
,同一页面上显示多份文档,不可与<body>
同时使用。不可修改大小noresize="noresize"
.可用作导航等,跳转等。 - 内联框架
<iframe>
,显示子网页,可以在子网页中打开指定的链接。 - 头部元素:定义标题
<title>
,默认链接<base href="" targrt="">
定义元数据<meta>
编码<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
重定向``` - 可以写名字的颜色
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow
. - html5声明
<!DOCTYPE html>
CSS
简介
- CSS是指Cascading Style Sheets(层叠样式表),有三种方式指定样式:外部样式表,内部样式表,内联样式,越往内的层越有优先权。
- css语法:
selector1,selector2 {property1: value; property2: value...}
,如果value是多个单词,要加双引号。通配符选择器以*定义,会选中所有的选择器。 - 派生选择器
li strong{dec}
只会对<li><strong>这些部分</strong></li>
有用。 - id选择器以#定义,
#red{color:red}
,对制定了相应id的标签起作用有用<p id="red">这就是红色了</p>
,每个id只能定义一次,但一个id可以有多个派生选择器。 - 类选择器以.定义,
.center {text-align: center}
,会对指定了class的标签起作用<h1 class="center">这些部分</h1>
起作用。 - 属性选择器以[]定义,
[title]{color:red;}
,可以指定值,包含值,以值开头等等。常用于设置表单样式。
样式
- 背景:
background-color, background-image, background-repeat, background-position(关键字,数值,百分比), background-attachment
,背景样式不会继承。 - 文本:
首行缩进text-indent(正,负,百分比,会继承), 水平对齐text-align(left,right,center),单词间隔word-spacing, 字母间隔letter-spacing,字符转换text-transform(none,uppercase,lowercase,capitalize), 文本装饰text-decoration(不同层会替换而不累积),空白处理white-space
- 字体:留坑
- 链接:a:link未被访问,a:visited已被访问,a:hover鼠标放在上方,a:active鼠标点击时。
- 列表:留坑
- 表格:留坑
- 轮廓:留坑
框模型
- 元素,内边距,边框,外边距。
- 内边距负责展示元素的背景,设置值为padding,上右下左。
- 边框border,需要先指定边框样式style(solid是实线)。可以设置width,color。
- 外边距负责展示元素周围的空白,设置值为margin,可以为负值。注意:相邻的不同元素(或空的相同元素)的外边距会合并,每次只展示最大值。
定位
- 相对定位position: relative,相对于本来位置平移,设置left,top会使得元素向右下方平移。
- 绝对定位:absolute,相对于最近已定位的祖先元素平移,通过设置z-index控制堆放次序。
- 浮动:float,可以实现包围效果,留坑。
实例
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
JavaScript
- 输出
document.write(); document.getElementById().innerHtml;
- 数组
var cars=["Audi","BMW","Volvo"];
- 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔,
var person={firstname:"Bill", lastname:"Gates", id:5566};
- 循环
for(item in items)
- DOM(Document Object Model),文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。
- 事件:处理cookie:onload, onunload,处理输入:onchange,处理鼠标事件:onmouseover,onmouseout,onmousedown,onmouseup,onclick
- 添加元素(节点):
document.createElement()
element.appendChild()
创建文本节点:document.createTextNode()
删除节点:element.parentNode.removeElement(element)
- 创建对象。JS是面向对象的语言,但JS不适用类。
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
JQuery
- jQuery 是一个 JavaScript 函数库,可以通过
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
引入。 - 语法:文档就绪函数
$(document).ready(function(){ /* 将真正的函数放入其中 */});
。jQuery使用选择器技术来选取html对象,$(selector).action()
,如$(this).hide()
,id选择$("#test").hide()
,元素选择$("p").hide()
,类选择$(".test").hide()
,属性选择器等。$
符号表示这是jQuery函数,等价于jQuery
效果
$(selector).hide(speed,callback)
隐藏某元素。speed为隐藏速度,可选slow,fast或毫秒,callback为执行完毕后调用的函数。show函数同理,toggle函数可以在show和hide之间切换。$(selector).fadeIn(speed,callback)
淡入淡出,fadeOut,fadeToggle同理。$(selector).fadeTo(speed,opacity,callback);
可以到给定的透明度。- 滑动
$(selector).slideDown(speed,callback);
slideUp,slideToggle - 动画
$(selector).animate({params},speed,callback);
,留坑,stop停止一切效果。 - 效果可以链接,太真实了。
HTML
text(),html(),val()
获得文本,html(带标记)、值。可以加参数来设置。attr()
可以设置属性,传入一个对象来设置多个属性。这些函数可以添加回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
举例子$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
- 添加元素
append() - 在被选元素的结尾插入内容,prepend() - 在被选元素的开头插入内容,after() - 在被选元素之后插入内容,before() - 在被选元素之前插入内容
- 删除元素
remove()删除被选元素,empty()删除被选元素的子元素
,remove的参数可以添加选择器。 - 修改class以修改样式
addClass(),removeClass(),toggleClass()
,css()返回所有属性,css(pro)返回对应属性css(pro,value)设置属性,css({})设置多个属性。
遍历
查找所需的dom,留坑。
JQuery AJAX
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
$(selector).load(URL,data,callback);
从服务器加载数据,并放回被选元素中$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });
$.get(URL,callback);
使用get请求获得数据。$.post(URL,data,callback);
使用post请求获得数据。
noConflict()
- 当其它框架函数名需要使用$符号时,调用
$.noConflict();
来释放$
符号。 - 这个函数返回一个jQuery的引用,可以用来创建其它别名。
- 可以把
$
传递给ready(),这样就可以在ready内使用$了。