【HTML】之H5新增

最新推荐文章于 2023-06-26 13:55:54 发布

Camina hacia ti

最新推荐文章于 2023-06-26 13:55:54 发布

阅读量355

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/RuRu_Bai/article/details/115703863

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、H5新增type

1、邮箱

<input type=”email” name=”email”>

email类型格式是规定的；name=”email”用来接受邮箱

2、网址

<input type=”url”>

必须包含协议

3、搜索

<input type=”search”>

4、数字

<input type=”number” min=”最小值” max=”最大值” step=”步长（默认是1）”>

只能输入数字。

5、范围（滑块）

<input type=”range” min=”最小值” max=”最大值” value=”当前值” step=”步长（默认是1）>

6、颜色

<input type=”color”>

7、电话

<input type=”tel”>

在PC端的话就跟文本框一样

8、日期

<input type=”date”>

9、周

<input type=”week”>

10、月

<input type=”month”>

11、视频

IE6 7 8不支持

<video src=”movie.mp4” controls>
	提示内容。（视频不显示的时候会显现出来）
</video>

行级元素
视频常用格式：mp4、ogg（移动端）、webM（高清格式）
不支持wav
属性：
1）autoplay: 自动播放
2）Width: 宽度
3）Height: 高度
4）Controls 控制面板
5）Loop 循环播放
6）Muted 自动静音
7）Poster=”” 视频播放前显示一张图片
8）Src 必须属性：路径

12、音频

行级元素
支持格式：mp3、ogg、wav

<audio src=”movie.mp3” controls >
	提示内容。（音频不显示的时候会显现出来）
</audio>

属性：
1）autoplay: 自动播放
2）Controls 控制面板
3）Loop 循环播放
4）src 必须属性：路径
13、source

作用：给浏览器提供多种视频或者音频的选择

<video>
	<source src=”movie.mp4>
	<source src=”movie.ogg>
	<source src=”movie.webM>
</video>

二、、H5新增属性

Placeholder=”” 默认提示
Autofocus 自动获取焦点，自动被选中，经常被加在第一个。
Required 必填项
Multiple 输入多个，多个内容要用逗号隔开（英文逗号），多配合邮箱和网址使用
Min & max 最小值和最大值，配合数字和范围使用
Minlength 最小长度
Maxlength 最大长度

用户名：<input type=”text” name=”常用的是userName” Placeholder=”用户名/邮箱/手机号”/>
密码：<input type=”password” name=”常用的是password”/>
<input type=”email” name=”email” multiple>

三、语义化标签

1、定义

看到标签知道表示的意思
正确的标签干正确的事情

2、优点

有利于搜索引擎去搜索；有利于屏幕阅读者阅读；有利于开发者维护

3、div+span

<div>没有任何语义的一个盒子</div>  段落元素
<div>没有任何语义的一个盒子</div>  段落元素
<span>没有任何语义的一个盒子</span>  行元素
<span>没有任何语义的一个盒子</span>  行元素

4、新增布局

<div>头部</div>
<div>导航条</div>
<div>
	<div>
		文章
	</div>
	<div>
		侧边栏
	</div>
</div>
<div>页脚</div>

HTML5新增元素IE6 7 8都不支持
以下都是双标记、块级元素：
Header 头部
Nav 导航
Footer 页脚
Aside 侧边栏
Article 文章、帖子、独立的一块
Section 章节

四、HTML5新增标签

1、元素组合

<dl>
	<dt>图片</dt>
	<dd>描述</dd>
</dl>

<div>
	<img src=”图片”>
	<p>描述</p>
</div>

<figure>
	<img src=”图片”>
	<figcaption>描述</figcaption>
</figure>

2、细节

<details>
	<summary>标题（默认是详细信息）</summary>
	内容（默认是看不见的，只有点开之后才能看）
</details>

块级元素

3、突出显示

高亮显示内容：

<mark>内容</mark>

行级元素

4、刻度

Min:最小值
Max:最大值
Low:最低临界点
High:最高临界点
（低于最低，高于最高的是会变颜色）
Value:当前值

<meter>提示内容（如：您的浏览器不支持刻度）</meter>

行级元素

5、进度条

<progress>提示内容（如：您的浏览器不支持进度条）</progress>

行级元素

6、datalist（数据列表）

必须配合input使用，通过option来显示

<input type=”text” list=”id”>
	<datalist id=”id”>
		<option value=”内容1”>右侧值</option>
		<option value=”内容2”>右侧值</option>
		<option value=”内容3”>右侧值</option>
		<option value=”内容4”>右侧值</option>
		<option value=”内容5”>右侧值</option>
	</datalist>

7、画布canvas

得通过js画
可以设置宽高，是行级元素

<canvas></canvas>

练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我的小家！</title>
</head>

<body>
    <form action="" name="formm" method="get">
        <p>
            邮箱：<input type="email" name="email">
        </p>
        <p>
            网址：<input type="url">
        </p>
        <p>
            搜索：<input type="search">
        </p>
        <P>
            数字：<input type="number" min="10" max="100" value="50">
        </P>
        <p>
            范围：<input type="range">
        </p>
        <p>
            颜色：<input type="color">
        </p>
        <p>
            日期：<input type="date">
        </p>
        <p>
            周：<input type="week">
        </p>
        <p>
            月份：<input type="month">
        </p>
        <p>
            视频：
            <video src="刘耀文-Dont wanna cry (舞蹈版)(标清).mp4" width="300" controls poster="刘耀文.jpg">您的浏览器不支持该视频
            </video>
        </p>
        <p>
            音频：
            <audio src="刘耀文  严浩翔 .mp3" controls></audio>
        </p>
        <p>
            用户名：<input type="text" name="userName" placeholder="用户名/手机号/邮箱" required>
        </p>
        <p>
            密码：<input type="password" name="password" placeholder="密码" required minlength="6" maxlength="12">
        </p>
        <p>
            <input type="submit" value="登录">
        </p>
        <p>
            <mark>哈哈</mark>哈
        </p>
        <p>
            <meter min="20" low="25" value="50" max="100">您的浏览器不支持刻度</meter>
        </p>
        <p>
            <progress>您的浏览器不支持进度条</progress>
        </p>
    </form>

</body>

</html>

结果：

Camina hacia ti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】之H5新增

H5新增一、H5新增type1、邮箱2、网址3、搜索4、数字5、范围（滑块）6、颜色7、电话8、日期9、周10、月11、视频12、音频二、、H5新增属性三、语义化标签1、定义2、优点3、div+span4、新增布局四、HTML5新增标签1、元素组合2、细节3、突出显示4、刻度5、进度条6、datalist（数据列表）7、画布canvas练习一、H5新增type1、邮箱<input type=”email” name=”email”>email类型格式是规定的；name=”email”用
复制链接

扫一扫