html語言

時間 2019-11-18

標籤 html 語言欄目 HTML 简体版

原文原文鏈接

1、web標準

<!--
W3C: 萬維網聯盟組織，用來指定web標準的組織
web標準:製做網頁遵循的規範
web標準的分類: 結構標準  表現標準  行爲標準  
對應:結構html 表現css   行爲JavaScript

html: 製做網頁的
css:  對網頁進行美化
JavaScript: 讓網頁動起來 
-->

2、瀏覽器掃盲

<!--
經常使用瀏覽器內核
    IE : trident
    chrome : blink
    Firefox : gecko
    safari : webkit
    
瀏覽器內核也及時瀏覽器所採用的的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容及頁面的格式信息，渲染引擎是兼容性問題出現的根本緣由
-->

3、html介紹

<!--
概述:
    html全稱Hyper Text Mark-up Language 超文本標記語言 它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式，好比字體、顏色、大小等
    超文本: 音頻 視頻  圖片稱爲超文本
    標記: <英文單詞或字母>稱爲標記  一個html頁面由各類標記組成  

做用: html是負責描述文檔語義的語言
PS: html語言不是一個編程語言（有編譯過程），而是一個標記語言（沒有編譯過程），直接由瀏覽器解析執行
    
html語義:
    html是一個純文本的文件，用一些標籤描述文字的語義，這些標籤在瀏覽器裏面是看不到的，因此稱爲超文本標記語言

html網絡術語:
    網頁: 由各類標記組成的一個頁面就是網頁
    主頁: 一個網站的起始頁或者導航頁面
    標記: <p>爲起始標記  </p>爲結束標記  也叫標籤，每一個標籤對都規定好了特殊含義
    元素: <p> 內容 </p> 稱爲元素   
-->

4、html規範

<!--
html是一個弱勢語言
html不區分大小寫
html頁面的後綴名是以html或者htm（有些系統不支持後綴名長度超過3個字符，好比dos）
html的結構:
    聲明部分:用來告訴瀏覽器這個頁面使用的哪一個標準
    head部分:將頁面的一些額外信息告訴服務器，不會顯示在頁面上
    body部分:咱們所寫的代碼必須放在此標籤內
    
書寫html規範:
    一、全部標記元素都要正確的嵌套，不能交叉嵌套  正確寫法舉例：<h1><font></font></h1>
    二、全部標記都必須小寫
    三、全部標記都必須關閉
        雙邊標記：<span></span>
        單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=「URL」 />
    四、全部的屬性值必須加引號   <h1 id="head"></h1> 
    五、全部的屬性必須有值   <input type="radio" checked="checked" />
html對換行不敏感，對tab不敏感
    html值在意標籤的嵌套結構，嵌套的關係，誰嵌套了誰，誰被誰嵌套，和換行，和tab無關，換不換行，tab不tab都不影響頁面結構
    也就是說，html不是依靠縮進來表示嵌套的，就是看標籤的包裹關係。可是，良好的縮進，可使代碼更易讀 

HTML中全部的文字之間，若是有空格、換行、tab都將被摺疊爲一個空格顯示。
-->

5、html結構介紹

<!--  <!DOCTYPE html>  主要做用:用來告訴瀏覽器這個頁面使用那個標準    -->
<!DOCTYPE html>
<html lang="en">

<!--  <head>  </head> 主要做用:html頁面頭部信息設置，不會顯示在網頁上-->
<head>
    <!-- <meta charset="UTF-8">  設置 -->
    <meta charset="UTF-8">      
    <title>個人第一個html頁面</title>
</head>

<!-- <body>  </body>  主要做用:頁面顯示部分，即數據部分，顯示到網頁上的-->
<body>
<h1>
    html:超文本標記語言
</h1>
</body>
</html>

<!--
一、文檔聲明頭
    <!DOCTYPE html>   開頭這一行，就是文檔聲明頭，DocType Declaration 簡稱DTD。此標籤能夠告知瀏覽器文檔使用哪一種html或xhtml規範

    XHTML：Extensible Hypertext Markup Language，可擴展超文本標註語言。

    XHTML的主要目的是爲了取代HTML，也能夠理解爲HTML的升級版。

    HTML的標記書寫很不規範，會形成其它的設備(ipad、手機、電視等)沒法正常顯示。

    XHTML與HTML4.0的標記基本上同樣。

    XHTML是嚴格的、純淨的HTML
二、head標籤，包含<title> <meta> <link> <style>
    <title>  指定整個網頁的標題，在瀏覽器最上方顯示
    <meta>   提供有關頁面的基本信息
    <link>   定義文檔與外部資源的關係
    <style>  定義內部樣式與網頁的關係

2.1 meta標籤
    元素可提供有關頁面的原信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
    標籤位於文檔的頭部，不包含任何內容。
    提供的信息是用戶不可見的
    兩個屬性:http-equiv   name  不一樣的屬性有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能
2.1.1 http-equiv屬性
    它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
    <!--重定向 2秒後跳轉到對應的網址，注意分號-->
    <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
    <!--指定文檔的內容類型和編碼類型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

2.1.2 name屬性
    主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
    <meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
    只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作SEO（search engine optimization，搜索引擎優化）。
-->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。