HTML基本知识

标签

<span></span> 无语义，标识作用
<q></q>引用，加“”号
<blockquote></blockquote> 长段引用
<br/>换行
&nbsp空格
<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)