HTML+CSS
Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等
注释格式：<!—内容 –>
编码与特殊符号
1. (空格)
2.> (大于号)
3.<；(小于号)
4."(引号)
5.©(版权号@)
路径
1.相对路径(Relative Path) 同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
2.Web根目录下建了一个目录叫html_demo，然后在该目录下放了一个文件index.html，
这个文件的绝对路径:
http://127.0.0.1:8080/html_demo/index.html
表单（form）元素
1.单行文本框（text)
2.密码框（password）
3.单选按钮（radio) 选中的话checked=="true"
4.文件选择框（file）
5.复选框（checkbox）
6.下拉列表（select）
7.提交按钮（submit）
8.重置按钮（reset）
9.文本域（textarea）
表单高级用法
1.关联表单元素（label）
2.只读属性（readonly）
3.禁用属性（disabled）
表格高级标签
1.表格标题<caption>
2.页眉<thead>
3.表头<th>
4.数据主体<tbody>
5.页脚<tfoot>
表格的跨行与跨列
1.跨列 colspan
2.跨行rowspan
文档的内联框架
使用<iframe>标签嵌套另一个页面
面试题：get方法和post方法区别
1.get方法提交参数在地址栏可见
2.post方法一般用于多数据、保密数据提交
CSS
Cascading Style Sheet 级联样式表
能控制页面的样式和布局，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
网页文件与样式文件相分离，提高开发效率
应写在<head>标签之间，加上 type="text/css"属性
<div>和<span>提高网页加载速度
1．常用块元素div，p，ul，li //ul是定义无序列表的样式 li是列表内行的样式 ol是有序 dl.dt是自定义列表
2．常用内联元素span，a，label //span定义一个区域 //label标签主要用于绑定一个表单元素
SEO搜索引擎优化：在搜索时从搜索结果中获取的访问量将更高
CSS手册：http://www.w3school.com.cn/cssref/index.asp
注释格式：/* 内容 */
CSS属性
1．CSS 背景属性（Background）
| background-color | 背景色，取值如，red，#FF0000 |
| background-image | 背景图片,如:background-image:url(“./images/bg.png”); |
| background-position | 背景开始位置,包括水平方向(X轴)和竖直方向(Y轴)的设置 X轴取值：left，center，right或像素值或百分比 Y轴取值：top，center，bottom或像素值或百分比 |
| background-repeat | 背景填充方式,取值：repeat-x|repeat-y|no-repeat |
2．CSS 内边距属性（Padding）
3．CSS 文本属性（Text）
| color | 设置文本的颜色，如red，#FF0000 |
| line-height | 设置文本的行高 |
| text-align | 设置文本的对齐方式,如left、center、right |
| text-decoration | 设置文本装修，如underline、none、line-through |
4．CSS 字体属性（Font）
| font-weight | 设置字体粗细 |
| font-size | 设置字体的尺寸 |
| font-family | 设置字体系列 |
类选择器（.class）
格式：.classname { font-size : 16px; }
注意：网页中可给不同标签相同的class
ID选择器（#id）
格式：#idname { font-size : 16px; }
注意：网页中标签的ID 不能重复,唯一存在
复合选择器
1．并集选择器
格式：p , #idname , .classname{ font-size : 16px; }
注意：多个选择器之间必须用英文半角的逗号“,”隔开
2．交集选择器
格式：
input#idtest { font-size : 16px; }
p.classname{ font-size : 16px; }
注意：选择器之间不能有空格
3．后代选择器
格式：p a { color:red; }
注意：选择器之间用空格隔开；选择器之间可以是多个不同或相同类型并有层级关系的。
CSS的引入方式
1．行内样式：
<h1 style="color:red; " >style行内样式的应用</h1>
2．内部样式：（必须写在head标签中间）
<style type="text/css">
h3{ color: red; }
</style>
3．外部样式：
a) CSS代码保存在扩展名为.css的文件中
b) 引用扩展名为.css文件的两种方式：
i.链接式：
<link type="text/css" href="stylefile.css" rel="styleSheet"/>
ii.导入式：
<style type="text/css">
@import url("css/stylefile.css");
</style>
CSS中的优先级
1.行内样式 > 内部样式表 > 外部样式表（链接式 > 导入式）
2.ID选择器 > 类选择器 > 标签选择器
/*样式hover，文本修饰：下划线*/
a:hover{
text-decoration:underline;
案例：北风网新闻
1．制作北风网网站信息展示页面
2．使用外部样式表创建页面样式
需求：
1．标题字体大小18px，行高40px ，居中显示
2．时间来源居中显示，文字大小 12px，字体颜色 #666666
3．段落字体12px 行高20px
4．内容中小标题<h2>行高28px， 字体大小12px
案例：利用盒子模型制作登录页面
需求：
1．盒子宽度width为300px；边界margin为50px auto；盒子边框border为实线1px，颜值#3a6587
2．设置标题文字字体16px；高35px；左边距20px；背景色同盒子边框颜色#3a6587；字体白色；文字行高35px
3．设置表单上下距离30像素，左右距离20像素
4．设置表格中标题的类选择器text-align靠右； 分别为表格中标题配上类样式
5．设置表格中内容与提交按钮的类选择器，边框border为实线1px颜值#ccc；分别配上类样式
分析：
盒子模型总尺度：
border + padding + margin + content内容
1、用div标签做盒子
2、设置标题
3、设置表单
4、设置表格中标题内容“姓名、邮箱、联系电话、登录”；分别加入文本域
5、设置为内部引用样式
6、设置外边距 (margin) 和 内边距 (padding)
7、设置上述标签的ID选择器和类选择器
案例：为banner图片加按钮
案例：网页基本布局
需求分析：
1.使用DIV标签
2.使用id选择器
3.使用class选择器
步骤：
1.设置div上 中 下；使用id选择器
2.设置中间部分为div 左 中 右 使用class选择器
3.初始化边界不留空白
4.设置id选择器，div上中下共用： width960px，border1px实线加红色
5.设置头部id选择器高度，height230px
6.设置中部id选择器最小高度，min-height300px
7.设置底部id选择器高度，height85px
8.设置中部div左中右，border1px实线加红色蓝色
案例：制作网页自动居中
需求分析：
1.元素必须为块元素div
2.元素必须设定其宽度width
3.元素的上下边距可自定义
步骤：
1.在上中下id选择器中加入自动居中margin-left和margin-right
案例：制作浮动布局
步骤：
1.设置main区域水平3栏分布，float靠左，min-height300px
2.设置main区域左，width200px，background-color绿
3.设置main区域中，width500px，background-color蓝
4.设置main区域右，width254px，background-color黄
案例：制作网页导航
需求分析：
1.使用导入CSS样式表
2.掌握CSS调试
步骤：
1.创建新的CSS文件
2.创建HTML文件
3.在HTML文件中使用外部引用样式表
4.设置导航div类选择器
5.设置菜单id选择器
6.设置7个栏目的链接与类选择器
7.在CSS文件中创建样式：
a)设置body标签样式，边距去白；font-size12px；
b)设置链接标签a样式，color黑色，文本的修饰none。
c)设置鼠标移到a标签样式hover，文本的修饰underline。
d)开始设置头部类选择器，居中；width640px；左右两侧均不允许浮动元素clear:both;
e)设置菜单id选择器，图像向左浮动；背景图片dd_head_bg_mid.gif；设置背景图像的起始位置0px -63px;高27px；宽99%；行高28px；文本居中；颜值#FFF
f)设置导航栏目类选择器，颜值白色#FFF；元素的 4 个内边距0px 4px 0px 4px （顺序：上 右 下 左）。
最近忙着搬砖，忘记更了，以后争取每周都更一篇，好辣 ~周末来辣~大家浪起来~~~~~