《Head First Html&Css》学习心得

第一章 了解Html(hyperText Markup Language)

web服务器原理

1. 服务器是一台链接到物联网的计算机，用于处理用户的各种请求，存有html文件，图片，声音以及其他类型文件
2. 浏览器发送需要html网页或其他资源的请求
3. 服务器接受请求后，找到资源将其发送给浏览器

第三章 构建网页

q标签 引用文段中的内容 即加双引号 ，内联元素
blockquote 块引用 块元素
内联元素

换行元素
空元素： 没有html内容的元素称为空元素
元素= 开始符 + 内容 +结束符

第四章 链接

根目录：网页的最顶层目录，叫根目录 用/表示
http:超文本传输协议
什么叫绝对路径？
定义：网站名之后的部分
作用：告诉浏览器如何从根目录去获取特定的网页或文件
url包含传输协议、网站名、绝对路径
默认网页工作原理：
/drinks/
http请求:我可以获取文件/drinks/吗？
服务器：这是个目录，我给你找他的默认文件
找到了 传给你。
注意：服务器接收到没有以/结尾的url时会再尾部加/ 然后寻找这个目录下的默认文件
默认文件通常时 index.html 和 default.html

相对路径和绝对路径的取舍

相对路径用于本网站的页面和图片等资源，绝对路径用于跳转其他页面。

---

file协议：
告诉浏览器从电脑中读取文件 file: ///xxxxxxx/index.html
必须三根斜线

如何链接到其他网页的特定区域

用a元素创目标锚：a< id=“xx”>
链接目标锚：

链接本网页特定区域

创建目标锚
链接目标锚：

链接时重开一个窗口

a< target=”-blank”>

第五章给你的网页添加图像

gif和jpeg的差别

jpeg ：有损不支持透明，颜色多
gif: 无损支持透明 颜色只有256种
alt属性：如果图片不能显示即显示alt的值

第六章注意事项

http-equiv 属性 告诉浏览器关于网页内容类型的信息 例如conctent-type
content = “text/html”指明内容类型的信息
charset 字符编码

第八章学习css

添加下划线 属性名 border-bottom :1px solid black
外部链接样式表：<link type="text/css" rel="stylesheet" href="相对路径" />空元素

继承

与文字外观相关的样式会被继承如 字体颜色 字体 字体大小、宽度等
覆盖继承值的原则：css中被应用的规则总是最具体的
元素.类名{

}此类中的元素 使用此样式

< p class=”name”> 将p元素添加到name类中
当具体度相同时按照css样式表中排序在后的类来应用。

要点：
css中简单的表达式称为规则 包括一个选择符 若干属性和值。
选择符指定对哪些元素应用规则
元素名可以当作元素
一次选择多个元素用逗号隔开
《link》外部样式表
用.classname选择类中所有元素
一个元素可以属于多个类

第九章文字

文本和字体
fontfamily 字体 fontsize 字体大小 font-weight 字体粗细 text-decoration 文本样式如下划线等

font-family
body{
font-family :Verdana,Geneva,Arial,san-serif
}
解释： 前三个是san-sefif字体系列中的具体字体，最后加上通用的字体系列名，若前三种浏览器没有则默认使用最后一种浏览器默认的字体
字体大小
三种表示方式
font-size: px / %/em;
px:用像素表示字体的高度
%：相对继承的父元素大小的百分比
em与%类似
关键字也可以定义： samll medium large
定义页面字体的方法
选择关键字定义body字体大小即网页默认的字体大小
用em或%把别的元素的字体大小指定为相对于body字体大小的字体尺寸
优点
想要调整页面字体大小只需修改body，其他元素会自行修改大小。
字体粗细
font-weight：
bold加粗 normal正常
字体样式
font-style:
italic(斜体)

web颜色

网页的颜色是根据红绿蓝三原色以一定比例组成来指定的
设置颜色的4种方式
名字定义颜色：
back-color:silver
background-color:rgb(80%,40%,0%)
background-color:rgb(204,102,0)
background-color:#cc6600
后三种表示同一种颜色
0~255可以表示某一种原色的数值 最后一种其实就是前一种的16进制的表示
通常用调色板来选择颜色

第十章 盒模式

css中将每个单一的元素看作一个盒子
box由内容区、补白区、边框、边界组成
p、padding、border、margin
注意：补白、边界是透明的
margin/padding：上右下左 顺时针旋转
background-image:url();
背景图片额度属性： repeat:设置背景图片的平铺 常见值 no-repeat repeat-x repeat-y inherit（继承父元素的值）
在某个方向添加补白和边界：
padding-left/right/等
边框：
border-style控制边框外观， 一共八种边框样式 实线虚线等
border-weight 边框宽度
border-color
定义边框一侧
boder-top-style
border-bottom-style

