前端基礎學習1 | Web、Html、CSS

十一的蛋炒饭發表於2024-03-05

前端基礎學習1 | Web、Html、CSS

1、Web 基礎知識

Web (www World Wide Web),全球廣域網,也稱全球資訊網,能夠透過瀏覽器訪問的網站

Web網站的工作流程

image-20240305041313234

Web標準,也稱為網頁標準,由一些列的標準組成,大部分由W3C(World Wide Web Consortium,全球資訊網聯盟)負責制定。

Web標準由三個部分組成:

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

2、HTML 基礎知識

2.1 什麼是HTML

HTML(Hyper Text Markup Language):超文字標記語言。

  • 超文字,指超越文字限制,比普通文字更強大,除了文字資訊外還可以定義圖片、音訊和影片等內容。
  • 標記語言,指由標籤構成的語言
    • HTML標籤都是預先定義好的,例如:<a> 表示超連結,<img> 展示圖片。
    • HTML程式碼可以直接在瀏覽器中執行,HTML標籤由瀏覽器解析。

HTML檔案字尾都為.html

HTML程式碼的特點:

  • HTML標籤不區分大小寫(一般都用全小寫)
  • HTML標籤屬性值單雙引號都可以
  • HTML語法比較鬆散
  • HTML無法直接識別多個空格,通常用&nbsp; 這一連串的符號表示空格。

HTML程式碼註釋方式:<!--註釋內容-->

標準的HTML程式碼格式:

<!-- 宣告文件型別為 HTML -->
<! DOCTYPE html>
<html lang="en">
    <head>
        <!-- 設定該部分內容字符集為 UTF-8,以便相容中文 -->
        <meta charset="UTF-8">
        <!-- 設定瀏覽器相容性-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 網站標題 -->
        <title>網頁標題</title>
    </head>
</html>

2.2 HTML常用標籤

相關連結:HTML 標籤參考手冊 (w3school.com.cn)

  1. 圖片標籤:<img src="" width="" height=""></img>
  2. 標題標籤:<h1> 、<h2> ... <h6>
  3. 水平線標籤:<hr>
  4. 行內標籤:<span>
  5. 超連結標籤(跳轉網頁)<a href="跳轉連結" target="跳轉方式">顯示文字</a>
    • 跳轉方式主要有兩種:__self 在當前頁面跳轉(預設值),_blank重新開啟一個頁面並跳轉。
  6. 影片標籤:<video>
    • src :規定影片的 url
    • controls:顯示播放控制元件
    • width:播放器的寬度
    • height:播放器的高度
  7. 音訊標籤:<audio>
    • src:規定音訊的 url
    • controls:顯示播放控制元件
  8. 段落標籤 <p>
  9. 文字加粗標籤:<b> / <strong>
  10. 換行標籤:<br>
  11. 佈局標籤:<div><span>
    • <div>又稱作空標籤,其特點有:
      • 獨佔整行,一行只顯示一個
      • 寬度預設是父元素的寬度,高度預設由內容撐開
      • 可設定寬高(width和height)
    • <span> 即行內標籤,其特點有:
      • 不佔行,一行可顯示多個
      • 寬度和高度預設由內容撐開
      • 不可以設定寬高(width和height)
  12. 表格標籤: <table>
標籤 描述 屬性/備註
<table> 定義表格整體,可包括多個<tr> border: 規定表格邊框的寬度。width: 規定表格的寬度。cellspacing:規定單元之間的空間。
<tr> 表格的行,可包括多個<td>
<td> 普通單元格,可包括內容 若是表頭單元格,可替換為 <th>
  1. 表單標籤:<form>(最重要的)

    • 在網頁中表單標籤主要負責資料採集,比如註冊、登入等。

    • 常用表單項標籤

      • <input>:定義表單項,透過 type 屬性控制輸入形式
      • <select>: 定義下拉選單
      • <textarea>: 定義文字域
    • 屬性

      • action:規定表單提交的位置
      • method:規定用於傳送表單資料的方式,GET(預設)、POST等
    • 登入案例

      <form action="user/login" method="post">
          使用者名稱: <input type="text" name="username">
          密碼: <input type="password" name="password">
          <input type="submit" value="登入">
      </form>
      
    • 提交表單時 GET 和 POST的區別:

      • GET:在位址列後拼接表單資料,如:?username="uni"&password="123", 位址列長度有限制,是method屬性的預設值
      • POST:在訊息體(請求體)中傳遞資訊,引數大小無限制。

    image-20240305055821941

