探討HTML和CSS的寫法-前端問答-PHP中文網

首頁

web前端

前端問答

探討HTML和CSS的寫法

PHPz

Apr 25, 2023 am 10:48 AM

HTML和CSS語言是建立現代網站的基石，兩者緊密聯繫，共同作用。在本文中，我們將探討HTML和CSS的寫法，以及如何利用它們來建立漂亮、易於使用的網站。

HTML的寫法

HTML是超文本標記語言的縮寫，它描述了網頁的結構和內容。 HTML使用標記來描繪文字、圖像、連結等元素。以下是一些HTML的基本標籤：

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
</head>
<body>
    <header>
    <!-- 头部内容 -->
    </header>
    <nav>
    <!-- 导航栏内容 -->
    </nav>
    <main>
    <!-- 主体内容 -->
    </main>
    <footer>
    <!-- 底部内容 -->
    </footer>
</body>
</html>

登入後複製

程式碼中的<!DOCTYPE html>是文件類型聲明，它告訴瀏覽器這是一個HTML5文件。 <html>標記定義了文檔的根元素，而<head>和<body>標記則用來定義文檔的頭和主體部分。

在<head>標記中，我們可以加入一些元素，如<title>標記用於顯示網頁的標題。 <body>標記中可以包含頁面的內容，如文字、圖片、表格等。在此基礎上，我們可以新增其他標記來完善頁面。

CSS的寫法

CSS是層疊樣式表的縮寫，它定義了網頁的層次結構和樣式。 CSS將樣式套用到HTML元素。以下是一些CSS的基本語法：

body {
    background-color: #333;
    color: #fff;
}

登入後複製

在這個範例中，我們將樣式套用到<body>元素。 background-color屬性設定了元素的背景顏色，color屬性設定了元素的文字顏色。 CSS樣式可以包含更多屬性，如字體、寬度、高度等。

CSS可以透過多種方式來套用於HTML元素。以下是幾個常見的方法：

內部樣式表：在HTML文件的<head>部分中定義。
外部樣式表：使用<link>標記將一個.CSS檔案連結到HTML文件中。
內嵌樣式：直接在HTML元素中定義樣式。

下面是一個外部樣式表的範例：

/* styles.css */
body {
    background-color: #333;
    color: #fff;
}

h1 {
    font-family: Arial, sans-serif;
    font-size: 32px;
    text-align: center;
}

登入後複製

使用<link>標記將.css檔案連結到HTML文件中：

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站！</h1>
    </header>
    <main>
        <p>这里是主体内容。</p>
    </main>
    <footer>
        <p>版权所有 © 2021</p>
    </footer>
</body>
</html>

登入後複製

在這個例子中，<link>標記指向了styles.css文件，該文件包含了<body> 和<h1>元素的樣式。

如何使用HTML和CSS來建立網站

現在我們已經了解了HTML和CSS的基本語法，以下是一些使用它們來建立漂亮、易於使用的網站的提示：