[Mesti dibaca untuk mencari pekerjaan bahagian hadapan] Soalan dan jawapan temu duga pembangunan bahagian hadapan terpilih_HTML

Question

HTML

Apakah peranan Doctype Bagaimana untuk membezakan antara mod ketat dan mod campuran? Apakah maksudnya?

(1), <!DOCTYPE> Beritahu penghurai penyemak imbas tentang spesifikasi jenis dokumen yang hendak digunakan untuk menghuraikan dokumen ini.

(2), tetapan taip mod ketat dan mod operasi JS dijalankan pada standard tertinggi yang disokong oleh penyemak imbas.

(3). Dalam mod campuran, halaman dipaparkan dalam cara yang serasi ke belakang yang longgar. Meniru tingkah laku penyemak imbas lama untuk menghalang tapak daripada tidak berfungsi.

(4), DOCTYPE tidak wujud atau formatnya tidak betul, yang akan menyebabkan dokumen dibentangkan dalam mod bercampur.

Apakah elemen sebaris? Apakah elemen peringkat blok? Apakah unsur-unsur kekosongan?

(1) Spesifikasi CSS menetapkan bahawa setiap elemen mempunyai atribut paparan, yang menentukan jenis elemen Setiap elemen mempunyai nilai paparan lalai

Sebagai contoh, nilai atribut paparan lalai bagi div ialah "blok", yang menjadi Elemen "tahap blok"
Nilai atribut paparan lalai bagi rentang ialah "sebaris", yang merupakan elemen "sebaris".

(2) Elemen sebaris termasuk: a b span img input pilih kuat (nada penekanan)
Elemen peringkat blok termasuk: div ul ol li dl dt dd h1 h2 h3 h4…p

(3) Elemen kosong yang terkenal:
<br> <hr> <img> <input> <link> <meta>
Little known are:
<area> <base> <col> <command> < embed> ; <keygen> <param> <track> Pautan

(1) tergolong dalam teg XHTML dan @import disediakan oleh CSS

(2) Apabila halaman dimuatkan, pautan akan dimuatkan pada masa yang sama dan CSS yang dirujuk oleh @import akan menunggu; sehingga halaman dimuatkan sebelum dimuatkan;

(3) import hanya boleh dikenali dalam IE5 atau ke atas, dan pautan ialah teg XHTML, jadi tiada isu keserasian

(4) Berat gaya gaya pautan ialah lebih tinggi daripada berat @import. sekarang Blink;


Isu keserasian biasa?

* Gambar png24-bit muncul sebagai latar belakang pada penyemak imbas iE6, penyelesaiannya ialah menjadikannya PNG8.

* Jidar lalai dan pelapik penyemak imbas adalah berbeza. Penyelesaiannya ialah menambah *{margin:0;padding:0;} global untuk menyatukan.

* Pepijat jidar berganda IE6: Selepas label atribut blok diapungkan dan terdapat jidar mendatar, jidar yang dipaparkan dalam IE6 adalah lebih besar daripada nilai yang ditetapkan.

Jarak berganda dijana dengan terapung IE #box{ float:left:10px; margin:0 0 0 10px;}

Dalam kes ini, IE akan menjana jarak 20px Tambahkan --_display:inline pada kawalan untuk menukarnya menjadi atribut sebaris. (_Simbol ini hanya boleh dikenali oleh ie6)

Kaedah pengecaman beransur-ansur secara beransur-ansur mengecualikan bahagian daripada keseluruhan.

Pertama sekali, penggunaan bijak tanda "9" memisahkan pelayar IE daripada semua situasi.
Seterusnya, gunakan "+" sekali lagi untuk memisahkan IE8 daripada IE7 dan IE6, supaya IE8 telah diiktiraf secara bebas.

css
.bb{
background-color:#f1ee18;/*All recognition*/
.background-color:#00deff9; /*IE6, 7, 8 recognition*/
+background-color:#a200ff; *IE6, 7 recognition*/
_background-color:#1e0bd1;/*IE6 recognition*/
  }

