一、网页组成
一个网页由HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript组成。
HTML负责控制页面的结构，CSS负责控制页面的显示样式，JavaScript负责控制页面的行为和逻辑。

二、文件结构
文件包含四个部分：CSS文件夹用来存放后缀为.css的样式文件，img文件夹用来存放网页中所需用到的图片，JS文件夹用来存放后缀为.js的样式文件，index.html文件表示整个网页的首页。

三、HTML页面结构

四、块标签
块标签显示效果为撑满整行，支持宽高设置，由内容撑开高度。
●

   <!-- 有序列表 -->
<ol>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
</ol>

<!-- 无序列表 -->
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

<!-- 标题列表 -->
<dl>
	<dt>标题</dt>
	<dd>列表项</dd>
	<dd>列表项</dd>
	<dd>列表项</dd>
</dl>

●

五、行标签
行标签默认在一行显示，由内容撑开宽高，不支持宽高属性的设置。
●
●


●

●

●


嵌套关系：（1）块标签可以嵌套块标签和行标签，但是p标签不能嵌套块标签；
（2）行标签只能嵌套行标签，不能嵌套块标签，但是行标签不能嵌套a标签。

六、CSS样式表
CSS样式表有三种引用方式：行间样式、内部引入和外部引入。三种引用方式的优先级顺序为!important > 行间样式 > 头部样式 > 外部样式。
● 行间样式：
书写规则：在标签内，添加style属性，在其中添加对应的样式，样式与样式之前使用分号隔开。
示例代码：

● 内部引入：
书写规则：在head标签中,加入style标签，在标签中使用不同的选择器，设置样式。
示例代码：

优点：速度快，没有请求压力相对于外部引入，代码少。
缺点：不宜改版和维护；代码较乱，不方便前后台沟通。

● 外部引入：
书写规则：（1）创建后缀为css的文件，在文件使用对应的选择器，在选择器中添加相应的样式；（2）在head部分加入link标签，引入外部css文件。
示例代码：

优点：一个css文件可以控制多个页面；方便改版与维护；减少代码量，代码简洁，便于分工协作；有效利用缓存机制。
缺点：相对单页面来说，会有垃圾代码；加载时，会给服务器造成压力。
样式单位：px,表示计算机屏幕上的一个像素点。
宽高样式：width设置元素的宽度；height设置元素的高度。

border边框：border-style:solid，常用值有none:无边框；solid:实线；dotted:点状边框；dashed:虚线。
border-color——边框颜色
border-width——边框粗细
复合属性，可以同时设置边框的宽度、样式、颜色——border:5px solid red
border-top——上边框 border-bottom——下边框 border-left——左边框 border-right——右边框

background-color——设置元素的背景颜色，有三种设置方法：英文单词、rgb、十六进制

七、盒模型
padding:元素的内边距，包含在盒子之内
padding: 10px;
/上 右 下 左/
padding: 10px 20px 30px 40px;
/上 下 左 右/
padding: 10px 20px;
/padding-top padding-bottom padding-left padding-right/

border:元素的边框，包含在盒子之内
border: 10px solid green;

margin:元素的外边距，不包含在盒子之内
/margin-top margin-left margin-right margin-bottom/
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

content:元素的内容
行标签不支持上下的padding、margin
margin用于兄弟标签之间 padding用于父子标签之间，加在父标签里面，相邻的两个元素上下margin值取最大值。