Berbagi teknologi

HTML [Tutorial Praktis] (versi terbaru 2024)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ide inti——Semantisasi

【面试题】如何理解 HTML 语义化 ?

  • 1

Jenis konten dapat ditentukan dari tag saja, terutama judul, paragraf, gambar, dan tabel.

  • Meningkatkan keterbacaan kode dan memudahkan orang untuk memahaminya
  • Lebih ramah terhadap SEO, sehingga memudahkan mesin pencari untuk memahaminya

Struktur dasar file html

Akhiran file untuk file html adalah .html, seperti indeks.html

Masukkan bahasa Inggris di vscode ! Masukan cepat

<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
  <!-- 页面的头部【必要】 -->
  <head>
    <!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面的标题【必要】 -->
    <title>Document</title>
    <!-- 页面中的样式 -->
    <style>
      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <!-- 页面的身体【必要】 -->
  <body>
  <!-- 页面的内容 -->
  <div></div>
  <!-- 页面的脚本 ——  JS 代码 -->
  <script></script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
【面试题】为什么<style></style> 标签要写在<head></head> 中  ?

  • 1

Browser mem-parsing dokumen HTML dari atas ke bawah. <style></style> Labelnya harus ditulis<head></head> Anda dapat memuat gaya terlebih dahulu, lalu memuat elemen.

Jika Anda mau <style></style> Labelnya tertulis<body></body> Di bawah, elemen dimuat terlebih dahulu, lalu gaya, sehingga pengguna melihat struktur halaman tanpa gaya.

【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部  ?

  • 1

Browser mengurai dokumen HTML dari atas ke bawah. <style></style> Jika tidak ditempatkan<body></body> Di bagian bawah halaman, JS akan dimuat dan diurai terlebih dahulu, lalu elemen akan dirender, yang akan memperpanjang waktu rendering halaman. Jika operasi DOM terlibat dalam JS, hal ini juga akan memblokir rendering halaman .

Klasifikasi tag html

Menurut nilai gaya tampilan default label, ini dibagi menjadi dua kategori:

【面试题】HTML有哪些内联元素和块状元素 ?

  • 1

elemen sebaris

Lebar ditentukan oleh konten

  • display :inline Tanpa mengganti elemen, lebar dan tinggi tidak dapat diatur.
img，span ,  a ,  b 等

  • 1
  • display :inline-block Dapat mengatur lebar dan tinggi
input， button 等

  • 1

elemen blok

Lebarnya ditentukan oleh wadahnya (lebarnya akan memenuhi seluruh wadah), dan lebar serta tingginya dapat diatur

  • display: block
div，h1-h6，p，ul, ol ，form , hr 等

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

Elemen pengganti dalam HTML

Elemen yang kontennya dapat diganti dengan memodifikasi nilai suatu atribut (kebanyakan atribut src) disebut "elemen pengganti".

Tag berikut adalah semua elemen pengganti:

img、video、iframe、canvas、textarea、input、select、object

  • 1

Karakteristik elemen yang diganti

  • Semuanya adalah elemen sebaris
  • Tampilan konten tidak terpengaruh oleh CSS tag lain, seperti teks pada konten yang diganti, dll.
  • Konten yang diganti itu sendiri memiliki dimensi
    • Ukuran default img adalah ukuran gambar yang dimuat.
    • Ukuran default (tidak termasuk batas) video, iframe, kanvas, dll. adalah 300px * 150px.
  • Garis dasar elemen yang diganti (nilai default perataan vertikal adalah garis dasar) adalah tepi bawah elemen, bukan tepi bawah karakter x
  • Jika konten pengganti tidak dimuat (misalnya atribut src tidak disetel), elemen pengganti akan kehilangan karakteristik elemen pengganti dan menjadi elemen inline biasa.

Ganti ukuran elemen

