前端HTML5学习1(新增布局,状态,列表,文本,表单控件标签)

前端HTML5学习1(新增布局,状态,列表,文本,表单控件标签)

  • 新增布局标签
  • 新增状态标签
  • 新增列表标签
  • 新增文本标签
  • 新增表单控件属性
  • input新增属性值

新增布局标签

HTML5 引入了许多新的语义化标签,用于更清晰地描述网页内容结构。这些新增的语义标签有助于开发者更好地组织代码、提高可访问性和 SEO(搜索引擎优化)。以下是一些 HTML5 中新增的语义标签:

标签名语义单?双标签
header定义页面或区块的页眉,通常包含标题、导航等内容。
footer定义页面或区块的页脚,通常包含版权信息、联系方式等内容。
nav定义页面的导航链接部分。
article定义独立的内容块,如博客文章、新闻报道等。
section定义文档中的节(section),通常用于组织相关内容。
aside定义侧边栏内容,通常与主要内容相关但不属于核心内容。
main定义文档的主要内容,表示文档的核心部分。(几乎不用)
figure和 figcaptionfigure 用于包裹媒体内容(如图片、图表)及其说明(figcaption)。
time表示日期或时间信息,有助于标记日期、时间等数据。

以上就行相当于具有语义的div标签,用法和div的用法相同

新增状态标签

HTML5 并没有专门用于表示状态的标签。然而,HTML5 提供了一些新的输入类型和属性,可以帮助开发者更好地表示用户选择的状态或信息。以下是一些在 HTML5 中常用的用于表示状态的标签、输入类型和属性:

  • input type="checkbox":复选框元素允许用户选择一个或多个选项。当选中时,表示为选中状态;未选中时,则为未选中状态。
  • input type="radio":单选按钮元素允许用户从给定的选项中选择一个。用户只能选择一个单选按钮来表示其状态。
  • input type="range":范围输入元素允许用户通过滑动条选择数值,表示某种范围内的状态。
  • select:下拉菜单元素允许用户从预定义选项列表中选择一个项目,在所选项目处呈现特定的状态。
  • progress:进度条元素用于显示操作的完成进度,表示当前任务执行的状态。
    progress元素用于表示任务的完成进度,通常用于显示操作或过程的当前状态。下面是 <progress> 元素的基本结构和属性:
    progress语法结构
<progress value="currentValue" max="maxValue">Description</progress>

