Adakah img dalam html5 elemen peringkat blok?

HTML5 img bukan elemen peringkat blok. img ialah elemen sebaris dan juga merupakan elemen gantian Ia mempunyai atribut lebar dan ketinggian terbina dalam, jadi teg img boleh menetapkan lebar dan ketinggian. img ialah elemen penggantian sebaris Ketinggian, lebar, padding dan margin semuanya tersedia, dan kesannya adalah sama dengan elemen blok.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

<img /> Penggunaan asas teg

Sokongan penyemak imbas

• Semua pelayar utama Semua sokongan teg <img>

definisi teg dan arahan penggunaan

• <img> takrifan teg dalam halaman HTML tag
• <img> mempunyai dua atribut yang diperlukan: src dan alt
• Sangat disyorkan untuk menggunakan atribut alt pada setiap imej dalam pembangunan. Dengan cara ini, walaupun imej tidak dapat dipaparkan, pengguna masih boleh melihat beberapa maklumat tentang perkara yang hilang. Dan bagi orang kurang upaya, atribut alt selalunya merupakan satu-satunya cara mereka memahami kandungan imej

<img />Apakah sebenarnya elemen itu

<img /> Adakah ia elemen sebaris atau elemen peringkat blok?

• <img /> Teg tidak menduduki baris eksklusif, jadi ia adalah elemen sebaris, yang tiada masalah

Kenapa boleh lebar dan tinggi ditetapkan kerana ia adalah elemen sebaris?

• Soalan ini akan dilanjutkan ke bahagian berikut Teg <img /> ialah elemen gantian dan mempunyai atribut lebar dan ketinggian terbina dalam, jadi ia boleh ditetapkan. Lihat penjelasan terperinci di bawah.

Definisi unsur

Daripada ciri-ciri unsur itu sendiri, ia boleh dibahagikan kepada unsur yang tidak boleh diganti dan unsur yang boleh diganti

Penjelasan MDN berkaitan elemen

Elemen yang tidak boleh digantikan Kebanyakan elemen

• (X)HTML ialah. elemen tidak boleh diganti. Iaitu, kandungannya dipaparkan terus kepada pengguna (seperti penyemak imbas)
• seperti: <h1>我是标题</h1>

Boleh diganti elemen

• Pelayar menentukan kandungan paparan khusus elemen berdasarkan teg dan atribut elemen
• Sebagai contoh, penyemak imbas akan membaca imej maklumat dan memaparkannya berdasarkan nilai atribut src teg <img> keluar, dan jika anda melihat kod HTML (X), anda tidak boleh melihat kandungan sebenar imej itu adalah untuk memutuskan sama ada paparkan kotak input atau butang radio berdasarkan atribut jenis teg <input>
• (X ) <img>、<input>、、<select>、<object></code> dalam HTML ialah elemen gantian. Elemen ini selalunya tidak mempunyai kandungan sebenar, iaitu elemen kosong </li> <li> seperti: <code><img src="tigger.jpg"/></code>, <code><input type="submit" name="Submit" value="提交"/></code> </li> <li><strong> Sifat elemen yang boleh diganti adalah sama seperti paparan: blok sebaris Elemen adalah konsisten </strong></li> </ul> <h2> Elemen boleh ganti khas </h2> <ul> <li> <code><img></code> ialah elemen yang boleh diganti </li> <li> <code><img></code> dan juga mempunyai elemen sebaris, Ciri-ciri blok sebaris, dan elemen peringkat blok </li> <li>Elemen penggantian umumnya mempunyai dimensi intrinsik, jadi dengan <code>width</code> dan <code>height</code>, anda boleh menetapkan <ul><li> , jika anda tidak menyatakan <code><img></code>'s <code>width</code> dan <code>height</code> dipaparkan mengikut saiz intrinsiknya, iaitu lebar dan tinggi apabila imej disimpan > Untuk elemen bentuk, penyemak imbas juga mempunyai gaya lalai, termasuk Lebar dan ketinggian </li></ul> </li> ialah elemen penggantian sebaris. <li>Tersedia. Kesannya sama dengan elemen blok </li> <li> <code><img>、<input></code> Tutorial yang disyorkan: "<code>height/width/padding/margin</code>tutorial video html</li>" </ul><p>Atas ialah kandungan terperinci Adakah img dalam html5 elemen peringkat blok?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css3</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">padding</a> <a href="javascript:void(0);">input</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Apakah fungsi transformasi tiga dimensi bagi css3?" href="https://m.php.cn/ms/faq/486046.html">Apakah fungsi transformasi tiga dimensi bagi css3?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Apakah fungsi transformasi tiga dimensi bagi css3?" href="https://m.php.cn/ms/faq/486052.html">Apakah fungsi transformasi tiga dimensi bagi css3?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ms/faq/485784.html" title="Apakah spesifikasi html5?" class="aBlack">Apakah spesifikasi html5?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/485811.html" title="Apakah elemen yang tidak disokong oleh html5?" class="aBlack">Apakah elemen yang tidak disokong oleh html5?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/485979.html" title="Apakah kategori tag html5?" class="aBlack">Apakah kategori tag html5?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/485980.html" title="Apakah simbol yang digunakan pada kedua-dua belah nilai atribut html5?" class="aBlack">Apakah simbol yang digunakan pada kedua-dua belah nilai atribut html5?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/485982.html" title="Apakah teg yang digunakan untuk melaksanakan senarai lungsur dalam html5" class="aBlack">Apakah teg yang digunakan untuk melaksanakan senarai lungsur dalam html5</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>