学习HTML+CSS的书籍推荐

Html+Css学习总结

HTML（Hypertext Markup Language）翻译过来就是 超⽂本标记语⾔。

超⽂本即超越⽂本，可以显⽰ ⽂字 图⽚ 视频 ⾳频，最重要的是可以包含超链接。

标记语⾔：当我们把特定的英⽂单词放⼊到我们的标记（单标记:、双标记<>）当中，我们的标记具有了新的语义,⽽由具有特定语义的标记的规范，我们

可以称之为标记语⾔。

当我们将英语单词放⼊到标记当中，这时候我们可以称之为 标签（单标签、双标签）。

Html基本结构

⽂档头（类型）声明 不是标签，代表的是 HTML 5 的标准--> 页⾯标题

其中需要注意的就是这⾏代码，UTF-8（8-bit Unicode Transformation Format）是⼀种针对Unicode的可变长度字符编码，

也是⼀种，⼜称万国码。由Ken Thompson于1992年创建。它可以⽤来表⽰Unicode标准中的任何字符，且其编码中的第⼀个字节仍与ASCII兼容，

这使得原来处理ASCII字符的软件⽆须或只须做少部份修改，即可继续使⽤。因此，它逐渐成为电⼦邮件、⽹页及其他存储或传送⽂字的应⽤中，优先

采⽤的编码。

主要⽤到的Html代码分为⾏内元素和块级元素，⾏内元素⾥⼜有⾏内块元素。⾏内块和块级元素都是独占⼀⾏显⽰，可以设置宽⾼。⾏内元素则在⼀⾏

内显⽰。但可以⽤Css样式来设置⾏内元素的宽⾼，也可以⽤Display来转换元素的属性。

⾏内元素主要有：i；b；s；u；font；a……

块级元素主要⽤到的有：pre；h1-h6；p；div；hr……

还有诸多字符： ；空格字符 ©；版权符 ； &It⼩于号……

Html代码主要是承载内容，⽽Css代码则是承载了样式，代码规范有⼀点很重要，就是内容和样式分开！

CSS(Cascading Style Sheets )翻译过来就是层叠样式表。CSS 就是⽤来装饰我们的 HTML 的。就像我⽤ HTML 写了⼀段⽂字，但是⽂字的颜⾊，⽂字⼤⼩，字体等等就得依靠 CSS 来修饰了。

⿊马程序员HTML、CSS学习笔记

HTML：

//预格式化：保留⽂字在源代码中的格式，页⾯中显⽰的和源代码中的效果完全⼀致。浏览器在显⽰其中的内容时，会完全按照其真正的⽂本格式来显⽰。

例如，原封不动地保留⽂档中的空⽩，如空格、制表符等。

//HTML中空格的显⽰：使⽤ 或者加空格的时候将输⼊法设为全⾓。

//超链接：指从⼀个⽹页指向⼀个⽬标的连接关系，这个⽬标可以是另⼀个⽹页，也可以是相同⽹页上的不同位置，还可以是⼀个图⽚、⼀个电⼦邮件地址、⼀个⽂件或

者⼀个应⽤程序。超⽂本链接是超链接的⼀种，是指⽤⽂字链接的形式来指向⼀个⽬标。

HTML⽂档类型:

//只有确定了正确的DOCTYPE，XHTML⾥的标识和级联样式才能正常⽣效。在HTML 1.0中有3种DTD声明可以选择，过度的Transitional、严格的Strict和框架的

Frameset。使⽤严格的DTD来制作页⾯当然是最理想的⽅式，但对于没有深⼊了解Web标准的⽹页设计者，⽐较合适的是使⽤过渡的DTD。因为这种DTD还允许使⽤表

现层的标识、元素和属性。

：可以这样写⽽不⽤声明DTD。

基本结构：

//注释标签⽤来在源⽂档中插⼊注释，注释会被浏览器忽略。

//html元素可告知浏览器这是⼀个html类型的⽂档。

