前端入门（第三天）

单元格合并

行合并:colspan="**"

列合并:rowspan="**"

（*号为合并单元格数量）

合并遵循:保留上边 删除下面（列合并），保留左边 删除右边（行合并）

行合并代码:

<table>

    <tr>

        <td colspan="******">

        </td>

    </tr>

</table>

列合并代码:

<table>

    <tr>

        <td rowspan="******">

        </td>

    </tr>

</table>

合并需要注意的点:

1.合并单元格记得把被合并掉的单元格删掉

（比如:

<table>

    <tr>

        <td rowspan="******">

        单元格1

        </td>

         <td>单元格2</td>

    </tr>

        <tr>

       （ <td>单元格3</td>）

         <td>单元格4</td>

    </tr>

</table>

以上事例记得把括号内容去掉，列同理，否则表格会乱掉）

2.合并行列多个单元

<table>

    <tr>

        <td colspan="**" rowspan="**">

        </td>

    </tr>

</table>

（注意第一条，合并的行列数必须相同）

form表单

简单来说就是输入框和提交按钮

代码:<form action="*****" method="get/post" name="****"></form>

action是服务器地址

name是表单名称（内置名称）

method是数据的提交方式:get提交少量数据（提交数据服务器看得到），post提交大量数据（提交数据服务器看不到）

表单元素

一个完整的表单包含三个部分:

表单标签（也就是form标签）

表单域（也就是输入框）

表单按钮（也就是提交按钮）

代码:

<form>（表单标签）

    <input type="text">（表单域）

    <input type="submit">（表单按钮）

</form>

文本框（表单域）

<form>

    first name:<input type="text" name="first name">

</form>

first name是输入框的提示（显示在界面）

<>里面的name是内置名称

比如（账号:             ）

让输入内容隐藏（输入内容变成原点）

表单按钮：

<form>

    <input type="submit" value="****">（表单按钮）

</form>

表单按钮type的内容一定是submit，而value的内容是表单按钮上名字。

、

块元素和行内元素（内联元素）

块元素：

1.在页面独占一行（自上而下垂直排列）

2.可以设置width和heignt属性

3.一般块元素可以包含行内元素和其他块级元素

内联元素：

1.不会独占一行，只占自身大小

2.设置width和heignt属性无效

3.一般内联元素包含内联元素，不包含块级元素

div标签

<div></div>

div元素是容器，也是实际应用最多

为了方便区分模块，分成一块一块的区域。

旧标签写网页布局

<div id="header"></div>(头部区域)

<div id="nav"></div>（导航区域）

<div id="article">（正文区域）

    <div id="section"></div>（正文内容部分区域）

</div>

<div id="aside"></div>（侧边栏区域）

<div id="footer"></div>（脚部区域）

因为H5改版了新的标签代替以上的旧标签，所以沿用以下新标签：

H5新标签

<header></header> 头部

<nav></nav>导航

<article></article> 表示一段完整的内容

<section></section>文章中的节，可以写在<article>标签里

<aside></aside>侧边栏

<footer></footer>脚部

新标签代替旧标签的优缺点：

优点：新标签非常简洁，写起来方便，而且能使做出来的网页SEO排名更高

缺点：新标签的使用，有些旧的浏览器不兼容，识别不了新标签，所以还是会沿用旧标签，使得更多浏览器可兼容。