本系列是前端基础的学习笔记，只是方便自己学习记忆的。

html、xhtml、xml、html5

一些历史知识而已啦~ 现在已经是html5时代了，不需要了解太多，知道点历史信息即可，主要是面试的时候调侃而用！

a标签 超链接标签特点：

1. 默认有个下划线
2. 不会继承父级颜色的样式，继承是css里面必须掌握的一个特性，

功能：

1. 跳转页面：

• href：为要跳转的页面地址，如果没有地址可以写成#，但是页面还是会有重定向，所以可以写成javascript:void(0)
• target：_blank在新页面中打开、_self在当前页打开
• base标签：规定了a标签按照哪种方式去打开
• <base target="_blank">

2. 锚点

• 在href写上#name，name对应着id的值，因为id在页面中是唯一的，所以可以唯一的进行跳转。

3. 下载资源

• 直接写上文件的地址即可。但是如果资源是个*.jpg之类的图片，浏览器会直接打开这个图片，而不是下载。可以将需要下载的资源打包成一个zip包，然后再进行下载。
• 但是如果所有的资源都压缩，那也是比较麻烦的，所以HTML5新增了一个属性，download属性，表示需要下载的资源。既然是HTML5的标签，那么IE8以下面就无法使用喽~

a标签的颜色

伪类：针对元素的某种状态添加的不同样式

• :link 未访问链接的状态
• :visited 访问过的连接状态
• :hover 鼠标悬停时的状态
• :active 鼠标点击时的状态
  这里遵循这一个css样式的”爱恨原则“，也就是LoVe-HAte（LVHA） 这个书写的原则，如果不遵循这个原则，css样式是重置不上的。

span 标签

span标签用来区分一个文本中样式的，将需要特殊标记的内容，包裹起来就行。
<a href="http://www.12306.cn"><span>12306</span>铁路客户服务中心</a>

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没有马克飞象开发的那么完整
• 在写笔记的时候，发现很多地方都是描述的不够清晰，需要多多练习。