表格、表单和H5

  1. 创建表格

在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释。

1.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。

表格属性

表格、表单和H5

  1. 表格结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:

<thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。

<tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

  1. 表格标题

定义和用法:caption 元素定义表格标题。

<table><caption>我是表格标题</caption><7table>

注意:

1. caption标签只存在表格里面,必须紧随 table 标签之后。

2. 只能对每个表格定义一个标题。通常这个标题会被居中于

合并单元格

跨行合并:rowspan 

跨列合并:colspan

合并单元格的步骤:

      1、先判断跨行合并还是跨列合并

        2、跨行合并用rowspan属性,跨列合并用个colspan属性  

        3、将rowspan 或者colspan写在第一个要合并的单元格上

        4、将合并的行数和列数写在指定的属性值上

        5、将多余的单元格注释掉

表格标签

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性:

1. action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

2. method用于设置表单数据的提交方式,其取值为get或post。

3. name用于指定表单的名称,以区分同一个页面中的多个表单。

input控件

表格、表单和H5

注意:

radio如果是一组,必须给他们命名相同的名字name,这样就可以多个选其中的一个啦。

Input的size跟字体大小有关系,不设置的情况下,浏览器默认情况下,input默认的输入框的宽度就是169px

label标签

lable作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢? for属性规定label与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件

<textarea cols="宽度 " rows="高度">  默认是20

  文本内容
</textarea>

下拉菜单

<select>

  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>

</select>

注意:

1. select中至少应包含一对option。

2. 在option中定义selected ="selected "时,当前项即为默认选中项。

fieldset标签 

 <fieldset>

  <legend>Personalia:</legend>

  Name: <input type="text"><br>

  Email: <input type="text"><br>

  Date of birth: <input type="text">

 </fieldset>

<legend>标签中文本会在边框的左上角显示。 

 表格、表单和H5

 什么是HTML5

1、HTML5 是下一代 HTML 标准。

2、HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

3、HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

4、HTML5的设计目的是为了在移动设备上支持多媒体。

5、HTML5 简单易学。

HTML5 的改进 

1、新元素 2、新属性 3、完全支持 CSS3  4、Video 和 Audio  5、2D/3D 制图 6、本地存储 7、Web 应用 

HTML5 的优点 

1、提高可用性和改进用户的友好体验。

2、有几个新的标签,这将有助于开发人员定义重要的内容。

3、可以给站点带来更多的多媒体元素(视频和音频)。

4、可以很好的替代FLASH和Silverlight。

5、将被大量应用于移动应用程序和游戏。

6、可移植性好。

 HTML5中新增的元素

<canvas> 标签定义图形,比如图表和其他图像

<audioi>定义音频

<video>/< movie>定义视频

<source>定义多媒体资源<video><audio>

<embed>定义嵌入的内容,比如插件

<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

<datalist>定义选项列表,请于input元素配合使用该元素

<article>定义页面独立的内容区域

<aside>定义侧边栏内容

<header>定义文档头部

<section>定义一个区域

<footer>文档底部

<nav>导航栏

<progress>定义任何类型的任务进度

<datalist> 元素

<datalist> 元素规定输入域的选项列表,<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:使用 <input> 元素的列表属性与 <datalist> 元素绑定。

<input list="browsers"> 

<datalist id="browsers"> 

<option value="Internet Explorer"> 

<option value="Firefox"> 

<option value="Chrome"> 

<option value="Opera"> 

<option value="Safari"> 

</datalist>

HTML5 新的表单属性

placeholder 占位符

autofocus 获取焦点

<input type="text" name="fname" autofocus> 

autocomplete  自动完成,用于表单元素,也可用于表单自身

novalidate  关闭验证,可用于<form>标签

required  验证条件,必填项 

pattern 正则表达式 验证表单

maxlength  最大长度

minlength  最小长度

 

上一篇:HTML5+CSS3基础学习笔记(五)


下一篇:HTML5-part1