HTML <figure> ਟੈਗ
- ਪਿਛਲਾ ਪੰਨਾ <figcaption>
- ਅਗਲਾ ਪੰਨਾ <font>
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
<figure>
ਟੈਗ ਵਿੱਚ ਸਵੈ-ਸਮਾਵੇਸ਼ੀ ਸਮਾਗਮ ਸ਼ਾਮਿਲ ਹੁੰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਚਿੱਤਰ, ਗਰਾਫ, ਫੋਟੋ, ਕੋਡ ਸੂਚੀ ਆਦਿ।
ਹਾਲਾਂਕਿ <figure>
ਐਲੀਮੈਂਟ ਦਾ ਸਮਾਗਮ ਮੁੱਖ ਸਮਾਗਮ ਤੋਂ ਸੰਬੰਧਤ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਸ ਦਾ ਸਥਾਨ ਮੁੱਖ ਸਮਾਗਮ ਤੋਂ ਅਲੱਗ ਹੁੰਦਾ ਹੈ, ਜੇਕਰ ਇਸ ਨੂੰ ਹਟਾਇਆ ਜਾਵੇ ਤਾਂ ਇਸ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਦਾ ਸਮਾਗਮ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਵੇਗਾ।
ਸੁਝਾਅ:ਇਸ ਤਰ੍ਹਾਂ ਵਰਤੋਂ ਕਰੋ: <figcaption> ਐਲੀਮੈਂਟ ਲਈ <figure>
ਐਲੀਮੈਂਟ ਦੇ ਟਾਈਟਲ ਵਾਲੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਹੋਰ ਦੇਖੋ:
HTML DOM ਪੁਸਤਕਾਲ:ਫਿਗਰ ਆਬਜੈਕਟ
ਇਨਸਟੈਂਸ
ਉਦਾਹਰਣ 1
ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਫੋਟੋ ਦਰਸਾਉਣ ਲਈ <figure> ਐਲੀਮੈਂਟ ਵਰਤੋਂ ਕਰੋ, ਫੋਟੋ ਦੇ ਟਾਈਟਲ ਨੂੰ ਦੱਸਣ ਲਈ <figcaption> ਐਲੀਮੈਂਟ ਵਰਤੋਂ ਕਰੋ:
<figure> <img src="trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>ਚਿੱਤਰ 1 - ਇਟਲੀ ਦੇ ਪੁਲੀਆ ਖੇਤਰ ਦੇ ਤਰੂਲੀ。</figcaption> </figure>
ਉਦਾਹਰਣ 2
ਸਿਸਟਮ ਸੈਟਿੰਗ ਦੇ ਮਾਧਿਅਮ ਨਾਲ <figure> ਅਤੇ <figcaption> ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ:
<html> <head> <style> figure { border: 1px #cccccc solid; padding: 4px; margin: auto; } figcaption { background-color: black; color: white; font-style: italic; padding: 2px; text-align: center; } </style> </head> <body> <figure> <img src="trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>ਚਿੱਤਰ 1 - ਇਟਲੀ ਦੇ ਪੁਲੀਆ ਖੇਤਰ ਦੇ ਤਰੂਲੀ。</figcaption> </figure> </body> </html>
ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗਿਤਾ
<figure>
ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗਿਤਾ。
ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ
<figure>
ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ。
ਮੂਲਤਬੀ ਸੀਐੱਸਐੱਸ ਸੈਟਿੰਗ
ਮੋਸਟ ਬਰਾਊਜ਼ਰਜ਼ ਨੇ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲਾਂ ਨਾਲ ਦਿਸਾਈ ਹੈ <figure>
ਅਣਗਿਣਤ ਮੁੱਲ
figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ
ਇਸ ਸਾਰੀ ਤਾਲਿਕਾ ਵਿੱਚ ਸੰਖਿਆਵਾਂ ਨੇ ਪਹਿਲੀ ਵਾਰ ਇਸ ਇਲੈਕਟਰੋਨ ਦਾ ਪੂਰਨ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਖਰੀ ਸੰਸਕਰਣ ਦਿਸਾਈ ਹੈ。
ਚਰੋਮ | ਐਂਜਲ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪੇਰਾ |
---|---|---|---|---|
ਚਰੋਮ | ਐਂਜਲ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪੇਰਾ |
8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
ਟਿੱਪਣੀ: <figure> ਟੈਗ ਹੈਲਥ ਵੀ.5 ਵਿੱਚ ਨਵਾਂ ਟੈਗ ਹੈ।
- ਪਿਛਲਾ ਪੰਨਾ <figcaption>
- ਅਗਲਾ ਪੰਨਾ <font>