HTML&CSS学习总结（一）

上周用了一周的时间，周一到周五平均每天2-3小时，周六、周日每天各8小时，看网易云课堂燕十八的HTML+div+CSS视频，感觉还不错，按照视频的讲课思路大概做个总结吧。

基本思路：从大的方面（整体结构）着手，将HTML（4.0）的基本知识“解构”然后运用，先不求学全，先学会用。

学习效果：掌握了下面的知识，基本就可以动手写各大网站的首页了，主要是练习使用div布局和CSS效果显示。

一、html的文档结构

doctype 文档类型

　　Strict：包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

　　Transitional：包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

　　Frameset：等同于Transitional但允许框架集内容。如果要写框架就要声明这一种。

head

　　title：浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题

　　meta：元数据不会显示在页面上，但是对于机器是可读的。

　　　　　规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

　　　　<meta> 标签始终位于 head 元素中。

　　　　元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

　　style：标签用于为 HTML 文档定义样式信息。

body 主要就是div和各类标签

二、用div来控制布局

　　布局原则：从大到小、从上到下、从左到右

　　盒子模型：有宽（width）高（height），有边框（border）、有外边距（margin）、有内边距（padding）

　　浮动布局：div可以”飘“起来（float）、也可以清除浮动（clear）

　　自己可以尝试用简单的div+背景色，来试着布局，增强自己的”大局观“。

三、用CSS来控制显示效果

　　先了解各类选择器：di、class、标签、派生、伪类、通配

　　再了解各类效果如何控制

　　　　段落控制

　　　　　　text-align 文本水平对齐设置
　　　　　　text-decoration 划线方式
　　　　　　letter-spacing 文本中单字的间隔
　　　　　　text-transform 大小写转换

　　　　文字控制

　　　　　　color 颜色设置 font-style 斜体设置 font-weight 文字粗细 font-size 文字大小 font-family 文字字体

　　　　背景控制

　　　　　　background-color 颜色
　　　　　　background-image 图片
　　　　　　background-repeat 图片平铺
　　　　　　background-attachment 滚动
　　　　　　background-position 图像在背景中的位置

　　CSS的引入方式：页内style标签、外部CSS文件、行内style标签、import导入

　　CSS的初始化

　　　　原因：浏览器对元素有默认的CSS参数，且可能不一致，导致浏览器之间显示效果不一样

　　　　解决方法：统一对常用元素常用CSS参数，手动设定统一效果

四、html标签

　　无语义标签：div、span
　　有语义标签
　　　　h1-h6 标题
　　　　p 段落
　　　　img 图片
　　　　a 超链接和锚点
　　　　ul 无序列表
　　　　ol 有序列表
　　　　table 表格