html-初学者必备(2)

学习目标(2):

• 掌握表格标签

• 掌握表单标签

• 掌握H5新增表单和表单属性

表格运用

注意<table><thead><tbody><tfoot>等标签的使用位置

<table border="1">
    <thead>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </tfoot>
</table>
效果图如下:

表格单元格合并

<!--横向合并-->
<table border="1">
    <tr>
        <th>11</th>
        <th colspan="2">11</th>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
        <td>22</td>
    </tr>
</table>
效果图如下:

<!--纵向合并-->
<table border="1">
    <tr>
        <th>11</th>
        <th rowspan="2">11</th>
        <th>11</th>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
    </tr>

</table>
效果图如下:

下拉菜单

 

option标签带有selected属性为默认选项

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option selected="selected" value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

表单属性<熟悉>

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

input控件

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

input输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。