html的問題 / SEO 的問題

20260315，html 選單的問題，感謝寶拉照分享menu的問題，還有練習menu

20260313，Harries 分享 google search console 操作。

20260313，感謝 re:LAB 分享 SEO的第一聖經

20250903，用DW建立html5，竟然會少 viewport，所以縮小時，字也一起縮小。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

SEO的要注意的地方。rankking 分享 SEO基礎觀念。oxxo老師也有說明耶~
<html lang="zh-TW">，感謝小艾說明可以在台灣地區更容易被搜尋。
<title>搜尋引擎顯示的標題</title>，感謝Ranging小編分享。
<meta name="description" content="搜尋引擎標題下方的說明文字">
<meta charset="utf-8"/>，字元編碼，才不會有亂碼。
Canonical Tag，因為網站可能有多個重複的網頁(例如手機版、廣告版等...)
<meta name=”viewport” content=”width=device-width, initial-scale=1”>，行動裝置的體驗更好。
<meta name=”robots” content=”noindex,nofollow”>，"可設定 Robots.txt 或 noindex 語法告知爬蟲，該頁面不希望被檢索／索引"
 

HTML自動更新，感謝正威行銷分享，兩個方法。

JS，function myrefresh()   {   window.location.reload();   }   
        setTimeout('myrefresh()',3000); //指定3秒更新一次

HTML，<meta http-equiv="refresh" content="20">   

HTML/JS/PHP重新導頁，感謝數位行銷讚分享，目前用JS重新導向新網頁。

display示範，感謝YTC分享。感謝PJCHE分享如何置中。

轉址301與302，感謝Welly分享，寫得很詳細，301是永久轉址，302是網頁跳頁。

連結不要顯示底線，網路上都寫text-decoration: none;，但我的就還是有，最後依靠DW的提示才成功，text-decoration-line: none;

介紹前端Flex跟Grid(感謝nicola分享)，也感謝ㄙㄩ分享flex grid用來排版，不是用position，之後也有flex詳細說明，還有青蛙小遊戲來練習flex。

html的<!doctype html>前面，不能有任何程式碼，感謝飛肯老師解釋，會影響CSS。會導致某中心電子豹2023年的table竟然不聽話(有可能不能成為html5)。但真的奇怪，我並沒有在table下CSS，雖然有撐高25，但明顯的是有使用到某個 class (例如 .redWord)。這樣刪掉的話，就可以正常使用CSS。

ol清單樣式自己設定，感謝豹告分享。ol li {  list-style-type: "好飽好滿足--" }

點選選單的時候，有預設值給人選。(感謝仲佑的分享HTML有5個好用的功能)，另外上傳檔案可以只顯示pdf檔(雖然下面有選項可以選"所有檔案")。

刪除線(兩個)，<s></s>、<del></del>

DreamWeaver html尋找與取代

250918，後來發現 sublime 與其他 IDE 都無法正確讀取 BIG5，幸好sublime有套件可以安裝。安裝在 \data\packages 裡面。 

有個資料夾裡面的檔案，要全部更換某一個區塊，用DW竟然會出錯，原因是code太多了@@所以導致貼上的時候會被切斷，所以連帶的更新的網頁全都毀了@@

改用VSCODE(貼上正常)，跑很久沒有動靜。單獨更新一個網頁試試看，竟然說找不到@@

以前都是用notepad++修改 XOOPS，現在來試試看。結果比DW貼上還少@@從DW複製也是。因為她的尋找位置只給一行。

最後Sublime可以完成我要的任務耶@@之前奇哥說要我試試看這個，我說有VSCODE就OK了，現在改觀了^^但這邊要注意的是，SL貼上是不正常的，需要用另外用其他軟體複製，貼上即可。

html 轉址 相關問題

• 這個OK，用JS轉址，感謝vivian
  <script>window.location.href = 'https://www.ccc.ooo';</script>
• 
  
• 這個危險，CMS的可能會進不去修改程式碼 
  轉址(感謝邱資翔分享)：<meta http-equiv="refresh" content="0;url=https://google.com" />
• 不要有快取(感謝stackOverflow)，裡面有推荐是使用 <meta http-equiv="cache-control" content="no-cache" />
  

  <meta http-equiv="expires" content="0" />

• 
  

跟著網站做~梅問題教學網(文字斷行)

 感謝梅老師的分享，之前有上過他的課，很棒~~

這邊是記錄一些平常也有用的技巧~~

