HTML基礎標籤

<html>

定義HTML檔案的根元素。

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- 頁面內容 -->
  </body>
</html>

解釋：<html>標籤包含了整個HTML檔案的內容，它是所有其他標籤的父元素。

<head>

定義HTML檔案的頭部，包含了一些後設資料和參照的外部資源。

<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

解釋：<head>標籤用於定義檔案的頭部，其中可以包含<title>標籤定義頁面標題，<link>標籤參照外部樣式表，<script>標籤參照外部JavaScript檔案等。

<body>

定義HTML檔案的主體內容。

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Image">
</body>

解釋：<body>標籤用於定義檔案的主體內容，其中可以包含各種其他標籤，如標題標籤<h1>、段落標籤<p>和影象標籤<img>等。

<h1>到<h6>

定義標題，從大到小依次表示不同級別的標題。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

解釋：<h1>到<h6>標籤用於定義標題，其中<h1>表示最高階別的標題，<h6>表示最低階別的標題。

<p>

定義段落。

<p>This is a paragraph.</p>

解釋：<p>標籤用於定義段落，其中的文字會自動換行。

<a>

定義超連結。

<a href="https://www.example.com">Visit Example</a>

解釋：<a>標籤用於定義超連結，其中的href屬性指定連結的目標URL。

<img>

定義影象。

<img src="image.jpg" alt="Image">

解釋：<img>標籤用於定義影象，其中的src屬性指定影象的URL，alt屬性用於指定影象的替代文字。

<ul>和<li>

定義無序列表。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

解釋：<ul>標籤用於定義無序列表，其中的每個列表項使用<li>標籤表示。

<ol>和<li>

定義有序列表。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

解釋：<ol>標籤用於定義有序列表，其中的每個列表項使用<li>標籤表示。

<table>、<tr>和<td>

定義表格。

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

解釋：<table>標籤用於定義表格，其中的<tr>標籤定義表格的行，<td>標籤定義表格的單元格。

這些是HTML的一些基礎標籤及其用法的詳細介紹，每個標籤都有不同的功能和用途，可以根據需要選擇使用。以上是一些簡單的範例，你可以根據自己的需求進行修改和擴充套件。

CSS中的基礎樣式

CSS（層疊樣式表）是一種用於描述網頁上元素樣式的語言。下面是一些常見的基礎樣式及其程式碼範例：

字型樣式

- font-family：設定字型系列。

   css
   p {
     font-family: Arial, sans-serif;
   }

這將使 <p> 元素中的文字使用 Arial 字型，如果 Arial 不可用，則使用 sans-serif 字型。

- font-size：設定字型大小。

   h1 {
     font-size: 24px;
   }

這將使 <h1> 元素中的文字大小為 24 畫素。

- font-weight：設定字型粗細。

   strong {
     font-weight: bold;
   }

這將使 <strong> 元素中的文字加粗。

文字樣式

- color：設定文字顏色。

p {
 color: blue;
}

這將使 <p> 元素中的文字顏色為藍色。

- text-align：設定文字對齊方式。

h1 {
 text-align: center;
}

這將使 <h1> 元素中的文字居中對齊。

- text-decoration：設定文字裝飾效果。

a {
 text-decoration: underline;
}

這將使 <a> 元素中的文字新增下劃線。

背景樣式

- background-color：設定背景顏色。

body {
 background-color: #f2f2f2;
}

這將使頁面的背景顏色為淺灰色。

- background-image：設定背景圖片。

div {
 background-image: url("image.jpg");
}

這將使 <div> 元素的背景使用名為 "image.jpg" 的圖片。

- background-size：設定背景圖片大小。

div {
 background-size: cover;
}

這將使 <div> 元素的背景圖片自適應填充整個元素。

邊框樣式

- border：設定邊框樣式。

div {
 border: 1px solid black;
}

這將使 <div> 元素的邊框為 1 畫素寬的黑色實線。

- border-radius：設定邊框圓角。

   button {
     border-radius: 5px;
   }

這將使 <button> 元素的邊框圓角為 5 畫素。

- border-color：設定邊框顏色。

   input {
     border-color: red;
   }

這將使 <input> 元素的邊框顏色為紅色。

盒模型樣式

- width：設定元素的寬度。

.container {
 width: 300px;
}

這將使類名為 "container" 的元素寬度為 300 畫素。

- height：設定元素的高度。

.box {
 height: 200px;
}

這將使類名為 "box" 的元素高度為 200 畫素。

- padding：設定元素的內邊距。

.content {
 padding: 10px;
}

這將使類名為 "content" 的元素內邊距為 10 畫素。

- margin：設定元素的外邊距。

.section {
 margin: 20px;
}

這將使類名為 "section" 的元素外邊距為 20 畫素。

定位樣式

- position：設定元素的定位方式。

.box {
 position: relative;
}

這將使類名為 "box" 的元素相對於其正常位置進行定位。

- top、right、bottom、left：設定元素相對於其定位父元素的偏移量。

.box {
 position: absolute;
 top: 10px;
 left: 20px;
}

這將使類名為 "box" 的元素相對於其定位父元素向下偏移 10 畫素，向右偏移 20 畫素。

顯示樣式

- display：設定元素的顯示方式。

.box {
 display: inline-block;
}

這將使類名為 "box" 的元素以內聯塊級元素的方式顯示。

- visibility：設定元素的可見性。

.hidden {
 visibility: hidden;
}

這將使類名為 "hidden" 的元素在頁面上不可見，但仍佔據空間。

【技術積累】HTML+CSS+JavaScript中的基礎知識【一】