HTML入门（二）

1Meta标签

1.1关键字

<meat name="keywords" content="关键字内容"/>

1.2网页描述

<meta name="description" content="网页描述内容" />

1.3网页重定向

一般用作旧地址的弃用，自动跳转到新地址上。

<meta http-equiv="refresh" content="5:www.baidu.com"/>

content属性中的5代表为5秒后自动跳转，后面是跳转的目标地址。

2Link标签

2.1链接外部CSS文件

<link rel="stylesheet" href=""/>

2.2设置页面图标

<link rel="icon" href=""/>

示范：

3表格

3.1表格的结构

<table width="300" border="1" cellspacing="0" align="center">
        <caption>表格标题</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

3.2表格合并

3.2.1合并同行单元格

利用属性：Colspan来定义

        <tr>
            <td colspan="2">1</td>
            <td>3</td>
            <td>4</td>
        </tr>

3.2.2合并同列单元格

        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
            <td>4</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>

            <td>4</td>
        </tr>

3.3表格头

        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>

<th>的用法和<td>是一样的
不同点在于，标题的文字会自动加粗并且水平居中。

3.4边框颜色

<table width="300" border="1" bordercolor="red" align="center">

- width 设置列表的宽度
- border 设置列表的边框厚度，默认为0
- bordercolor 设置边框的颜色
- align 设置边框的水平位置 默认为left

4表单

<form action="" method=""/>

• action 提交表单的目标地址
• method 提交表单的方式（post/get）

4.1表单类型

    <fieldset>
    <legend>分组信息</legend>

4.2文本输入框

<input type="text" maxlength="" readonly="readonly" disable=""
name="username" value="值"/>

• maxlength 文本输入框最大的输入
• readonly 是否为只读文本
• disable 控件是否生效
• name 控件的name属性，提交表单和值绑定在一起
• value 控件的值

4.3密码输入框

<input type="password" name="pwd"/>

4.4单选框

<input type="radio" name="gender" value=“nan” checked="checked" />男 <br/>
<input type="radio" name="gender" value="nv" />女

• 只有当name一致时 才会有单选的效果。
• checked 表示是否默认选中
• 选中后 提交表单，提交的是被选中控件的name和值的键值对。

4.5多选框

<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="basketball">打球

4.6文件上传

<input type="file" /> 

4.7表单提交

<input type="submit"/>

4.8普通按钮

<input type="button />

主要配合JS的脚本语句使用

4.9重置input控件按钮

<input type="reset"/>

4.10H5新增input控件

5下拉列表

<select>
    <option>合肥</option> 
    <option>芜湖</option> 
    <option>马鞍山</option>    
    <option>安庆</option>
    <option>淮南</option> 
</select>

5.1下拉列表分组

<select>
    <optgroup label="安徽省"/>
    <option>合肥</option> 
    <option>芜湖</option> 
    <option>马鞍山</option>    
    <option>安庆</option>
    <option>淮南</option> 
</select>

6多行文本框

<textarea cols="20" rows="5"></textarea>

• cols 限制每行最多输入字符数
• rows 限制输入的行数