HTML5新特性

最新推荐文章于 2021-12-16 22:58:51 发布
最新推荐文章于 2021-12-16 22:58:51 发布
阅读量3k 收藏 1
点赞数
分类专栏： HTML 文章标签： html5 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wukai_std/article/details/54575108
版权

语义化标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新增语义块</title>
  </head>
  <body>
    <header>
      <h1>
        这是整个页面的标题
      </h1>
    </header>
    <!-- section标签引起一个内容区块 -->
    <section>
      <!-- header也可以用来引起一个内容区块的标题 -->
      <header>
        <hgroup>
          <h2>文章主标题</h2>
          <h3>文章次标题</h3>
        </hgroup>
      </header>
      <!-- mark为一些关键词做标记 -->
      <mark>圣诞节</mark>
      <!-- 页脚 -->
      <footer>
        阿肯色付家坡安慰人覅设计的饭卡v啊季节的罚款累计市场v卡拉谁你的v卡就是快乐的骄傲的进来卡手机对方
      </footer>
      <!-- html5新增的figure和figcaption标签能将img标签和解释性语句内联起来,使得图片具有明确语义
        同时他还能表示一段独立的流内容-->
      <figure>
        <img src="./1.jpg" alt="dog" />
        <figcaption>
          <p>
            dog
          </p>
        </figcaption>
      </figure>
    </section>

    <!-- article引起一个独立的文档,与上下文无关 -->
    <article class="">
      开发坚实的了罚款交按时贷款放敬爱来速度开发骄傲的可怜十分加阿斯顿开了分敬爱了开始的附近啊快乐圣诞节发啦快速的加法快乐圣诞节
    </article>

    <aside class="">
      这是article的修饰部分
      <!-- nav表示一个导航 -->
      <nav>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
      </nav>
    </aside>
    <!-- small被新定义为版权诠释的标签 -->
    <small style="display:block;width:800px;margin:200px auto;text-align:center">©阿里妈妈MUX, powered by alimama THX.<br>
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源，商业媒体及纸媒请先联系：sangxing#taobao.com</small>
  </body>
</html>

语义化标签

智能表单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>智能表单1</title>
  </head>
  <body>

    <!-- novalidate属性:关闭智能表单 -->
    <form class="" method="get"
    novalidate
    >
      <!-- 自动校验邮箱格式 -->
      <label for="in1">链接到指定input</label><input id="in1" type="email" name="name" value="">
      <br>
      <!-- 自动校验url格式 -->
      <input type="url" name="name" value="">
      <br>
      <!-- 自动校验数字格式 -->
      <input type="number" name="name" value="2" step="2">
      <br>
      <!-- 拖动条 -->
      <input type="range" name="range" value="30" min="0" max="100">
      <br>
      <input type="submit" name="name" value="提交">
    </form>

  </body>
</html>

智能表单二

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>智能表单2</title>
    <style media="screen">

      input {
        margin: 20px;
      }

    </style>
  </head>
  <body>

    <form class="" action="index.html" method="get">
      <br>
      <!-- 选取日期,xxxx/xx/xx 为格式 -->
      <input type="date" name="name" value="">
      <br>
      <!-- 选取月份,xxxx年xx月 为格式 -->
      <input type="month" name="name" value="">
      <br>
      <!-- 选取周,xxxx年第xx周 为格式 -->
      <input type="week" name="name" value="">
      <br>
      <!-- 选取时间,下午/上午xx:xx 为格式 -->
      <input type="time" name="name" value="">
      <br>
      <!-- 选取具体时间,xxxx/xx/xx 下午/上午xx:xx 为格式 -->
      <!-- autofocus属性:自动获得焦点 -->
      <input type="datetime-local" name="name" value="" autofocus>
      <br>
      <!-- 用来覆盖action属性,适用于type="image"和type="submit" -->
      <input type="submit" name="name" value="提交" formaction="">
      <br>
      <!-- autocomplete:off 关闭自动补全 -->
      <input type="email" name="name" value="" autocomplete="off">
      <br>

      <!-- list和datalist一起使用设置了input的默认选单 -->
      <!-- placeholder属性值是文本预期值提示 -->
      <!-- disabled="true"时此选单禁用 -->
      <input name="name" list="list1" placeholder="请输入关键词" disabled="true">
      <datalist id="list1">
        <option value="v1">option1</option>
        <option value="v2">option2</option>
      </datalist>

      <!-- multiple一次可传输多个文件 -->
      <!-- required表示此项为必填项 -->
      <input type="file" accept="audio/x-waw"  required multiple/>

    </form>

  </body>
</html>

audio

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>audio音频</title>
  </head>
  <body>

    <!-- src="音频文件" 或 用source标签都能引用目标音频 -->
    <!-- controls呼出控制面板 -->
    <!-- autoplay自动播放 不显示控制面板就能作背景乐了 再加上loop循环播放-->
    <!-- muted表示静音 -->
    <audio src="./1.mp3" controls autoplay loop muted>
      <source src="./1.mp3">
    </audio>

  </body>
</html>

video

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video视频文件</title>
  </head>
  <body>

    <!-- poster初始界面,preload:预加载 -->
    <video src="./1.mp4" controls muted loop poster="./1.jpg">

    </video>

  </body>
