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

相关阅读:
程序员过中秋的方式是怎样的(附~教你用22种语言写中秋祝福语～ )
CISSP通关学习笔记：共计 9 个章节（已完结）
大数据安全概述
如何使用 ArcGIS Pro 统计四川省各市道路长度
Unity运行时加载外部mp3/wav音频
第144篇:阿里低开项目 init方法
css的position:sticky吸顶功能的兼容性
Revit中导入的CAD标高不统一处理及“标高管理”
【python】python内置函数——eval()/exec()执行一个字符串形式的python表达式
Java 泛型中的通配符

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