前端学习笔记（二）

使用语义化的HTML5

在以往的html中界面编写中，一般都是使用class辨别是哪个区块，现在我们可以利用HTML5中的一些具有语义化的标签进行编写。增加了代码的可读性。
常见的语义化标签有以下几个

头部
<header></header>
导航
<nav></nav>
脚部
<footer></footer>
每个分块
<section></section>
文章标签
<article></article>
侧边栏
<aside></aside>

推荐几个前端常用的网站

boostrap扁平化的一个开源工具库，里面也提供了很多的矢量图标，很值得参考
Flat UI
阿里巴巴的icon font 矢量图标库，很多图标都可以 从中找到很方便。
Icon Font

高清图库

pixabay

GRATISOGRAPHY

Free Images

picjumbo

death to the stock photo

public do main archive

很多很多，中文网站还是不是很多，再挖一坑 ，等学的差不多了 ，可以自己写一个中文的高清图网站，美滋滋。

选择器易错辨析

• 标签和类选择器或者id选择器结合
  选择所有含有该类的所有标签
• 逗号运算符
  可以同时设置几个标签的相同属性
• 选择器中间的空格
  这是比较精确的选择方法，空格前面是父标签，后面是子标签或类等意思是设置该标签或者类里面的，设置精度比较大，在相对复杂的界面的时候，可以灵活使用，
• 关系选择器
  很多是关于关系的选择器，比如说a:first-child为a标签的第一个子标签
  后面可能会详细的写一下。

引入自己的字体

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

在font-face中设置font-family并设置字体的地址，然后在需要的使用的地方直接引用font-family就可以了。
但是不同的浏览器对不同的字体格式有着不同的支持
ie貌似只支持eot字体
chrome safari FireFox 支持ttf，woff ，其中建议使用woff字体。
有压缩，没版权。

圆形图片的生成

还记得我上面一个笔记写的，设置边框圆角嘛，可以直接利用border的一些设置，直接实现。bootstrap的缩略图估计也是这样实现的，顺便说一下，感觉阅读bootstrap的源码确实是一个学习的好东西。

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

上个笔记说过50%是就直接生成圆形。mark。

border的相关使用

本来不打算写这个的，写了圆形图片，突然发现border的使用还是有比较记载下来的。

• 制作bootstrap中引用 虽然在markdown中一个右尖括号就一可以实现，但是毕竟不都是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 在我上一篇笔记。
• 还有很多常见的用处慢慢更新。