[HTML5+SEO] 標準網頁樣板 doctype (RWD設計、FB標籤、IE、語系、SEO、GOOGLE收錄驗證) 空白網頁


適用於 2017~2019網頁規劃,必備空白樣板,如何開始寫網頁

最基本的空白網頁寫法
 

<!DOCTYPE html>
<html>
<head>
<title>最基本的空白網頁</title>

</head>
<body>

</body>
</html>



自適應RWD、手機裝置移動網頁 
(最新更新日期:2017/07/07)

<!DOCTYPE html>
<html lang="zh-TW">
<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="NOODP">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title>台北網頁設計 金站 (台灣) webgolds.com</title>
<meta name="google-site-verification" content=""><!-- Google驗證網站擁有權 -->

<!-- SEO -->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta itemprop="image" content="webgolds"><!-- Google+ meta tag for image -->

<!--  Meta for OpenGraph --><!-- FB -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_TW">
<meta property="og:site_name" content="" /><!-- 網站名稱 -->
<meta property="og:url" content="http://blog.webgolds.com">
<meta property="og:image" content="" /><!-- 圖示 -->
<!--<meta property="fb:app_id" content="" /> -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- 讓 IE6 IE7 IE8 支援 HTML5 標籤, 偵測瀏覽器是否支援HTML5與CSS3等規格。
如果瀏覽器不支援,Modernizr會使用其他的解決方法來
進行模擬html5shiv:讓 IE6 IE7 IE8 支援 HTML5 標籤的 JavaScript -->


<link rel="icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<!--依據不同裝置選擇載入相關的 css檔案-->
<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 520px)" /><!--手機-->
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 521px) and (max-width: 768px)" /-->
<link href="css/desktop.css" rel="stylesheet" type="text/css" />

</head>

<body>

HELLO WORLD, HTML5


<!-- 載入jQuery -->
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<!--<![endif]-->

<script src="web.js"></script><!-- 常用JS -->
<script>
<!--
$(function(){

});
-->
</script>

</body>
</html>



 

CSS media type

W3C定義了CSS media type屬性,用於判斷各種不同裝置載入。
  • all:是用於所有裝置
  • braille:用於盲文觸覺反饋裝置。
  • embossed:用於分頁盲文印表機。
  • handheld:用於手持設備(通常是小屏幕,有限的帶寬)。
  • print:用於分頁材料,在打印預覽模式下的屏幕上觀看的文件。分頁媒體的格式問題,具體到分頁媒體的信息,請諮詢。
  • projection:用於例如投影機,投影演示。分頁媒體的格式問題,具體到分頁媒體的信息,請諮詢。
  • screen:主要用於彩色電腦屏幕上。
  • speech:用於語音合成器。注:CSS2中也有類似的媒體類型稱為“聽覺”這一目的。聽覺樣式表的詳細信息,請參閱附錄。
  • tty:供媒體使用固定攤位的字符網格(如電傳打字機,終端,或與顯示能力有限的便攜設備)。作者不應使用“TTY”媒體類型的像素單位。
  • tv:用於電視設備(分辨率低,顏色,有限的可滾動屏幕,聲音可用)。
使用css media type 區分不同解析度,分別讀入不同css語法
  • 手機:解析度為0px~520px使用 phone.css
  • 平板電腦:解析度為520px~768px使用 tablet.css
  • 桌上型電腦:其他範圍解析度使用 desktop.css

https://github.com/yahoo/xss-filters

RWD自適應網頁設計CSS參考寫法

讓網站可以透過不同大小的螢幕視窗來改變網頁排版的方式,使得各種裝置的使用者,如電腦、平板、手機、電視都能夠得到最佳的預覽視覺效果。

@charset "utf-8";

img {
  max-width: 100%;
  height: auto!important;
}
@media only screen and (min-width: 769px) {
    h1 {
        color: #000;
        font-size: 36px;
    }
}

@media only screen and (min-width: 521px) and (max-width: 768px) {
    h1 {
        color: #000;
        font-size: 12px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 520px) {
    h1 {
        color: #000;
        font-size: 10px;
    }
}
若瀏覽區域的寬度小於500像素,則下方的CSS描述就會立即被套用
@media screen and (max-width: 500px){
  .class
  {
    background: #ccc;
  }
}
若瀏覽區域的寬度大於800像素,則下方的CSS描述就會立即被套用
@media screen and (min-width: 800px) {
 .class {
 background: #666;
 }
}
若瀏覽區域寬度範圍介於 321px~768px,則下方CSS描述會立即被套用
@media only screen and (min-width: 321px) and (max-width: 768px) {
 .class {
 background: #666;
 }
}
 

格線選項

以下使用 Bootstrap 3 的格線系統是橫跨多種設備運作。
 
  超小螢幕設備 手機(<768px) 小螢幕設備 平板(≥768px) 中螢幕設備 桌面(≥992px) 大螢幕設備 大桌面(≥1200px)
格線行為 總是水平佈局 開始是折疊的,當超過判斷點時回復水平佈局
容器寬度 無(自動) 750px 970px 1170px
類別前綴 .col-xs- .col-sm- .col-md- .col-lg-
column 數 12
column 寬度 自動 ~62px ~81px ~97px
中縫寬度 30px(column 左右邊各 15px)
可巢狀套用
位移(Offsets)
column 排序



HTML 中的META、HEAD標籤要怎麼寫,看這邊即可知道。
GOOGLE、天貓、淘寶、雅虎等站使用。

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 2213
Last updated :2017-10-31