//定义在html语⾔头部的内容不会在⽹页上直接显⽰，它⽤于包含当前⽂档的相关信息，可以包含title元素、meta元素等。

//页⾯标题元素。

//meta元素⽤来定义页⾯的附加信息，其中包括页⾯的作者、版权、关键字等信息。 //编写css代码。

//引⽤外部css代码。

//在标题栏添加图⽚。 //编写javascript代码。

//引⽤外部javascript代码。

//body元素定义⽂档的主体，它包含⽂档的所有内容(⽐如⽂本、图像、颜⾊和图形等等)。

HTML标签元素：

//⽤来定义⼀个段落。在p元素中，可以包含⽂本、图⽚和⽤来修饰⽂本的元素。

Html+css学习经验总结

第一章 DIV布局

了解HTML的发展历史，搜索XHTML与HTML的区别，搜索doctype有几种，做网页要先布局，从大处着眼。

Container,控制整个页面，一般分为header、main、footer，定义div用#+名字、定义class用.

Float：浮动，分为左浮动、右浮动，定义成id为#lside(左浮)#rside(右浮) 注意：id命名时不能用数字，不加doctype，会导致低版本IE解析效果不一样。

在列表中去掉·的方法：

第二章 盒模型

边框border设置，说明border的（颜色、宽度、形状（实现、虚线、立体））四个方向上如何设置border的宽度，border:20px solid red;

solid:实线 dashed:虚线 dotted:点线 outset:立体

border-top、只定义上边框， 同理border-left border-bottom border-right

作业：用css控制div的边框画一个三角形，提示：上下左右让边框透明，画个圣诞树。

Css中的注释方式： html中的注释方式

margin属性：控制盒子与边界的距离margin-top/left/bottom/right;例：margin:30px;

padding 属性这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值 小盒子与大盒子之间的距离就是所设置的padding值

padding-top/lest/bottom/right 例：padding：4px; 如果布局已经完成，且像素正好相容，突然加了padding值可能导致什么情况发生？

html，css学习实践总结

⽹页的布局⽅式

1.什么是⽹页的布局⽅式?

⽹页的布局⽅式其实就是指浏览器是如何对⽹页中的元素进⾏排版的

1.标准流(⽂档流/普通流)排版⽅式

1.1其实浏览器默认的排版⽅式就是标准流的排版⽅式

1.2在CSS中将元素分为三类, 分别是块级元素/⾏内元素/⾏内块级元素

1.3 在标准流中有两种排版⽅式, ⼀种是垂直排版, ⼀种是⽔平排版

垂直排版, 如果元素是块级元素, 那么就会垂直排版

⽔平排版, 如果元素是⾏内元素/⾏内块级元素, 那么就会⽔平排版

2.浮动流排版⽅式

2.1浮动流是⼀种"半脱离标准流"的排版⽅式

2.2浮动流只有⼀种排版⽅式, 就是⽔平排版. 它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐, 也就是没有center这个取值

2.在浮动流中是不可以使⽤margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/⾏内元素/⾏内块级元素的

⽆论是级元素/⾏内元素/⾏内块级元素都可以⽔平排版

2.在浮动流中⽆论是块级元素/⾏内元素/⾏内块级元素都可以设置宽⾼

3.综上所述, 浮动流中的元素和标准流中的⾏内块级元素很像

3.定位流排版⽅式

浮动元素的脱标

1.什么是浮动元素的脱标?

脱标: 脱离标准流

当某⼀个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了⼀样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?

如果前⾯⼀个元素浮动了, ⽽后⾯⼀个元素没有浮动 , 那么这个时候前⾯⼀个元就会盖住后⾯⼀个元素

浮动元素的排序规则

1.浮动元素排序规则

1.1相同⽅向上的浮动元素, 先浮动的元素会显⽰在前⾯, 后浮动的元素会显⽰在后⾯

1.2不同⽅向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

浮动元素贴靠现象

1.什么是浮动元素贴靠现象?

1.如果⽗元素的宽度能够显⽰所有浮动元素, 那么浮动的元素会并排显⽰