html5变动标签新写法,Html5新标签解释及用法

HTML5新标签解析
最新推荐文章于 2024-03-29 07:10:30 发布
转载 最新推荐文章于 2024-03-29 07:10:30 发布 · 159 阅读 · 0
文章标签：

#html5变动标签新写法

本文介绍了HTML5新增的标签及其用途，包括定义外部内容的<blockquote>、与文档相关但可独立的<aside>、音频<audio>和图形<canvas>等。探讨了这些标签如何改善网页结构和用户体验。

Html5新标签解释及用法

发布时间：2012-02-17 22:50:45   作者：佚名   text-message.png 我要评论

HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准

它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似

和 标签，但有一定含义，例如 (网站导航块)和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 和 标记。

一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 和

，因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为(via)。

下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:

HTML4:

标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5:Aside 的内容是独立的内容，但应与文档内容相关。

HTML4:

Aside 的内容是独立的内容，但应与文档内容相关。

标签定义声音，比如音乐或其他音频流。

HTML5:您的浏览器不支持 audio 标签。

HTML4:

标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5:

HTML4:

标签定义命令按钮，比如单选按钮、复选框或按钮。

HTML5:

HTML4: none

标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

HTML5:

HTML4: see combobox.

标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

HTML5:

HTML4:

标签定义嵌入的内容，比如插件。

HTML5:

HTML4:

标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

HTML5:

PRC

HTML4: none

标签用于对元素进行组合。使用
元素为元素组添加标题。

HTML5:

PRC

The People's Republic of China was born in 1949...

HTML4:

PRC

The People's Republic of China was born in 1949...

标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5:

HTML4:

标签定义 section 或 document 的页眉。

HTML5:

HTML4:

标签用于对网页或区段(section)的标题进行组合。

HTML5:

HTML4:

标签定义生成密钥。

HTML5:

HTML4: none

主要用来在视觉上向用户呈现那些需要突出的文字。标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5:

HTML4:

标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

HTML5:

HTML4: none

标签定义导航链接的部分。

HTML5:

HTML4:

标签定义不同类型的输出，比如脚本的输出。

HTML5:

HTML4:

标签运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。

HTML5:

HTML4: none

标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

HTML5: 漢 (ㄏㄢˋ)

HTML4: none

标签定义字符(中文注音或字符)的解释或发音。

HTML5: 漢 ㄏㄢˋ

HTML4: none

标签定义 ruby 注释(中文注音或字符)。

HTML5: 漢 (ㄏㄢˋ)

HTML4: none

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

HTML5:

HTML4:

标签为媒介元素(比如 和 )定义媒介资源。

HTML5:

HTML4:

标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

HTML5: HTML 5This document teaches you everything you have to learn about HTML 5.

HTML4: none

标签定义日期或时间，或者两者。

HTML5:

HTML4:

标签定义视频，比如电影片段或其他视频流。

HTML5: 您的浏览器不支持 video 标签。

HTML4:

相关文章

这篇文章主要为大家介绍了html5各种页面切换效果和模态对话框用法总结,较为详细的介绍了HTML5的各种页面元素的使用技巧,非常具有实用价值,需要的朋友可以参考下2014-12-15

这篇文章主要为大家介绍了HTML5中drawImage用法分析及实际应用中遇到的问题与解决方法,分析了错误代码与修改后的代码,加深对HTML5具体应用的理解,需要的朋友可以参考下2014-12-01

这篇文章主要介绍了HTML5 embed标签定义和用法，需要的朋友可以参考下2014-05-09

这篇文章主要介绍了HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等,需要的朋友可以参考下2014-05-08

html5基础，包括html5视频标签和html5新标签等标签用法，大家参考使用吧2013-12-30

本文是对html5跨域通讯之postMessage的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-07

本文是小编给大家收藏整理的关于常见的6种HTML5错误用法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-11-06

最新评论

