Try   HackMD

html/css 靜態網頁設計

html 介紹

html全名叫超文本標記語言，他是一種標記式語言而不是一種程式語言，其中超文本的概念是他能夠連結到其他網頁，而標記式語言則是他使用標記來顯示文字、圖片等內容

檔案的副檔名為.html

css 介紹

css是用來裝飾html所呈現的網站，透過CSS，我們可以設定頁面的佈局，調整元素的外觀和樣式，以及定義適用於整個網站的全域樣式。

CSS的應用方式多種多樣。我們可以直接將樣式添加到單個頁面元素上，這種方式適用於需要針對特定元素進行樣式調整的情況。另外，我們也可以將樣式集中化地嵌入到網頁的頭部部分，或者通過鏈接或導入方式引入外部樣式表文件。

檔案的副檔名為.css

HTML元素

首先，先利用html 輸出一行hello world

<p>Hello World!</p>

一個html標籤包含起始標籤、結束標籤、內容

  1. 起始標籤：<p>利用一對<>大小括號來聲明所指定的元素從這裡開始
  2. 結束標籤：</p>利用一對</>大小括號夾著一個斜線來聲明所指定的元素從這裡結束
  3. 內容：Hello World!由起始標籤和結束標籤所包含的部分就是內容
  4. 標籤內還可以有屬性<img src="圖片來源" alt="文字" />。屬性透過空格分隔
  5. 內容也可以是一個標籤<p><strong>大寫</strong></p>
  6. 有些元素沒有內容可以直接在起始標籤內關閉<br/>

巢狀結構

<p><strong>大寫</strong></p>

這就是一個巢狀結構的範例，父元素<p>子元素包裹著<strong>，而父元素能夠引響子元素

html 基本程式碼架構

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h1>Hello World!</h1>  
  </body>
</html>
  1. <!DOCTYPE html> — 他是在告訴瀏覽器檔案的類型
  2. <html> 元素：他是html的根元素，內部包含了所有html標籤。lang="zh-Hant-TW"則是他所包含的屬性用來宣告這個網頁是用html寫的
  3. <head> 元素：裡面放的是不會顯示於網頁瀏覽者眼前的網頁設定。
  4. <body> 元素：會包括所有要展示的html標籤
  5. <meta charset="utf-8"> 宣告文件使用 utf-8 這種字元編碼，
  6. <title></title>設置網頁標題。
  7. <h1>Hello World!</h1> 網站上所要展示的文字

註釋

<!--註釋-->

沒錯，你已經學完了所有的html知識，你現在只要想要用到什麼功能，打開google搜索一下你就會寫html了

常用標籤

標題

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Hello World!

超連結

<a href="網址">超連結文字</a>

超連結文字

圖片

<img src="圖片地址" alt="沒有辦法顯示圖片的替代文字">
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

影片

<video src="影片地址"</video>

無序清單

<ul>
    <li>one</li>
    <li>two</li>
</ul>

效果:

  • one
  • two

有序清單

<ol>
    <li>one</li>
    <li>two</li>
</ol>

效果:

  1. one
  2. two

表格

<tr>橫列
<td>直行
<th>標題

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
  </tr>
</table>
1 2 3 4
a b c d
e f g h

段落

<p>

行內容器

<span>

區塊容器

<div>

換行

<br/>

文字樣式

<strong> - 加粗標籤，表示強調文本
<em> - 強調標籤，表示斜體文本
<b> - 粗體標籤
<i> - 斜體標籤
<u> - 底線標籤
<sub> - 下標標籤
<sup> - 上標標籤
<del> - 刪除線標籤，表示刪除的文本
<ins> - 插入線標籤，表示插入的文本
<mark> - 標記標籤，用於突出顯示文本
<small> - 小字體標籤
<code> - 程式碼內容元素

- 加粗標籤，表示強調文本
- 強調標籤，表示斜體文本
- 粗體標籤
- 斜體標籤
- 底線標籤
- 下標標籤
- 上標標籤
- 刪除線標籤，表示刪除的文本
- 插入線標籤，表示插入的文本
- 標記標籤，用於突出顯示文本
- 小字體標籤
- 程式碼內容元素

表單

<form>

語意結構元素

<header> - 頁眉標籤，通常用於介紹內容的開頭或者導航部分
<footer> - 頁腳標籤，通常包含內容的版權信息、聯絡方式等
<nav> - 導航標籤，用於定義導航連結的部分
<article> - 文章標籤，用於包裹獨立的、完整的、可獨立分配的內容
<section> - 區域標籤，用於將文檔分成獨立的部分，通常具有相關性
<aside> - 側欄標籤，用於包含與主內容無直接關聯但可提供輔助信息的內容
<main> - 主要內容標籤，用於標記文檔的主要內容部分
<figure> - 圖片與說明標籤，通常用於包裹圖片及其相關的說明內容

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

他們的效果都是一樣的只差在搜尋引擎在閱讀你的網頁時，能否看懂你的網頁內容

選擇器

元素樣式

p {
  color: white;
}

class


.class1 {
  color: black;
}
.class2 {
  color: black;
}

id

#identity {
  color: gray;
}

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

只能套用在一個元素上

使用:

<p id="identity" class="class1 class2">

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

id的優先級大於class大於元素樣式
後面的class優先級大於前面的class

延伸學習

SEO

搜索引擎優化，是一系列的策略和技術，旨在提高網站在搜索引擎結果頁面上的排名。這包括優化網站內容、改進網站結構、建立高質量的鏈接等。

javascript

一種高級的、解釋性的程式設計語言，常用於網頁開發中。它可以使網頁動態化，實現諸如交互式地圖、動畫效果、表單驗證等功能。

後端開發

與前端開發相對應，後端開發涉及建立和維護網站的伺服器端邏輯、數據庫管理和應用程式接口等工作。

node.js

一個基於Chrome V8引擎的JavaScript運行時，用於構建快速和可擴展的網絡應用。Node.js允許開發者使用JavaScript在伺服器端編寫應用程式。

rwd

響應式網頁設計，是一種設計方法，使網站能夠適應不同設備和螢幕尺寸，提供最佳的瀏覽體驗。通過使用彈性佈局、彈性圖片和媒體查詢等技術來實現。

前端框架

前端框架是一套預先撰寫好的程式碼，提供了一個結構和工具，幫助開發人員更迅速地建立交互式的網頁應用。它們通常包含了UI元件、路由管理、狀態管理等功能。

Vue

Vue.js是一個流行的前端JavaScript框架，用於建立使用者介面和單頁應用。它的核心是一個易於理解和學習的視圖模型，以及一個靈活的生態系統，使得開發者可以快速構建動態的、高效的網頁應用。

React

React是由Facebook開發的JavaScript函式庫，用於構建用戶界面。它以組件化的方式工作，允許開發者將用戶界面拆分為獨立的可重用組件，並通過虛擬DOM實現高效的更新。

Sass/SCSS

推薦學習資源

https://developer.mozilla.org/zh-TW/
https://www.w3schools.com/

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

網站設計可以說是網路上免費資源最多的程式類別
可以多加善用，並培養翻閱文檔的習慣

Last changed by 
 
alan1113
0
118
Published on HackMD