第一步 了解HTML和CSS
div写注释很重要,不然找不到
<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。
<q>用来引用简短的文本</p> <blockquote>用来引用长文本</blockquote>
nb(牛逼)sp(space) 好牛逼的空格!
<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。<code>标签在网页上显示程序代码(少)<pre>在网页中显示代码段(多)<a href="目标网址" target="_blank">click here!</a><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">(HTML中src是source的缩写,这里是源文件的意思)1、src:标识图像的位置;2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;(机器看)3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);(人看)
<form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /> </form>
Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法。 二者主要区别如下: 1、Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。 如下形式: http://www.imooc.com/test.asp?name=lilian&password=12345678 2、Get是不安全的,因为在传输过程,数据被存放在请求的URL地址中,这样就可能会有一些隐私的信息被第三方看到。 3、Get方式传输的数据量非常小,一般限制在 2KB 左右,但是执行效率却比 Post 方法好;而 Post 方式传递的数据量相对较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击,根据微软方面的说法,微软对用 Request.Form()可接收的最大数据有限制,IIS4中为 80KB 字节,IIS5 中为 100KB 字节。综上所述,请尽量用 Post 方法。<label for="male">男</label> <input type="radio" name="gender" id="male" />标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。<link href="style.css" rel="stylesheet" type="text/css" />
一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.food>li伪类其他标签也能用p{color:red!important;}
缩进 text-ident:2emtext-align:center; 段落居中 text-align:left;段落居左 text-align:right;段落居右常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:同时具备内联元素、块状元素的特点
<img>、<input>
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
在网页中,元素有三种布局模型:
1、流动模型(Flow) 默认的网页布局模式
2、浮动模型 (Float) float:left 3、层模型(Layer),层模型有三种形式:
1、绝对定位(position: absolute) 最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
2、相对定位(position: relative) 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置
3、固定定位(position: fixed)
以谁为参照物加 position:relative; (父元素) 移动的盒子加 position;absolute; (子元素)设置颜色的方法也有很多种: 1、英文命令颜色p{color:red;} 2、RGB颜色p{color:rgb(133,45,200);}每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:p{color:rgb(20%,33%,25%);} 3、十六进制颜色p{color:#00ffff;}父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的2. float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。
语句末尾的分号 ; 不能省略
第二步 学习JavaScript
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') 1.链接地址 2.打开方式 3,4.尺寸大小 5.窗口菜单 6.工具条
DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <title>javascript</title> <style type="text/css"> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;} p{ line-height:18px; text-indent:2em; } .two{color:red; border:2px solid blue;} </style> </head> <body> <h2 id="con" style="text-align:center">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" οnclick="changeColor()" value="改变颜色" > <input type="button" οnclick="jialei()" value="添加类" > <input type="button" οnclick="changeSize()" value="改变宽高" > <input type="button" οnclick="hidetext()" value="隐藏内容" > <input type="button" οnclick="showtext()" value="显示内容" > <input type="button" οnclick="resettext()" value="取消设置" > </form> <script type="text/javascript"> var myh = document.getElementById("con"); var mydiv = document.getElementById("txt"); function jialei(){ myh.className="two";} //定义"改变颜色"的函数 function changeColor(){ myh.style.color="red"; myh.style.backgroundColor="#ccc"; mydiv.style.color="red"; mydiv.style.backgroundColor="#ccc"; } //定义"改变宽高"的函数 function changeSize(){ mydiv.style.width="300px"; mydiv.style.height="300px"; } //定义"隐藏内容"的函数 function hidetext(){ mydiv.style.display="none"; } //定义"显示内容"的函数 function showtext(){ mydiv.style.display="block"; } //定义"取消设置"的函数 function resettext(){ var mychose = confirm("确定取消所有设置吗?"); if(mychose==true){ mydiv.removeAttribute("style"); } } </script> </body> </html>
创建数组:js中创建数组可以有以下几种方式:1. var arr = new Array(); 定义数组的时候注意A是大写的。 2 var arr = new Array(size);size代表数组中元素个数 3 var arr = new Array(元素1,元素2,...) 4 var arr =[元素1, 元素2, 元素3......] 这种为非官方写法
break跳出循环,循环体不再执行 continue跳过本次循环,整个循环体继续执行
js计时器 setTimeout() 指定的延迟时间后执行代码 setInterval(代码,交互时间); clearTimeout() 取消setTimeout()设置 setInterval() 每隔指定的时间执行代码 clearInterval() 取消setInterval()设置var url = window.location.href;//获取当前窗口的url 收藏document.getElementByName(name)与 getElementByld()方法不同的是,通过元素的name属性查询元素,而不是通过id属性 注意: 1.因为文档中的name属性可能不唯一,所有getElementsByName()方法返回的是元素的数组,而不是一个元素。 2.和数组类似的也有length属性,可以和访问数组一样的方法来访问,从0开始。getElementsByTagName()
选择器
第三步 学习jQuer
设置字体垂直居中:内容高度height有多少就设置行line-height(高有多少)这样
第四步 上手实践
字体会垂直在居中。