技術標籤：前端學習筆記htmlcss

目錄

1. 使用 text-align 屬性建立視覺平衡
2. 使用 width 屬性調整元素的寬度
3. 使用 height 屬性調整元素的高度
4. 使用 strong 標籤加粗文字
5. 使用 u 標籤給文字新增下劃線
6. 使用 em 標籤強調文字
7. 使用 s 標籤給文字新增刪除線
8. 使用 hr 標籤建立水平線

1.使用 text-align 屬性建立視覺平衡
web 內容大部分都是文字。CSS 裡面的text-align屬性可以控制文字的對齊方式。

text-align: justify;可以讓除最後一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。

text-align: center;

text-align: right;可以讓文字右對齊。

text-align: left;是text-align的預設值，它可以讓文字左對齊。

2.使用 width 屬性調整元素的寬度
可以使用 CSS 裡面的width屬性來指定元素的寬度。屬性值可以是相對單位（比如 em），絕對單位（比如 px），或者包含塊（父元素）寬度的百分比。下面這個例子把圖片的寬度設定為 220px：

img {
  width: 220px;
}

3.使用 height 屬性調整元素的高度
和width屬性類似，你可以使用 CSS 裡面的height屬性來指定元素的高度。下面這個例子把圖片的高度設定為 20px：

img {
  height: 20px;
}

4.使用 strong 標籤加粗文字
術語：Strong => s => 加粗。

你可以使用strong標籤來加粗文字。添加了strong標籤後，瀏覽器會自動給元素應用font-weight:bold;。

5.使用 u 標籤給文字新增下劃線
術語：Underline => u => 下劃線。

你可以使用u標籤來給文字新增下劃線。添加了u標籤後，瀏覽器會自動給元素應用text-decoration: underline;。
注意：錨點預設給文字新增下劃線，如果u標籤的下劃線和頁面的錨點混淆，請避免使用它。

6.使用 em 標籤強調文字

你可以使用em標籤來強調文字。由於瀏覽器會自動給元素應用font-style: italic;，所以文字會顯示為斜體。

7.使用 s 標籤給文字新增刪除線
術語：Strikethrough => s => 刪除線。

你可以用s標籤來給文字新增刪除線，我是刪除線，它代表著這段文字不再有效。添加了s標籤後，瀏覽器會自動給元素應用text-decoration: line-through;。

8.使用 hr 標籤建立水平線
術語：Horizontal Rule => hr => 水平線。

你可以用hr標籤來建立一條寬度撐滿父元素的水平線。它一般用來表示文件主題的改變，在視覺上將文件分隔成幾個部分。
注意
在 HTML 裡，hr是自關閉標籤，所以不需要一個單獨的關閉標籤。