Ukuran akhir dari elemen yang diganti ditentukan oleh kombinasi dari tiga metode berikut, masing-masing Prioritas dari tinggi ke rendah Diikuti oleh:

  1. Ukuran diatur berdasarkan lebar CSS, tinggi, lebar maks/lebar minimum, tinggi maks/tinggi minimum
  2. Anda dapat mengatur ukurannya dengan mengganti atribut html pada elemen, seperti atribut lebar dan tinggi img, atribut ukuran input, atribut cols dan baris textarea, dll.
  3. Konten yang diganti itu sendiri memiliki dimensi

tag baru HTML5

【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)

  • 1

tag struktural

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

tag multimedia

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

tanda formulir

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。

  • 1
  • 2

Tag lainnya

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Poin-poin penting praktis dari tag HTML yang umum digunakan

menghubungkan sumber tautan eksternal

Hanya digunakan dalam tag head, ini dapat menentukan hubungan antara dokumen dan sumber daya eksternal, seperti gaya css dari tautan eksternal, ikon kecil sebelum judul halaman tautan eksternal, dll.

<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  • 1
  • 2
  • 3
  • 4

sebuah hyperlink

Tag khusus teks biasa

br jeda baris dalam paragraf

Ini hanya berlaku untuk jeda baris dalam tag p. Untuk mengubah baris antar paragraf atau menyesuaikan jarak antar elemen, silakan gunakan gaya seperti padding dan margin.

<p>广东省<br/>广州市<br/>黄埔大道西601号</p>

  • 1

Masukkan deskripsi gambar di sini

merentang teks sebaris

Digunakan untuk membungkus bagian teks dalam satu baris untuk menambahkan gaya khusus.

<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>

  • 1

Masukkan deskripsi gambar di sini

sup superskrip

<p>m<sup>2</sup></p>

  • 1

Masukkan deskripsi gambar di sini

sub subskrip

<p>m<sub>2</sub></p>

  • 1

Masukkan deskripsi gambar di sini

teks yang telah ditentukan sebelumnya

elemen blok display: block

Itu dapat mempertahankan semua karakter spasi (spasi, baris baru) dan menampilkan hasilnya secara utuh.

<pre>
你好：
      我昨天给你打了个电话。
</pre>

  • 1
  • 2
  • 3
  • 4

Masukkan deskripsi gambar di sini

kode kode

elemen sebaris display: inline

Digunakan untuk mewakili kode sumber komputer atau konten teks lain yang dapat dibaca mesin. Untuk mempertahankan format indentasi kode, biasanya digunakan bersama dengan tag awal.

Teks di dalam tag kode akan ditampilkan dalam font gaya teletypewriter (Kurir) dengan lebar tetap.

<pre>
    <code>
        let a = 1;
    </code>
</pre>

  • 1
  • 2
  • 3
  • 4
  • 5

Masukkan deskripsi gambar di sini

Daftar tag terkait

ul daftar tidak berurutan

  • Atribut type dapat mengubah tipe nomor seri
    • cakram asal padat [default]
    • titik persegi padat persegi
    • lingkaran lingkaran berongga
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

Masukkan deskripsi gambar di sini

ol daftar pesanan

  • type atribut - tipe nomor seri, seperti 1 (angka Arab [default]), a, A, i, I
  • atribut awal —— menghitung titik awal
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Masukkan deskripsi gambar di sini

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Masukkan deskripsi gambar di sini

<ol type="1" start="4"> 
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

Masukkan deskripsi gambar di sini

Daftar bersarang

li adalah tag tingkat kontainer yang dapat berisi apa saja, termasuk ul.

<ul>
  <li>
    <b>北京市</b>
    <ul>
      <li>海淀区</li>
      <li>朝阳区</li>
      <li>东城区</li>
    </ul>
  </li>

  <li>
    <b>广州市</b>
    <ul>
      <li>天河区</li>
      <li>越秀区</li>
    </ul>
  </li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

Masukkan deskripsi gambar di sini

meja meja

