Html5的新增特性

news2024/11/24 1:45:16

Html5的新增特性主要是针对以前的不足,增加了一些新的标签新的表单新的表单属性等。

这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

声明:

 新特性增加了很多,但是我们专注于开发常用的新特性。

Html5 新增的语义化标签

以前布局,我们基本用div来做。Div对于搜索引擎来说,是没有语义的。

以前:

<div class=”header”></div>

<div class=”nav”></div>

<div class=”content”></div>

<div class=”footer”></div>

现在:

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>:定义文档某个区域

<aside>:侧边栏标签

<footer>:尾部标签

注意

       这些语义化标准主要是针对搜索引擎

       这些新标签页面中可以使用多次

       在IE9中,需要把这些元素转换为块级元素

       其实,我们移动端更喜欢使用这些标签

HTML5新增的多媒体标签

新增的多媒体标签主要包含两个:

1 音频:<audio>

2 视频:<video>

使用他们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。

Html5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。

1 视频<video>

当前<vedio>元素支持三种视频格式:尽量使用MP4格式

语法:

<video src=”文件地址” controls=“controls”></video>

兼容性问题:

<video width=”320” height=”240” controls>

<source src=”movie.mp4” type=”video/mp4”>

<source src=”movie.ogg” type=”video/ogg”>

您的浏览器不支持video标签

</video>

常见属性

2 音频标签<audio>

                                                                                        

谷歌浏览器把音频和视频自动播放禁止了。

HTML5新增的input类型

属性值

说明

Type=”email”

Email类型

url

url类型

Date

日期类型

Time

为时间类型

Month

为月类型

Week

为周类型

Number

必须为数字类型

Tel

手机号码

Search

搜索框

color

生成一个颜色选择表单

重点记住:number tel search

HTML5新增的表单属性

Required:必须填写内容

<!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>HTML5新增表单属性</title>

</head>



<body>

    <form action="">

        <input type="search" required="required">

        <input type="submit" value="提交">

    </form>

</body>



</html>

Placeholder:表单的提示信息,存在默认值将不显示

<!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>HTML5新增表单属性</title>

    <style>

        input::placeholder {

            color: pink;

        }

    </style>

</head>



<body>

    <form action="">

        <input type="search" required="required" placeholder="请输入你想要的宝贝叭">

        <input type="submit" value="提交">

    </form>

</body>



</html>

Autofocus:自动获得焦点。

<input type="search" required="required"  autofocus="autofocus">

<!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>HTML5新增表单属性</title>

<style>

<!--可以修改placeholder里面的颜色-->

        input::placeholder {

            color: pink;

        }

    </style>

</head>



<body>

    <form action="">

        <input type="search" required="required" placeholder="请输入你想要的宝贝叭" autofocus="autofocus" autocomplete="on">

        <!-- multiple可以同时选择多个文件啊 -->

        <input type="file" multiple="multiple">

        <input type="submit" value="提交">

    </form>

</body>



</html>

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

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

相关文章

m基于迫零ZF准则的通信均衡器的matlab仿真

目录 1.算法概述 2.仿真效果预览 3.MATLAB部分代码预览 4.完整MATLAB程序 1.算法概述 在数字通信系统中&#xff0c;码间串扰和加性噪声是造成信号传输失真的主要因素&#xff0c;为克服码间串扰&#xff0c;在接收滤波器和抽样判决器之间附加一个可调滤波器&#xff0c;用…

STM32CubeMX:串口DMA

DMA&#xff1a;直接储存区访问&#xff0c;DMA传输将数据从一个地址空间复制到另一个空间。DMA传输方式无需CPU直接控制传输&#xff0c;也没有中断处理方式那样保留现场和恢复现场过程&#xff0c;通过硬件为RAM何IO设备开辟一条直接传输数据的通道&#xff0c;从而可以提高C…

WSL下安装ubuntu 18.04 +meep进行FDTD仿真计算

WSL下安装ubuntu 18.04 meep进行FDTD仿真计算前言WSL安装过程打开虚拟环境下载Ubuntu并修改安装路径更改软件源MeepVScode远程访问测试程序前言 使用meep进行FDTD开发&#xff0c;开源。这里记录一下自己的安装过程&#xff0c;可以不安装在C盘&#xff0c;有助于后面进行修改…

【JVM】java的jvm类加载器和类加载子系统

JVM类加载器和类加载子系统一、JVM体系结构二、ClassLoader类介绍三、类加载子系统3.1 加载阶段3.1.1 引导类加载器&#xff08;Bootstrap ClassLoader&#xff09;3.1.2 扩展类加载器&#xff08;Extension ClassLoader&#xff09;3.1.3 应用程序类加载器&#xff08;Applica…

Android入门第32天-Android中的Alert Dialog的使用大全

写在我的第200篇博客中的“前言” 这篇是我的第200篇博客。落笔写正文前我感触彼深。自从一个小P孩那时写博客只是为了一时的好玩&#xff0c;到逐步发觉只有让越来越多的人理解了技术&#xff0c;把技术普及到门槛越来越低&#xff0c;才会反推技术人员的处镜越来越好。因为必…

Allegro如何输出STP文件操作指导

Allegro如何输出STP文件操作指导 Stp文件用于查看实物,Allegro支持输出STP格式的文件,下面介绍如何输出,操作步骤如下 选择File-export-STEP 根据自己的需要选择参数 如果需要输出电气过孔,选electronic hole,需要外层铜皮,勾选External Copper 常规默认值就可以了,…

