The interesting HTML5 tag of fried chicken

Time:2020-9-17

Because there are so many tags, it’s hard for us to all use or realize we need to. But there are also a lot of interesting tags that we haven’t discoveredThere is one.

What is it?

A label similar toThe label can also pass through the packageThe only difference is thatNeed cooperationTo use, andIt does not mean any content, only for display. Let’s have chestnuts

img

Well, just mustard. Here is its compatibility:

img

search hint

In our daily development, if we want to implement a search prompt in a search box, we actually need to write a bunch of event monitoring and data binding, but if we useIt doesn’t need that much trouble. Let’s have another chestnut

img

Through its own characteristics, we can eliminate a lot of unnecessary logic code, which is very convenient. We can not only set its search value, but also use theOflabelProperty to set its subtitle, and a chestnut:

img

So the display is actually very humanized. With JS, we try to use itTo cooperate with jsonp to write a cross domain request Baidu search API example:

img

The code is as follows:

 
Term search:
 
     
 
 
     <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">use strict</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
     const searchCallback </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> data </span><span style="background-color: #f5f5f5; color: #000000;">=></span><span style="background-color: #f5f5f5; color: #000000;"> {
         words.innerHTML </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">''</span><span style="background-color: #f5f5f5; color: #000000;">
         const {
             s
         } </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> data
         console.log(s)
         const fragment </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.createDocumentFragment()
         s.forEach((res, idx) </span><span style="background-color: #f5f5f5; color: #000000;">=></span><span style="background-color: #f5f5f5; color: #000000;"> {
             const option </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.createElement(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">option</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
             option.label </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> idx
             option.value </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> res
             fragment.appendChild(option)
         })
         words.appendChild(fragment)
     }
     input.addEventListener(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">keyup</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, ev </span><span style="background-color: #f5f5f5; color: #000000;">=></span><span style="background-color: #f5f5f5; color: #000000;"> {
         const createdScript </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.createElement(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">script</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
         createdScript.src </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> `https:</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${input.value}&cb=searchCallback`</span>
<span style="background-color: #f5f5f5; color: #000000;">         document.body.appendChild(createdScript)
         document.body.removeChild(createdScript)
     })
 </span>

 

Although it doesn’t seem to be much different from the conventional method, it usesWe can reduce the style of search box and location writing, but also more in line with the semantic specification, binding method is also very convenient. If we search in a given data source (such as the status of the request data cache), we can also reduce the code writing of the corresponding filter, is it convenient and fast?

In fact, there are many interesting things in HTML. If you are interested, you may as well dig out what interesting tags or attributes Kangkang has to play with.

summary

If you have anything to say, please leave a message in the comments area

By the way, Xiaobian has prepared a set of 2020 latest web front-end materials for you. You need to click the link below to get the way

1. Like + comment (check “forward at the same time)”

Learn the front end, you master that. Second line can easily take more than 8K