CSS、LESS的問題

 某天看到"蚵蚵攻城記系列 第 11 篇"裡面提到CSS可以使用變數，想說測試一下，不能用@@他這邊是不想要修改html版型，一個DIV一個class，直接修改CSS。以前學的是一個DIV附加很多class。

感謝OXXO分享用LESS寫CSS，文中提到還是乖乖使用CSS???。再查，也是OXXO深入理解CSS，就有寫到如何使用變數。

字與字之間的寬度，感謝Michael楊分享，letter-space: 2px;

<hr>想要變更顏色：感謝stackOverflow分享，要把它當作DIV處理。

未完成~跟著ithome做~大二萌新的學習紀錄系列

來看看資工的同學都在學甚麼?!(VSC為主)有說明到網頁排版的重點，讚。

DAY7重看一次，頭痛@@

DAY7，用Flex屬性控制Grid。Grid也不用畫線，直接給寬高也可以。

DAY6，Grid說明。先用線來切割大小(第一次看到)，直接看範例。

DAY5，Flex說明。align-items: stretch，可以讓DIV一樣高。

DAY4，position介紹，上層是relative，這層才可以調整位置。sticky跟fixed很像，但sticky是可以滾動，滾動到最上面時就會停下來，適合當上方選單。

DAY3，推薦開啟VSC的Emmet，方便好寫CODE。

DAY2，用position排版，會隨著網頁縮放改變位置。應該要用Flex、Grid排版。

DAY1，說明要用的工具，vscode、xampp、virtualbox、ubuntu、python。

網頁 字型的問題

印象中字型都要付費購買，但很奇怪的是，網路上有免費下載。雖然沒有證據字型會導致中毒@@但是安裝在C槽，所以...

感謝曼努分享字體選購的指南。在想說華康怎麼不出簡單一點的方案，購買後讓某個網域的網站都可以顯示使用。

感謝WFU分享如何安裝字型(不是像我想的那樣簡單)也有說明到個人電腦可以顯示的字型，不代表可以放在網站上顯示(要錢)

outlook寄html信，將通訊錄的人抓到EXCEL

 話說用瀏覽器複製貼上某個網頁，寄給別人看時，被回覆說：圖片沒有修改@@

通常我都是做好網頁，再貼上outlook寄給他人，所以很確定網頁是已經更新圖片(且看到圖片是正確的，網頁的部分)。這時去寄件備份一看，哇，信件中還真的是舊的圖片。

原因應該是原先寄了一份舊的網頁，包含舊的圖片，後來客倌說要換新的圖片，我將圖片的檔名取一樣。所以導致outlook不理會新的圖片，直接使用舊的圖片@@

去刪除chrome、EDGE的紀錄，還是無效(找不到OUTLOOK的瀏覽紀錄)，最後想到兩個步驟。

一個是新的圖片檔名更換，就可以。另一個就直接在信件中，對著舊圖片→右鍵，更換圖片即可。

outlook的通訊錄複製到EXCEL中

1. 先點選"我的聯絡人"
2. 目前檢視改成清單
3. 在名稱那邊按右鍵→檢視設定
4. 第一個"欄"→下拉選項 "電子郵件欄位"，將電子郵件新增到右邊。就可以複製看看囉

網頁版型處理，搭配JQuery

 話說，舊型網站沒有用資料庫，完全都是手工打造的，當要移動分類時@@

先將版型規劃一下，最上面是header(共有十個總選項，當在第一個選項時，第一個選項是紅色顏色，其他都是藍色@@)

左邊選單。(進去每個總選項，左邊又有大概十幾個分類，幸好這裡沒有顏色區分)

右邊選單。(點選左邊選單後，右邊又有十幾個分類，真的快昏倒了@@)

網頁內容更改後，沒有顯示更新的內容(瀏覽器cache的問題)

這有兩個方向，一個是使用者那邊瀏覽器會記錄，所以使用者只要按 ctrl + F5，就可以看到新的內容了。

另一個方向是在程式碼做處理，感謝散佈在海洋中的碼農分享html的作法，將下面的程式放在<head>裡面。

<meta http-equiv="EXPIRES" content="0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="EXPIRES" content="Mon, 20 Jul 1990 11:12:01 GMT">

感謝混水摸魚分享 js 與 css的作法。js、css後面加上日期

<script type="text/javascript" src="myjs.js?ver=201711200201"></script>
<link type="text/css" rel='stylesheet' href='styles.css?ver=201711200201' >