cari

Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Cara membuat laman web html

Cara membuat laman web html

王林
王林asal
2023-05-27 11:41:374224semak imbas

1. Apakah itu HTML?

HTML (Hyper Text Markup Language), iaitu Hyper Text Markup Language. Ringkasnya, ia adalah bahasa asas untuk penghasilan halaman web. Ia adalah bahasa penanda yang menerangkan halaman web melalui penanda Setiap halaman web mungkin terdiri daripada berbilang elemen halaman web (seperti teks, imej, video, audio, dll.). Fungsi utama HTML adalah untuk menyusun teks, imej, audio, video dan kandungan lain serta memformat input maklumat oleh pengguna untuk membentuk dokumen halaman web, yang dihuraikan dan diberikan oleh pelayar dan akhirnya dibentangkan kepada pengguna.

2. Teg HTML

Teg HTML ialah konsep teras HTML. Ia adalah arahan yang dibalut dalam kurungan sudut yang memberitahu pelayar cara memaparkan teks. Teg HTML termasuk teg permulaan (cth. 93f0f5c25f18dab9d176bd4f6de5d30e), teg penamat (cth. 9c3bca370b5104690d9ef395f2c5f8d1), atau teg tunggal (cth. a1f02c36ba31691bcfe87b2722de723b).

Apabila menulis HTML, anda mesti mengikut peraturan berikut:

  1. Semua elemen HTML mesti ditutup dalam teg pembuka 8bf259f5a6144433b921fb8b7de94970 dan teg penutup baa3ea5ae7414741617ff7b18b3fb09e. Untuk satu teg, anda boleh menggunakan teg penutup sendiri cd02bdb502a3e8db9c0fb45c5fc9dac3. Teg
  2. 100db36a723c770d327fc0aef2ce13b1 ialah teg akar dan mewakili permulaan keseluruhan dokumen HTML. Teg 100db36a723c770d327fc0aef2ce13b1 mesti disertakan dalam semua elemen HTML.
  3. Setiap halaman HTML perlu mengandungi teg 93f0f5c25f18dab9d176bd4f6de5d30e dan 6c04bd5ca3fcae76e30b72ad730ca86d. Teg 93f0f5c25f18dab9d176bd4f6de5d30e mengandungi metadata dokumen, seperti tajuk dokumen, kata kunci, dsb. Teg 6c04bd5ca3fcae76e30b72ad730ca86d mengandungi kandungan halaman yang boleh dilihat seperti teks, imej, dsb.
  4. Dalam HTML, teg dan atribut tidak sensitif huruf besar, tetapi disyorkan untuk menggunakan huruf kecil untuk meningkatkan kebolehbacaan kod.

Berikut ialah contoh templat HTML: 

<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1>标题 1</h1>
    <p>这是一个段落。</p>
  </body>
</html>

3 CSS

CSS (Cascading Style Sheets), helaian gaya berlatarkan, ialah perihalan. gaya laman web dan Bahasa reka letak. Ia digunakan bersama-sama dengan HTML untuk mencipta halaman web yang cantik. CSS mengawal aspek paparan halaman web seperti fon, warna, latar belakang, sempadan dan reka letak.

Terdapat dua cara untuk membenamkan gaya CSS dalam HTML: gaya dalaman dan gaya luaran.

Gaya dalaman ialah menambah gaya kod CSS dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e kod halaman, contohnya: 

<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
    <style>
      h1 {
        color: blue;
        font-family: Arial;
      }
    </style>
  </head>
  <body>
    <h1>标题 1</h1>
    <p>这是一个段落。</p>
  </body>
</html>

Helaian gaya luaran ialah menambah peraturan gaya pada fail luaran, contohnya:

Dalam gaya fail style.css: 

h1 {
  color: blue;
  font-family: Arial;
}

Tambah gaya luaran pada halaman HTML: 

<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>标题 1</h1>
    <p>这是一个段落。</p>
  </body>
</html>

4. JavaScript

JavaScript ialah kaedah yang digunakan untuk mengawal kandungan HTML, dan bahasa skrip yang menjadikan halaman web interaktif dan dinamik. Ia boleh digunakan untuk interaksi dengan pengguna, seperti pengesahan borang, penukaran imej, mengemas kini halaman secara dinamik, dsb.

Terdapat dua cara untuk membenamkan JavaScript dalam halaman HTML: skrip dalaman dan skrip luaran.

Skrip dalaman ialah menambah kod JavaScript dalam 93f0f5c25f18dab9d176bd4f6de5d30e atau 6c04bd5ca3fcae76e30b72ad730ca86d kod halaman, contohnya: 

<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
    <script>
      function sayHello() {
        alert("Hello!");
      }
    </script>
  </head>
  <body>
    <button onclick="sayHello()">点击这里</button>
  </body>
</html>

Skrip luaran ialah menambah kod skrip pada fail luaran, contohnya :

Dalam skrip fail skrip.js: 

function sayHello() {
  alert("Hello!");
}

Tambahkan skrip luaran pada halaman HTML: 

<!DOCTYPE html> 
<html>
  <head>
    <title>标题</title>
    <script src="script.js"></script>
  </head>
  <body>
    <button onclick="sayHello()">点击这里</button>
  </body>
</html>

5. Buat halaman HTML

Berikut ialah langkah pembuatan halaman HTML yang mudah:

  1. Buka editor teks, seperti Notepad atau Sublime Text.
  2. Buat fail teks baharu dan simpan dalam format fail .html.
  3. Tulis kod HTML, termasuk pengisytiharan jenis dokumen, teg elemen HTML dan kandungan.
  4. Tambah gaya CSS untuk mengawal rupa dan rasa halaman web anda.
  5. Tambahkan skrip JavaScript untuk mengawal interaktiviti dan dinamik halaman web.
  6. Buka fail HTML dalam penyemak imbas anda untuk melihat dan menguji halaman.

Sebagai contoh, berikut ialah contoh halaman HTML yang mengandungi CSS dan JavaScript: 

<!DOCTYPE html> 
<html>
  <head>
    <title>我的HTML页面</title>
    <style>
      body {
        background-color: #f2f2f2;
        font-family: Arial;
      }
      h1 {
        color: #009900;
        font-size: 36px;
        text-align: center;
        margin-top: 50px;
      }
    </style>
    <script>
      function sayHello() {
        alert("Hello!");
      }
    </script>
  </head>
  <body>
    <h1>欢迎访问我的HTML页面</h1>
    <button onclick="sayHello()">点击这里</button>
  </body>
</html>

6. Ringkasan

HTML ialah bahasa asas untuk halaman web pengeluaran. Kegunaan Untuk menerangkan dan mempersembahkan kandungan web. CSS dan JavaScript boleh meningkatkan penampilan dan interaktiviti halaman web, menjadikannya lebih menarik. Membuat halaman HTML memerlukan mematuhi peraturan teg HTML, menambah gaya dan skrip, dan akhirnya mengujinya dalam penyemak imbas. Dengan mempelajari HTML, CSS dan JavaScript, anda boleh memperoleh pengetahuan asas tentang pembangunan bahagian hadapan dan meletakkan asas yang kukuh untuk reka bentuk dan pembangunan web.

Atas ialah kandungan terperinci Cara membuat laman web html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
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
Artikel sebelumnya：pengiraan nilai input JavaScriptArtikel seterusnya：pengiraan nilai input JavaScript

Artikel berkaitan

Lihat lagi