网页组成
一个有具体功能的完整的网页，一般由3部分组成
- HTML：网页的具体内容和结构
- CSS：网页的样式（美化网页最重要的一块）
- JavaScript:网页的交互效果，比如对用户鼠标事件做出响应
HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/
HTML
- 什么是html
HTML的全称是HyperText Markup Language，超文本标记语言。其实它就是文本，由浏览器负责将它解析成具体的网页内容，比如，浏览器会将 左边的HTML代码 转换为 右边的网页内容
- HTML的组成
跟XML类似，HTML由N个标签（节点、元素、标记）组成。HTML语法非常松散，目前的最新版是5.0，也就是HTML5
- 常见的html标签
- 标题：h1、h2、h3、h4、h5....
- 段落：p
- 换行：br
- 容器：div、span（用来容纳其他标签）
- 表格：table、tr、td
- 列表：ul、ol、li
- 图片：img
- 表单：input
- 链接：a
css
- 什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
- CSS的编写格式
CSS的编写格式是键值对形式的，比如
color: red; background-color: blue; font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
- CSS有3种书写形式（优先级从高到低）
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
内页样式：在本网页的style标签中书写
<style type="text/css">
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link type="text/css" rel="stylesheet" href="index.css">
- CSS选择器
选择器的作用：选择对应的标签，为之添加样式
- 标签选择器：根据标签名找到标签
- 类选择器：
- id选择器
- 群租选择器
- 选择器组合
- 后代选择器
- 子标签选择器
- 相邻兄弟选择器
- 属性选择器
- 伪类
- 选择器的优先级
选择器的针对性越强，它的优先级就越高
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
优先级排序
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
- CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
- 可继承属性：父标签的属性值会传递给子标签，一般是文字控制属性
- 不可继承属性：父标签的属性值不能传递给子标签，一般是区块控制属性
- CSS布局
默认情况下，所有的网页标签都在标准流布局中：从上到下，从左到右。
脱离标准流的方法有
- float属性
- position属性 和 left、right、top、bottom属性
float属性的常用取值有
- left：脱离标准流，浮动在父标签的最左边
- right：脱离标准流，浮动在父标签的最右边
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为2大类
- 块级标签：独占一行的标签
- 行内标签（内联标签）：多个行内标签能同时显示在一行
CSS中有个display属性，能修改标签的显示类型
- none：隐藏标签
- block：块级类型，独占一行，能随时设置宽度和高度
- inline：行内类型（内联类型），多个行内标签可以显示在同一行。宽度和高度取决于内容的尺寸
- inline-block：行内-块级类型（内联-块级类型），多个行内-块级标签可以显示在同一行，能随时设置宽度和高度
盒子模型
网页上的每一个标签都是一个盒子，每个盒子都有四个属性
- 内容（content）：盒子里装的东西，网页中通常是指文字和图片
- 填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
- 边框（border）：盒子本身
- 边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
- 内容
- 填充（padding,内边距）
例子：
- 边框（border）
- 边界（margin，外边距）
举例：