《零基础学HTML5+CSS3(全彩版)》读书笔记

日期： 2019-02-08 分类：跨站数据测试 313次阅读

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基础（貌似没啥新知识，也得过一遍，空杯很重要）

关于<body>的属性几乎都不推荐使用，但觉得设置页面的背景水印图片还是需要的，根据框架、样式、行为相分离的原则，还是在CSS中定义的好，比较好控制，像固定水印，<body>属性根本就不好用。

设置页面水印背景图片的CSS：

body{

background: #fff url(sy4.jpg) center 0 no-repeat; /*背景色、图片、居中、不重复*/

background-attachment: fixed; /*水印图片固定不动*/

background-size: 100% auto; /*水印图片宽度占满页面宽度*/

}

第2章文本

标题：标题标记；标题的对齐方式

文字：文字的斜体、下划线、删除线；文字的上标与下标；特殊文字符号

段落：段落标记；段落的换行标记；段落的原格式标记

水平线：水平线标记；水平线标记的宽度

1、<h1 align=“对齐方式”>文本内容</h> 对齐方式：left、center、right

可用CSS代替：text-align:center;

2、<em>斜体内容一</em> <I>斜体内容二</I> <cite>斜体内容三</cite>

<u>带下划线的文字</u> <strike>带删除线的文字</strike>

可用CSS代替： font-style: italic; /*斜体字体*/

text-decoration:line-through;/*underline下划线，line-through贯穿线，overline上划线*/

3、<sup>上标</sup>

4、 空格 <小于< >大于> "引号”

5、<pre>原格式标记排版</pre> 空格和回车等格式字符均起作用了、标签也可以正常输出。

6、<hr width=’80%’> 水平线及其宽度二〇一九年一月三十一日星期四4时6分37秒上海

二〇一九年一月三十一日星期四10时18分29秒

第3章图像与超链接

添加图像：图像的基本格式；添加图像

设置图像属性：图像大小与边框；图像间距与对齐方式；替换文本与提示文字

链接标记：文本链接；书签链接

图像的超链接：图像的超链接；图像热区链接

1、<img scr=”图像”title=”提示文字”alt=”替代文字”height=”高” width=”宽” >

2、<img scr=”图像” hspace=”水平间距” vspace=”垂直间距” align=”对齐方式” border=”框”>

3、<a href=’链接地址’ target=’窗口方式’>链接文字</a> target:_blank/_parent/_self/_top

4、书签链接：<a name=’demo’>设置锚点</a> <a href=’#demo’>跳转到锚点</a>

5、图像的超链接：<a href=”链接地址” target=”打开方式”><img src=”图像文件地址”></a>

6、图像的热区链接（映射图像）：可以将图像分成不同的区域进行链接设置。

<img src=”整幅图像地址” usemap=”定义映射图像名称”> 引用图像，并起了一个名称

</map>

在一个图像中定位一个小区域的坐标是比较难的！用微软的画图软件可以方便地定位坐标！

shape=”tect”矩形：coords包含四个参数l,t,r,b:左上角到右下角对角线坐标。

shape=”circle”圆形：coords包含三个参数：圆心坐标和半径。

shape=”poly”多边形：取各顶点的坐标，最好用可视化软件设置。

举例：

</map>

</di

第4章CSS3概述

CSS3概述：发展史；简单CSS示例

CSS3选择器：属性选择器；类和ID选择器；伪类和伪元素选择器；其他选择器

常用属性：文本相关属性；背景相关属性；列表相关属性

1、<link href=”css文件名”> 在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 设置背景图片随页面内容滚动方式

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|<property list> all指所有的可以进行过渡的

过渡持续时间：transition-duration:<time>[,<time>]

延迟过渡时间：transition-delay: <time>[,<time>]

指定动画类型：transition-timing-function:linear线性过渡（匀速）、ease平滑过渡（减慢）、ease-in加速过渡、ease-out减速过渡、ease-in-out先加速再减速、cubic-bezier(x1,y1,x2,y2)贝塞尔曲线

8、动画：animation

定义关键帧：@keyframes name{<keyframes-blocks>}; name为动画名称，<keyframes-blocks>为不同时间段的样式规则：from{属性键值对列表}to{属性键值对列表}

例如：@-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章表格与<div>标记

简单表格：简单表格的制作；表头的设置

表格的高级应用：表格的样式；表格的合并；表格的分组

<div>标记：<div>标记的介绍；<div>标记的应用

<span>标记：<span>标记的介绍；<span>标记的应用

1、表格标记<table>、行标记<tr>、单元标记<td>、还有<caption><th><col><colgroup><tffot><tbody>等

2、表头标记：表头单元格标记<th>被表头标记<caption>包裹

3、 <tr>属性实例：<tr height=”36”bgcolor=”#DD2727” align=”center”>

4、 <table>属性实例：<table align=’center’ border=’1px’ cellpadding=’10%’>

5、 <td>引入图像：<td><img src=’引入图片地址’></td>

6、表格的合并：<td colspan=’跨的列数’ rowspan=’跨的行数’>

7、表格的分组：表格可以使用<colgroup>标记对列进行样式控制，<col>具体的列控制。

例如：<colgroup>

</colgroup>

8、<div>标记：division块级标记

9、<span>标记：是行内标记，前后不会换行，没有结构意义，纯粹是应用样式。可以插入class、id等语法内容的容器。当其他行内元素都不合适时，请使用<span>标记。

第7章列表

列表的标记；无序列表；有序列表；列表的嵌套

