摘要：公司就是中文網頁，極度的追求網頁的顯示速度，要使用。，與類似，用于將相關的內聯元素和文本歸組在一起。用途區別塊元素通常用在頁面中的主要構建模塊，而內聯元素則用來標記小段內容。

之前學習了前端的一些基礎知識，現在想深入地、精通地學習前端，往前端和全棧工程師方向發展。

之前學習前端主要是通過看視頻，結合動手練習。現在認為看書+視頻+實踐，應該是最高效的學習方法。對于html、css，我主要參考《head first html 與css 第二版》，head first系列書講解知識點循序漸近，容易理解。

以下是我看這本書，結合之前學習做的筆記，第一部分梳理如下：

1，作用：負責描述頁面的結構；
2， 理解html的含義：
1）ml：標記語言，用來描述網頁的結構；

瀏覽器是怎么知道如何顯示一個頁面的：通過html語言中的標記。比如

等，標記會告訴瀏覽器文本的結構和含義。即哪些文本是標題，哪些是段落，圖片放在什么位置等。

需要用成對的標記包圍頁面的內容（有的標記例外：如 6 7 8 9 10 其中的內容是用戶可以看見的內容 11 12

第1行：

為瀏覽器指定頁面的文檔類型 ，這不是一個html元素！

public表示該標準是公共可用的；

"-//W3C//DTD XHTML 1.0 Transitional//EN" 表示使用的是xhtml1.0版本

html5中的doctype

第4行 ： 字符集設置

字符集：可以在計算機上表示某種語言中的所有字母、數字和其他符號。比如ASCII等。如今標準已經統一為Unicode字符編碼，它是很多常用軟件和操作系統支持的一個字符集。我們需要告訴瀏覽器我們在使用unicode編碼，用標記。

這是html4.01和更早版本中標記的格式。 html5中，直接寫為

Utf-8是unicode系列中的一個編碼（這個系列中還有其他編碼）
中文能夠使用的編碼有兩種：
第一種：UTF-8 國際通用字庫，里面涵蓋了所有語言文字，比如阿拉伯文、漢語
第二種：gb2312 也可寫成gbk是中國的字庫，僅涵蓋了漢字和一些常用外文、符號

字庫規模： UTF-8（字全） > gb2312（只有漢字）
保存大小： UTF-8（更臃腫、加載更慢） > gb2312 （更小巧，加載更快）
由于UTF-8字庫規模大，所以描述一個漢字需要的碼更多。
UTF-8里面存儲一個漢字3個字節。而gb2312中存儲一個漢字2個字節。

總結：
UTF-8 字多，有各種國家的語言，但是保存容量大，文件臃腫；
gb2312字少，只用中文和少數外語和符號，但是容量小，文件小巧
.

列出2個使用情形：

公司是做日本動漫的，經常出現一些日語動漫的名字，網頁要使用UTF-8。如果用gb2312將無法顯示日語。

公司就是中文網頁，極度的追求網頁的顯示速度，要使用gb2312。如果使用UTF-8將每個漢字多一個byte，所以5000個漢字，多5kb。

我們親測：
● qq網、網易、搜狐都是使用gb2312。這些公司，都追求顯示速度。
● 新華網藏語頻道，使用的是UTF-8，保證字符集的數量。

注：
當我們不設置的時候，sublime默認類型就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設置一下sublime的保存類型：
文件→ set File Encoding to → Chinese Simplified(GBK)

第5行： 關鍵詞
第6行： 描述

html中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示

網站的線上版本為了加快網頁加載速度，提高用戶體驗，有時會進行代碼壓縮，減少代碼的體積。如下圖所示，HTML標簽都沒有換行、都沒有縮進（tab），HTML和換不換行無關，標簽的層次依然清晰，只不過程序員不可讀了：

1，h系列標記

唯一的作用就是插入一個換行；通常只有用塊元素，瀏覽器才會插入換行，如果想在文本中插入一個換行，可用
，或
都可。

4， 短引用，作用段落的一部分；一般瀏覽器會在引用兩邊加上雙引號

5，

長引用，需要多帶帶顯示引用時運用。

6，列表：

      ：表示列表類型：有序列表
【ordered list】；無序列表
 【unordered list】
    
 ：每個列表項：【list item】
    

注：
1， 列表開始之前有換行，每個列表項之后也有換行，因此