多样式表

链接的样式表中最下面的样式表 优先权最高

第11章div和span

用div将网页分成几个逻辑部分
div的使用情况：
作为一个容器
不要为了结构而让网页变得复杂的使用div
效果
使用div划分结构，把网页分成几个合理的逻辑结构，有助于网页的结构清晰和样式化
一般浏览器的宽度是800像素
div{
width:200px //这里的宽度是用来定义元素内容区的宽度，浏览器会把嵌套在div中的所有元素调整成这个宽度
}
整个div的宽度等于magin+padding+width
块元素的宽度默认是auto即自动延伸到整个空间
text-align 对齐方式
text-align只能作用于块元素，但会影响一个元素中的所有内联元素
理解：div中的块元素会继承对齐方式，而块元素中的内联元素会受到父元素text-align属性的作用！

子孙选择法：
父选择符 子孙选择符｛

｝

样式缩写

margin/padding: 顺时针
padding/margin: 10px
margin:10px 上下 10px左右

根据状态化样式元素

a:link{｝
a:visited{}
a:hover{}
伪类：
作用与类一样但并不能在html文件中找到这个类
机理：浏览器会仔细检查《a》元素，并将其添加到正确的伪类中，如果被访问过则放入visited 鼠标停留的就放进hover 鼠标移开则将其再拿出来
注意：不仅只用于链接，某些浏览器也支持激活和停留其他种类的元素的伪类。而且存在其他的伪类例如first-child 复值于元素的第一个孩子

层叠

决定浏览器才有哪种样式的方法
方式：
1、收集所有的样式表包括 作者 、读者、浏览器
2、找到所有匹配申明 如需要找到font-size属性 ，找到所有《h1》元素中有font-size申明的元素
3、把所有规则写出来 按照 作者读者 浏览器的顺序排序
4、按照申明的具体程度排序
5、将所有的冲突规则按照他们在各自样式出现的顺序排序
6、第一名即为font-size属性的被浏览器所使用的规则。
具体度算法：
000
选择符id +1
这个选择符有类或伪类 每个+1
这个选择符有元素名称？ 每个+1
h1 001
h1.bule 011

作者：h1{
    color:green;
}
h1.b{
    color.red;
｝
读者：
h1{
    color:black;
}
浏览器：h1
{
    color:bule;
}

按照第三步排序：
h1 h1.b dh1 lh1
按照具体度：
h1.b h1 dh1 lh1
没有规则冲突即取得h1.b

第12章 布局和排版

流

浏览器使用流来布置页面元素
块元素 浏览器从头到尾显示他遇到的每一个元素 每个元素都会换行
内联元素 浏览器会在水平方向上一个接一个的显示
注意事项：浏览器并排内联元素且两者都有边界时，两内联元素的边界正常
浏览器并列放两个块元素时，会把边界重叠，且值为两者中的最大值

float

让一个元素尽可能靠左或右，然后让他后面的元素流到其周围
对块元素： 不影响
对内联元素：内联元素会留在其周围
clear属性:right 解释：页脚右边不能有飘逸的内容
块元素会忽略漂移元素而内联元素不会
特点：无论怎么调整浏览器的大小，内容都会扩展到填满浏览器位置。

冻结布局

把元素锁住，冻结在页面上，不能移动。
常见方式：

所有body内容 然后设置div width属性，无论怎么调整浏览器都不会改变大小

凝胶物布局

一般用于整个body部分
锁定页面中的内容区宽度，但将其放在浏览器中间
方式将margin设置成 auto 浏览器会自行计算合适的距离，让内容放在页面中间。

绝对布置

position: absolute;
top: 10px;
right:10px;
width:200px;
当一个元素被绝对布置后，浏览器会将其从流中取出，再根据top right（相对于页面而不是窗口） 等属性指明的位置放置
z-index决定被绝对布置的元素谁在上面
position
布局的默认值是static 即把元素放在正常的流中
float: 将元素从流中拿出，根据值决定飘向位置
absolute：精准的将元素放置在某一个位置（相对于父元素）
fixed: 将一个元素放置在一个精准的位置（相对于浏览器窗口）
relative:让一个元素正常的流在页面上，然后在页面显示之前让其偏移

使用百分数布置元素位置：
元素位置会随着浏览器的宽度改变而改变例 浏览器宽度为800px 元素左边设置为10% 即为80px。
被绝对布置的元素不存在clear属性
固定布置
fixed
相对布置
relative left：30px; 显示的元素相对于流的位置右边30px;