1、列表的标记：<ul>无序列表<ol>有序列表<dir>目录列表<dl>定义列表<menu>菜单列表<dt><dd>定义列表标记<li>列表项标记。

2、关于无序列表项前去除小圆点，<ul type=”none”>即可，无需在CSS中list-style-type:none;

3、定义列表：<dl>定义列表:一般两层结构；<dt>名词部分；<dd>解释部分。应用于项目与内容的结合。

第8章表单

表单概述：概述；表单标记<form>

输入标记：文本框；单选框和复选框；按钮；文件域和图像域

文本域和列表：文本域；列表/菜单

1、表单的基本属性：<form active=”” name=”” method=”” enctype=”” target=””>…</form>

active表单的处理程序：表单收集到的资料将要提交的程序地址。name设置表单名称。

method=get|post处理程序获得信息的方式。target=_blank目标窗口的打开方式

enctype=信息提交的编码方式：text/plain|application/x-www-form-urlencoded|multipart/form-data

2、单行文本框：<input type=’text’name=’’size=’’maxlength=’’value=’’ placeholder=’username’> placeholder预期值的简短提示信息

3、密码输入框：<input type=’password’ name=’’size=’’maxlength=’’value=’’>

4、<label>标签：可以实现绑定元素。

5、单选按钮：<input type=’radio’ name=’单选按钮名称’ value=’选中后取值’checked>

6、复选框：<input type=’checkbox’ name=’名称’ value=’复选框的值’checked>

7、普通按钮：<input type=’button’ value=’按钮的取值’name=‘按钮名’ οnclick=“处理程序”>配合

8、提交按钮：<input type=’submit’ value=’按钮的取值’name=’按钮名’>

9、重置按钮：<input type=’reset’ value=’按钮的取值’name=’按钮名’>

10、图像域：<input type=‘image’src=’’name=’’>

11、文件域：<input type=‘file’accept=’’name=’’> accept可接受的文件类别，有26种，不可自定义。

12、文本域：<textarea name=“文本域名称”value=“默认值”rows=“行数”cols=“列数”></textarea>

13、菜单列表类控件：<select name=””size=’’multiple=’’value=’’selected></select>

第9章多媒体

HTML5多媒体的简述：HTML4中多媒体的应用；HTML5页面中的多媒体

多媒体元素基本属性

多媒体元素常用方法：媒体播放时的方法；canPlayType(type)方法

多媒体元素重要事件：事件处理方式；事件介绍；事件示例

1、多媒体：音效、音乐、视频和动画。

2、对HTML5的video元素、audio元素支持的浏览器：Chrome、Fiefox、Opera和Safari。

3、音频的播放：<audio src=”音频文件”autoplay自动播放 controls播放控制条 loop循环播放 preload=’auto|meta|none’></audio>

4、视频的播放：<video width=’640’height=’360’src=’music.mp3’></video>

常用属性：autoplay自动播放；controls播放控制条；loop循环播放；preload=”none|metadata|auto”不预加载|只预加载元数据|预加载全部；poster=‘pic.jpg’视频不可用时的替代图片；error返回出错代码（js用）；networkState返回网络状态（js用）；……还有很多，基本上都是JS能用的属性。

常用事件：

loadstart客户端开始请求数据；progress客户端正在请求数据（缓冲）；play播放时；pause暂停；

ended当前播放结束时；timeupdate播放时间发生改变时；canplaythrough歌曲载入完全；canplay缓冲至可播放

5、source指定多个播放格式与编码方式：

例1、<source src="song.ogg" type="audio/ogg">

例2、<source src="song.mp3" type="audio/mpeg">

第10章 HTML5新特性

1、 HTML5的新特性：兼容性：兼容以前的版本。实用性和用户优先：只封装了切实有用的功能。化繁为简：以浏览器原生能力替代复杂的JavaScript代码；新DOCTYPE;新字符集声明；简单而强大的API；错误恢复机制。无插件规范。

2、 HTML5和HTML4的区别：语法的变化：规范向现实靠拢。标记方法：内容类型没有变化；要进行DOCTYPE声明；字符编码的设置。

3、可以省略结束标记的元素：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td和th元素。

4、可以省略整个标记的元素（开始标记都不用写）：html,head,body,colgroup和tbody。

5、不允许写结束标记的元素：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr。

6、允许省略属性值的属性（值为真的属性直接写属性名本身）：checked,readonly,disabled,selected,defer,ismap,nohref,noshade,nowrap,multiple,noresize。

二〇一九年二月二日星期六8时40分7秒

7、<base>为所有链接规定默认地址或默认路径：统一域名，集中权重；节约带宽；缩减url；清除标记；方便数据迁移；更轻松重定向所有相对url；有助于脱机查看网页。

注意：webstorm的除了项目目录以外的目录引用都引用不了，浪费了几个小时了都没搞明白！！！！

解决：File->Settings…->Directores 在最右侧 +Add Content Root栏目可以添加或删除目录，但Run **.html将不可用，而变成了Show in Explorer然后弹出窗口选择要执行的html文件！！！

8、HTML5新增的元素：

结构相关：

①、<section></section>：定义文档或应用程序的一个区段。比如章节、页眉、页脚等。标示文档结构。

与<div>差不多，可能为了语义化更好一些吧。最好就是包裹标题+内容的段落。

②、<article><

除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog

标签：javascript 前端数据库

上一篇： Python 实现插入排序

下一篇：线性回归 - 多元线性回归案例 - 分析步骤、输出结果详解、与Python的结果对比 -（SPSS建模）

Young87

So happy to code my life!

《零基础学HTML5+CSS3(全彩版)》读书笔记