HTML5特殊属性

文章目录

一、页面布局语义化规则
二、音视频
三、HTML5新增的表单input类型
四、选项列表
五、input框验证属性

一、页面布局语义化规则

在这里插入图片描述
代码实例：

<body>
<header>header>
<section>
<nav>nav>
<main>
<article>
<header>header>
<footer>footer>
article>
main>
<aside>aside>
section>
<footer>footer>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、音视频

音频：

<audio src="" controls loop sutoplay muted>audio>
1

属性含义：
controls：控制栏，不加在页面没办法点击控制
loop：循环
autoplay：自动播放（chorm不允许，其他浏览器可以,加了静音属性后chorm支持自动播放）
muted：默认静音

视频：

<video src="" controls loop sutoplay muted poster="">video>
1

属性含义：
controls：控制栏，不加在页面没办法点击控制
loop：循环
autoplay：自动播放（chorm不允许，其他浏览器可以）
muted：静音
poster 海报，默认展示的图片
width
height

三、HTML5新增的表单input类型

type=“color”. 生成一个颜色选择表单
type=“tel” 唤起拨号盘表单
type=“search” 产生一个搜索意义的表单
type=“range” 产生一个滑动条表单
type=“number” 产生一个数值表单
type=“email” 限制用户必须输入email格数
type=“url” 限制用户必须输入url类型
type=“date” 限制用户必须输入日期
type=“month” 限制用户必须输入月类型
type=“week” 限制用户必须输入周类型
type=“time” 限制用户必须输入时间类型
type=“datetime-local” 选取本地时间

type=“tel” 在手机端会生效，电脑端可以输入字符，不会换起拨号键
type="range"与type="number"都有以下属性：

<input type="range" name="range" min="100" max="200" value="100" step="10">
1

四、选项列表

页面搜索栏输入查询项后，对应模糊匹配后的内容全部在菜单栏展示

<input type="text" list="mylist">
<datalist id="mylist">
<option value="手机">option>
<option value="手表">option>
<option value="手环">option>
<option value="电脑">option>
<option value="手镯">option>
datalist>
1
2
3
4
5
6
7
8

在这里插入图片描述

五、input框验证属性

<form action="">
<div>
用户名: <input type="text" autofocus required pattern="[0-9][A-Z]{3}">
div>
form>
1
2
3
4
5

pattern正则表达式验证
required 属性规定字段必填
autofocus 属性规定当页面加载时元素应该自动获得焦点

相关阅读:
【Burpsuite靶场】XSS专题精讲
MySQL备份与恢复工具之MYSQLDUMP
机组运行约束对机组节点边际电价的影响研究（Matlab代码实现）
装修干货|卧室常见3个软装搭配问题。福州中宅装饰，福州装修
用 KV 缓存量化解锁长文本生成
【JS】使用wavesurfer播放网络音频（Vue）
于51单片机的安全带（拉力，高度，紧急）原理图、流程图、物料清单、仿真图、源代码
场景应用：自己设计一个本地缓存（代码实现）
常见工具指令【Vim | GIT | ZIP | UNZIP | IDEA】
Python：控制台输入密码passwod的方法

原文地址：https://blog.csdn.net/CapejasmineY/article/details/126188136