HTML5笔记3 (表格、表单、H5新标签)

一个有纸、笔、橡皮擦并且能坚持严格行为准则的人，实质上就是一台通用图灵机。

表格

表格标签：

表格：<table> 行：<tr> 单元格(列)：<td>

html 复制代码

<table>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>

快捷键：table>tr*(数字)>td*(数字){单元格内容}

表格的属性：

border：设置表格的边框 width：设置表格的宽度 height：设置表格的高度

表格合并

水平合并：colspan 垂直合并：rowspan

html 复制代码

<table border="1" width="600px" height="400px">
    <tr>
        <td>1</td>
        <td colspan="2">23</td>
        <!-- 水平合并了2与3, 使之变成一列 -->
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">59</td>
        <!-- 垂直合并了5与9, 使之变成一行 -->
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

水平合并：保留左边，删除右边垂直合并：保留上边，删除下边

Form表单

表单在 Web 网页中用于给用户填写信息，从而能采集用户信息，使网页有交互功能；

html 复制代码

<form action="url" method="get|post" name="myform"></form>

action：服务器地址 name：表单名称

method 中 get 和 post 的区别：

数据提交方式上，get 提交的数据 url 能看到，post 看不到；get 一般用于提交少量数据，post 用于提交大量数据

表单的元素：表单标签、表单域、表单按钮

html 复制代码

<form>
    <input>
    <input type="submit">
</form>

1、文本框：

html 复制代码

<form>
    First name: <input type="text" name="firstname">
    <br>
    Last name: <input type="text" name="lastname">
</form>

密码框：

html 复制代码

<form>
    Password: <input type="password" name="psw">
</form>

提交按钮：

当用户点击确认按钮时，表单的内容会被传送到另一个文件

表单的动作属性定了目的文件的文件名，由动作属性定义的这个文件通常对接收到的数据进行相关的处理

html 复制代码

<form name="input" action="url" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

HTML5新增标签

引入：div：容器元素，用于将页面划分为不同的区域块

html 复制代码

<div id=""></div>

新分块写法：

html 复制代码

<header></header> <!-- 头部 -->
<nav></nav> <!-- 导航 -->
<article>
    <section></section>
</article>
<aside></aside> <!-- 侧边栏 -->
<footer></footer> <!-- 底部 -->