https://blog.csdn.net/weixin_41192489/artikel/detail/140217983

saya ikon

Tag i awalnya digunakan untuk mewakili teks miring, dengan efek font miring secara default, tetapi sekarang huruf miring diterapkan secara seragam melalui CSS. Karena i adalah huruf pertama ikon, sekarang sudah biasa menggunakan tag i untuk menampilkan ikon, jadi Anda perlu menambahkan gaya font-style:normal untuk membatalkan kemiringan default.

<i style="font-style:normal">&#9742</i>

  • 1

Masukkan deskripsi gambar di sini

gambar img

display :inline elemen sebaris

Format gambar yang didukung: jpg (jpeg), gif, png, bmp, format lain tidak didukung, seperti psd, ai

 <img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />

  • 1

Masukkan deskripsi gambar di sini

audio audio

display :inline elemen sebaris
Masukkan deskripsi gambar di sini

<audio controls>
  <source src="./test.mp3" type="audio/mp3" />
  您的浏览器不支持 audio 标签。
</audio>

  • 1
  • 2
  • 3
  • 4
  • src [wajib]: alamat audio
  • kontrol menampilkan pemutar musik
  • putar otomatis putar otomatis
  • pemutaran putaran berulang
  • preload preload (atribut ini tidak valid saat mengatur autoplay)

Di bawah ini adalah pemutar musik sederhana yang diimplementasikan menggunakan vue3. Silakan lihat komentar untuk atribut dan metode terkait.

<script setup>
let bgMusic_ref = ref(null)

function printInfo() {
  let musicInfo = {
    //currentTime 当前播放进度（单位秒s）
    currentTime: bgMusic_ref.value.currentTime,
    //duration 音频总时长（单位秒s）
    duration: bgMusic_ref.value.duration
  }

  console.log(musicInfo)
}

function play() {
  // 播放音频
  bgMusic_ref.value.play()
}

function pause() {
  // 暂停播放音频
  bgMusic_ref.value.pause()
}

// 重新播放音频（从头开始播放）
function rePlay() {
  // 先将当前播放进度重置为 0
  bgMusic_ref.value.currentTime = 0
  // 再播放音频
  bgMusic_ref.value.play()
}
</script>

<template>
  <audio ref="bgMusic_ref" controls autoplay>
    <source src="./test.mp3" type="audio/mp3" />
    您的浏览器不支持 audio 标签。
  </audio>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="rePlay">重新播放</button>
  <button @click="printInfo">打印音频信息</button>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

video video

display :inline elemen sebaris

Hanya mendukung tiga format: MP4, WebM, dan Ogg. Format lain seperti flv, mkv, dll.

Masukkan deskripsi gambar di sini

  <video controls>
    <source src="./test.mp4" type="video/mp4" />
  </video>

  • 1
  • 2
  • 3

bingkai tertanam iframe

display :inline elemen sebaris

Sematkan halaman web di dalam halaman

<iframe src="https://www.w3school.com.cn/index.html"></iframe>

  • 1
  • src [wajib]: alamat halaman web lain
    Masukkan deskripsi gambar di sini

Bentuk tag terkait

tombol tombol

display :inline-block elemen sebaris

<button onclick="alert('你好!')">点击我！</button>

  • 1

Masukkan deskripsi gambar di sini

HTML merender karakter khusus

karaktermenggambarkankode
ruang angkasajarak tidak putus&nbsp;
<kurang dari&lt;
>lebih besar dari&gt;
©hak ciptaHak Cipta ©
&simbol untuk 'dan&

Untuk karakter khusus lainnya, lihat "Ringkasan cara menulis karakter khusus html, js, dan css di html"
https://www.cnblogs.com/starof/p/4718550.html

Contoh praktis dari tag HTML umum

Tata letak halaman

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. "Saya telah memberikan banyak kontribusi di bidang dokumentasi pengembang stasiun sumber terbuka untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya

informasi kontak saya

Surat