（一）HTML+CSS学习笔记

参考书籍：

Head First HTML 与 CSS.

提示：以下总结都是对自己来说比较陌生且重要的各章节知识点

---

一、初始HTML

1.HyperText Markup Language(超文本标记语言）——建立网页结构

2.Cascading Style Sheets（层叠样式表）——控制HTML的表现

3.web服务器存储并提供网页；浏览器获取并显示内容。

4.主流浏览器内核：

浏览器	内核
IE	Trident内核
Safari	webkit内核
Firefox	Gecko内核
Chrome/Opera	Blink内核

二、超文本（链接）

1.<a>元素的href属性：用于下载文件、图片等网络资源；以及锚点链接（http//…#classname)

2.构建网站的初期组织好网站文件，以免升级时修改一堆路径。

3.target属性："_blank"值打开新标签选项卡；"_self"值原标签打开链接

4.rel属性指定HTML文件与所链接文件之间的关系。

5.伪类：

:link //未访问
:visited //已访问
:hover //悬停
:focus //用键盘聚焦
:active //第一次单击键盘时就处于活动状态

三、构建模块

1.尽可能用元素告诉浏览器你的内容含义。

2.显示与隐藏：

//不占有原来的位置
display:none/block;

// 保留位置
visibility:visible/hidden;

//溢出容器
overflow:visible（显示在框外）/hidden/scroll/auto;

四、链接起来

1.URL（统一资源定位符），URI（统一资源标识符；URL是它的子集）

2.可解决图片底侧有空隙（由于默认基线对齐）

vartical-align:bottom/middle/top/baseline(基线，默认） 

3.溢出文字成省略号

//单行
{
	white-space: nowrap;(不换行）
	overflow: hidden;
	text-overflow: ellipsis;
}
//多行
{
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; /*在第二行*/
	-webkit-box-orient: vertical;
	
}

五、图像

1.alt属性：无法找到图像时，显示描述（必要属性）

2.图片格式:

图片格式	优缺点
PNG	为logo设置蒙版、柔化边缘（无损；色彩多；透明多种；大）
GIF	动画（无损；色彩少；透明一种颜色；大）
JPEG	适合照片；复杂的图像（小）

3.精灵图（雪碧图）
——减少服务器接收和发送请求次数，提高页面加载速度。

六、标准及其他

1.HTML5向后兼容性，支持新方法、老方法。

2.背景：

background-position:x y;
background-attachment: scroll/fixed;
//线性渐变背景
background：linear-gradient(起始方向，颜色1，颜色2);

3.颜色：

rgba( 0,0,0,.3）（加了透明度）;
rgb(0,0,0);

4.CSS三大特性

a .层叠（就近）覆盖（权重）
b .继承（主要文本样式）eg：text-、font-、line-、color、visibility和cursor。
c .权重：

种类	权重
继承或*	0,0,0,0
标签或伪元素	0,0,0,1
属性选择器、类、伪类	0,0,1,0
id选择器	0,1,0,0
行内style	1,0,0,0
!important	无穷大

七、CSS规范

1.CSS属性书写顺序（布局->自身->文本->其他「CSS3属性」）

2.布局思路：可视区（版心）；模块->行->列

八、字体

1.font-family：“…”,sans-serif;
多个候选字体用逗号隔开，有空格的字体用双引号，最后一个用通用字体

2.Web字体（放在css文档开头）

@font-face {
	font-family:"...";    //命名一个名字
	
	src: url("......."),
	 	 url(".......");
}

3.利用继承方便改变整体字体

body {font-size: small/medium;}

h1 {font-size: 50%;}

p {...: 30%;}

4.字体图标

a. 下载 （www.icomoon.io/www.iconfont.cn)

b. 使用：iconfont文件目录 放在根目录

c. 复制

@font-face {
		.........
		.........
		font-display: block;
}

//图标追加
i {
	font-family: .....;
}

九、边框

1.元素的背景不会延伸到外边距

2.样式

border-radius: ....; 
 //4个值4个角；两个值分别是对角（第一个值：左上和右下；第二个值：右上和左下）
 
border-style: solid .....;

3.HTML文件中最后链接的样式表最为优先。

4.制作三角形

box {
		width: 0;
		height0;
		border: 10px solid transparent; //透明色
		border-left-color: pink; //三角的颜色（覆盖）
}

//强化
{
		width: 0;
		height: 0;
		border-width: 100px 50px 0 0;
		border-style: solid;
		border-color: transparent white transparent transparent;
}

十、盒子

1.用<div>构建逻辑区保证结构清晰（归组、嵌套）

2.text-align：用于块元素文本内容对齐（行内、行内块；可被所有嵌套的块级元素继承）

3.width值

box-sizing值	width值
border-box	内容区 + padding + border = width
content-box	内容区 = width

4.块元素水平居中 -> margin: 0 auto;

5.行内、行内块水平居中 -> 父元素text-align：center；

6.阴影

box-shadow: h-shadow(水平偏移） w-shadow(垂直偏移） blur(模糊程度)  spread(尺寸） color  outset(默认）;

text-shadow: h-shadow v-shadow blur color;

十一、列表

1.列表css属性

list-style-type:disc(默认)/circle(圆圈)/square(方块)/none;
//自定义
list-style-type: url(....);

2.列表分类
-<ul> 无序
-<ol> 有序
-自定义列表< dl> – <dt> – <dl>

十二、布局与定位

1.flow（流）
浏览器放置元素： 块级元素从上–>下；内联元素从左上–>到右下

2.上下相邻两块元素折叠最大的外边距。

3.浮动元素（float）
-必须有宽度
-父级元素装不下另起一行
-顶端对齐
-给行内元素添加浮动–>行内块特性
-行内+浮动 = 行内块（可设w、h）块+浮动 = 行内块（w根据内容）

4.清楚浮动
-浮动元素末尾加<div style=“clear: both;”></div>或；
-父级元素加overflow: hidden;

5.定位
-static（静态）默认在正常流中
-relative（相对）相对外包元素定位
-absolute（绝对）从流中删除，相对于父元素
-fixed（固定）不随页面滚动（优惠券）相对于视窗
-z-index:只有定位才有z-index值（非static）

6.定位盒子居中

{
	position: absolute;
	left: 50%
	top: 50%
	margin-left: 盒子宽度一半（负值）;
	margin-topt: 盒子宽度一半（负值）;
}

7.CSS表格布局
-整体包含<div id =“table-container”>
-各拦包含在一行 <div id =“table-row”>

#table-container {
			display: table;
			border-spacing: 10px;
}
#table-row {
		display: table-row;
}
#.... {
		display: table-cell;
}

十三、表单

1.所有元素在<form>中
-<form action = “…php” method = “POST/GET”>
-action属性包含一个服务器脚本，把表单数据给服务器脚本的方法

---

总结

参考《Head First HTML 与 CSS》的学习 ，让我从抽象的角度理解了HTML与CSS是如何配合完成网页的，同时让我也让我更想去汲取Java Script这门语言。