1.7.1表格单元格合并
- 水平合并:colspan
- 垂直合并:rowspan
如图,将单元格1和2合并,6和9合并:
<table border="2px" width="200px" heigth="200"> <tr> <td colspan="2">单元格1</td> <!-- <td>单元格2</td>--> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td rowspan="2">单元格6</td> </tr> <tr> <td>单元格7</td> <td>单元格8</td> <!-- <td>单元格9</td>--> </tr> </table>
水平合并:保留左边的删除右边的。
上下合并:保留上边的删除下面的。
二、Form表单
2.1表单
表单在 Web 网页中用来给用户填写信息,从而能采用户信息,使网页具有交互的功能。所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件
<form action="url" method="get|post" name="myform"></form>
属性说明
action服务器地址
name表单名称
method中Get和Post的区别
- 数据提交方式,get把提交的数据url可以看到,post看不到
- get一般用于提交少量数据,post用来提交大量数据
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮
- 表单标签
- 表单域
- 表单按钮
<form> <input type="text"> <input type="submit"> </form>
2.2表单元素
2.2.1文本框
文本域通过<input type="text">
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
2.2.2密码框
密码字段通过标签<input type="password">
来定义
<form> Password: <input type="password" name="pwd"> </form>
温馨提示
密码字段字符不会明文显示,而是以星号或圆点替代
2.2.3提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理.
<form name="input" action="url" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
三、块元素与行内元素(内联元素)
HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在HTML5中,元素不再按照这种⽅式来区分, 而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别,被称为穿透的,元素可能属于不止⼀个类别,称为混合的。
详细参考地址:内容分类 - HTML(超文本标记语言) | MDN
虽然到了HTML5的版本,元素分类更细致了,但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用。
内联元素和块级元素的区别
块级元素 | 内联元素 |
块元素会在页面中独占一行(自上向下垂直排列) | 行内元素不会独占页面中的一行,只占自身的大小 |
可以设置width,height属性 | 行内元素设置width,height属性无效 |
⼀般块级元素可以包含行内元素和其他块级元素 | ⼀般内联元素包含内联元素不包含块级元素 |
常见块级元素:div、form、h1~h6、hr、p、table、ul、等
常见内联元素(行内元素):a、b、em、i、span、strong等
行内块级元素(特点:不换行、能够识别宽高):button、img、input等
四、HTML5新增标签
HTML5
是HTML
最新的修订版本,2014年10月由万维网联盟(W3C)
完成标准制定。在HTML5
出现之前,我们一般采用DIV+CSS
布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点,HTML5
新增了很多新的语义化标签
扩展知识
div
容器元素,也是页面中见到的最多的元素
div实现
H5新标签实现
H5新标签
<header></header>
头部<nav></nav>
导航<section></section>
定义文档中的节,比如章节、页眉、页脚<aside></aside>
侧边栏<footer></footer>
脚部<article></article>
代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等