• 都是塊元素
  2，
  • 是一起使用的，分開使用就沒有任何意義了。
    3，
    元素中只能包含
    • ，不能直接包含文本或其它元素；
      4，
    • 中可以嵌套寫
      ，即嵌套列表。li是容器級，里面可以放任何東西
      5， 還有另一類列表，定義列表。

      
          
       列表中每一項都有 定義術語 和 定義描述
              
      
          
      
              
      
      

      7，標記

      1， 瀏覽器如何加載圖像？

      HTML頁面不是直接插入圖片，而是插入圖片的引用地址。瀏覽器獲取到index.html文件，讀取該文件，顯示文件時，發現有圖像需要獲取，再從web服務逐個得到這些圖像。

      2，web常用的3種圖像格式：jpeg、 png、 gif

      3，
      src：相同網站上的圖像，最好用相對路徑；不同網站上的圖像，使用url；
      
      alt：如果圖像未能顯示，就會用alt中的文本來替代它，html5中alt屬性必須寫。
      
      width height：單位是像素，告訴瀏覽器圖像在頁面中顯示的寬度、高度。
      
      圖像鏈接：把 元素放到中。

      8，see the tea 元素
      href：是英語hypertext reference的縮寫；默認顯示時會有下劃線。
      href屬性可以使用 相對路徑 或 url 來鏈接到其他頁面 ；
      相對路徑：用于鏈接到同一網站內的頁面； url：用來鏈接其他網站。
      
      target: 在新窗口中打開。現在瀏覽器的默認設置會在一個標簽頁打開新容器，而不是全新的瀏覽器窗口
      title：懸停文本，提供鏈接的一個描述。
      
      直接鏈接到另一個頁面的某一段：
      1）找到希望創建錨點的元素，創建id=”chai”，
      2）see the tea

      9，

      
      用于將相關的塊元素歸組在一起，放在邏輯區中。
      使用嵌套
      元素為文件增加更多結構，這有利于保證結構清晰或方便增加樣式。除非確實需要，否則不要過多地增加嵌套。
      
      10，
      與
      類似，用于將相關的內聯元素和文本歸組在一起。
      11，字符實體：對于特殊字符，用相應的縮寫來輸入
      例：想在html中顯示文本 the element rocks； 通過字符實體，這樣輸入
                      the  elment rocks
      & ：&
      < ：<
      ：>
      
      4 塊元素、內聯元素
      1） 塊元素：顯示時前后各有一個換行；
      
      、
      h系列、
      、
      、
      、
      • 
        
        2） 內聯元素：在頁面文本流中總在“行內”出現；
        、、 、、
        
        3） 兩者都是： 它可以包圍塊元素，而不是只文本；根據上下文來判斷 。
        4） 用途區別：塊元素通常用在web頁面中的主要構建模塊，而內聯元素則用來標記小段內容。設計一個頁面時，一般先從較大的塊開始，然后在完善頁面時加入內聯元素。
      GPU云服務器 云服務器 零基礎入門學習 零基礎入門深度學習 零基礎入門學習python 基礎學習筆記
      文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
      轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52479.html
      • 上一篇：前端開發注意事項(HTML與CSS進階)
      • 下一篇：手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）
      相關文章
      • 01 【零基礎入門】html學習筆記（2）

        摘要：，表單的兩個常見屬性為填寫表單的人提供一個輸入提示。可用于任何表單控件，表示這個域是必要的，如果不填，則無法提交表單。，表格，表格由行中的數據單元格組成，列隱含地定義在行中。，表格應用于表示表格數據，而不是建立頁面布局。 1，如何設計一個頁面 1） 先規劃好web頁面的結構，首先畫出一個草圖，然后創建一個略圖，最后再寫html2） 規劃頁面時，先設計大的塊元素，再用內聯元素...

        kamushin233 2019-08-02 10:39 評論0 收藏0

      • 【零基礎入門】 css學習筆記（4） 布局與定位 介紹

        摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。 寫在前面：作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點...

        nevermind 2019-08-30 15:53 評論0 收藏0

      • 【零基礎入門】 css學習筆記（5） 浮動

        摘要：浮動元素性質，浮動的元素脫離標準流這個元素像從標準流中被刪除一樣。下圖是左浮動時的顯示效果。，浮動的元素會互相貼靠如果父元素的寬度能顯示所有浮動元素，則浮動的元素會并排顯示。，無論是塊級元素行內元素，一旦浮動了，都可以設置寬高，不需要用。 浮動 1.1、語法： float: left; 左浮動，元素往最左邊靠； float: right; 右浮動，元素往最右邊靠 1.2...

        clasnake 2019-08-30 15:53 評論0 收藏0

      • 【零基礎入門】 css學習筆記（1） 字體顏色樣式等

        摘要：在元素中使用元素是一個元素，沒有結束標記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分數相對于字體大小指定。 一、基礎介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...

        fai1017 2019-08-30 15:53 評論0 收藏0
      發表評論
      登陸后可評論
      0條評論