* Di bawah IE, anda boleh menggunakan kaedah mendapatkan atribut biasa untuk mendapatkan atribut tersuai,
Anda juga boleh menggunakan getAttribute(( ) untuk mendapatkannya Atribut tersuai;
Di bawah Firefox, anda hanya boleh menggunakan getAttribute() untuk mendapatkan atribut tersuai
Penyelesaian: Dapatkan atribut tersuai melalui getAttribute(

* Di bawah IE, objek genap mempunyai atribut x, y, tetapi tiada atribut pageX , pageY
Di bawah Firefox, objek acara mempunyai atribut pageX, pageY, tetapi tiada atribut x, y

* Penyelesaian: (Ulasan bersyarat) Kelemahannya ialah permintaan HTTP tambahan boleh ditambah di bawah pelayar IE.

* Antara muka Cina Chrome akan memaksa teks yang lebih kecil daripada 12px untuk dipaparkan sebagai 12px secara lalai
Ini boleh diselesaikan dengan menambahkan sifat CSS -webkit-text-size-adjust: none

Gaya tuding tidak akan muncul selepas itu hiperpautan dilawati. Gaya hiperpautan yang diklik tidak lagi mempunyai tuding dan aktif Penyelesaiannya adalah untuk menukar susunan sifat CSS:
L-V-H-A: a:link {} a:dilawati {} a:hover {} a:active {}

Apakah ciri baharu html5 dan elemen manakah yang telah dialih keluar? Bagaimana untuk menangani isu keserasian penyemak imbas dengan teg baharu HTML5? Bagaimana untuk membezakan antara HTML dan HTML5?

* HTML5 bukan lagi subset SGML, ia terutamanya mengenai penambahan imej, lokasi, storan, multitasking dan fungsi lain.

* Lukisan kanvas
Elemen video dan audio untuk main balik media
Storan luar talian setempat localStorage menyimpan data untuk masa yang lama, dan data tidak hilang selepas penyemak imbas ditutup
Data SessionStorage dipadamkan secara automatik selepas penyemak imbas ditutup

Semantik yang lebih baik Elemen kandungan, seperti artikel, pengaki, pengepala, nav, bahagian
Kawalan borang, kalendar, tarikh, masa, e-mel, url, carian
Pekerja web teknologi baharu, websockt, Geolokasi

* Elemen yang dialih keluar

Unsur prestasi semata-mata : fon asas, besar, tengah, fon, s, strike, tt, u;

Elemen yang memberi kesan negatif kepada kebolehgunaan: bingkai, set bingkai, noframe

Menyokong teg baharu HTML5:

* Sokongan IE8/IE7/IE6 melalui Teg yang dihasilkan oleh Teg; kaedah document.createElement,
Anda boleh menggunakan ciri ini untuk menjadikan penyemak imbas ini menyokong teg baharu HTML5,

Selepas penyemak imbas menyokong teg baharu, anda juga perlu menambah gaya lalai teg:

* Sudah tentu, cara terbaik adalah dengan terus Gunakan rangka kerja matang, yang paling banyak digunakan ialah rangka kerja html5shim
<!--[jika lt IE 9]> trunk/html5.js "</script>
<![endif]-->
Bagaimana untuk membezakan: pengisytiharan DOCTYPE elemen struktur baharu dan elemen fungsian

Pemahaman semantik?

Gunakan hashtag yang betul untuk perkara yang betul!

Semantik HTML adalah untuk menstruktur kandungan halaman untuk memudahkan analisis oleh pelayar dan enjin carian
Ia juga dipaparkan dalam format dokumen tanpa gaya CCS dan mudah dibaca.
Perangkak enjin carian bergantung pada teg untuk menentukan konteks dan berat kata kunci individu, yang bermanfaat untuk SEO.
Memudahkan orang yang membaca kod sumber membahagikan tapak web kepada beberapa bahagian untuk memudahkan pembacaan, penyelenggaraan dan pemahaman.

Storan luar talian HTML5?

localStorage penyimpanan data jangka panjang, data tidak akan hilang selepas pelayar ditutup

datasessionStorage akan dipadamkan secara automatik selepas penyemak imbas ditutup.

(Tulis) kod HTML yang menerangkan semantik.

(Banyak teg baharu ditambahkan dalam HTML5 (seperti <artikel>, <nav>, <header> dan <footer>, dll.)

adalah berdasarkan prinsip reka bentuk semantik)
< pengepala ">
< h1>Tajuk< /h1>
< h2>Fokus pada teknologi bahagian hadapan Web< /h2>
< /div>

Apa kelebihan isad

*iframe akan menyekat acara Onload halaman utama;

*iframe dan halaman utama berkongsi kumpulan sambungan, dan penyemak imbas mempunyai sekatan pada sambungan dalam domain yang sama, jadi ia akan menjejaskan pemuatan selari halaman.
Anda perlu mempertimbangkan kedua-dua kelemahan ini sebelum menggunakan iframe. Jika anda perlu menggunakan iframe, sebaiknya tambahkan nilai atribut src secara dinamik pada iframe melalui javascript
, yang boleh memintas dua masalah di atas.

Sila terangkan perbezaan antara kuki, sessionStorage dan localStorage?

Kuki dihantar berulang-alik antara penyemak imbas dan pelayan. sessionStorage dan localStorage tidak akan
sessionStorage dan localStorage mempunyai ruang storan yang lebih besar;