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 属性规定当页面加载时元素应该自动获得焦点

相关阅读:
ruoyi-vue（若依前后端分离版本）环境搭建用eclipse 安装redis 后端配置配置node环境前端配置
Google Gmail Oauth Client ID 认证指南
基于多序列脑影像特征的机器学习分类方法
python接口自动化-参数关联
日本IT行业现状日本IT的优缺点
Java核心技术面试题(附答案)，纯手码，看完是否思路清晰了？
携职教育：这么备考中级经济师的，90%都考不过
国际商务谈判简答题
dom绑定click事件无效及解决办法
Openlayers | Cesium 在线生成随机点线面坐标数据

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