本系列是前端基础的学习笔记，只是方便自己学习记忆的。
html、xhtml、xml、html5
一些历史知识而已啦~ 现在已经是html5时代了，不需要了解太多，知道点历史信息即可，主要是面试的时候调侃而用！
a标签 超链接标签特点：
- 默认有个下划线
- 不会继承父级颜色的样式，继承是css里面必须掌握的一个特性，
功能：
- 跳转页面：
- href：为要跳转的页面地址，如果没有地址可以写成#，但是页面还是会有重定向，所以可以写成javascript:void(0)
- target：_blank在新页面中打开、_self在当前页打开
- base标签：规定了a标签按照哪种方式去打开
- 锚点
- 在href写上#name，name对应着id的值，因为id在页面中是唯一的，所以可以唯一的进行跳转。
- 下载资源
- 直接写上文件的地址即可。但是如果资源是个*.jpg之类的图片，浏览器会直接打开这个图片，而不是下载。可以将需要下载的资源打包成一个zip包，然后再进行下载。
- 但是如果所有的资源都压缩，那也是比较麻烦的，所以HTML5新增了一个属性，
download属性，表示需要下载的资源。既然是HTML5的标签，那么IE8以下面就无法使用喽~
a标签的颜色
伪类：针对元素的某种状态添加的不同样式
- :link 未访问链接的状态
- :visited 访问过的连接状态
- :hover 鼠标悬停时的状态
- :active 鼠标点击时的状态
这里遵循这一个css样式的”爱恨原则“，也就是LoVe-HAte（LVHA） 这个书写的原则，如果不遵循这个原则，css样式是重置不上的。
span 标签
span标签用来区分一个文本中样式的，将需要特殊标记的内容，包裹起来就行。
12306铁路客户服务中心
img标签
- src指定图片的地址
- 如果指定了width或者height，那么图片就会按照比例缩放；但是如果同时设置了width和height，那么图片就会拉伸、变形。
- img标签是个单标签，没有单独的闭合标签
- img标签是个内联块
H5新增标签以及标签语义化
- header 存储页面的头部，版块的头部
- nav 导航
- footer 页面底部
- section 页面中版块，用来区分页面不同区域
- article 文章，放文章的地方
- aside 附属信息
- time 用来放时间
标签语义化
- 根据页面里不同的内容，选择最适合它的标签，而不是通篇只用一种标签。
- 如果去掉所有的样式，页面的可读性也是比较好的，但是往往也是比较扯蛋的，因为所有页面当中都要重置css样式
- 此外使用合理的标签，对残障设备的识别也是友好的，会帮助残疾人生阅读和放声文章。
- 剩下最重要的是SEO，搜索引擎优化
- 团队合作的时候的代码可读性。在与其他人合作的时候，方便维护。
选择器类型
选择一个元素（标签）的方法
标签选择器
通过标签的名字选择元素，选择的到的是一组元素
语法： 标签名（要添加的样式）
- 标签会将所有的标签都添加上相同的样式，会影响其他的标签
id选择器
通过id选择元素（选择到的是一个元素）
语法： #id名称（要添加的样式）
- id不可以重复，具有唯一性，不然怎么能叫做id呢
class选择器（类选择器）
类选择器： 通过class选择元素（选择到的是一组元素）
语法： .class名称（要添加的样式）
- class是可以在页面中重复出现的。
- 一个标签元素的class是可以有多个的。
群组选择器
群组选择器：通过逗号(,)的方式选择元素，原则到的是一组元素
语法1： 标签名, 标签名(添加的样式)
语法2：id名称,id名称(添加的样式)
语法3：id名称,class名称(添加的样式)
语法4：class名称,class名称(添加的样式)
只要是任意一个元素有相同的样式，就可以使用群组选择器放在一起，不过要使用逗号相隔开，无论是id选择器、class选择器、标签选择器
包含选择器
包含选择器：通过范围，选择元素（选择到的可能是一个元素，可以能是多个元素），也就是父级当中包含了多少个子级
语法： 父级 目标元素(要添加的样式)
- 父级与目标元素都可以是class、id、标签选择器
#wrap li.blue{ width: 100px; height: 50px; border: 1px solid red;}
通配符选择器
通配符选择器：* 也就是能选择全部的元素- html、body通过*也是可以获取到。
- 通配符的杀伤力太大，会匹配所有的标签，性能会有所下降，但是呢也没有人能证明性能能下降多少。如果使用会让一些人嘲笑，这里可以保留一个迟疑的态度。
*{ border: 1px solid red; margin: 10px; height: 50px;}
选择器优先级
选择器优先级：代码的执行顺序
- 同级别的选择器，后者会覆盖前者，谁在后者就覆盖掉前者
- 行内样式>id选择器>class选择器>标签选择器>通配符选择器
包含选择器优先级
包含选择器的优先级，计算方法是一中累加的关系- 行间样式 1000 - id选择器 100
- class选择器 10
- 标签选择器 1
累加起来的值越大，优先级别就越大；否则优先级别就越低。
#div3{} 1000.box2 #div3{} 10+100#div1 .box3{} 100+10#div2 .box3{} 100+10#div1 div div{} 100+1+1
群组选择器的优先级
后面的选择器样式覆盖前面的选择器样式
样式重置
在chrome浏览器中如果通过F12查看，可以看到user agent stylesheet样式，这个样式就是浏览器默认带的样式，不同的浏览器中的默认样式是不一样的。
- 页面中要用到的标签，有默认样式，会影响到其它的代码，这个时候就要将这个默认的样式都清空掉。
- 与盒模型相关的样式：margin padding border - 标签特有的样式：ol ul li - 如果使用
通配符*，需要斟酌好，不要造成浪费。如果是个大网站，内容非常多，那么建议不要使用通配符重置样式；如果是个小网站，那么可以选择使用通配符。
吐槽
- 的markdown使用起来不是很方便，不能直接从马克飞象的笔记中直接复制粘贴过来。估计的markdown没有马克飞象开发的那么完整
- 在写笔记的时候，发现很多地方都是描述的不够清晰，需要多多练习。