你可能不知道的HTML小技巧

如果你已经知道以下内容,请勿喷我
不多bb,直接进入正题。

1.<bdo> 标签
<bdo> 标签用于定义页面中文本排序的显示方向,用于想要改变排序的文本。该标签有一个必选的dir属性,它规定了其内的文本方向。dir属性有两个可能的值: ltr(left to right)和rtl(right to left)。

示例

2.<mark> 标签
<mark> 标签可以使其中的文本高亮显示。

示例

3.<progress>/<meter>标签
<progress>标签有两个重要的属性:max和value,值都是数字。

下载进度: <progress value="22" max="100">

<progress> 标签不适合用来表示度量衡,请使用<meter>标签代替。
注意:IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。

<meter>标签有三个重要的属性:max,min和value,值都是数字。

<meter>标签

<meter> 不能作为一个进度条来使用,请使用<progress> 标签。
注意:IE 浏览器不支持 meter 标签。(Chrome党表示2333)

4.<fieldset>标签和<legend>标签
<fieldset>标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示,比如不同样式的边界、3D效果等。<fieldset> 标签可以将表单内的相关元素分组,并且会在相关表单元素周围绘制边框。<legend>标签为 <fieldset> 元素定义标题,且必须是<fieldset>元素的一个子元素。

示例

除此之外<fieldset>标签还有个from属性,它定义该<fieldset>标签属于哪个表单,即使该元素不属于那个表单。目前只有Opera支持form属性 [Chrome党枯了(欸这属性好像也没什么用啊)]

5.<pre>标签
<pre>标签可以保留文本的空格和换行,并且所示文本是等宽的。

源码
实际效果


小技巧就分享这些,如果你喜欢不妨点个赞吧!
PS: 好像有点氵,不过我觉得还行 :-)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,166评论 0 0
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,064评论 1 4
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,248评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,340评论 0 5