2019年1月31日星期四 1点
《零基础学HTML5+CSS3（全彩版）》开始全面学习
前提：
11月20日开始学Python，可能因为太累了，也可能遇到了瓶颈，进入了一个迷茫期，1月6日，开始学前端。学《案例学web前端开发（HTML+CSS3+JavaScript+手机响应式网页开发）》，看了几天的随书视频，觉得讲的太慢了。看书眼睛实在花的不行。1月7日开始学习腾讯课堂《Web前端开发HTML+CSS精英课堂》【渡一教育】主讲老师姬成，讲得不错。期间安装配置了很多的开发工具和UBUNTU系统、女儿订婚东北来客等占用了大量的时间。第一遍视频比较粗略，第二遍视频看得比较仔细。昨天早些时候，全部看完，包括淘宝网静态页面的视频也已经看完。不过，淘宝网静态页面自己动手只做了最上面的导航栏部分。可能是比较习惯了编程吧，对于这类说技术含量有一点点，但大部分都是低水平的重复繁琐的劳动性工作（比如小图标的搜集、各个盒模型的尺寸、很多的颜色值、字体字号、对齐方式等等等等），真的好烦，没有这种耐心。明明知道前端这就是主要工作，但是，还是做不来。
今天终于开始了新的课程：腾讯课堂《Web前端开发之JavaScript(Js)精英课堂》【渡一教育】姬成主讲，听了不到两节课，正赶上渡一教育的直播课《纯CSS旋转魔方》，里面用到了CSS3和JS的有关内容，觉得，还得看书系统的学上一遍再看视频的好，这样兴许知识点会记得扎实些，况且，编程语言之于我还是比较熟路的。
于是，就可这本书开始学习吧，夜深人静正当时──
第1章 HTML基础（貌似没啥新知识，也得过一遍，空杯很重要）
关于
的属性几乎都不推荐使用，但觉得设置页面的背景水印图片还是需要的，根据框架、样式、行为相分离的原则，还是在CSS中定义的好，比较好控制，像固定水印，属性根本就不好用。设置页面水印背景图片的CSS：
body{
background: #fff url(sy4.jpg) center 0 no-repeat; /*背景色、图片、居中、不重复*/
background-attachment: fixed; /*水印图片固定不动*/
background-size: 100% auto; /*水印图片宽度占满页面宽度*/
}
第2章 文本
标题：标题标记；标题的对齐方式
文字：文字的斜体、下划线、删除线；文字的上标与下标；特殊文字符号
段落：段落标记；段落的换行标记；段落的原格式标记
水平线：水平线标记；水平线标记的宽度
1、
文本内容 对齐方式：left、center、right
可用CSS代替：text-align:center;
2、斜体内容一 斜体内容二 斜体内容三
带下划线的文字 带删除线的文字
可用CSS代替： font-style: italic; /*斜体字体*/
text-decoration:line-through;/*underline下划线，line-through贯穿线，overline上划线*/
3、上标
下标
4、 空格 <小于< >大于> "引号”
5、
原格式标记排版空格和回车等格式字符均起作用了、标签也可以正常输出。
6、
水平线及其宽度 二〇一九年一月三十一日星期四4时6分37秒上海
二〇一九年一月三十一日星期四10时18分29秒
第3章 图像与超链接
添加图像：图像的基本格式；添加图像
设置图像属性：图像大小与边框；图像间距与对齐方式；替换文本与提示文字
链接标记：文本链接；书签链接
图像的超链接：图像的超链接；图像热区链接
1、
2、
3、链接文字 target:_blank/_parent/_self/_top
5、图像的超链接：
6、图像的热区链接（映射图像）：可以将图像分成不同的区域进行链接设置。
引用图像，并起了一个名称
在一个图像中定位一个小区域的坐标是比较难的！用微软的画图软件可以方便地定位坐标！
shape=”tect”矩形：coords包含四个参数l,t,r,b:左上角到右下角对角线坐标。
shape=”circle”圆形：coords包含三个参数：圆心坐标和半径。
shape=”poly”多边形：取各顶点的坐标，最好用可视化软件设置。
举例：
第4章CSS3概述
CSS3概述：发展史；简单CSS示例
CSS3选择器：属性选择器；类和ID选择器；伪类和伪元素选择器；其他选择器
常用属性：文本相关属性；背景相关属性；列表相关属性
1、 在HTML文件中引入CSS文件。
2、属性选择器：[att=val]{} 很强大：可以是标准属性，也可以是自定义属性，但语义化要好。
3、类和ID选择器，用的最多的选择器！
4、伪类选择器,注意出场顺序： :link未访问、:visited已访问、:hover鼠标悬停、:active鼠标单击
5、伪元素选择器：:before对象内部前端、:after对象内部尾端、first-line对象内第一行、first-letter对象内第一个字符
《Zen Coding: 一种快速编写HTML/CSS代码的方法》
6、其他选择器：E{}标记选择器、E F包含选择器、*通配符选择器、E>F子包含选择器、E+F相邻兄弟选择器、E-F通用兄弟标记选择器、E:lang(fr) :lang伪类选择器、E:first-child结构伪类选择器、E:focus用户操作伪类选择器。
7、文本相关属性：
font-famili:name1,[name2],[name3] 设置字体及备用字体
font-size:length 设置字体的尺寸，单位：px像素、em字母的高度、ex字母的高度、……
color:color具体的颜色，表示方式：颜色英文、十六进制、RGB值、HSL
text-align:left|center|right|justify 对齐方式：左、中、右、两端对齐。
font-weight:lighter|normal|bold|bolder或 100|200|300|400|500|600|700|800|900 设置字体粗细
font-style:normal|italic|oblique 设置字体倾斜程度
line-height:行高 设置行高（实现垂直居中对齐）
text-decoration:underline下划线|line-through贯穿线|overline上划线
text-indent:length文本缩进
text-overflow：clip|ellipsis 文本溢出时，是否显示省略号…
whilte-space:normal|nowrap 多行文本是否强制在同一行显示
vertical-align:top|middle|bottom 垂直对齐方式
8、背景相关属性：
background-color：color|transparent 设置背景颜色和透明度
background-image:url() 设置背景图片
background-repeat:no-repeat 背景图片的平铺方式
background-attachment:scroll|fixed 设置背景图片随页面内容滚动方式
background-position:length|percentage|top|center|bottom|left|right 设置图片的放置位置
9、列表相关属性：
list-style:列表的复合属性
list-style-image:将图像设为列表项标记
list-style-position:列表项的标志在文本以内或以外
list-style-type:设置列表项标志的类型
第5章 CSS3高级应用
框模型：外边距margin；内边距padding；边框border
布局常用属性：浮动；定位相关属性
动画与特效：变换transform；过渡transition；动画animation
1、 外边距margin: margin top|right|bottom|left; 设置外边距。
2、 内边距padding: padding top|right|bottom|left; 设置内边距
3、 边框border：border top|right|bottom|left; 设置边框
border-color:边框颜色
border-style:边框样式,dashed虚线、dotted点线、double双线、solid单线、groove3d凹槽、inset3D凹边、outset3D凸边、tidge菱形框、hidden隐藏边框、none没有边框
border-width:medium中边框|thin窄边框|thick宽边框|length指定框宽度
border-radius:半径值 指定圆角
4、 浮动：float:left|right|none
5、 定位：position:static|absolute|relative|fixed
6、 动画之变换transform：
旋转：transform: rotate(30deg);顺时针旋转30度
缩放：transform:scaleX(2);水平方向拉伸2倍
平移：transform:translateX(60px);在水平方向平移60px
倾斜：transform:skew(3deg,30deg);水平旋转3度，垂直旋转30度
模拟风车转动：transform: rotate(-3600deg) translate(-50px,-50px); 转十圈
transition: 10s all ease; 总用时10秒
7、动画之过渡transition:
参与过渡的属性：transition-property:all|none|
过渡持续时间：transition-duration:
延迟过渡时间：transition-delay:
指定动画类型：transition-timing-function:linear线性过渡（匀速）、ease平滑过渡（减慢）、ease-in加速过渡、ease-out减速过渡、ease-in-out先加速再减速、cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
8、动画：animation
定义关键帧：@keyframes name{
例如：@-webkit-keyframes opacityAnim{
from{opacity:0;}
to{opacity:1;}
}
或：@-webkit-keyframes complexAnim{
0%{opacity:0;}
20%{opacity:1;}
50%{-webkit-transform:scale(0.8);}
80%{opacity:1;}
100%{opacity:0;}
}
定义动画属性：animation:复合属性。指定对象所应用的动画特效。
animation-name:name 动画名字
animation-duration:time+ 动画持续的时间
animation-timing-function: 动画的过渡类型
animation-delay:time+ 动画延迟时间
animation-iteration-count:number或infinite 动画的循环次数或无限循环
animation-direction：normal|alternate 动画循环方向：正向和反向
animation-play-state:running|paused 动画状态：运动和暂停
animation-fill-model:动画时间之外的状态：forwards动画结束、backwards动画开始、both
例如：.mr-in{
animation-name:lun;
animation-duration:10s;
animation-timing-function:linear;
animation-direction:normal;
animation-iteration-count:infinite;
}
还可以用一行来代替：.mr-in{
Animation:lun 10s linear infinite normal;
}
二〇一九年二月一日星期五1时55分38秒上海
二〇一九年二月一日星期五11时3分23秒
第6章 表格与
简单表格：简单表格的制作；表头的设置
表格的高级应用：表格的样式；表格的合并；表格的分组
标记：标记的介绍；标记的应用
1、 表格标记
| 、还有 2、 表头标记：表头单元格标记 被表头标记 | 3、 4、
|