<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 :根据父标签定位