下面是一个简单的页面布局。注意发现页面的布局特点，注意使用居中，浮动等。 {代码...} 结果：

1. 纯文本在纯文本编辑器中编写的内容都是纯文本，网页就是使用纯文本编写的。纯文本中只能保持文本内容。图片，音频，视频等格式的内容都不能设置。

1. 浮动 有三个div元素如下所示： {代码...} 结果：块元素在文档流中默认垂直排列，所以这三个div自上至下依次排开 如果将div改为行内块元素 {代码...} 结果：注意box1和box2之间，box2和box3之间的区别。和空格有关。 (1) 如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文...

1. 盒子简介 CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子了。 我们只需要将相应的盒子摆放到网页中的相应位置即可完成网页的布局。 2. 盒子模型 一个盒子我们会分为几个部分： 内容区(content) 内边距...

1. 长度单位 (1) 像素： 一个像素就相当于屏幕中的一个小点。 我们的屏幕实际上就是由这些像素点构成的。 不同的显示器一个像素的大小也是不同的。显示效果越清晰，像素就越小。 (2) 百分比 将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。 使用百分比的好处是，当父元素的属性值发生变化...

1. HTML(Hypertext Markup Language)超文本标记语言 根据W3C标准，一个网页主要由三部分组成： 结构(HTML用于描述页面的结构) 表现(CSS负责页面的样式，美化页面) 行为(JavaScript负责页面的行为,用于响应用户的操作) 2. HTML的基本编写格式 (1) html根标签 一个页面中有且只有一个根标签 网页中的所有内容都应该写在htm...

1. DOM 简介 DOM全称：Document Object Model 文档对象模型。 文档：表示整个HTML网页文档。 对象：表示将网页中的每一个部分都转换为一个对象。 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。 JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面了。 (1) 节点node 节点是构成...

当使用不同的选择器，选中同一个元素时，并且设置相同的样式时。这时，样式之间产生了冲突，最终采用哪个选择器定义的样式，由选择器的优先级(权重)决定。优先级高的优先显示。

兄弟元素选择器 语法1：前一个元素 + 后一个元素作用：选中一个元素后紧挨着的指定的兄弟元素。 语法2：前一个元素 ~ 后边一类元素作用：选中后边的所有兄弟元素 举例1： {代码...} 结果： 为紧挨着span的p设置了背景颜色。 举例2： {代码...} 结果：样式未起作用。注意前一个元素和后一个元素必须紧挨着。否则会不起作...

属性选择器 作用：可以根据元素中的属性或属性值来选取指定元素。语法： [属性名] 选取含有指定属性的元素 [属性名="属性值"] 选取含有指定属性值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值以指定内容结尾的元素 举例...

伪元素 作用：使用伪元素来表示元素中的一些特殊位置。 :first-letter 表示首字母的位置。 {代码...} 结果：为p元素中的首个字母设置了背景颜色。样式不会因为内容的改变而改变。 :first-line 表示首行的位置。 {代码...} 结果：为p元素中的第一行内容设置背景颜色。 :before 表示元素最前边的部分。 before指紧跟在开始...

1.伪类选择器 伪类专门表示元素的一种特殊状态。比如：访问过的超链接，普通的超链接，获取焦点的文本框等等。 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。 假设百度的链接已访问过。如下为默认的样式（访问过和未访问过的区别） {代码...} 结果：未访问过的颜色偏蓝色。 :link 表示普通的链接（没...

1.元素之间的关系 父元素：直接包含子元素的元素 子元素：直接被父元素包含的元素 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 兄弟元素：拥有相同父元素的元素叫做兄弟元素 {代码...} p是span的的父元素。div直接包含了p，间接包含span...

1.元素选择器 作用：通过元素选择器，可以选择页面中的指定元素。语法：标签名{} {代码...} 2.id选择器 作用:通过元素的id属性值，选中唯一的一个元素。语法：#id属性值{} {代码...} 3.类选择器 作用：通过元素的class属性值选中一组元素语法： .class属性值{} {代码...} 可以为元素设置class属性。 calss属性和id属性类...

1.块元素 块元素是指会独占一行的元素。无论它的内容有多少，它都会独占一行。 常见的块元素：div p h1 h2 h3... div块元素是没有任何语义的，不会为它里边的元素设置任何的默认样式。主要是用来对页面进行布局的。 {代码...} 2.内联元素（行内元素） 行内元素，指的是只占自身大小的元素，不会占用一行。 常见的行内元...

css的注释： 以 /*开头，以/*结尾。css注释只能用于style标签或者css文件中。css的语法： 选择器 声明块 选择器： 通过选择器，可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。 声明块： 声明块紧跟在选择器的后边，使用一对大括号{}括起来。声明块中实际上就是一组一组的名值对结构。这一组...

CSS的样式书写位置 css的样式书写位置常用的有三种： 行内样式(内联样式) style标签 外部样式(link标签) 行内样式 {代码...} 将样式直接编写到 style 属性中，这样的样式称为内联样式，也叫行内样式。 {代码...} 这句的意思是，通过p标签的 style 属性，为p标签的内容设置样式，样式颜色为红色，字体大小为30像素。 css...