2.3 HTML 標籤屬性值

HTML每個標籤都可以設定多個屬性值,例如之前的<img>標籤可設定src、width和height。

除此之外,最重要的是每個HTML標籤都可以設定 idname和``class` ,這將用來區分不同的HTML標籤。

後面的``CSSJavaScript在選擇HTML標籤時可透過id 選取一個標籤,或者透過class` 選取一類標籤。

3、CSS 基礎知識

CSS(Cascading Style Sheet):層疊樣式表,用於控制頁面的樣式(表現)。

相關連結:CSS 參考手冊 (w3school.com.cn)

3.1 如何使用 CSS

CSS引入方式:

  1. 行內樣式:寫在標籤的 style屬性中(不推薦)。

    <h1 style="font-size:1.5em;"></h1>
    
  2. 內嵌樣式:寫在 style標籤中(可寫在頁面任何位置,但通常寫在head標籤中)。

    <style>
        h1{
            font-size: 1.5em;
        }
    </style>
    
  3. 外聯樣式:寫在一個單獨的.css 檔案中(需要透過 link標籤在HTML網頁中引入)。

    /* style.css */
    h1{
    	font-size: 1.5em
    }
    
    <!-- index.html -->
    <head>
        <link href="css/style.css"></link>
    </head>
    

3.2 CSS設定顏色

HTML大部分標籤支援CSS透過 color 屬性的值來設定標籤元素的顏色,通常由三個數字表示,分別表示紅,黃,藍顏色的深度,rgb(0,0,0) 表示黑色,rgb(255,255,255)表示白色,數字最大為255,為方便設定,可直接用六位的16進位制數表示,比如#0AFF1C就表示為rgb(10,255,28),設定出來的顏色都是綠色:

第一種方式(綠色)

第二種方式(還是綠色)

3.3 CSS選擇器

CSS所設定的樣式都是透過HTML標籤元素來呈現的。

CSS選擇器指用來選取所要設定樣式的元素(標籤)。

  1. 元素選擇器 h1{}
  2. id選擇器 #username {}
  3. 類選擇器 .list{}

三個選擇器的優先順序順序:id選擇器 > 類選擇器 > 元素選擇器

上述優先順序的意思是,當同一個標籤被設定重複屬性的情況下,按順序來遵循唯一的樣式。

3.4 CSS常用屬性

相關連結:CSS 屬性大全 (w3school.com.cn)

1. color: #FFFFFF; 定義文字顏色,例如#FFFFFF表示白色

2. text-decoration: underline; 修飾文字,例如underline表示新增下劃線

3. line-height: 20px;  設定行高為20個畫素點

4. text-indent: 2em;   通常用於p標籤,表示行內容的縮排為2個字元

5. text-align: left;   規定標籤中的文字水平對其方式為左對齊

6. margin: 0 auto;     讓標籤外邊距兩邊各佔一半,正常情況下,值有四個,分別是上 右 下 左

3.5 CSS 盒子模型

CSS對於每一個塊標籤都有盒子佈局的概念。

盒子:頁面中所有的標籤都可以看成是一個盒子,由盒子將頁面中的元素包含在一個矩形區域內,透過盒子的視角更方便的進行頁面佈局。

盒子模型從內到外組成有:

  • content:內容區域
  • padding:內邊距區域
  • border:邊框區域
  • margin:外邊距區域

image-20240305052733485

參考資料

https://www.bilibili.com/video/BV1m84y1w7Tb

相關文章