[Door to a new world] I understand that this is the HTML tag?

EDITORIAL

Because of this antique case IE browser manufacturers and the existence of different standards, mostly front-end developers are more willing to write JavaScript, and HTML and CSS scoffed. But with the popularity of the arms and Edge switch chromium of win10, we are not able to front-end development for the future is a little more looking forward to, in fact, standard HTML and CSS also launched soon, and regardless of why a little time to do them . The following compiled some people may not be familiar with or do not often use the label, do not know will not refresh your knowledge of the HTML?

Want to add Chinese characters Pinyin

Have you ever encountered a scene in the page you want to give some rare words with comments pinyin, now, with ruby, you can easily add Chinese characters to the alphabet.

<ruby> 快狗打车<rt>kuaigoudache</rt> </ruby>
复制代码

At this time you may want to add tone to Pinyin, attentive students may also notice the alphabet and characters sometimes do not align perfectly, how do? Switching Sogou input method soft keyboard may be added tones, or opening the following / online Chinese pinyin conversion / input Chinese characters available alphabet; aligned ultimate Dafa is individually to each character pinyin, rpthe browser does not support rubydowngrade as a label .

<ruby>
  快<rp>(</rp><rt>kuài</rt><rp>)</rp> 狗<rp>(</rp><rt>gǒu</rt><rp>)</rp> 打<rp>
    (</rp
  ><rt>dǎ</rt><rp>)</rp> 车<rp>(</rp><rt>chē</rt><rp>)</rp>
</ruby>
复制代码

codepen > Online Chinese Pinyin conversion > Ruby | the MDN

`details` Pendant

details Create a pendant, turned off by default, only show the hidden content will be in the open state.

<details>
  <summary>总结</summary>
  <!-- 非必填，默认显示“详细信息” -->
  我是内容，我是内容。我是内容，我是内容。我是内容，我是内容。
</details>
复制代码

codepen > details | MDN

`meter` Meter

meterUsed to display the scalar value within a defined range. Min (fix: the unified case) the minimum value, maximum value than if the settings must be small, not set by default to 0; max maximum, if the setting must be large than the minimum value, default is not set to 1. low and high respectively define the lower limit of the low value and high value-range limit of the range, the browser will render different results based on the current value of the interval is located. Note distinguished progress, if only to indicate the percentage of progress and recommended use progress.

<!-- 计量器 -->
<p>油体积：<meter min="0" max="100" value="60" high="85">60L</meter></p>
<p>油体积：<meter min="0" max="100" value="90" high="85">85L</meter></p>
复制代码

codepen > meter | MDN

`progress`progress bar

progress To show the progress of completion of the task, how the appearance of the display can define your own, usually displayed in the form of a progress bar.

<label for="file">进度:</label>
<progress id="file" max="100" value="60"> 60% </progress>
复制代码

progress | MDN

`picture` Picture element

pictureElement contains one or more sourceelements and an imgelement containing the imgelements is more like an alternative, when the browser loads will check each sourceelement srcset, media, typeand other attributes, and choose the most suitable one, if no suitable it will display imgelements.

<picture>
  <!-- 屏幕尺寸大于800px才显示，否则显示 下面的 img -->
  <source
    srcset="https://cn.vuejs.org/images/logo.png"
    media="(min-width: 800px)"
  />
  <img
    src="https://static.daojia.com/assets/project/tosimple-pic/iview-logo_1558354678823.png"
  />
</picture>
复制代码

picture | MDN

displaying the calculation result output form elements

You can form a simple calculator.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result">50</output>
</form>
复制代码

codepen > output | MDN

`track` Media elements

New HTML 5 tags, as audioand videosub-elements, typically used to handle functions such as subtitles. trackAdd the type of data by kindattribute specifies the property value can be: subtitles | captions | descriptions | chapters | metadata.

<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  Sorry, your browser doesn't support embedded videos.
</video>
复制代码

track | MDN

end

Admittedly, there are some labels will have a certain compatibility, for example picture. But if your target user rarely use IE's share, for a better user experience and site performance can be assessed this is not worth it.

Can I use… Support tables for HTML5, CSS3, etc

about us

Fast dog team focused on the front end of the car hit the front-end technology sharing, push high-quality articles on a regular basis, welcomes the concern praise.

Reproduced in: https: //juejin.im/post/5cef3fd65188250726641538