相信大家应该都听过说：Java、Asp.net、Php、Python、C、C++、C#、网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术—html+css。

接下来我将带领大家一起，在一周的时间内，轻松搞定这两个技术。下面来看一下一周的详细内容。

（一）html入门基础

认识什么是HTML、 标记的语法、 常用的HTML标记的应用、网页基本骨架标记、meta元标记、列表标记、表格的应用、超链接标记等

（二）初识CSS

什么是CSS、CSS如何使用与书写、文字三属性、实体化属性、新标签、显示模式、选择器、选择器权重等

（三）CSS进阶之常用属性

复合选择器、注释、border、css属性层叠与继承、background、文字修饰属性与行高、伪类等

（四）CSS进阶之盒子模型与文档流

盒子模型、盒子准备、属性整理、标准流文档流、浮动、布局、定位等

（五）CSS进阶之切图

切图、滑动门、图片精灵、banner图制作、导航等

（六）CSS进阶之兼容性与滤镜

常见兼容性问题及解决、滤镜效果等

（七）常见布局及定位使用

等高布局、圣杯布局、固定定位、右下角的弹窗广告、对联广告、导航跟随、返回顶部等

下面我们开始第一天的学习，~follow me~

1.基础知识介绍

前端工具（vscode/sublime/EditPlus/Dreamweaver/Photoshop/Fireworks等）

目前的话小花喜欢用下面这些，仅供参考哦：

编码的话用EditPlus和HBuilder，vscode

切图当然要ps啦,其他协作工具如蓝湖也是很赞的

最最头痛的ie兼容性测试就IETester+install-debugbar哦

浏览器 谷歌 火狐 ie 360 Opera safari

代码的作用：

将之前设计过的图片用代码实现出一个具有实际功能的页面（html页面），供所有互联网用户正常访问

浏览网页过程机制：

本地浏览器向远程服务器发送请求数据，服务器返回数据给浏览器的过程

打开浏览器菜单栏 --工具 --Internet选项

找到常规–浏览历史记录–设置–查看文件夹–弹出的文件夹即为浏览器的缓存文件夹

web前端技术：

Web前端技术指的并不是某一项技术，是一系列技术的集合，主要包括：

1、结构标准 – html – 作用：页面结构的搭建（骨骼的搭建）

2、样式标准 – css – 作用：页面样式的搭建，外观、美化作用

3、行为标准 – JavaScript – 作用：负责页面的行为、动作

可以理解为做前端好比盖房子~ html充当了房子结构是房子的基础。 css呢，就好比房子的装修，给房子改变风格，样式的就是css。 javascript呢，好比房子功能性需求

总结：web前端标准作用：制作网页

html定义

超文本标记语言 html不是编程语言，是一种描述性标记语言 eg: color,size，学习html学习的是标签

2. html标记语法基础

①双标记<开始标记>内容

有属性值：

无属性值：

②单标记：<标记 />

换行

分隔符

③标记的属性：<标记 属性1=“参数1” 属性2=“参数2”>内容

标签的属性书写遵循html键值对k=”v”的格式，k是属性名称，v是属性值。例如：bgcolor=”red”

说明:

A．标记与属性、属性之间以空格分隔

B．属性不分先后顺序，且属性不是必须的

C．建议所有标记采用小写

Html的文档结构

正文

正文

body详解

body属性：

正文

tips:

背景色和背景图允许同时存在，当同时存在的时候，永远都是背景图在上，背景色在下

标题详解

标题 (其中x可取值1~6，表示标题标签有1~6个级别):

X取值1~6 hX内的文本会自动加粗显示（h1最大）

hX针对对象是段落，而font针对对象是任意文本

常用属性：

①color ="" 颜色

②size="" 字体大小

③align="" 对齐方式，属性值有：left/center/right

注意:

标题文本