HTML+CSS3（二）——HTML 初識

原創 C-A-L-D 2020-02-22 08:26

目錄：

HTML+CSS3（一）——認識瀏覽器

HTML+CSS3（二）——HTML 初識

HTML+CSS3（三）——HTML基本標籤

HTML+CSS3（四）——表單pattern正則屬性

HTML+CSS3（五）——CSS基礎

HTML+CSS3（六）——行內元素和塊級元素

HTML+CSS3（七）——display屬性（前面文章已講過，這裏轉載一篇）

HTML+CSS3（八）——CSS權重

HTML+CSS3（九）——CSS高級技巧

HTML+CSS3（十）——CSS3新特性之過渡

HTML+CSS3（十）——CSS3新特性之2D變形和3D變形

HTML+CSS3（十）——CSS3新特性之動畫

HTML+CSS3（十 一）——案例

HTML+CSS3（十二）——CSS常見問題

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

超文本就是指圖片，文字，視頻，音頻......

模板： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("images/timg.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
</body>
</html>

       頭部標籤都放在<head></head>之間，包括：

　　<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
　　<base>：爲頁面上的所有鏈接規標題欄顯示的內容定默認地址或默認目標。
　　　　　　 base會對Html文檔中所有URL產生作用，慎用！
　　<meta>： 提供有關頁面的基本信息
　　<link>： 定義文檔與外部資源的關係。

文檔類型<!DOCTYPE>

<!DOCTYPE html> 

注意： 一些老網站可能用的還是老版本的文檔類型比如 XHTML之類的，但是我們學的是HTML5,而且HTML5的文檔類型兼容很好(向下兼容的原則)，所以大家放心的使用HTML5的文檔類型就好了。

網頁語言<html lang="en">

<html lang="en">

設置當前網頁語言類型爲英文。這裏的lang="en"可以刪除，如果不刪除的，用谷歌之類打開，它會認爲是英文的，會自動給翻譯（如果設置了自動翻譯的話）

base 標籤<base target="_blank"/>

base 可以設置整體鏈接的打開狀態

base 寫到 <head> </head> 之間

把當前頁面所有的鏈接 都默認添加 target="_blank"

字符集<meta charset="UTF-8">

<meta charset="UTF-8" />

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。

gb2312 簡單中文 包括6763個漢字

BIG5 繁體中文 港澳臺等用

GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312

UTF-8則包含全世界所有國家需要用到的字符

(記住一點，以後我們統統使用UTF-8 字符集, 這樣就避免出現字符集不統一而引起亂碼的情況了。)

頁面響應式設置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content屬性值 :

     width:可視區域的寬度，值可爲數字或關鍵詞device-width

     height:同width

     intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放

     maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，

     maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。

     user-scalable:是否可對頁面進行縮放，no 禁止縮放

meta標籤

<meta http-equiv="參數" content="參數變量值">

META包括了2個重要的屬性，http-equlv(把content屬性關聯到http頭部)和name(把content屬性關聯到名稱)。
合乎W3C規範的源代碼必須包含這2個基本屬性。其中頁面標題信息往往是固定的，不同網頁變化不大，只要符合W3C規範即可;seo重點在於name屬性的正確參數配置。

<meta http-equiv="X-UA-Compatible" content="ie=edge">

網站優化三大標籤

 

網頁title 標題

title具有不可替代性，是我們的內頁第一個重要標籤，是搜索引擎瞭解網頁的入口，和對網頁主題歸屬的最佳判斷點。

建議：

首頁標題：網站名（產品名）- 網站的介紹

例如：

京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物！

小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站

Description 網站說明

對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量採用網頁的MATA標籤中描述部分作爲搜索結果的“內容摘要”。 就是簡要說明我們網站的主要做什麼的。 我們提倡，Description作爲網站的總體業務和主題概括，多采用“我們是…”“我們提供…”“×××網作爲…”“電話：010…”之類語句。

京東網：

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />

注意點：

  1. 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引用戶點擊。

  2. 同樣遵循簡短原則，字符數含空格在內不要超過 120 個漢字。

  3. 補充在 title 和 keywords 中未能充分表述的說明.

  4. 用英文逗號 關鍵詞1,關鍵詞2

<meta name="description" content="小米商城直營小米公司旗下所有產品，囊括小米手機系列小米MIX、小米Note 2，紅米手機系列紅米Note 4、紅米4，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售後支持。" />

Keywords 關鍵字

Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多 少許。

京東網：

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東" />

小米網：

<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />

 

C-A-L-D
發佈了108 篇原創文章 · 獲贊 31 · 訪問量 9318
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML+CSS3（十）——CSS3新特性之過渡

C-A-L-D 2020-02-22 08:26:08