Java網路 1.5 HTML 骨架

我是小白呀發表於2021-01-03
JavaHTML

HTML 骨架

概述

標準的骨架:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

我們來一部分一部分的學習

文件宣告頭

任何一個標準的 HTML 頁面, 第一行的開頭一定是這樣:

1 <!DOCTYPE ……

這一行, 就是文件宣告頭, DocType Declaration. 此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範. 到底有哪些規範呢?

首先我們先確定一件事情, 我們現在學習的是 HTML4.0.1 這個版本, 這個版本是 IE6 開始相容的. HTML5 是 IE9 開始相容的. 但是 IE6, 7, 8 這些瀏覽器還不能過早的淘汰, 所以這幾年網頁還是應用 HTML4.0.1 來製作. 後面將學習手機, 移動端的網頁, 就可以使用 HTML5 了.

HTML 規範

HTML4.0.1 裡面有兩大種大規範, 每種大規範裡面又有 3 中小規範. 所以一共 6 種規範:

大規範小規範描述
HTML4.0.1Strict嚴格的, 體現在一些標籤不能使用, 比如 u (下劃線)
Transitional普通的
Frameset帶有框架的頁面
XHTML1.0Strict嚴格的, 體現在一些標籤不能使用, 比如 u (下劃線)

我們學習的是 XHTML1.0 中的 transitional 版本. 因為我們頁面彙總偶爾也要使用一些類似 u 這種標籤.

Idea 中輸入的 html:xt. x 表示 XHTML, t 表示 transitional.

HTML5 中極大的簡化了 DTD, 也就是說 HTML5 中沒有 XHTML 了.

<!DOCTYPE html>

字符集

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集採用 meta 標籤定義, meta 表示 “元”. “元” 配置, 就是表示基本的配置專案. meta 用開發工具生成就像.

字符集的種類

charset 就是 charator set “字符集” 的意思. 中文能夠使用的字符集有以下三種:

UTF-8

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

gb2312

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

gbk

<meta http-equiv="Content-Type" content="text/html;charset=gbk">

字符集是什麼

我們先來舉個活字印刷的例子.
在這裡插入圖片描述
老王和老李都發明瞭字型檔. “傳” 字在老王的字型檔裡面是第 2 個大盤子第 4 行第 43 列的. 而 “傳” 在老李的字型檔裡面是第 5 個大盤子第 6 行第 13 列的.

在計算機裡, 不能直接儲存漢字, 而儲存的是編碼. 所以, 計算機記錄 “傳” 這個字, 就是這麼記錄的:

  • 老王: 20443
  • 老李: 50613

字型檔的型別

我們簡單的介紹兩個字型檔, 想要詳細瞭解的同學可以去翻 “Java 基礎” 的文章, 在那裡我有詳細講解.

UTF-8 是國際通用字型檔, 裡面涵蓋了所有地球上人類的語言文字. (Idea 的預設編碼是 UTF-8)

gb2312 是國標, 是中國的字型檔, 裡面僅涵蓋了漢字和一些常用外文. (字型檔規模: UTF-8 > gb2312 (只有漢字))

注: UTF-8 裡面儲存一個漢字需要 3 個位元組. 而 gb2312 只需要 2 個位元組.

關鍵字和頁面描述

meta 除了可以設定字符集, 還可以設定關鍵字和頁面描述.

設定頁面描述:

<meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、搜尋
引擎服務，開設新聞、娛樂、體育等 30 多個內容頻道，及部落格、視訊、論壇等互動交流，網聚人的力量。"
/>

只要設定的 Description 頁面描述, 那麼百度的搜尋結果, 就能夠顯示這些語句. 這個計算叫做 SEO (Search Engine Optimization) 搜尋引擎優化.
在這裡插入圖片描述

格式

<meta name=”” content=”” />

name 就是 “名字” 的意思, content 是 “內容” 的意思. 也就是說, 我們定義了一個名字是 “Description” (描述) 的 meta.

定義關鍵詞:

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,簡訊" />

這些關鍵詞, 就是告訴搜尋引擎, 這個網頁是幹嘛的, 能夠提高命中率. 讓別人能夠找到你, 搜尋到你. Keywords 就是 “關鍵詞” 的意思.

完整骨架

一個比較完整的骨架是這樣:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="Keywords" content="網易，郵箱，遊戲…"/>
    <meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、
搜尋引擎服務，開設新聞、娛樂、體育等 30 多個內容頻道，及部落格、視訊、論壇等互動交流，網聚人的力
量。"/>
    <title>Document</title>
</head>
<body>

</body>
</html>

第 4 行: 字符集設定
第 5 行: 關鍵詞
第 6 行: 描述

title 標籤

<title>網頁的標題</title>

在這裡插入圖片描述
title 也是助於 SEO 搜尋引擎優化的:

<title>我是小白啦啦啦</title>
<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>

網頁的 head 標籤裡面, 表示的是頁面的配置. 那麼配置有哪些呢?

字符集, 關鍵字, 頁面描述, 頁面標題. 今後我們還能看見一些配置: IE 適配, 視口, iPhone 小圖示等等…

相關文章