</html>
Always0nTheWay
关注
专栏目录
1.06 HTML5新特性
10-07
"HTML5 新特性" HTML5 是 WHATWG 和 W3C 合作的结果，旨在创建一个新版本的 HTML。HTML5 仍处于完善之中，但大部分现代浏览器已经具备了某些 HTML5 支持。 1. 音频视频播放 HTML5 引进了 `<audio>` 和 `<video>` ...
HTML 5 的十大新特性
秋天，黄叶坠地，凉风有信。
01-16 1万+
# HTML5 十大新特性总结 一、**语义标签** 二、**增强型表单** 三、**视频和音频** 四、**Canvas绘图** 五、**SVG绘图** 六、**拖拉API** 七、**WebWorker** 八、**WebStorage** 九、**WebSocket** 十、**地理定位**
潜水HTML5之waiting--002
weixin_34250434的博客
08-17 218
28个你必须知道的HTML5的新特性,技巧以及技术汇总： 1. 新的Doctype 尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figur...
HTML5十个新特性
热门推荐
m0_37696296的博客
07-17 2万+
         （一）  语义标签          （二）增强型表单          （三）视频和音频          （四）Canvas绘图          （五）SVG绘图          （六）地理定位          （七）拖放API          （八） WebWorker          （九） WebStorage          （十）Web...
HTML5的十大新特性
IT利刃出鞘的博客
12-16 4026
本文介绍HTML5的十大新特性和一些废除的特性。 HTML5总体比HTML4多了十个新特性，但其不支持IE8及IE8以下版本的浏览器。
HTML5新特性1
08-04
"HTML5新特性1" HTML5新特性概述： HTML5是最新的HTML标准，带来了许多有趣的新特性，包括Canvas标签、HTML5 Video标签、HTML5 Audio标签、Number类型等。这些新特性提供了更好的用户体验和开发体验。 Canvas标签...
前端面试必备之html5的新特性
09-28
HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。所以当我们在面试前端工作的时候，遇到html5相关的问题...下面这篇文章就来跟大家分享介绍了关于前端面试必备之html5新特性的相关资料，需要的朋友可以参考下。
前端基础-HTML5新特性
01-20
HTML5是前端开发中的一个重要里程碑，它带来了许多新的特性和改进，使得网页开发更为高效且具有更好的用户体验。本文将详细探讨HTML5的新特性，主要集中在语法简化、语法宽松和语义化标签的引入。 首先，HTML5在...
基于HTML5新特性新规范的表单验证jQuery插件.zip
最新发布
02-12
这个"基于HTML5新特性新规范的表单验证jQuery插件.zip"文件，显然是一个利用HTML5的新功能并结合jQuery库来增强网页表单验证的工具。在深入探讨之前，我们先了解一下HTML5和jQuery的基本概念。 HTML5是HyperText ...
Html5新特性-Notifications入门
04-10
HTML5是现代网页开发的重要标准，它引入了许多新特性，以提升用户体验和开发者的工作效率。在这些特性中，`Notifications` API 是一个显著的亮点，它允许网站在用户离开页面时，仍然能发送通知，提醒用户关注关键...
HTML5新特性分享PPT
08-27
HTML5是下一代网页标准，它的出现极大地扩展了Web开发的可能性，带来了许多新的特性和改进。在本PPT分享中，我们将深入探讨HTML5的核心新特性，包括新的HTML元素、JavaScript API增强以及CSS3动画。 首先，让我们...
html5新特性整理文档
11-28
### HTML5新特性详解 #### 一、HTML5概述与设计原则 HTML5作为Web开发领域的一项重要标准，旨在提供一套更加简洁、高效且跨平台兼容的标记语言规范。其核心设计原则包括： 1. **基于现有技术**：HTML5的新特性需...
html5新特性的理解
清风明月的博客
02-27 2405
1、标签语义化，例如：header，footer，nav，aside，article，section等，新增了很多表单元素；输入类型email，url等，除去了center等样式标签，还除去了有性能问题的frame，frameset的标签。 2、音频元素，video，audio的增加使得我们不需要在依赖外部的插件就可以往网页中加入音频元素。 ...
HTML5新特性——十个新特性
u012183426的博客
01-27 2387
(1)新的语义标签 (2)增强型表单 (3)音频和视频(4)Canvas绘图(5)SVG绘图(6)地理定位(7)拖放API(8)Web Worker(9)Web Storage(10)Web Socket 1.HTML5表单的新特性 (1) 新的input type H4中input type:text、password、radio, checkbox, file, hidden,
学习笔记~1.4 HTML5新特性
qq_44888570的博客
09-28 502
1.4 HTML5新特性 笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。 正文 1.HTML5新特性（面试） 1）增加了audio和video音频播放，抛弃了Flash 2）新增了canvas画布（绘画，制作动画（如小游戏开发等）） 3）地理定位 4）增加了离线缓存 5）硬件加速 6）Web
HTML 5 新特性介绍(ppt)
09-19
这个压缩包文件包含了多个关于HTML5新特性的介绍，包括“浅谈HTML5_20080804.pps”、“Developing with HTML5.ppt”、“HTML5_Accessibility_faulkner.ppt”、“www.99pan.com_HTML5.ppt”以及“05-18-09-...
HTML5新特性详解与应用
"html5新特性整理文档" HTML5是现代网页开发的核心标准，它引入了一系列新的功能和改进，旨在提高用户体验、简化开发者的工作，并增强网页的互动性。HTML5的特性设计遵循了一些基本原则，例如基于现有技术如HTML、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值