小白的H5+C3的总结

 Html5 （Hyper text markup language）

HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)，H5网络标准统一，可以跨平台，多设备使用，语义化比较强。

HTML的语法

1、常规标记、双标记       <标记  属性=“属性值”  属性=“属性值”>文字内容标记>

2、空标记、单标记       <标记  属性=“属性值”  属性=“属性值” />

根据css显示分类，XHTML元素被分为

三种类型：    
块状元素，内联元素，内联块元素(css2.1增加)

块级元素：

div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格

内联元素：

a –超链接（锚点）                               
b - 粗体(不推荐)                         
i - 斜体
em - 强调                                                         
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标   
sup - 上标
u - 下划线

内联块元素：

img - 图片                         
input - 输入框               
label - 表单标签                  
textarea - 多行文本输入框
select - 项目选择

H5新增标签

section元素 表示页面中的一个区块

article元素 表示一块与上下文无关的独立的内容

aside元素 在article之外的，与article内容相关的辅助信息 header元素 表示页面中一个内容区块或整个页面的标题

footer元素 表示页面中一个内容区块或整个页面的脚注

nav元素 表示页面中导航链接部分

figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素 表示页面中的主要的内容(ie不兼容)

hgroup标题的一个分组 mark定义高亮显示的文本(span)

dialog标记定义一个对话框(会话框)类似微信

embed 标记定义外部的可交互的内容或插件 比如flash 

CSS (cascading style sheet) 层叠样式表

WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制， 简单说就是如何修饰网页信息的显示样式。

css语法：

选择器（选择符）{属性：属性值；属性：属性值；}

行内样式表（只针对当前标签）

<标签   style="属性1:值1;属性2:值2; ……">标签>（写在html标签内，如：style="color:red;"）

内部样式表（只针对当前文件）

注：使用style标记创建样式时，最好将该标记写在

;
例：

外部样式表（针对所有相关联文件）

 1. 语法：

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即

与之间。
      rel：用于定义文档关联，表示关联样式表；
      type：定义文档类型；
      href:寻找路径

2. 导入外部样式表
     

@和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；

link和@import的区别

差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

选择符权重

    类型选择符的权重为0001     class选择符的权重为0010     id选择符的权重为0100     属性选择符的权重为0010     伪类选择符的权重为0010     伪元素（对象）选择符的权重为0001     包含选择符的权重：为包含选择符的权重之和     内联样式的权重为1000     继承样式的权重为0000     群组集合选择符权重为他本身      注：如果权重相同时，则执行后写的样式；

css层叠性

css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

三、每个元素的margin box的左边， 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

六、计算BFC的高度时，浮动元素也参与计算

哪些元素或属性能触发BFC

根元素(html) float属性不为none 。position为absolute或fixed 。display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

BFC的应用： 1、自适应两栏布局 2、清除内部浮动 3、防止margin上下重叠

CSS3 选择器

属性选择器1、E[attr]：只使用属性名，但没有确定任何属性值

2、E[attr=“value”]：指定属性名，并指定了该属性的属性值

3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的

4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的

5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的

6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value

7、E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）

伪类选择器 结构性伪类选择器

X:first-child 匹配子集的第一个元素。IE7就可以支持

X:last-child匹配父元素中最后一个X元素

X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始 odd奇数 even偶数

X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。 Css: ul li p:only-child{color:red;} Html

• aa

  bb

​

X:nth-last-child(n)从最后一个开始算索引。

X:first-of-type匹配同级兄弟元素中的第一个X元素​

X:last-of-type匹配同级兄弟元素中的最后一个X元素​

X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X

​ X:only-of-type匹配属于同类型中唯一兄弟元素的X​

X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X :root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

X:empty匹配没有任何子元素（包括包含文本）的元素X

目标伪类

目标伪类选择器E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

div:target p{background: red;}

• UI 元素状态伪类选择器E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素 E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E::selection 匹配E元素中被用户选中或处于高亮状态的部分

• 动态伪类选择器E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

E:not(s)选择器，否定伪类选择器，用于为排除此元素的其他元素设置样式 （IE6-8浏览器不支持:not()选择器。）

层级选择器

E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F相邻兄弟选择器 选择器表示在同一父元素中，E和F紧相邻，设置样式只在F身上实现；（选择紧位于E同级元素下的所有的F标签）

E~F通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

盒模型

box-sizing

content-box
        这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box
    为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。