回上頁 - 網頁HTML+CSS語法

001、HTML網頁語法基礎架構介紹

1、網頁是什麼？

網頁分為前端網頁畫面設計和後端程式開發。網頁畫面都是由網頁文字語法組成，基本架構通常由HTML標籤語法、CSS樣式表美化和JavaScript三個主要部分組成。以下是這些部分的概述和解釋：

1、網頁，就是別人做好的畫面，然後透過Chrome瀏覽器，我們可以開啟別人的網頁畫面

2、網頁是個文字檔案：簡稱【純文字】檔案，然後我們寫上HTML標籤語法，就可以由瀏覽器看畫面。像是<b>是粗體，<h1>是標題，<img>是圖片，通常是成對的標籤。我們之後會下載 sublime軟體 來學著寫網頁語法

3、查看網頁頁面語法：在網頁空白處 --> 按滑鼠右鍵選單 --> 檢查，可以查看到構成網頁的純文字語法

4、網頁的其他檔案是分開的：通常會整理在其他資料夾，像是照片、音樂檔、和其他提供下載的檔案

5、網頁檔案，除了HTML還可以寫入哪些？

美化HTML和畫面的CSS語法
網頁前端程式JavaScript/JQuery，像是畫面上的動畫效果
網頁後端資料庫程式PHP/MySQL，像是帳號密碼這樣的資料

1、打開Google，搜尋Sublime，點入網站，選擇Download，選擇Windows，下載並安裝

2、在桌面新增一個你"姓名"的資料夾

3、將開啟的目錄設定到你的桌面資料夾，File --> Open Folder --> 桌面 --> 你的姓名資料夾

4、寫一段文字內容，並儲存成001.html。一般網頁是使用*.htm和*.html副檔名

5、開啟網頁：點二下你儲存的網頁檔案，就可以透過chrome來查看你做的網頁畫面

6、畫面顯示內容由上而下，由左而右


<b>今天是星期一</b>



<p>這是一個段落</p>



<a href="http://www.google.com.tw">這是一個連結</a>

 

<h1>這是一個標題</h1>
    <p>這是一個段落。</p>
        <img src="圖片.jpg" alt="圖片描述">
            <a href="https://www.example.com">前往示例網站</a>

$(function(){
  $('#btn_h,#btn_f').on('click',function(){
    //alert($("#favorite_btn").attr('data-u'));
    if($(this).attr('data-u') == ''){
        alert('同學您好 , 請先登入教室 , 謝謝！');
        return false;
    }
  });
});

2、下載文字軟體Sublime：

這是一套可以用來書寫各種純文字檔案的軟體，提供方便的程式碼格式化和顯示

1、打開Google，搜尋Sublime，點入網站，選擇Download，選擇Windows，下載並安裝

2、在桌面新增一個你"姓名"的資料夾

3、將開啟的目錄設定到你的桌面資料夾，File --> Open Folder --> 桌面 --> 你的姓名資料夾

4、寫一段文字內容，並儲存成 001.html。一般網頁是使用*.htm和*.html副檔名

5、開啟網頁：點二下你儲存的網頁檔案，就可以透過chrome來查看你做的網頁畫面

6、畫面顯示內容由上而下，由左而右


<b>今天是星期一</b>



<p>這是一個段落</p>



<a href="http://www.google.com.tw">這是一個連結</a>

3、一個網頁語法架構

有成對的<html>、<head>、<body>，和內容中的各種HTML標籤

1、在Sublime中，開啟一個新檔案，File --> New File

2、先儲存：File --> Save，或按Ctrl+S儲存快捷鍵比較快，名稱為 001b.html

3、在內容中寫 <html+Tab鍵或Enter鍵，就會列出預設的HTML架構標籤，如下範例001b.html


範例：001b.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> -->文件顯示的語言，utf-8是國際繁體中文
    <meta name="viewport" content="width=device-width, initial-scale=1"> -->網頁顯示比例設定
    <title></title> -->書籤名稱
</head>
<body>
    ......... -->書寫網頁內容
</body>
</html>

1、大部份HTML標籤都是成對的，範圍代表開始到結束

2、<html> ... </html>：代表這是一個HTML文件，有開始到結束範圍

3、<head> ... </head>：這叫標頭區，用來書寫一些HTML文件設定，有開始到結束範圍

4、<title> ... </title>：文件書籤名稱，可試試如下範例

5、<body> ... </body>：這就是書寫HTML語法的地方，也就是做網頁內容


範例：

<title>元宇村網站</title>

如果網頁標籤都不寫，預設就是在<body> ... </body>標籤內


範例：

<body>
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</body>

1、Ctrl+C：複製

2、Ctrl+V：貼上

3、Ctrl+A：全選

4、Ctrl+X：剪下

5、Ctrl+S：儲存

6、Ctrl+N：開新檔案

7、Ctrl+W：關閉檔案

8、輸入法切換：Shift鍵+Ctrl鍵

9、輸入法-中文和英文切換：Shift鍵

10、輸入法-半形與全形字切換：Shift鍵+Space空白鍵

shape
shape