HTML CSS 基础

<meta -> 编码，跳转，刷新，关键字，描述，IE兼容
<meta charset='utf-8'> # 编码
<meta http-equiv='Refresh" Content='3' url='http://www.baidu.com'> #自动跳转
<meta name='keywords' content='关键字1，关键字2'> 被搜索的关键字
<meta name='description'>
<meta http-equiv='X-UA-Compatible" content='IE=IE9;IE=IE8;'/>


icon 小图标
<link rel='shortcut icon' href='path/icon'>

块级标签<div>
内联标签<span>
input type -> file text password button...
<form enctype="multipart/form-data"> #与file 一起用
tip：
当使用多个radio 时，把name设为一样，则可以做单选框。

<textarea>default_str</textarea> #多行文本框

<select name = 'xx' multiple='multiple' ,size="2">
    <optgroup label="xx"></optgroup> #分组标签
    <option value='1'>xx </option>
    <option value='2' selected='selected' multiple='multiple'>yy </option>
</select>

#《a》不能提交到数据库
<a href='www.baidu.com' target='_blank'>xx</a>#新页跳转
<a href='#id_3></a>  #锚

<ul>
    <li>list_1</li>
</ul>
<ol>
    <li>有序标签</li>
</ol>
<dl>
    <dt>title</dt> #有标题列表
    <dd>content</dd>
</dl>

表格：
    <table border="1">
        <thead>
        <tr>
            <th rowspan='2'>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">内容1</td>
            <td colspan='2'>内容2</td>
        </tr>
                <tr>
            <td colspan='2'>内容2</td>
        </tr>
        </tbody>
    </table>

#for:与id关联（点击）
<label for='username'> 用户名：</label>
<input id='username' type=text>

<fieldset>
    <legend>
        登录
    </legend>
</fieldset>

css调用
#id{xx}     id选择器
.class，.class{xx}   类选择器
.class #id{xx}  

引入css
<link rel='stylesheet' href='commons.css' />

CSS样式
边框：border  阔度，样式，颜色（border 4px dotted red）
text-align:center; 字体居中
font-weight：bold  字体加粗
float：left   DIV float后则不占一整行，往左飘
line-height:xxpx   行高，行高和div一样高时，字体居中
clear：both  将浮动的DIV拉回父元素内，但大体不会改变
display:inline 将块标签转为内联标签
display:block  
display:inline-block    默认inline，但是也可以修改
    none   消失
margin-top xx   与父标签的边距
padding-top xx  自身内部增加边距（看起来好像变高了）

tip：行内标签无法设置高、款、padding、margin
tip：块级标签如果按百分比来占位，则以父标签为基准

关于DIV定位的补充：
当使用DIV作为定位时很容易发生标签互相重叠的情况，以下是我遇到的一些“bug”

<div id='lay1'>
    <div id='lay2'></div>
</div>
<div id='new'></div>

#lay1{

    height:100px;
    background-color: yellow;
    width:100%
}
#new{
    height:50px;
    width:40%;
    background-color: blue;
}

上面这个HTML是没办法把2个div都显示的，因为position！

position属性：
static ：根据当前所分配到的位置进行移动
relative ：父标签使用，让子标签可以在父亲肚子内定位
fixed ：根据浏览器空间定位
absolute ：根据父标签定位