hujung hadapan web
Tutorial H5
HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial
HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial
HTML5
Apakah sebenarnya HTML5? Dalam Soalan Lazim W3C HTML5, ini dinyatakan tentang HTML5: HTML5 ialah lesen percuma yang dibangunkan di bawah platform terbuka.
Secara khusus, terdapat dua pemahaman tentang ayat ini:
“
merujuk kepada sekumpulan teknologi yang bersama-sama membentuk platform rangkaian terbuka masa hadapan Teknologi ini termasuk spesifikasi HTML5, CSS3, SVG, MATHML, Geolokasi, XmlHttpRequest. , Konteks 2D, Fon Web dan teknologi lain Sempadan set teknologi ini tidak formal dan berubah mengikut masa
Merujuk kepada spesifikasi HTML5 dan sudah tentu merupakan sebahagian daripada Platform Web Terbuka.
Sokongan Penyemak Imbas untuk Kanvas
Di bawah saya telah menyenaraikan penyemak imbas web paling popular dan nombor versi minimum yang mana mereka mula menyokong elemen Kanvas.
Saya mengesyorkan menggunakan Chrome di sini.
Halaman HTML5 yang ringkas
- >
- <html lang="zh" >
- <kepala>
- <meta charset="UTF- 8">
- <tajuk>Halaman HTML5 asas tajuk>
- kepala>
- <badan> Hello Airing badan>
- html>
Keputusan larian demo adalah seperti berikut: 
HTML terdiri daripada elemen teg berbentuk seperti kurungan sudut <> biasanya muncul secara berpasangan dan teg hanya boleh bersarang dan tidak bersilang.
Sambungan:
Apa yang muncul secara berpasangan dipanggil teg tertutup, dan apa yang muncul secara tunggal dipanggil teg tunggal. Ia ditutup tidak kira apa pun (satu teg tidak perlu ditutup, tetapi penutupan diperlukan dengan ketat dalam XHTML). Teg penutup dibahagikan kepada teg permulaan dan teg akhir Contohnya,
Untuk lebih banyak teg, anda disyorkan untuk mempelajari tentangnya sendiri. Kami mengesyorkan platform W3school untuk belajar sendiri.
Di sini kita fokus pada teg yang muncul dalam kod di atas.
- >
Teg ini menunjukkan bahawa pelayar web akan memaparkan halaman dalam mod standard. Ini diperlukan untuk dokumen HTML5 mengikut spesifikasi HTML5 yang ditakrifkan oleh W3C. Teg ini memudahkan perbezaan pelik yang telah lama wujud dalam cara pelayar berbeza memaparkan halaman HTML. Ia biasanya baris pertama dalam dokumen.
- <html lang="en" >
Ini ialah teg yang mengandungi perihalan bahasa, contohnya, "en" untuk bahasa Inggeris dan "zh" untuk bahasa Cina.
- <kepala>... kepala>
Dua penanda ini masing-masing menunjukkan permulaan dan penghujung maklumat pengepala. Teg yang terkandung dalam pengepala ialah tajuk, kata pengantar, penerangan dan kandungan lain halaman Ia tidak dipaparkan sebagai kandungan itu sendiri, tetapi mempengaruhi kesan paparan halaman web. Teg yang paling biasa digunakan dalam pengepala ialah teg <title>
Jadual berikut menyenaraikan semua teg dan fungsi di bawah elemen kepala HTML:
| 标签 | 描述 |
|---|---|
<head> |
定义了文档的信息 |
<title> |
定义了文档的标题 |
<base> |
定义了页面链接标签的默认链接地址 |
<link> |
定义了一个文档和外部资源之间的关系 |
<meta> |
定义了HTML文档中的元数据 |
<script> |
定义了客户端的脚本文件 |
<style> |
定义了HTML文档的样式文件 |
- <meta charset="UTF-8">
Teg ini menerangkan mod pengekodan aksara yang digunakan oleh penyemak imbas web, yang biasanya ditetapkan kepada UTF-8 di sini. Tidak perlu menukarnya jika tiada tetapan khas diperlukan. Ini juga merupakan elemen yang diperlukan untuk halaman HTML5.
- <tajuk>... tajuk>
Teg ini menerangkan tajuk HTML yang dipaparkan dalam tetingkap penyemak imbas. Ini adalah teg penting dan merupakan salah satu bahagian utama maklumat yang digunakan oleh enjin carian untuk mengindeks kandungan pada halaman HTML.
- <badan>... badan>
Kandungan sebenar yang dipaparkan pada halaman web terkandung di antara kedua-dua
ini.Ringkasnya, halaman web HTML5 terdiri daripada bahagian dan dan ;bahagian teg kepala> dan badan yang ditentukan oleh
Dengan cara ini, kami telah mengetahui struktur asas halaman web HTML yang paling mudah.
Tambah Kanvas
Menambah Kanvas dalam HTML adalah sangat mudah, cuma tambahkan teg
- ><html lang ="zh"><kepala> <meta charset="UTF-8"> ;<tajuk>halaman HTML5 asastajuk > kepala>
- <badan>
- <kanvas id="kanvas" >
- Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !
- kanvas>badan>
- html>
Memandangkan halaman hasil adalah halaman kosong sepenuhnya, saya tidak akan menyiarkan gambar di sini. Anda mungkin ingin tahu, mengapa ia kosong? (Karut, saya belum sempat melukis!) Maksud asal Kanvas ialah kanvas, yang bermaksud kanvas (karut...).
Apakah maksud teks dalam teg
Apakah maksud id dalam
Untuk memaparkan Kanvas dengan lebih jelas dan memudahkan demonstrasi berikutnya, saya mengubah suai sedikit kod, dan semua lukisan seterusnya akan dilukis pada Kanvas ini.
- >
- <html lang="zh" >
- <kepala>
- <meta charset="UTF- 8">
- <tajuk>基础的Kanvas tajuk>
- kepala>
- <badan>
- <div id="kanvas- meledingkan">
- <kanvas id="kanvas" gaya="sempadan: 1px pepejal #aaaaa; paparan: sekat; margin: 50px auto;" lebar="800" tinggi=" 600">
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！
- kanvas>
- div>
- badan>
- html>
Hasil jalankan: 
Beberapa nota pada kod di atas:
1. Menambahkan teg
2. Tentukan atribut lebar dan ketinggian untuk teg
3. Menambah gaya sebaris pada teg
Saya tidak akan menerangkan kandungan CSS di sini Lagipun, ia bukan protagonis kursus ini, dan ia akan mengambil banyak ruang untuk mengembangkannya.
Elemen Kanvas Rujukan
Model Objek Dokumen (DOM)
Model Objek Dokumen (DOM) ialah antara muka pengaturcaraan standard yang disyorkan oleh organisasi W3C untuk memproses bahasa penanda yang boleh diperluaskan. Sejarah Model Objek Dokumen boleh dikesan kembali kepada "perang pelayar" antara Microsoft dan Netscape pada akhir 1990-an Untuk bersaing untuk hidup dan mati dalam JavaScript dan JScript, kedua-dua pihak memberikan pelayar fungsi yang berkuasa secara besar-besaran. Microsoft telah menambahkan banyak perkara proprietari pada teknologi web, termasuk VBScript, ActiveX, dan format DHTML milik Microsoft sendiri, yang menyebabkan banyak halaman web tidak dapat dipaparkan dengan betul menggunakan platform dan penyemak imbas bukan Microsoft. DOM ialah karya agung yang dibancuh pada masa itu.
Model Objek Dokumen mewakili semua objek pada halaman HTML. Ia adalah neutral bahasa dan neutral platform. Ia membenarkan kandungan dan gaya halaman dikemas kini semula selepas ia dipaparkan oleh pelayar web. Pengguna boleh mengakses DOM melalui JavaScript.
Sebelum anda mula menggunakan
Objek tetingkap ialah tahap tertinggi DOM Objek ini perlu dikesan untuk memastikan semua sumber dan kod telah dimuatkan sebelum mula menggunakan aplikasi Canvas.
Objek dokumen mengandungi semua teg HTML pada halaman HTML. Objek ini perlu diambil untuk mencari contoh
Lokasi peletakan JavaScript
Menggunakan JavaScript untuk memprogramkan Kanvas akan menyebabkan masalah: di mana untuk memulakan program JavaScript dalam halaman yang dibuat?
Letakkan JavaScript ke dalam
Namun, saya tidak mengambil jalan biasa (ketawa), jadi dalam kes berikutnya, saya masih meletakkan kod JavaScript di hujung mengikut gaya pengekodan saya sendiri. Sudah tentu, jika terdapat banyak kod JavaScript, adalah disyorkan untuk memuatkan fail .js luaran. Kodnya kira-kira seperti berikut:
-
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Assassin's Creed Shadows: Penyelesaian Riddle Seashell3 minggu yang lalu By DDDApa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini2 minggu yang lalu By DDDDi mana untuk mencari kad kunci kawalan kren di atomfall3 minggu yang lalu By DDD<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran3 minggu yang lalu By DDDPanduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua4 minggu yang lalu By DDD
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Tutorial CakePHP
1392
52
Jawapan silang kata NYT mini
36
110
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
