HTML&CSS

• 结构 HTML用于描述页面的结构

• 表现 CSS用于控制页面中元素的样式

• 行为 JavaScript用于响应用户操作

万维网联盟（W3C）

• W3C专门为了定义网页相关的标准而成立。

• W3C定义了网页中的HTLM，CSS, DOM, HTTP, XML等标准。

HTML（Hypertext Markup Language）

• 超文本标记语言。

• HTML使用标签的形式来标识网页中的不同组成部分。

• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

乱码

扩展 字符集：编码和解码所采用的的规则（ASCII、ISO-8859-1、GBK、GB2312(中文系统的默认编 码)、UTF-8（万国码）、ANSI（自动以系统的默认编码来保存文件））

编码：字符转化为二进制

解码：二进制转化为字符

出现原因：编码和解码采用的字符集不同。

实体（转义字符）

图片格式

meta标签

CSS（层叠样式表（Cascading Style Sheets））

style内不属于HTML，属于CSS的世界。注释不同（/* */）

选择器

通过选择器可以选中页面中指定元素（标签），

并且将声明块的样式应用到选择器对应的元素上

1. 元素选择器：标签{ } 通过元素选择器可以选择页面中的所有指定元素

2. id选择器：#id属性值{ } 通过元素的id属性值选中唯一的一个元素

3. 类选择器： .class属性值{ } 通过元素的class属性值选中一组元素

4. 选择器分组（并集选择器）： 选择器1，选择器2，选择器n{ } 同时选中多个选择器对应的元素

5. 通配选择器：*{ } 选中页面中所有元素

6. 复合选择器： 选择器1选择器2选择器n{ } 可以选中同时满足多个选择器的元素

对id选择器来说，不建议使用复合选择器

7. 后代元素选择器：祖先元素 后代元素{ } 选中指定元素的制定后代元素

8. 子元素选择器：父元素>子元素{ }

9. 伪类选择器：专门用来表示元素的一种特殊的状态

10. 属性选择器：[属性名] 选取含有指定属性的元素

[属性名=“属性值”] 选取含有指定属性的元素

11. 兄弟元素选择器： 前一个+后一个

前一个~后一个

12. 否定伪类：：not(.hello)

1. a:link{ } 未访问过的链接

2. a:visited{ } 访问过的链接

3. a:hover{ } 鼠标移入的状态

4. a:active{ } 超链接被点击的状态 hover和active也可以为其他元素设置

声明块

声明块紧跟在选择器的后边，使用一对{}括起来，

声明块中实际上就是一组一组的名值对结构，

这一组一组的名值对我们成为声明。

一个声明块中可以写多个声明，声明之间用；隔开

声明的样式名与样式值之间用：隔开

块与内联

• div（块元素）标签没有任何语义，是一个纯粹的块元素，

并且不会为它里边的元素设置任何默认样式。

div元素主要用来对页面进行布局。

• span是一个内联元素（行内元素）

所谓的行内元素，指的是只占自身大小的元素，不会占用一行

常见的内联元素：a img iframe span

span没有任何的语义，专门用来选中文字，然后为文字来设置样式

• 块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式，

一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。

a元素可以包含任意元素，除了它本身。

p元素不可以包含任何其他的块元素

子元素和后代元素

元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素

后代元素：直接或间接被祖先元素包含的元素

兄弟元素：拥有相同父元素的元素

优先级的规则

内联样式 1000

id选择器 100

类和伪类 10

元素选择器 1

通配 0

继承样式 无

!important 最高优先级

并集选择器单独计算

文本标签

em	斜体
strong	粗体
small	用于细则，版权声明
cite	参考内容
q	短的引用
blockquote	长引用（块级元素）
sup	上标
sub	下标
del	删除
ins	插入
pre	预格式
code	专门用来标识代码

注意：p内不能有块

列表

无序列表

<ul type="circle">

<li></li>

</ul>

有序列表

<ol type="a">

<li></li>

</ol>

定义列表

<dl >

<dt></dt>被定义内容

<dd></dd>要定义的语句

</dl>

长度单位

像素（px）

百分比（%）

em=一个字体的大小

RGB（三原色）

十六进制的RGB（三组二位）

红浓度，绿浓度，蓝浓度数值均为00~ff(255)

字体标签

font-size 大小

font-family 字体选择

font-style 斜体

font-weight 加粗

字体种类

serif	衬线
scans-serif	非衬线
monospace	等宽
cursive	草书
fantasy	虚幻

text-align(文本对齐方式)

left、right、center、justify（文本两端对齐）

text-indent 首行缩进

display

inline 内联元素

block 块元素

inline-block 行内块元素

none 不会在页面中显示，同时不占用页面位置

visibility

visible 默认值

hidden 页面中不现实，但占用页面位置

overflow

visible

hidden 溢剪没

scroll 双方向滚动条

auto 自动添加滚动条

文档流

网页最底层（地基）

块元素：独占一行，自上而下

内联元素：只占自身大小，自左向右

浮动

1. 浮动元素会脱离文档流

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性

浮动作用：文字环绕和页面布局（典型：多个块级元素放在同一行显示）

浮动可能引起的问题：子元素浮动，脱离文档流，造成父元素无法被撑开，造成高度塌陷。

高度塌陷问题解决：

1. 使用after伪类结合clear属性 清除浮动

2. overflow：hidden

3. 设置父级元素的宽度和高度

4. 开启BFC