复习之HTML(1)

HTML：超文本标记语言

标记（标签）： <标记名></标记名>    <标记名/>（自结束）

标记的属性： 用来描述标记的一些特性

常用标签

1、<img src=""></img>      图片标签

2、表格

<table border="1px">         //表格
<th>表头</th>          //表头
<tr>                         //行
    <td>dd</td>     //列
</tr>
</table>

3、超链接标签

<a href=""></a>

4、锚

<a name="top"></a>

<a href="#top">返回顶部</a>

5、层标签

<div></div>

6、声明样式

<style>
    tr{}          /*设置tr样式*/
    .tr{}        /*class=".tr"; 类选择器 */
     #tr{}       /*id="tr" id选择器*/
</style>

7、文本标签

<span></span>

8、框

搜索框：

<input type="text" value="搜索" />

单选框

<input type="radio" value="" />

密码框
<input type="password" value="" />

下拉框

<select style="width: 100px;height:20px ;">
<option value="a">1996</option>
<option value="b" selected="selected">1995</option>
<option value="c">1994</option>
<option value="d">1993</option>
</select>

多选框

<input type="checkbox" value=""/>

(复选框)多选框

<select multiple="value" size="2">                   /*size 控制显示的行数*/
<option value="a">1996</option>
<option value="b" selected="selected">1995</option>
<option value="c">1994</option>
<option value="d">1993</option>
</select>

文本域

<textarea cols="20" rows="40">   /*设置文本域总共40行  每行行20个字 */

</textarea>

9、按钮

<button>按钮</button>

属性：

style = ""                     样式

valign ="top"                显示在左上角

border ="1px"               显示边框

border="solid"              单线边框

align="center"              绝对居中

width=""                      宽

height =""                    高

style="background-color: red;"                        设置背景颜色为红色

style="background-image:url(img/11.png)"        设置背景图片

<td rowspan='2'>ddddddddddddd</td>                rowspan合并行

<td colspan="5"> ddddddddddddd</td>               colspan 合并列

cellspacing="5px"                     单元格间隔

cellpadding="50px"                    框内字与边框的距离

background-repeat:no-repeat;                     设置图片不平铺重复显示

background-repeat:repeat-x;                     设置图片横向平铺

background-repeat:repeat-y;                     设置图片纵向平铺

background-position:-25px -374px;            从大图中抠小图（必须要设置宽和高）

background-position: right;                       设置内容位置

valign属性趋向于垂直对齐，其值包含：top、bottom、middle、baseline

align属性趋向于左右对齐，其值包含：left、right、center

font-family: "微软雅黑";                          设置字体    
font-size: 14px;                                    设置字体大小

float: left;                                            浮动

clear: both;                                        清除浮动

padding: 10px;                                  内边距 （控件与内容之间的距离）

margin: 5px;                                    外边距（控件与控件之间的距离）

text-align: center;                             文本内容居中

text-decoration: none;                       去下划线

常用符号

&nbsp 空格

&lt;       <

&gt;      >

鼠标事件

1.设置a标签在鼠标悬停时的样式

a:hover{
background-color: red;
} 

2.设置a标签在鼠标点击时的样式

a:active{
background-color:yellow;
}