progress属性值
value:表示 <progress`> 中显示的当前值,即任务完成的进度。该值必须在范围(0 到 max)之间。

max:定义允许的最大值,表示任务的总体进度。如果未指定,默认为 1。

Description:可选的文本描述,用于解释正在进行的任务或进度的含义。

通过设置 progress元素的 value 和 max 属性,您可以轻松地表示任务的完成进度,并帮助用户了解任务当前所处的状态。这个元素特别适用于展示下载进度、表单提交进度等需要实时更新的任务。

  • meter:计量器元素用于显示一组已知范围内的度量值,通常用于展示某种指标或状态的程度。

meter元素用于表示一组已知范围内的度量值,通常用于展示某种指标或状态的程度。meter元素包含一个当前值和可选的最小值、最大值、低值和高值,以及一个可选的标签来描述度量值的含义。HTML5 的 meter元素用来表示某个范围内的量化数据,例如磁盘使用率、温度计读数等,它提供了一种可视化的度量表示方式。通常,meter 表现为一个类似温度计或电量显示的“仪表盘”。
以下是 meter元素的基本结构和属性:
meter语法结构

<meter value="currentValue" min="minValue" max="maxValue" low="lowValue" high="highValue" optimum="optimumValue">Description</meter>

meter属性值
value:表示 中显示的当前值。必须在范围(min 到 max)之间。

min:定义允许的最小值。如果未指定,默认为 0。

max:定义允许的最大值。如果未指定,默认为 1。

low:定义低值范围的阈值,当值低于该值时将应用低值样式。

high:定义高值范围的阈值,当值高于该值时将应用高值样式。

optimum:定义最优值的阈值,用于指示最理想的值范围。

Description:可选的文本描述,用于说明 元素所代表的度量值的含义。

新增列表标签

<datalist> 标签用于定义输入框(<input> 元素)的预定义选项列表。当用户在输入框中键入时,浏览器将显示与已输入内容匹配的选项列表。这有助于提供一些可选值,让用户更容易选择。

语法结构

<input list="datalist_id">
<datalist id="datalist_id"><option value="option1"><option value="option2"><!-- 更多选项 -->
</datalist>

示例

<input list="browsers">
<datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari"><option value="Edge">
</datalist>

在这个示例中,当用户在输入框中键入时,浏览器将显示包含 “Chrome”、“Firefox”、“Safari” 和 “Edge” 的选项列表。用户可以从这些选项中选择一个值。

<details> 标签用于创建一个可以展开和折叠的详细信息部分,用户可以点击标记以查看或隐藏其中的内容。

语法结构

<details><summary>Summary Text</summary><!-- Details Content Here -->
</details>

示例

<details><summary>Click here to expand</summary><p>Additional details or content can go here.</p>
</details>

在这个示例中,用户可以点击 “Click here to expand” 部分来展开或折叠包含的详细内容。这种方式可以帮助组织页面信息并节省空间,同时提供用户更多控制权。

新增文本标签

<ruby> 标签用于定义带有注音(音符)的文本,通常用于显示东亚语言(如中文、日文)中字符的音标或注音。注音以小号文字的形式显示在主要文本之上或之下。

语法结构

<ruby><span></span><rt>ou</rt>
</ruby>

<ruby>:定义带有注音的文本内容。

<rt>:定义注音的内容。

<mark> 标签用于在文本中标记或突出显示部分内容,通常用于突出显示搜索结果、关键词等。浏览器会默认以黄色背景和黑色文本来突出显示 <mark> 元素内的内容。

语法结构

<mark>Highlighted Text</mark>

示例

<p>This is an example <mark>highlighted text</mark> in a paragraph.</p>

在这个示例中,文本 “highlighted text” 将被浏览器以默认的方式标记为突出显示,通常是使用黄色背景色。这有助于用户更容易地注意到被标记的文本内容。
注意:
<mark> 标签不应该被用来代替其他元素(如 <strong><em>)用于强调文字,而应该主要用于突出显示特定的片段,如搜索结果、关键字等。

新增表单控件属性

<input> 元素中的 placeholder 属性。

placeholder 属性用于在输入框或文本域中提供占位符文本,向用户描述所需输入内容的示例,但不会被提交为实际数据。当用户聚焦到输入框时,占位符文本消失。
placeholder 属性对于增强表单的可用性和用户体验非常有帮助,同时也可以提供对用户预期输入的提示信息。

<input type="text" placeholder="输入你的名字">

在这个示例中,用户在输入框中将看到 “输入你的名字” 的占位符文本,从而知道应该在该输入框中输入自己的姓名。

<input> 元素中的 required 属性。

required 属性用于指定在提交表单时必须填写相应的输入字段。如果一个输入字段具有 required 属性,那么用户必须在提交表单之前填写该字段,否则表单将无法提交。

示例

<form><label for="username">Username:</label><input type="text" id="username" name="username" required><label for="password">Password:</label><input type="password" id="password" name="password" required><button type="submit">Submit</button>
</form>

在这个示例中,用户名和密码输入框都具有 required 属性,意味着用户在提交表单之前必须填写这两个字段。如果用户尝试提交表单而这两个字段为空,则浏览器会阻止表单的提交并提示用户填写必要的信息。

required 属性可确保用户在提交表单时提供必要的信息,有助于减少错误和提供更好的数据完整性。

<input> 元素中的 autofocus 属性。

autofocus 属性用于指定页面加载时自动将焦点设置在特定的输入字段上,使用户可以直接在加载页面后开始输入,而不需要手动点击该输入字段。

示例

<input type="text" autofocus>

在这个示例中,页面加载后,文本输入框会自动获得焦点,用户可以立即开始输入,而无需手动点击文本输入框。

autofocus 属性

autofocus 属性对于那些希望用户立即开始输入的输入字段非常有用,提供了一种便捷的方式来改善用户体验。

autocomplete 属性用于控制浏览器是否应该为输入字段提供自动完成功能。当设置为 “on” 时,浏览器可以根据用户以前的输入来自动填充字段。当设置为 “off” 时,浏览器不会提供任何自动完成功能。

示例

<form><label for="username">Username:</label><input type="text" id="username" name="username" autocomplete="on"><label for="password">Password:</label><input type="password" id="password" name="password" autocomplete="off"><button type="submit">Submit</button>
</form>

在这个示例中,用户名输入框具有 autocomplete=“on”,而密码输入框具有 autocomplete=“off”。这意味着浏览器可以自动填充用户名输入框,但不会自动填充密码输入框。

通过控制 autocomplete 属性,您可以决定浏览器是否应该为特定输入字段提供自动完成功能,从而增强用户体验并提供更好的隐私保护。

pattern 属性

pattern 属性用于指定输入字段的值必须匹配的正则表达式模式。如果用户输入不符合指定的模式,则表单提交将被阻止,并且用户会收到相应的错误消息。

示例

<form><label for="username">Username:</label><input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" title="Username must be at least 3 characters long and only contain letters"><button type="submit">Submit</button>
</form>

在这个示例中,用户名输入框具有 pattern=“[A-Za-z]{3,}”,这意味着用户名必须至少包含3个字母字符。如果用户尝试提交包含不少于3个字母以外的字符的用户名,表单将无法提交。title 属性可提供给用户关于所需格式的友好提示信息。

通过使用 pattern 属性,可以强制用户输入符合特定模式的数据,确保收集到正确格式的信息。

对于pattern属性后面的属性值,需要编写一个符合正则表达式语法的模式来定义输入字段所需匹配的规则。以下是一些常见的正则表达式示例:

匹配数字:\d+(至少一个数字)
匹配字母:[a-zA-Z]+(至少一个字母,不区分大小写)
匹配邮箱:[a-zA-Z0-9._%±]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(简单的邮箱验证,可能并不完美)
匹配特定格式电话号码:\d{3}-\d{3}-\d{4}(例如:555-555-5555)

input新增属性值

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/829454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】A01、性能优化-参数监控分析

1、参数监控 1.1、MySQL command 查看 mysql>SHOW STATUS; &#xff08;服务器状态变量&#xff0c;运行服务器的统计和状态指标&#xff09; mysql> SHOW VARIABLES;&#xff08;服务器系统变量&#xff0c;实际上使用的变量的值&#xff09; mysql> SHOW STATUS …

SpringBoot---------Hutool

第一步&#xff1a;引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-parent</artifactId><version>5.7.17</version></dependency> 第二步&#xff1a;各种用法 ①生成随机数 //生成验证码 String s …

Linux磁盘管理与文件系统

目录 一.磁盘基础 磁盘结构 二.MBR 磁盘分区结构 三.文件系统类型 XFS文件系统 SWAP&#xff0c;交换文件系统 四.磁盘分区 linux系统添加并使用新硬盘的步骤 五 .创建文件系统 mkfs mkfs命令 挂载、卸载文件系统 挂载文件系统、ISO镜像到指定文件夹 ​编辑umount…

Redis可视化工具RedisInsight

下载地址&#xff1a;RedisInsight - The Best Redis GUIRedisInsight provides an intuitive and efficient graphical interface for Redis, allowing you to interact with your databases and manage your data.https://redis.com/redis-enterprise/redis-insight/#insight…

IDEA上配置Maven环境

1.选择IDEA中的Setting 2.搜索maven 3.设置IDEA使用本地安装的Maven&#xff0c;并修改配置文件路径 配置文件&#xff0c;本地仓库&#xff0c;阿里云仓库配置及路径教程 在IDEA上配置完成。

【Linux内核驱动基础】从零开始手搓一个从上层应用到底层驱动的IO口代码

【Linux内核驱动基础】从零开始手搓一个从上层应用到底层驱动的IO口控制代码 文章目录 【Linux内核驱动基础】从零开始手搓一个从上层应用到底层驱动的IO口控制代码一、驱动基础认知1.为什么要学会写驱动2.文件名与设备号3.open函数从上层打通到底层硬件的详细过程 二、基于内核…

【强训笔记】day4

NO.1 思路&#xff1a;利用滚动数组&#xff0c;迭代一个Fibonacci数列&#xff0c;给出三个值进行循环迭代&#xff0c;当n<c时&#xff0c;说明n在b和c之间&#xff0c;这里只需要返回c-n和n-b的最小值就可以了。 代码实现&#xff1a; #include<iostream>using n…

打印给定数组中每一个数字

如何给定1-10的数字 #include<stdio.h> int main() {int arr[] { 1,2,3,4,5,6,7,8,9,10 };// 0 9//[]--下标引用操作符int i;int sz sizeof(arr) / sizeof(arr[0]);//10个数for (i 0; i < sz; i){printf("%d ", arr[i]);}re…

centos7使用源码安装方式redis

安装编译源码的工具gcc yum install -y gcc下载源码 源码下载地址 https://download.redis.io/releases/ 注意事项 不建议安装最新版本redis&#xff0c;所以我这里选择6.2.6版本 下载 wget https://download.redis.io/releases/redis-6.2.6.tar.gz解压 tar -zxvf redis-…

单片机通讯协议

参考&#xff1a;江科大单片机教程 STM32入门教程-2023版 细致讲解 中文字幕_哔哩哔哩_bilibili IIC通讯协议SPI通信协议UARTCANUSB速度100k-400khz4Mhz-线数2 CLK,DATA4CLK,ENB,IO,OI额外设备一主多从一主多从 一般不用自己写&#xff0c;都有相应的库或官方提供相应的&#…

舌头分割YOLOV8-SEG

舌头分割&#xff0c;基于YOLOV8-SEG&#xff0c;训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;从而摆脱YOLO依赖&#xff0c;支持C,PYTHON,ANDROID开发 舌头分割YOLOV8-SEG

使用预训练模型构建自己的深度学习模型(迁移学习)

在深度学习的实际应用中&#xff0c;很少会去从头训练一个网络&#xff0c;尤其是当没有大量数据的时候。即便拥有大量数据&#xff0c;从头训练一个网络也很耗时&#xff0c;因为在大数据集上所构建的网络通常模型参数量很大&#xff0c;训练成本大。所以在构建深度学习应用时…

OS对软件的管理,进程,PCB、子进程

进程 可执行程序加载到内存中&#xff0c;操作系统为内个程序都形成一个PCB对象&#xff08;结构体对象&#xff09;&#xff0c;PCB里存放着这个程序的所有的属性。进程可执行程序PCB &#xff0c;CPU执行程序也是先通过该程序的PCB找到相应的程序代码&#xff0c;然后一条一…

ThinkPHP5 SQL注入漏洞敏感信息泄露漏洞

1 漏洞介绍 ThinkPHP是在中国使用极为广泛的PHP开发框架。在其版本5.0&#xff08;<5.1.23&#xff09;中,开启debug模式&#xff0c;传入的某参数在绑定编译指令的时候又没有安全处理&#xff0c;预编译的时候导致SQL异常报错。然而thinkphp5默认开启debug模式&#xff0c…

分享一些实用的工具

1、amCharts5&#xff1a;模拟航线飞行/业务分布图/k线/数据分析/地图等 网址&#xff1a; JavaScript mapping library: amCharts 5https://www.amcharts.com/javascript-maps/ Demo地址&#xff1a;Chart Demos - amChartshttps://www.amcharts.com/demos/#maps 他分为amC…

小龙虾优化算法(Crayfish Optimization Algorithm,COA)

小龙虾优化算法&#xff08;Crayfish Optimization Algorithm&#xff0c;COA&#xff09; 前言一、小龙虾优化算法的实现1.初始化阶段2.定义温度和小龙虾的觅食量3.避暑阶段&#xff08;探索阶段&#xff09;4.竞争阶段&#xff08;开发阶段&#xff09;5.觅食阶段&#xff08…

【誉天战报】3月HCIE战报火热来袭!新增45位同学通过认证!

2024年3月&#xff0c;誉天教育共有45名学员顺利通过了HCIE认证&#xff0c;其中&#xff1a;云计算20人、数通18人、存储5人、云服务2人。让我们一起祝贺他们吧~ 誉天教育是华为优选级授权培训合作伙伴&#xff0c;专业从事华为授权认证课程实战技能培训。连续13年荣获“华为优…

和林曦老师一起读书吧 | 愿我们:只生欢喜不生愁

今天&#xff0c;想和你一起来读书&#xff0c;林曦老师的《只生欢喜不生愁》。    这本书的名字很有意味&#xff0c;它来自于清代《养真集》中的一句话&#xff1a;自古神仙无别法&#xff0c;只生欢喜不生愁。      我们会羡慕这样的状态&#xff1a;只生欢喜不生愁…

018基于SSM的音乐系统网站

018基于SSM的音乐系统/网站 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MysqlIntelliJ IDEA(Eclipse)Maven 数据库&#xff1a; MySQL 技术&#xff1a; SpringSpring mvcMybatisJqueryVideo jsJSPJSTLEasyUI 适用于&#xff1a; 课程设计&#xff0c;毕业设计&#xff0c;学习…