02表格、表单和H5

最新推荐文章于 2024-04-09 14:59:52 发布

覔741

最新推荐文章于 2024-04-09 14:59:52 发布

阅读量132

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_60806359/article/details/121129092

版权

1.表格标签

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

、创建表格

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

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

表格属性

表格结构

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

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

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

表格标题

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

<table>

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

</table>

合并单元格

跨行合并：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控件可以轻松地创建多行文本输入框，其基本语法格式如下：

下拉菜单

使用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中新增的元素

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

新多媒体元素

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>

新表单元素

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

新的语义和结构元素

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

<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域

<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。

定义文档中的节（section、区段）。

HTML中的语义标签

HTML5页面中的标签使用，如：

定义了文档的头部区域

</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一样

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文本属性

覔741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02表格、表单和H5

1.表格标签表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。、创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：<table><tr> <td>单元格内的文字</td> ...</tr>...</table>表格属性表格结构在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘...
复制链接

扫一扫