表格、表单和H5

Bub_ble___

已于 2023-03-30 17:24:21 修改

阅读量93

点赞数

分类专栏： HTML 文章标签： html servlet css

于 2023-03-29 10:57:34 首次发布

本文链接：https://blog.csdn.net/Bub_ble___/article/details/129830798

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、表格

1.创建表格的基本语法格式如下：

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

2. 用**“tr>td*3”**快速创建一行三列

3.4.表格结构

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

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

用表头标签th</th（加粗、居中）替代相应的单元格标签td</td

5.caption （居中）元素定义表格标题。

<table>

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

</table>

注意：caption标签只存在表格里面，必须紧随 table 标签之后。

6.合并单元格（写在第一个要合并的单元格上）

跨行合并：rowspan

跨列合并：colspan

二、表单

1.组成：表单标签、表单域、表单按钮

2.表单标签：

创建表单的基本语法格式如下：

<form action="指定接收并处理表单数据的服务器程序的url地址。" method="提交方式，取值为get或post" name="表单名称">
各种表单控件
</form>

3.input控件

注意：radio如果是一组，必须给他们命名相同的名字name。

4.label标签（被绑定元素获得输入焦点）

5.textarea控件（创建多行文本输入框）

6.下拉菜单

  <option selected ="selected ">选项1</option> //注意默认选项与input中的checked不同
  <option>选项2</option>    //若无selected ="selected "则第一个option中的选项为默认项
  <option>选项3</option>
  ...

</select>

7.fieldset标签

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

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

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

<legend>Personalia:</legend>

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

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

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

</fieldset>

三、HTML5中新增的元素

1.新多媒体元素

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

注： word中按住Ctrl再访问超链接

A.<audio controls> //必须有controls才能显示

<source src="horse.ogg" type="audio/ogg"> //source：浏览器从中选择一个能显示的格式

您的浏览器不支持 audio 元素。

</audio>

<video width="320" height="240" controls> //比audio多了width、height、poster（视频封面）这几个属性

您的浏览器不支持 video 标签。

</video>

2.新表单元素

<datalist>

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

值写在value中，与select不同。

效果：既能下拉选择又能输入。自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

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

3.新的语义和结构元素

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

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

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

<section>

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

四、新的表单属性

1.placeholder

占位符，提示需要输入的信息

2.autofocus

获取焦点

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

3.autocomplete

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

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的

input中必须定义name属性

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

</form>

4.name

指定表单项属于哪个form

5.novalidate（布尔型）

关闭验证，可用于<form>标签,使用之后，input内的其他属性不起作用

6.required（布尔型）

验证条件，效果为：必填项

7.pattern

用正则表达式验证表单

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

8.maxlength

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

9.minlength

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