UE5笔记【六】流明引擎Lumen简介;Lumen处理发光物体。

RealTimeGlobal illumination System。实时全局照明系统。 打开Lumen 从设置中&#xff0c;打开【项目设置】往下找【渲染Render】 然后再GI中将途中两项选择为Lumen。 同时需要一个后期处理量PostProcessVolume。刚好场景中有。 需要勾选【全局光照GI】中的【方法】选定为【…

Spring七天速成:入门必看(二)

-----持续更新Spring入门系列文章----- 如果你也喜欢Java和算法&#xff0c;欢迎订阅专栏共同学习交流&#xff01; 你的点赞、关注、评论、是我创作的动力&#xff01; -------希望我的文章对你有所帮助-------- 前言&#xff1a; 在前篇文章当中我们已经大概了解了Spring的…

QT布局之QGridLayout嵌套QHBoxLayout

搞嵌入式系统开发的&#xff0c;往往都是真全栈开发者。从硬件到驱动到操作系统到应用以及功能界面&#xff0c;是哪里需要搞哪里。这不&#xff0c;最近需要开发一个基于QT的界面功能&#xff0c;涉及到控件布局。因为不熟悉&#xff0c;走了一些弯路。这里将相关调试记录下来…

计算机网络面试题【面试】

计算机网络面试题前言OSI 七层网络模型应用层表示层会话层传输层网络层数据链路层物理七层总结输入URL后会发生什么1. DNS域名解析2. 三次握手建立TCP连接3. 发送HTTP网络请求4. 服务器处理请求5. 服务器返回响应6. 四次挥手断开TCP连接7. 解析HTMLDNS解析过程DNS解析&#xff…

Froala Editor JavaScript WYSIWYG HTML 编辑器

Froala Editor JavaScript WYSIWYG HTML 多用途、易于使用的 WYSIWYG 编辑器&#xff0c;优雅 每次点击&#xff0c;我们都会让网络编辑变得更简单、更强大、更愉快 安全、快速、智能和稳健。 Froala Editor 是一个 用 JavaScript 编写 的轻量级 WYSIWYG HTML 编辑器&#xff0…

【计算机毕业设计】小型OA系统设计与实现Springboot

一、系统截图&#xff08;需要演示视频可以私聊&#xff09; 摘 要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括小型OA系统设计与实现的网络应用&#xff0c;在国外小型OA系统设计与实现已经是很普遍的方式&#xff0c;不…

G1D17-研究方向rce45-49不快乐就去敲敲代码

现在每天晚上都觉得一天结束的好快呀~每天早上都很幸福&#xff0c;因为还有一天的时间呐&#xff01;&#xff01;&#xff01; 今天主要的事情是完成老师的作业——论文主题阅读的report&#xff0c;看一下动态规划&#xff08;emm最近喜欢啃这种让人掉头发的问题~&#xff0…

JADE: Adaptive Differential Evolution withOptional External Archive

0、论文背景 本文在DE的基础上&#xff0c;提出了一种新的差分进化(DE)算法JADE&#xff0c;通过实现一种新的突变策略DE/current-to-pbest&#xff0c;采用可选的外部存档和参数的自适应更新&#xff0c;来提高优化性能。上述两种操作使种群多样化&#xff0c;并提高了收敛性…

Mybatis源码解析(六):缓存执行器操作流程

Mybatis源码系列文章 手写源码&#xff08;了解源码整体流程及重要组件&#xff09; Mybatis源码解析(一)&#xff1a;环境搭建 Mybatis源码解析(二)&#xff1a;全局配置文件的解析 Mybatis源码解析(三)&#xff1a;映射配置文件的解析 Mybatis源码解析(四)&#xff1a;s…

【附源码】Python计算机毕业设计图书共享系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

Bootstrap(三)

目录&#xff1a; &#xff08;1&#xff09;bootstrap响应式工具 &#xff08;2&#xff09;bootstrap实例导航 &#xff08;1&#xff09;bootstrap响应式工具 class加属性&#xff1a; visible-xs&#xff1a;隐藏显示&#xff0c;当屏幕宽度小于等于xs的时候显示、 vis…

如何使用轻量应用服务器搭建Typecho个人博客系统?

之前有写过WordPress搭建博客的教程&#xff1a;如何使用轻量应用服务器搭建WordPress个人博客 有的小伙伴感觉WordPress比较臃肿&#xff0c;有没有比较简洁的博客系统呢&#xff0c;今天就把Typecho搭建个人博客的操作方法分享给大家&#xff0c;需要的小伙伴可以参考以下。 …

注解的使用

1. 注解概述 1.1 注解概述、作用 Java 注解&#xff08;Annotation&#xff09;又称 Java 标注&#xff0c;是 JDK5.0 引入的一种注释机制。Java 语言中的类、构造器、方法、成员变量、参数等都可以被注解进行标注。 1.2 注解的作用是什么 2. 自定义注解 2.1 自定义注解 —…

大数据之Hive基本查询

文章目录前言一、Hive基本查询&#xff08;一&#xff09;普通查询&#xff08;二&#xff09;Join查询&#xff08;三&#xff09;排序查询总结前言 #博学谷IT学习技术支持# 这一次主要介绍Hive的基本查询以及相关函数&#xff0c;Hive的查询以及函数用法与MySQL不尽相同&…