初識html

重生之我在异界写程序發表於2024-07-04
HTML

HTML初識

HTML的概念

html是超文字標記語言，全稱是HyperText Markup Language。它不是一種程式語言，是一種描述性的標記語言

作用：HTML是負責描述文件語義的語言

概念：超文字

兩層含義：1、文字理解就是文字，超出文字的比如圖片、影片、動畫等。2、可以透過連結跳轉頁面

概念：標記語言

百度中的解釋是，標記語言是一種將文字以及文字相關的其他資訊結合起來，展現出關於文件結構和資料處理細節的電腦文字編碼。與文字相關的其他資訊（包括文字的結構和表示資訊等）與原來的文字結合在一起，但是使用標記進行標識。

其中使用標記進行標識，可以理解為標籤，譬如<a>標識超連結，屬於HTML標籤。透過瀏覽器解析執行就可以給使用者展示

HTML是負責描述文件語義的語言

資料本身沒有任何意義，只有被賦予含義的資料才能夠被使用，這時候資料就轉化為了資訊，而資料的含義就是語義。

也就是原本的文字沒有什麼意義，但是透過標籤即HTML語言可以轉變成例如超連結，變得更有意義。

面試中標籤的作用可以說是給文件增加語義。

HTML的專有名詞

  • 網頁：各種標籤組成的頁面

  • 主頁（首頁）：一個網站的起始網頁或導航頁面

  • 標記：分為開始標記和結束標記，也稱為標籤，每個標籤都有特定的含義，例如<p></p>含義是段落

  • 元素：標籤+標籤內容組成一體就是元素，比如<p>這是段落</p>

  • 屬性：給每個標籤所做的輔助資訊，通常在開始標籤內的設定

  • XHTML：eXtensible X，符合XML語法標準的HTML

  • DHTML：dynamic，動態的。javascript + css + html合起來的頁面就是一個 DHTML。

  • HTTP：超文字傳輸協議，開啟網站的網址開頭，客戶端和服務端互動的協議。SMTP:郵件傳輸協議，應用層協議。FTP：檔案傳輸協議

書寫第一個HTML頁面

工具是vs code，建立一個.html的檔案，輸入html:5，再按tab就可以出現如下頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

這個就是html頁面的骨架，新增標籤就可以實現各種功能，標籤新增在body標籤內。

HTML結構詳解

HTML的標籤大部分都是成對出現的，如<p></p>.也有單個標籤，如<br />.

屬性和標記之間以及個屬性之間用空格隔開。屬性值用雙引號括起來，如<img src=""`/>

html骨架標籤詳情

  • <html></html>，HTML標籤，頁面中的最大的標籤，可以稱為根標籤

  • <head></head>,文件的頭部，在此標籤內設定的標籤是title，這個標籤內容就是刪除瀏覽器的頁面時旁邊的展示

  • <title></title>,文件標題，就是網頁最上面的展示

  • <body></body>,文件主體，寫標籤就是在這個裡面

html拆解

  • 文件宣告頭即 DocType Declaration，簡稱DTD。就是語句<!DOCTYPE ...>，用來告知瀏覽器文件使用那種HTML或XHTML規範

    <!DOCTYPE html>

  • 頁面語言lang，指定頁面的語言型別。常見的有兩種，en---指定頁面語言為英語，zh-CN--指定頁面語言為中文

<html lang="en">

  • 頭標籤，內部是頁面的配置，如字符集、關鍵字、頁面描述、頁面標題等

    常見標籤：

    • <title>:指定網頁標題，在瀏覽器最上面顯示

    • <base>：為頁面上所有連結規定的預設地址或預設目標

    • <meta>：提供有關頁面的基本資訊

    • <body>：主體標籤，寫的標籤放在次標籤內。定義Html文件所需要顯示的內容

    • <link>：定義文件和外部資源的關係

base標籤：

<base href="/">

用來指定<a>連結的基礎路徑

body標籤：

<body link="blue" alink="red" vlink="green">

屬性：

--bgcolor：設定整個網頁的背景顏色

--background：設定整個網頁的背景圖片

--text：設定網頁中文字的顏色

--leftmargin：網頁的左邊距。IE預設8個畫素

--topmargin：網頁的上邊距

--rightmargin：網頁右邊距

--bottommargin：網頁下邊距

--link：連結的預設顏色

--alink：滑鼠點選未鬆開的顏色

--vlink：滑鼠點選後的顏色

meta標籤：

字符集：

Character set是多個字元的集合，就是網頁的編碼方式。計算機要準確的處理各種字符集文字，需要進行字元編碼，以便計算機能夠識別和儲存各種文字。

字符集必須有，要不然可能會出現亂碼。

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

常見字符集：ASCII碼、ANSI編碼、GBK、Unicode編碼（統一編碼）、UTF-8編碼。

視口viewport：

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

width=device-width:表示視口寬度等於螢幕寬度

暫時不懂

定義“關鍵字”：

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

就是使用者搜尋時候，輸入的關鍵字。告訴搜尋引擎這個頁面與什麼有關，使用者好搜尋

定義“頁面描述”：

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

就是開啟網頁時，使用者搜尋完後，出現結果中，除了連結外，那一大段描述語句

跳轉頁面：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

3秒後跳轉到百度，很常見。

HTML規範

  • 不區分大小寫，但大部分建議小寫

  • 字尾名為html或htm

  • XHTML規範：巢狀要合適（<h1><font></font></h1>）、標籤小寫且閉合（雙標籤一起出現單標籤建議寫成<br />帶斜槓的）、屬性必須用引號、屬性必須賦值、文件開頭必須有DTD文件對型別

  • html對換行和tab不感興趣，主要在標籤內就可以，且多個空格換行tab被摺疊成一個空格

相關文章