Κοινή χρήση τεχνολογίας

[Εισαγωγή στην HTML] Μάθημα 4 - Διακοπές γραμμής, διαχωριστικές γραμμές και σχόλια html

2024-07-12

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

Σε αυτήν την ενότητα, συνεχίζουμε να μιλάμε για τις εισαγωγικές γνώσεις της HTML, συμπεριλαμβανομένων των αλλαγών γραμμών, του οριζόντιου διαχωρισμού γραμμών και των σχολίων (html comments).

Πίνακας περιεχομένων

1 νέα γραμμή

2 Διαχωρίστε τις οριζόντιες γραμμές

3 σχόλια html

1 νέα γραμμή

html χωρίζεται σεστοιχείο μπλοκ και ενσωματωμένα στοιχεία. Σε αυτήν την ενότητα, ας μην μιλήσουμε πρώτα για αυτά τα στοιχεία. Γιατί μιλάμε για στοιχεία μπλοκ Ίσως το καταλάβετε αργότερα.

Η αλλαγή γραμμής είναι η ετικέτα br, που σημαίνει ότι τα δύο μέρη του περιεχομένου μπορούν να διαχωριστούν και ένα εφέ αλλαγής γραμμής δημιουργείται στη μέση.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <p>这是第二段内容</p>
  13.     </body>
  14. </html>

Ας δούμε το παραπάνω εφέ, επειδή η ίδια η ετικέτα p είναι ένα στοιχείο μπλοκ και το γρήγορο στοιχείο σημαίνει ότι αν γράψετε δύο στοιχεία p, θα αναδιπλωθούν. Ωστόσο, μετά το τύλιγμα του στοιχείου p, το ύψος που δημιουργείται στη μέση είναι βέβαιο και θα ελέγχεται από ορισμένες προεπιλεγμένες ρυθμίσεις.

Τι γίνεται αν θέλετε ο χώρος διακοπής γραμμής μεταξύ των δύο στοιχείων μπλοκ να είναι μεγαλύτερος; Ή θέλω ένα εφέ αλλαγής γραμμής στη μέση του κειμένου; Μπορείτε να το κάνετε αυτό:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是<br/>第一段内容</p>
  12.         <br/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

 

Όπως φαίνεται στην παραπάνω εικόνα, οι δύο ετικέτες p έχουν μεγάλη απόσταση στη μέση. Επιπλέον, το κείμενο στην πρώτη ετικέτα p έχει επίσης το αποτέλεσμα της αναδίπλωσης γραμμής.

2 Διαχωρίστε τις οριζόντιες γραμμές

Αυτή είναι η επίσημη ιστοσελίδα ενός πανεπιστημίου. Κοιτάξτε την οριζόντια γραμμή στη μέση. Μπορεί να ονομαστεί οριζόντια γραμμή ή διαχωριστική γραμμή. Μπορεί να εφαρμοστεί με πολλούς τρόπους, και ένας από αυτούς είναι αυτός που αναφέρεται σε αυτήν την ενότητα. Το όνομα της ετικέτας είναι hr. Ας ρίξουμε μια ματιά στο εφέ του κώδικα:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <hr/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

Αυτό δημιουργεί μια οριζόντια διαίρεση γραμμής Φυσικά, εάν θέλετε να επιτύχετε το εφέ στο παράδειγμα της εικόνας, πρέπει να προσθέσετε κάποιο στοιχείο ελέγχου στυλ ή να χρησιμοποιήσετε άλλες λύσεις για να το πετύχετε.

3 html σχόλια

Ως προγραμματιστής, η σύνταξη σχολίων είναι πολύ σημαντική. Εάν ο κώδικάς σας δεν έχει σχόλια, θα είναι εύκολο για τους άλλους να μην τον καταλάβουν όταν τον κοιτάξετε πίσω μετά από λίγο ή εάν δεν γράψετε σχόλια, θα είναι εύκολο για τους άλλους να μην καταλάβουν τον κωδικό σας παραδίδεται σε άλλους, ή είναι πολύ δύσκολο να το παρακολουθήσετε.

Επιπλέον, τα σχόλια είναι ένα είδος περιεχομένου που χρησιμοποιούν οι προγραμματιστές για να διαβάσουν οι ίδιοι, όχι για ανάγνωση από μηχανήματα, ούτε για προβολή σε προγράμματα περιήγησης, επομένως τα σχόλια δεν θα εμφανίζονται στην ιστοσελίδα.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <!-- 这是第一行代码的注释内容 -->
  12.         <p>这是第一段内容</p>
  13.         <hr/>
  14.         <!-- 这里是第二行哦 -->
  15.         <p>这是第二段内容</p>
  16.     </body>
  17. </html>

Όπως και στον παραπάνω κώδικα, προσθέσαμε σχόλια σε δύο γραμμές κώδικα αντίστοιχα για να πούμε στους προγραμματιστές κάτι για τον εαυτό τους. Αλλά δεν θα εμφανίζεται στο πρόγραμμα περιήγησης.

Προσωπικό προφίλ

Έχει αφοσιωθεί στην έρευνα της τεχνολογίας για περισσότερα από τριάντα χρόνια και είναι ικανός σε διάφορες γλώσσες όπως java, linux, javascript, php, css, κ.λπ., και έχει κάνει πολλές συνεισφορές στον τομέα του ανοιχτού κώδικα ένας σταθμός τεκμηρίωσης προγραμματιστή για κοινή χρήση ορισμένων ζητημάτων στην ανάπτυξη τεχνολογίας για μελλοντική αναφορά

τα στοιχεία επικοινωνίας μου

Ταχυδρομείο