當前位置:才華齋>設計>網頁設計>

2017年html的超簡程式碼模版

網頁設計 閱讀(4.57K)

千里之行始於足下,萬事都要從第一步開始。寫頁面的第一步是什麼呢?這還用說當然是html中的<head>標籤了。但是<head>標籤中還有很多元素,在開發中不可能全部都涉及到,寫出符合自己實際需要的就可以了。怎麼寫最簡單,還能比較實用,我們就這裡和大家分享一下。

2017年html的超簡程式碼模版
  常用html程式碼

<meta/>:種有很多涉及頁面的原資訊

<title>:用來定義文件的標題

<script>和<link/>:是用來引入js和css檔案的標籤,而<script >也可以在閉合的標籤中直接寫入js程式碼。

這篇文章我們著重介紹幾個常用的<meta/>元素。

1申明編碼:

<meta charset="UTF-8"/>

這個你要寫吧?要申明編碼,不然重新整理後中文就全是亂碼了。

2頁面關鍵詞

<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4,……"/>

比如你的網頁主題是"范冰冰",如果你的關鍵詞只有"范冰冰",那當用戶搜尋"範爺"的時候就無法搜到你的網頁了。

舉個例子:

<meta name="keywords" content="范冰冰,範爺,大黑牛,李晨"/>

如果搜尋這些關鍵詞之後,都會搜到你的網頁。當然如果是百度搜索引擎的話,只能是自然排名,想排第一的話,就給百度錢吧。

3頁面描述:

<meta name="description" content="150 words"/>

網頁的描述,是給搜尋引擎看的,搜尋引擎根據這個描述進行收錄排名,一般是網頁內的關鍵字。

頁面關鍵詞和頁面描述,當然是為了使用者能更快的在偌大的網際網路中找到你,網際網路營銷的課題我們最好也考慮一下,不然怎麼能獲得提升呢?

4移動端設定:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

如果你要寫手機端頁面這個就大有用處了,而且還是必須要寫的!

這些詞都是什麼意思呢

width:應用程式的`寬度和螢幕的寬度是一樣的

height:應用程式的寬度和螢幕的寬度是一樣的

initial-scale:應用程式啟動時候的縮放尺度(1.0表示不縮放)

minimum-scale:應用程式啟動時候的縮放尺度(1.0表示不縮放)

maximum-scale:使用者可以放大到的最大尺度(1.0表示不縮放)

user-scalable:手勢縮放 (no,yes)

  html簡單的模版

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- 如果是pc端頁面,不要寫下面這一行 -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="keywords" content="……" />

<meta name="description" content="……" />

<title>標題</title>

<!-- 下面兩行是引入js檔案和css檔案 -->

<script type="text/javascript" src="……"></script>

<link rel="stylesheet" href="……"/>

</head>

<body>

<!— 在這裡開始寫程式碼吧 —>

</body>

</html>