02表格、表单和H5

1.表格标签

 

表格是较为常用的一种标签,但不是用来布局,常用来处理、显示表格式数据。

  1. 、创建表格

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

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

表格属性

 表格结构

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

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

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

  1. 表格标题

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

<table>

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

</table>

  1. 合并单元格

跨行合并:rowspan

跨列合并:colspan

合并单元格的步骤

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

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

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

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

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

2.表单标签

一个表单有三个基本组成部分: 表单标签,表单域,表单按钮

表单标签

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:

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

input控件

label标签

label标签为input元素定义标注(标签)。

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

textarea控件

如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:

<textarea cols="宽度 " rows="高度">  默认是20
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>

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

</select>

fieldset标签

使用select控件定义下拉菜单

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

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

3.HTML5简介

(1)、什么是HTML5

1、HTML5 是下一代 HTML 标准。

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

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

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

5、HTML5 简单易学。

(2)、HTML5 的改进

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

(3)、HTML5 的优点

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

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

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

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

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

6、可移植性好。

HTML5中新增的元素

<canvas>

标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

<audio>

定义音频内容

<video>

定义视频(video 或者 movie)

<source>

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

新表单元素

<datalist>

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

新的语义和结构元素

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<section>

定义文档中的节(section、区段)。

HTML中的语义标签

HTML5页面中的标签使用,如:

<body>
    <header>

定义了文档的头部区域

<nav>定义导航</nav>

</header>
    <div>
        <article>定义页面独立的内容区域</article>
        <aside>定义页面的侧边栏内容</aside>

<section>定义段落节</section>
    </div>
    <footer>定义 section 或 document 的页脚</footer>
</body>

HTML5 新的表单元素

<datalist> 元素

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

<button> 元素

<button> 元素既按钮,双标签。与input控件中,将type设置为button一样

<button>按钮</button>

HTML5 新的表单属性

placeholder

占位符   

autofocus

获取焦点

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时,域自动地获得焦点。

autocomplete

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

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

name

指定表单项属于哪个form,处理复杂表单时会需要

novalidate

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

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。required

 验证条件,必填项

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域(不能为空)。

pattern

正则表达式 验证表单

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

maxlength

最大长度 一般用于text文本属性

Minlength

最小长度一般用于text文本属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值