HTML和CSS

JenckMin發表於2024-04-04
HTMLCSS

Web標準也稱網頁標準，由一系列的標準組成，大部分有W3C（World Wide Web Consortium，全球資訊網聯盟）負責制定。

三個組成部分：

  • HTML：負責網頁的結構（頁面元素和內容）。
  • CSS：負責網頁的表現（頁面元素的外觀、位置等頁面樣式，如：顏色、大小等）。
  • JavaScript：負責網頁的行為（互動效果）。

什麼是HTML、CSS？

HTML（Hyper Text Markup Language）：超文字標記語言。

超文字：超越了文字的限制，比普通文字更強大。除了文字資訊，還可以定義圖片、音訊、影片等內容。

CSS（Cascading Style Sheet）：層疊樣式表，用於控制頁面的樣式（表現）。

使用者手冊W3school

標題排版

1.標題標籤

  • 標籤：<h1>...</h1>(h1 -> h6 重要程度依次降低)
  • 注意：HTML標籤都是預定義好的，不能自己隨意定義。

2.水平線標籤<hr>

3.圖片標籤<img src="..." height="...">

  • 絕對路徑：絕對磁碟路徑(D:/xxxx)、絕對網路路徑(https://xxxx)
  • 相對路徑：從當前檔案開始查詢。(./：當前目錄，../：上級目錄)

標題樣式

1.CSS引入方式

  • 行內樣式：<h1 style= "...">
  • 內嵌樣式：<style>...</style>
  • 外聯樣式：xxx.css <link href="...">

2.顏色表示

  • 關鍵字：red、green、blue
  • rgb表示法：rgb(255,0,0)、rgb(134,100,89)
  • 十六進位制：#ff0000、#cccccc、#ccc

3.顏色屬性

color：設定文字內容的顏色

4.<span>標籤

  • <span>是一個在開發網頁時大量會用到的沒有意義的佈局標籤
  • 特點：一行可以顯示多個（組合行內元素），寬度和高度預設由內容撐開

5.CSS選擇器

  • 元素選擇器：標籤名
  • 類選擇器：.class屬性值
  • id選擇器：#id屬性值
  • 優先順序：id選擇器 > 類選擇器 > 元素選擇器
  • 注意：選擇器後面的 { } 裡面的語句應該帶上分號

6.CSS屬性

  • color：設定文字的顏色
  • font-size：字型大小（注意：記得加px）

超連結

1.超連結

標籤：<a>

屬性：

​ href：指定資源訪問的url

​ target：指定在何處開啟資源連結

​ _self：預設值，在當前頁面開啟

​ _blank：在空白頁面開啟

2.CSS屬性

text-decoration：規定新增到文字修飾，none表示定義標準的文字。

color：定義文字的顏色

正文排版

1.音訊、影片標籤

<audio> <video>

2.換行、段落標籤

換行：<br>；段落：<p>

3.文字加粗標籤

<b>(僅是加粗) <strong>(含有強調的意思)

4.CSS樣式

line-height：設定行高

text-indent：定義第一個行內容的縮排

text-align：規定元素中的文字的水平對齊方式

5.注意

在HTML中無論輸入多少個空格，只會顯示一個。可以使用空格佔位符：&nbsp;

頁面佈局

1.CSS盒子模型

組合：內容（content）、內邊框（padding）、邊框（border）、外邊框（margin）

2.CSS屬性

width：設定寬度

height：設定高度

border：設定邊框的屬性，如：1px solid #000;

padding：內邊框

margin：外邊框

注意：如果只需要設定某一個方位的邊框、內邊距、外邊距，可以在屬性名後加上 -位置，如：padding-top、padding-left、padding-right ...

表格標籤

標籤 描述 屬性/備註
<table> 定義表格整體，可以包裹多個<tr> border：規定表格邊框的寬度
width：規定表格的寬度
cellspacing：規定單元之間的內容
<tr> 表格的行，可以包裹多個<td> 表格有多少行就有多少個<tr>
<td> 表格單元格（普通），可以包裹內容 如果是表頭單元格，可以替換為<th>
<th> 表示表頭單元格，具有加粗居中的效果 只能用於表頭第一行

表單標籤

1.表單標籤：<form>

2.表單屬性：

action：表單資料提交的url地址

method：表單提交方式

  • get：表單資料拼接在url後面，?username=java，大小有限制
  • post：表單資料在請求體中攜帶，大小沒有限制

注意：表單項必須有name屬性才可以提交

表單項標籤

  • <input>的type屬性：text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
  • <select>定義下拉選單
  • <textarea>定義文字域

相關文章