使用語義化的HTML5

在以往的html中界面編寫中，一般都是使用class辨別是哪個區(qū)塊，現(xiàn)在我們可以利用HTML5中的一些具有語義化的標簽進行編寫。增加了代碼的可讀性。
常見的語義化標簽有以下幾個

頭部
<header></header>
導航
<nav></nav>
腳部
<footer></footer>
每個分塊
<section></section>
文章標簽
<article></article>
側(cè)邊欄
<aside></aside>

推薦幾個前端常用的網(wǎng)站

boostrap扁平化的一個開源工具庫，里面也提供了很多的矢量圖標，很值得參考
Flat UI
阿里巴巴的icon font 矢量圖標庫，很多圖標都可以 從中找到很方便。
Icon Font

高清圖庫

pixabay

GRATISOGRAPHY

Free Images

picjumbo

death to the stock photo

public do main archive

很多很多，中文網(wǎng)站還是不是很多，再挖一坑 ，等學的差不多了 ，可以自己寫一個中文的高清圖網(wǎng)站，美滋滋。

選擇器易錯辨析

• 標簽和類選擇器或者id選擇器結(jié)合
  選擇所有含有該類的所有標簽
• 逗號運算符
  可以同時設(shè)置幾個標簽的相同屬性
• 選擇器中間的空格
  這是比較精確的選擇方法，空格前面是父標簽，后面是子標簽或類等意思是設(shè)置該標簽或者類里面的，設(shè)置精度比較大，在相對復雜的界面的時候，可以靈活使用，
• 關(guān)系選擇器
  很多是關(guān)于關(guān)系的選擇器，比如說a:first-child為a標簽的第一個子標簽
  后面可能會詳細的寫一下。

引入自己的字體

@font-face{
      font-family:aaa;
      src:url(xxx.ttf)
}
p{
    font-family:aaa;
}

在font-face中設(shè)置font-family并設(shè)置字體的地址，然后在需要的使用的地方直接引用font-family就可以了。
但是不同的瀏覽器對不同的字體格式有著不同的支持
ie貌似只支持eot字體
chrome safari FireFox 支持ttf，woff ，其中建議使用woff字體。
有壓縮，沒版權(quán)。

圓形圖片的生成

還記得我上面一個筆記寫的，設(shè)置邊框圓角嘛，可以直接利用border的一些設(shè)置，直接實現(xiàn)。bootstrap的縮略圖估計也是這樣實現(xiàn)的，順便說一下，感覺閱讀bootstrap的源碼確實是一個學習的好東西。

img{
    border:1px solid #fff;
    border-radius:50%;
}

上個筆記說過50%是就直接生成圓形。mark。

border的相關(guān)使用

本來不打算寫這個的，寫了圓形圖片，突然發(fā)現(xiàn)border的使用還是有比較記載下來的。

• 制作bootstrap中引用 雖然在markdown中一個右尖括號就一可以實現(xiàn)，但是畢竟不都是markdown寫法。
  其實邏輯很簡單。只要加個左邊框的，然后在這個元素再加個左邊的padding值，不就很完美了嘛。

p{
    border-left:5px solid #27AE60;
    padding-left:10px;
    background:#ECF0F1；
}

• 制作一個文章標題的下劃線

h1{
border-bottom:2px solid rgba(0,0,0,.15);
padding-bottom:10px;
}
其中rgba()是一個顏色，其中R，G，B，A，分別指的是紅色 綠色 藍色 和透明度。

• 制作透明的button 在我上一篇筆記。
• 還有很多常見的用處慢慢更新。