日 - HTML 和 CSS-css教學-PHP中文網

首頁

web前端

css教學

日 - HTML 和 CSS

Mary-Kate Olsen

Jan 03, 2025 pm 08:54 PM

HTML：
HTML 代表超文本標記語言。
HTML 是用於建立網頁的標準語言。
它使用標籤或元素系統定義網頁的結構。

CSS：

CSS 代表層疊樣式表。
它用於設定 HTML 建立的網頁佈局的樣式和格式。
它控制顏色、字體、間距、定位和響應式設計等內容。
CSS 可讓您將結構（HTML）與設計（樣式）分開，使網站更易於維護且更靈活。

JS：
Js 代表 JavaScript。
它是一種程式語言，用於在網頁瀏覽器中創建動態和互動效果。
HTML 建立頁面並使用 CSS 設計樣式，而 JavaScript 可以與頁面互動並動態修改內容。

HTML：
HTML 是基於文字的語言，它定義了網頁內容的結構和意義。

Day -HTML ans CSS

獨立標籤：
在 HTML 中，獨立標籤是指不需要結束標籤的 HTML 元素。這些通常也稱為自關閉標籤或空元素。

範例：

<br>
<hr>
<input>

登入後複製

結構標籤：
標籤通常成對出現：開始標籤和結束標籤。

範例：

<html>
<head>
<body>

登入後複製

元素：
元素是網頁的建構塊，代表文件中各種類型的內容和結構。

HTML 元素的組成：

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.

登入後複製

div:
該元素是一個區塊級容器，用於將其他元素分組在一起並向它們套用樣式或佈局屬性。

類別選擇器：

類別選擇器用於選擇具有特定類別屬性的元素並為其設定樣式。它是 CSS 中最常用的選擇器之一。類別選擇器由點 (.) 後面跟著類別名稱定義。

文法：