Tag -HTML und CSS-CSS-Tutorial-php.cn

Tag -HTML und CSS

Mary-Kate Olsen

Freigeben： 2025-01-03 20:54:45

Original

289 Leute haben es durchsucht

HTML:
HTML steht für Hyper Text Markup Language.
HTML ist die Standardsprache zum Erstellen von Webseiten.
Es definiert die Struktur einer Webseite mithilfe eines Systems von Tags oder Elementen.

CSS:

CSS steht für Cascading Style Sheets.
Es wird verwendet, um das Layout einer mit HTML erstellten Webseite zu gestalten und zu formatieren.
Es steuert Dinge wie Farben, Schriftarten, Abstände, Positionierung und responsives Design.
Mit CSS können Sie die Struktur (HTML) vom Design (Stile) trennen, wodurch die Website einfacher zu warten und flexibler wird.

JS:
Js steht für JavaScript.
Es handelt sich um eine Programmiersprache, mit der dynamische und interaktive Effekte in Webbrowsern erstellt werden.
Während HTML die Seite strukturiert und CSS formatiert, ermöglicht JavaScript die Interaktion mit der Seite und kann den Inhalt dynamisch ändern.

HTML:
HTML ist eine textbasierte Sprache, die die Struktur und Bedeutung von Webinhalten definiert.

Day -HTML ans CSS

Eigenständige Tags:
In HTML beziehen sich eigenständige Tags auf HTML-Elemente, die kein schließendes Tag erfordern. Diese werden oft auch als selbstschließende Tags oder Void-Elemente bezeichnet.

Beispiel:

<br>
<hr>
<input>

Nach dem Login kopieren

Struktur-Tags:
Tags kommen normalerweise paarweise vor: ein öffnendes Tag und ein schließendes Tag.

Beispiel:

<html>
<head>
<body>

Nach dem Login kopieren

Element:
Elemente sind die Bausteine einer Webseite und repräsentieren die verschiedenen Arten von Inhalten und Strukturen im Dokument.

Komponenten eines HTML-Elements:

Opening Tag: The starting part of the element that defines the type of content that follows.
    Example:<p>, <h1>, <div>, <img>

Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
    Example: This is a paragraph.

Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
   Example: </p>, </h1>, </div>

Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
    Example:>
<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>
<head>
    <title>ILUGC</title>
<style>
.container{
    border:1px solid;
    height:200%;
    width:85%;
    margin:auto;
}
.header h4{
    text-transform: uppercase;
    color:#e22d30;
    border-top:1px solid green;
    width: fit-content;
    padding-top:10px;
}
.header{

    margin:25px;
}
</style>
</head>
<body>
   <div>



<p><strong>Explanation of the HTML Structure:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
        <head>: Contains metadata for the page, including the title and styles.
        <body>:Contains the content visible on the page.

    Inside the <head>:
        The <title> tag gives the webpage its title when viewed in the browser tab.
        The <style> tag contains the internal CSS to style the page.

    Inside the <body>:

        .container:A container div with a class container that holds all the page elements.
            It's styled with a border, height, width, and centered using margin:auto.

        .header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
            The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.

        navbar: This seems to be a placeholder for a navigation bar.

        layout: A section for the main content layout, with two subsections:
            mainLayout: Likely for the main content area.
            sideLayout: Likely for a sidebar or additional content.

        footer: Placeholder for the footer section.

Nach dem Login kopieren

div:
Das Element ist ein Container auf Blockebene, der zum Gruppieren anderer Elemente und zum Anwenden von Stil- oder Layouteigenschaften auf sie verwendet wird.

Klassenauswahl:

Der Klassenselektor wird verwendet, um Elemente auszuwählen und zu formatieren, die ein bestimmtes Klassenattribut haben. Es ist einer der am häufigsten verwendeten Selektoren in CSS. Ein Klassenselektor wird durch einen Punkt (.) gefolgt vom Klassennamen definiert.

Syntax:

.classname {

}

Nach dem Login kopieren

Elementauswahl:

Der Elementselektor (auch als Typselektor bekannt) wird verwendet, um HTML-Elemente basierend auf ihrem Tag-Namen auszuwählen und zu formatieren. Es ermöglicht Ihnen, Stile auf alle Instanzen eines bestimmten HTML-Elementtyps im Dokument anzuwenden.

Syntax:

element {

}

Nach dem Login kopieren

Marge:

Die margin-Eigenschaft in CSS wird verwendet, um Platz außerhalb eines Elements zu schaffen.

Syntax:

element {
  margin: value;
}

Nach dem Login kopieren

Polsterung:

Die padding-Eigenschaft in CSS wird verwendet, um innerhalb eines Elements zwischen dem Inhalt und dem Rahmen Platz zu schaffen.

Syntax:

element {
  padding: value;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTag -HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!