标签
<span></span> 无语义,标识作用
<q></q>引用,加“”号
<blockquote></blockquote> 长段引用
<br/>换行
 空格
<hr/>横线
<address></address>地址,斜体格式
<code></code>加代码
<pre></pre>加一段代码
<ul>
<li></li>无序列表
</ul>
<ol>
<li></li>有序列表
</ol>
<div></div> 块
<table>
<tbody>可选项,决定是否加载完再出现表格
<caption></caption>表格标题,可选项
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>
<style type="text/css"></style>
<a href="目标连接" title="鼠标滑过显示的文字" target="_blank">链接显示的文本</a> 其中target="_blank"表示打开的网页在新的标签页打开
<img src="图片链接" alt="图片加载失败时显示的文字" title="鼠标滑过图片时显示的文字">
<form method="post/get" action="数据被传送到的地方">
<label for="username">用户名:</label>
<input type="text" name="username"/>
<label for="pass">密码:</label>
<input type="password" name="pass"/>
<textarea cols="50" rows="30">在这里输入内容</textarea>
<input type="radio" value="值" name="somename" checked="checked"/>
<input type="checkbox" value ="值" name="somename" checked="checked">
<select>/<select multiple="multiple">
<option value="值">显示的值</option>
<option value="值" selected = "selected">显示的值</option>
</select>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
标签内元素
id 例如 <div id="somename"></div>
CSS属性
border:1px solid #000;
font-size:12px;//em,和%都是以该元素的px值大小伟单位
color:red;
font-weight:bold;
font-style:italic//斜体
font-family:"宋体"、
font-variant:small-caps
text-decoration:underline
text-decoration:line-through
text-indent:2em//缩进
line-height:1.5em
letter-spacing:50px
word-spacing:50px
text-align:center//要想将
display:block//设置成块状元素
display:inlne//设置成内联元素
CSS基本知识
<span class="name"></span>
.name{CSS样式}
<span id="name"></span>//一个名字只允许使用一次
#name{CSS样式}
子选择器 >
.first>secod{CSS样式}//智能是第一代子标签
包含选择器 (空格)
.father child{CSS样式}
通用选择器 *
匹配html所用标签
伪类选择器:
例如 a:hover{color:red}
鼠标滑过显示红色
分组选择器
h,span{color:red}
CSS样式分为内联式、嵌入式、外部式
内联式:<p style="color:red"></p>
嵌入式:<style type="text/css"></style>
外部式:<link href="base.css" rel="stylesheet" type="text/css">
优先级:内联式>嵌入式>外部式
CSS样式有继承性
CSS样式优先级:
标签权值为1
类选择器为10
id选择器为100
如果权值一样,处于后面的样式会被应用
设置最高权值!important
盒子模型:
div{padding:1px 2px 1px 2px}//上,右,下,左
div{padding:1px}//全部
div{padding:1px 2px}//上下,左右
CSS布局模型
1)流动模型(flow)
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上块状元素都会以行的形式占据位置
内联元素都会在所处的包含元素内从左到右水平分步显示
2)浮动模型(float)
可以实现块状元素在同一行
div{float:left/right}
3)层模型(layer)
有三种定位方式:
绝对定位:position:absolute
相对定位:position:relative
固定定位:position:fixed
div{position:relative;
top:50px;
left:50px;}//相对于原位置向下向右移动50px,但偏离前的位置保持不变
div{
position:absolute;
top:50px;
left:50px;}//定位于父块距上和左50px
div{position:fixed;
bottom:0;
right:0;
}//定位于窗口
假设父块box1,和子块box2,要使得box2相对于box1定位,需要在box1设置position:relative,box2中设置position:absolute
设置垂直居中只要设置 height=line-height
parseInt(string)将字符串转换成int类型
字符串方法 :
string.toUpperCase();
string.charAt(index)=string[index]
string.indexOf(substring,startpos)//查找第一个substring出现的位置;starpos可选
string.split(substring,number)//以substring为分割,最多分Number次,number可选
string.substring(startpos,stoppos)
数组方法:
var myArr=new Arrary()
var myArr=[1,2,3,4,5];
array.length
var myArr=arr1.concat(arr2,arr3,…,arrn)//连接数组,并返回副本
var myStr=arr.join(分隔符)//返回string
var myArr=arr.reverse()//颠倒数组顺序
var myArr=arr.slice(start,end)//截取数组start到end-1之间的数组
myArr.sort(方法函数)
数学类方法:
var myMath=Math.PI
日期:
var date=new Date();
window对象:
window.history.length
window.history.back()/forward()
window.history.go(number)
location 对象
var myStr=window.location.属性
navigator对象
screen对象
Dom节点方法:
document.getElementsByName()
getAttribute(name)