Cara membuat laman web html-Soal Jawab bahagian hadapan-php.cn

Cara membuat laman web html

王林

Lepaskan： 2023-05-27 11:41:37

asal

4194 orang telah melayarinya

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. <head>), teg penamat (cth. </head>), atau teg tunggal (cth. <img>).

Apabila menulis HTML, anda mesti mengikut peraturan berikut:

Semua elemen HTML mesti ditutup dalam teg pembuka <tag> dan teg penutup </tag>. Untuk satu teg, anda boleh menggunakan teg penutup sendiri <tag />. Teg
<html> ialah teg akar dan mewakili permulaan keseluruhan dokumen HTML. Teg <html> mesti disertakan dalam semua elemen HTML.
Setiap halaman HTML perlu mengandungi teg <head> dan <body>. Teg <head> mengandungi metadata dokumen, seperti tajuk dokumen, kata kunci, dsb. Teg <body> mengandungi kandungan halaman yang boleh dilihat seperti teks, imej, dsb.
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>

Salin selepas log masuk

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 <head> 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>

Salin selepas log masuk

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

Dalam gaya fail style.css:

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

Salin selepas log masuk

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>

Salin selepas log masuk

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 <head> atau <body> kod halaman, contohnya:

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

Salin selepas log masuk

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

Dalam skrip fail skrip.js:

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

Salin selepas log masuk

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>

Salin selepas log masuk

5. Buat halaman HTML

Berikut ialah langkah pembuatan halaman HTML yang mudah:

Buka editor teks, seperti Notepad atau Sublime Text.
Buat fail teks baharu dan simpan dalam format fail .html.
Tulis kod HTML, termasuk pengisytiharan jenis dokumen, teg elemen HTML dan kandungan.
Tambah gaya CSS untuk mengawal rupa dan rasa halaman web anda.
Tambahkan skrip JavaScript untuk mengawal interaktiviti dan dinamik halaman web.
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>

Salin selepas log masuk

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!