前端学习一周的内容总结

第一周

day02html基础

1.什么是HTML5

H5是HTML的第五个版本

HTML

• 超文本标记语言
• 语法

• 常规标记/双标签

• 单标记

2.HTML5能做什么

网页开发

• 页面的机构 HTML
• 页面的美化 css
• 页面功能的实现 JavaScript

子主题 2

3.项目开发流程

根据效果图，需求转化为代码

6.HTM理论基础

• ul无序列表

• list-style:inside；

超链接<a href="" tiltle=“” target=""></a>

图片<img src="" title="" alt=""/>

特殊字符

Inherited   标签a 从父元素 继承（Inherited）的属性  覆盖不了  a自带的属性【 继承性的权重小于0】

5.开发工具（编辑器）

4.网页的组成部分

day03表单和css基础

1.HTML表单

在网页中采集数据

• value

• 文本框type="text"

• 密码框type="password"

• 提交按钮type="submit"

• 单纯的按钮"type=button"

• 重置按钮type="reset"

•

• 给初始值

• 给文本值

2.什么是CSS

cascading style sheet 层叠样式表（修饰网页的显示样式）

3.CSS的引入方式

样式表的创建

• 行内样式

• 不建议使用

• 内部样式

•

• 外部样式

•

• link和import的区别

• 1.link是标签；@import是css提供的一种方式

• 2.link引用的CSS会被同时加载，而@import 会等CSS下载完再被加载。

• 3.兼容性问题 @import 在IE5以上才能是被，link 没有事

• 4.使用dom（document object model 文本对象模型 ）控制样式时，只能用link标签。

•

• <!-- icon属性指定标题栏,地址栏,收藏栏小图标 -->    <link rel="icon" href="../images/pic1.jpg">

• 权重问题：1.内联（行内样式）最大   2.内部和外部样式遵循就近原则

4.CSS的语法

选择器（选择符）｛属性: 属性值；属性: 属性值; ｝

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；2）属性必须放在花括号中，属性与属性值用冒号连接。3）每条声明用分号结束。4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。5）在书写样式过程中，空格、换行等操作不影响属性显示。

5.CSS的选择器

为什么要用选择器：要用CSS对HTML页面的元素实现 一对一 ，一对多 或者 多对一的控制（无多对多）

选择器分为 5 大类

• 命名规范

• 字母，数字，下滑线组成

• 开头只能是 字母和下划线

• 1.基本选择器

• 1.类型选择器（标签选择器）【改变某个元素】

• 2.class选择器（类型选择器）【区分某个标签】【给多个属性值】

• 3.ID选择器【区分某个标签】【属性值只能是一个】【权重大于class选择器】

• 属性值 只能是一个，值可以重复使用

• 4.通配符（*）【想让所有标签改变样式的时候如:  *{margin 0; padding 0;}】

• 5.群组选择器 （并集）

• 权重问题，除了 逗号【,】 权重不变，其他都相加

• 2.层选择器

• 1.后代选择器

• 所有的后代

• 2.子选择器

• 所有的儿子，如ul>li{}

• 3.相邻的兄弟选择器

• 后面紧挨着的元素，如div+p｛｝

• 4.通用兄弟选择器

• div~p      是p后面所有的元素

• 3.伪类选择器
• 4.属性选择器
• 5.伪对象（伪元素）选择器
• 后代是上下级；兄弟是同级

6.选择器的权重

CSS的层叠性【由权重（层叠规则）来处理冲突，权重高的覆盖权重低的，因此也称作层叠】

• 解释规则1：权重来处理
• 解释规则2：就近原则

day04css的核心属性

1.文本相关属性

font-size

color

font-famliy

font-weight

font-style

text-align

line-height

font

text-decoration

text-indent

letter-spacing

2.背景相关属性

background-color

background-image

background-repeat

• repeat-x
• repeat-y
• 这两个 前面自带一个 no-repeat

background-position

• 相对于容器的位置固定

background-attachment

• fixed

• 相对于浏览器固定了，而不是   容器

3.列表相关属性

list-style

day05盒子模型和浮动属性

1.浮动的相关属性

float: left;

float: right;

float: none;

清除浮动

• clear：none；
• clear: right;
• clear: left;
• clear: both;

1.定义网页中其他文本的如何环绕元素显示（文字环绕效果网页开发中没有）2.就是让竖着的东西横着来

2.标准的盒子模型

3.margin的属性

4.padding的属性

5.border的属性

6.怪异盒子模型

7.box-sizing属性