HTML5andCSS3面试题大全
donglize521521的博客
03-08 6210
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1577
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
html5退出页面,HTML5页面CSS Reset
weixin_34711401的博客
06-05 298
/*------------------*//*reset*//*------------------*/* {box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}html {font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;-...
JavaScript 关闭页面窗户
04-16
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 关闭 [removed] var btn = document.getElementById('btn') btn.onclick = function () { if (confirm()) { window.close() } } [removed] </body> </html>
html5 新标签支持js写法
齐枫的博客
10-24 1547
先上代码  用js创建新的标签元素，使ie支持html5新标签 <!-- (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure
用canvas标签实现网页H5动态时钟
No Back丶的博客
08-13 1562
用canvas标签实现网页H5动态时钟
JavaScript入门（五） - 关闭窗口（window.close）
goldmei一枝梅的专栏
11-24 1370
html lang="en"> head> meta charset="UTF-8"> title>关闭窗口title> script type="text/javascript"> /* close()关闭窗口 用法： window.close(); //关闭本窗口 或
php5新改动之短标记启用方法
01-20
从PHP5版本开始，语言中的一些特性发生了改变，其中短标记（short open tag）的启用方法就经历了变动。短标记是指PHP中的简写形式… ?>，它能够用于开始和结束PHP代码段。在早期的PHP版本中，默认允许使用这种简写...
HTML5 + CSS3面试题整理
计算机源码之家的博客
09-29 1万+
...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
datian45678的博客
06-22 1855
整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。 篇幅过长，大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需 图片懒加载的原理 图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。 懒加载
HTML5简介与标签
qq_43457781的博客
04-17 1437
HTML基础学习
HTML5标签简化写法
05-19 633
基本页面格式 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <link href="css/theme.css"/> <script src="js/jquery.js"><...
H5关闭当前页面，包括微信浏览器
每天都要努力学习哦~~
10-27 6443
用户代理字符串是浏览器发送给服务器的一部分信息，其中包含了关于浏览器类型和版本的信息。这段代码是一个JavaScript函数，用于关闭当前页面的操作。window.close()方法只能关闭由window.open()或者浏览器直接输入url打开的页面，其余情况安全考虑是被限制的。时，浏览器会关闭最前面的窗口，无论是不是你的脚本创建的这个窗口。的值为 "close_window:ok"，表示关闭成功，会打印"关闭成功的处理"。作为参数，以及一个回调函数，用于处理关闭窗口的结果。的值来判断关闭窗口的结果。
页面关闭事件-锚事件
aliven1的博客
01-30 601
window.onhashchange onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。 锚部分的实例：指定当前 URL 为 http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。 你可以使用以下方式调用事件: 通过设置Location 对象的location.hash或location.href属性修改锚部分。 使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）...
HTML标签及案例超详细笔记
2401_83703893的博客
03-29 1126
dl(defination list)：定义列表dt(defination title)：定义标题dd(defination description) ：定义描述定义标题定义描述定义标题定义描述2.9 超链接标签超链接可以是文本也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分；a标签href="跳转的地址"跳转外网需要添加协议target：* \_self：在当前窗口直接打开* \_blank：新建一个窗口打开这个资源地址。
前端学习＜一＞HTML——07-html标签图文详解（二）
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
03-24 2124
知道每个标签的特殊用法、属性。比如a标签，img的属性。
HTML页面中点击按钮关闭页面几种方式与取消
热门推荐
xujing19920814的博客
01-15 9万+
HTML页面中如何按关闭按钮直接关闭页面 1、不带任何提示关闭窗口的js代码 2、自定义提示关闭 3、在即将离开当前页面(刷新或关闭)时 4、onload,onunload,onbeforeunload 5、删除或（卸载）window.onbeforeunload事件
HTML5页面（php）——退出界面
_囡囡吖_的博客
08-15 1333
php学生信息综合管理系统——退出界面 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户退出—综合信息管理系统</title> <style type="t...
js关闭当前页面(窗口)的几种方式总结
技术笔记
10-15 6万+
1. 不带任何提示关闭窗口的js代码 关闭   2.自定义提示关闭   // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ if (confirm("您确定要关闭本页吗？")){ window.opener=null; window.open('','_self'); window.close(); } else{
vue2使用jsx写法不如template写法
最新发布
03-25
### Vue2 中 JSX 写法与 Template 写法的区别及性能对比 #### 一、语法结构差异 在 Vue2 中，`JSX` 和 `Template` 是两种不同的模板定义方式。 - **Template** 使用 HTML-like 的字符串来描述 UI 层级关系，适合前端开发者熟悉的标准 HTML/CSS 开发模式[^4]。 - **JSX** 则是一种 JavaScript 表达式的扩展形式，允许通过函数调用来动态构建组件树[^1]。 以下是两者的简单示例： ```html <!-- Template 示例 --> <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, world!' }; } }; </script> ``` ```javascript // JSX 示例 import React from 'react'; export default { data() { return { message: 'Hello, world!' }; }, render(h) { return ( <div>{this.message}</div> ); } } ``` #### 二、功能灵活性对比 - **Template** 提供了一种声明式的方式编写视图逻辑，易于阅读和维护，尤其对于简单的场景非常友好。 - **JSX** 更加灵活，可以利用 JavaScript 的全部特性（如条件渲染、列表映射等），特别适用于复杂业务逻辑或需要高度动态化的场景。 例如，在 JSX 中可以通过三元运算符轻松实现条件渲染： ```javascript render(h) { return this.show ? <span>Visible</span> : null; } ``` 而在 Template 中则需借助 `<template>` 标签配合 `v-if` 指令完成相同的功能: ```html <template v-if="show"> <span>Visible</span> </template> ``` #### 三、性能表现分析 从编译后的运行效率来看，两者最终都会被转换为相同的虚拟 DOM 节点创建过程——即所谓的 `h()` 函数调用[^2]。因此理论上它们之间的性能差距微乎其微。然而实际开发过程中仍存在一些细微差别需要注意: 1. **解析开销**: 对于大型应用而言，由于 SFC 文件中的 `<template>` 部分需要额外经过 AST 解析阶段才能生成对应的 Render Function ，这可能会稍微增加初始加载时间；而直接书写 JSX 可跳过此步骤从而提高冷启动速度[^3]。 2. **调试体验**: 当出现问题时，基于 JS 的错误堆栈更容易定位具体位置，因为它是纯代码而非模板字符串转化而来。 3. **工具链依赖**: 如果选择使用 JSX 方式，则可能还需要引入 Babel 插件或者其他预处理器来进行兼容处理，增加了项目的配置复杂度。 综上所述，在考虑选用哪种方法之前应该权衡团队成员的技术背景以及项目需求特点再做决定。 #### 四、适用场景建议 - 若追求直观易懂且团队普遍具备良好 HTML 基础的情况下，优先采用 Template 技术路线； - 如遇到频繁变动的需求或是希望充分利用现代编程范型优势的地方，则可尝试切换至 JSX 实现方案。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值