一些不常见的html标签 及其兼容性

1.

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

所有浏览器都支持 <fieldset> 标签。

2.

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

3.

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

ie 和 safair不支持。!!

4.

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

淘宝中的价格删除就是用del 和INS。

5.

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

这样文档只显示HTML 5,点击HTML5会显示下面的文字。支持的浏览器只有safair和chrome!!<details> 标签用于描述文档或文档某个部分的细节。

6.

<audio controls>
<source src="/i/horse.ogg" type="audio/ogg">
<source src="/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

7.一下这些标签可以使用样式表代替!!!

<em> 把文本定义为强调的内容。
<strong> 把文本定义为语气更强的强调的内容。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

8.

<progress value="22" max="100"></progress>
属性 描述
max number 规定任务一共需要多少工作。
value number 规定已经完成多少任务。
9.
<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

例子:磁盘用量、查询结果的相关性,等等。

IE不支持!!


				
时间: 2024-11-09 04:04:51

一些不常见的html标签 及其兼容性的相关文章

HTML5新标签的兼容性处理

HTML5新的语义标签尽管有很多的好处,但是在低版本的老IE浏览器中还是存在兼容性问题的,常常让人感到头疼,到底是大胆的使用新标签还是使用传统的大量的DIV无义标签?今天就简单的看看H5新标签的兼容性处理方式. 首先来看一小段简单的代码: HTML代码: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>

ie6下常见的bug 调整页面兼容性

ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调试兼容性,下面小强老师就把一些常见的ie6bug列出来,大家去研究下. 考虑结构的稳定性最常见的问题就是网页元素位置混乱,错位. 1.1.1.DOCTYPE 必须有 必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTM

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

2-HTML常见的一些标签

HTML常见的一些标签 HTML介绍 HTML:超文本标记语言其实它就是文本,游览器负责将它解析成具体的网页内容 HTML组成 跟XML类似,HTML由N个标签(节点.元素.标记)组成 上图:<>中的内容都属于标签,其中div标签最多 上图:通过webstorm来开发.我们创建了一个html文件,默认会生成图中的部分内容,我们先将其删掉. 在webstorm中html中的注释通过 ctrl+/ 或 ctrl+shift+/ 来添加 <!--最外层标签--> <!--最外层标签

picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到了这个东西 ,它能在浏览器不支持的时候提供一些替代的方式 ,对于响应式图片,有名的picturefill库能实现兼容性强的‘响应式’图片,对于不支持picture的浏览器,它会用js获取srcset后面的设置,然后决定输出什么样的图片 使用方法 引入js文件(可从cdnjs.com下载) <script

前端开发中常见的HTML5标签乱用案例

一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码: 12345678910111213141516 <!-- HTML 4-style code --><div id="wrapper">  <div id="header">

HTML:几个常见的列表标签

介绍: 在网页中列表是很常见的标签,主要分为有序标签.无序标签.列表嵌套.定义标签 有序标签:<ol><li></li><ol> 无序标签:<ul><li></li></ul> 列表嵌套: <ul><li><ul><li></li></ul></li></ul>.   <ul><li><

h5-语义化标签的兼容性问题

1.html代码 1 <header>头</header> 2 <nav>导航栏</nav> 3 <main> 4 <article>左</article> 5 <aside>右</aside> 6 </main> 7 <footer>底部</footer> 2.基本效果图:浏览器怎么改变大小,基本的排版都不会改变 3.css基本的排版,样式 1 <styl

常见的meta标签属性

meta标签是网页元标签.可以定义一些网站的功能. 1. name属性 name属性的通用格式如下: <meta name="xxx" content="xxxx,xxxx"> 常见的值有如下几种: 1. viewport 定义浏览器窗口的视窗为自适应大小 <meta name="viewport" content="width: device-width,initial-scale=1.0"> 2.