HTML&CSS快速入門(二)

堅持每天撰寫一點博客,今天發現自己寫的快速入門一文章閱讀的人並不多,遠沒有第一篇文章水文看的人多,估計很多人看多了這一類科普文都覺得費勁,還是不費腦子的東西更吸引眼球。那這樣的話就要去撰寫更有意思,與衆不同的東西出來,關鍵是少寫廢話。

所有的快速入門文章內容其實都是來自百度前端學院裏面的課程任務目標,我是根據上面提供的知識點進行歸納總結並寫成文章,即使自己不權威,但是百度自己的東西總是權威的吧


今天要講的東西包括

HTML語義化
CSS基礎


什麼是語義化

根據內容的結構化,不加以任何CSS樣式的美化,直接用HTML的標籤進行頁面編寫。
呈現出好的內容結構,代碼結構。引用別人總結的一句話那就是頁面裸奔的時候也能看出來這個頁面是在做什麼事情
好的內容結構、代碼結構也是方便爬蟲進行數據挖掘。
同時,如果按照語義化的模式進行頁面的編寫,也方便後續的代碼維護,升級。


爲什麼要語義化

  1. 裸奔好看
  2. 良好的用戶體驗
  3. 有利於SEO,和搜索引擎建立良好溝通,有助於爬蟲抓取更多的有效信息:爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;
  4. 方便其他設備解析
  5. 方便後續開發與維護,遵守W3C標準的團隊都在遵守這個標準,減少差異化


    關於CSS需要介紹的東西

    在實際開發使用CSS過程中,要記住一些常用的CSS樣式名
    舉例如下:
    1,背景顏色 background-color
    2,字體 color
    3,背景 background
    4,邊框 border
    5,盒模型 margin padding (Tips:Chrome調試工具裏面可以很直觀的看到某個元素的盒模型,調試過程可以檢查樣式)
    6,定位 position
    上面的內容基本都是最常用的樣式,其他的無非是一些微調,根據設計稿進行繪製。
    接着是介紹選擇器,選擇器的用法很多變。作爲新手上路的你,記住下面兩條信息:
    類選擇器是用.class來選擇,id選擇器是用#id來選擇。
    舉例

<input class="box" type="text" .../>

如果要選擇上面那個標籤,則使用.class

<input class="box" id="mybox" type="text" ../>

如果要通過id來選擇上面的標籤,則使用#mybox來選擇

剩下的就是其他選擇器,後面會在知識補充的章節裏面補充進來。


在CSS裏面還有一點比較重要的就是position和float,這個涉及到排版問題。在排版問題上面,這裏面學問就大了。

在下一章節將會講講CSS的具體內容以及一些常見的問題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章