第一部分 开始起步
- 博客托管发布站点:WordPress,Blogger,Tumblr,Squarespace
- 样式模版学习:Samantha Warren的文章“Style Tiles and How They Work”(www.alistapart.com/articles/style-tiles-and-how-they-work/)
- 学习自适应web设计:《Reponsive Web Design》Ethan Marcott。初级网页设计必读书
- 未来友好站点:futurefriend.ly。汇聚了当今许多优秀手机设计师。
- 其他学习:逐步提高方法,自适应web设计,移动专用网络,可访问性(508节,WAI-ARIA),站点性能。
第二部分 HTML结构化标记
第四章
- 多个连续空格,只会显示一个。
- 制表符识别为空格。
- 浏览器会忽略不认识的元素名。
- 元素坚持用小写字母标记。
- <!DOCTYPE html>文档类型说明html5
- <meta charset = “utf-8”>
- DOM文档对象模型
- <em> </em>强调文本
- <!– 注释内容–>
- 空元素 <img>(src,alt) <br> <hr> <meta>
- 网页出错
- 若某些块元素闭标签省略斜线,浏览器将新块元素的开始,当做其结束。
- 网页有一半不见了,可能是因为缺失关闭括号>或引号。
- 浏览器能显示的图片格式为.gif,.jpeg.或jpg,.png。
第五章
- 群组标题(仅限最高的浏览器)
<hgroup>
<h1>…</h1>
<h2>…</h2>
</hgroup>
- 无序列表中 <ul> </ul>只能有列表项元素。但是列表项中可放其他元素。
- 无序列表嵌入另一个无序列表时,自动改变为二级列表的项目符号样式。当嵌套一个有序列表时,编号样式不变。
- 设置有序列表的初始编号。
如: <ol start=”17”> <ol> - 定义列表:
<dl>//定义列表
<dt></dt>//列表项
<dd></dd>//定义
</dl>
- 不能将标题和内容组织元素放入dt里,但dd里可以包含。
- 长的块级引用
<blockquote> </blockquote>,短引用q - 预格式化文本(不忽略回车和多个空格符) <pre> </pre>
- figure:用于给文本添加图片或阐述文本中的某些内容,可以包含任何内容,是独立单元。figcaprtion为其添加一段说明。
- 使浏览器支持html5,添加以下代码到文档头部
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5-els.js" ></script>
<![endif]-->
- 区段section独立的内容article
- 有联系却无关的内容aside
- 主导航链接nav
- 页眉header页脚footer,其内部不能再嵌套header和footer
- 联系信息address
- 内联元素:abbr缩写,em强调,strong重要,b关键词(粗体),i不同的语调(斜体),s不正确的文本(删除线),u注释文本(下划线),small法律文本小字打印(更小),q短引用自动加引号,cite引用(默认斜体),dfn定义术语(蓝色),sub下标,sup下标,mark标记文本(文本赋予浅色背景)。
- 内联元素abbr缩写,如
<abbr title="Points">pts</abbr>
<abbr title="American Type Founders">ATF</abbr>
- 程序代码内联元素:code代码,samp程序示例,kbd用户键盘输入文本,这三者默认等宽字体。var变量默认为斜体。
- wbr单词换行,当一行没足够空间来显示一个单词时,就会在wbr指定的位置换行。
- 泛型块级元素div
- 范型内联元素span
- id和class的特性值区分大小写,一个元素可同时拥有id和class,也可拥有多个class,用空格隔开。
- 特殊字符以&开始,以;结束。 空格
- <time datetime=”2012-11-15” pubdate>pubdate 属性指示 <time> 元素中的日期 / 时间是文档(或最近的前辈 <article> 元素)的发布日期。
第六章 添加链接
- “../”返回上一层目录
- “文件夹名”下一层目录
- “/文件夹名”站点根目录相对路径,/代表根目录,不能在本地机器使用,放到最终服务器上可使用。
- 链接网页中指定点,用#。如 <a href=”#(id号)”> </a>
- 连接到另一文档的片段。 如 <a href=”index.html#(id号)”> </a>
- 给target指定某个具体名称,如display,所有链接都会在这个窗口打开。
- 邮件链接mailto,如href=”mailto:wy@hotmail.com”。
- 电话链接: href=”tel:+1805551212”。
第七章 添加照片
- src和alt属性是img元素中必需的。
第八章 表格标记
- table表格,tr行,th表头,td单元格
- caption表格标题(表格上方居中)
- col用以识别一列,colgroup用以建立列群,如:
<caption> </caption>
<col span="1" class="itemname">
<colgroup id="data">
<col span="2" class="calories">
<col span="3" class="fat">
</colgroup>
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
- scope=”col” 规定单元格是列的表头,scope=”row”规定单元格是行的表头
- colspan列合并(向右延伸,跨越正确的列数),rowspan行合并(向下延伸,跨越正确的行数)
- headers属性用于td元素内,明确绑定到一个表头的id值中。
第九章 表单
- form内不能再包含form元素
- form表单元素的属性:action用于处理表单的程序或脚本的位置。method方法(get默认显示表单内容,post发送保护信息)。
- name特性标记变量名
- 文本输入控件:input单行输入(type=”text”,value默认值maxlength限制最大字符长度 <input type=”text”/>),textarea多行文本(placeholder提供简短的提示,cols宽rows高 <textarea> </textarea> )
- disabled使控件失效,无法选中;readonly使控件不能被更改。
- 密码输入框type=”password”,搜索域search,电子邮件地址email,电话号码tel,地址url,提交submit(可不需要name),重置reset (可不需要name),button自定义按钮 。
datalist输入类型提供包含建议值的下拉菜单。与input结合。如:
<input type="text" list="1" name="education"> <datalist id="1"> <option value="highschool"> <option value="master"> </datalist>
button元素 <button> </button>
- 单选按钮(多个name相同)
<input type=”radio”>checked=”checked”,也可为简单的checked默认选中某个按钮。 - 复选框 (多个name相同,也可不同)
<input type=”checkbox”> - 下拉菜单,select菜单控件(size=”1”)option选项 optgroup选项组
- 滚动菜单select(size为显示行数,multiple允许选用多项,如 <select name=”bands” size=”6” multiple>),option(selected默认选定)
- optgroup,用label属性为选项组提供标题。
- 文件选择控件, <input type=”file”/>
表单的属性设定(方法编码方式)必须如下:
method=”post” enctype=”multipart/form-data” - 隐藏控件 <input type=”hidden”>
- 日期时间控制 (HTML5) ,日期输入控件 <input type=”date”>(初始值必须为YYYY-MM-DD格式)时间输入控件time(hh-mm-ss),与时区有关的日期时间控件( YYYY-MM-DDThh-mm-ssTZD), 没有时区的日期时间控件( YYYY-MM-DDThh-mm-ss),一年中某一个月month( YYYY-MM ),一年中某一个星期week( YYYY-W# )
数字输入(HTML5) <input type=”number”>选择框range滑块。
如:<input type="number" name="guests" min="1" max="6"> <input type="range" name="satis" min="0" max="10" step="1">
颜色选择器 (HTML5) <input type=”color”>
- 其他html5表单元素progress持续状态的进展消息,meter动态更新状态,output计算输出值,keygen密钥对生成器
- label:隐式关联,label元素中嵌套表单控件和其描述;显示关联,label for=”控件ID值”
- fieldset表单控件的逻辑组,legend用来对其提供说明。
- web表单设计《web form design》luke
第十章 HTML5
- 添加视频 <video src=”“> </video>其他属性:width宽,height高,poster=”“在视频播放前提供一张静止的图片(ios3设备无法播放带有poster属性的视频),controls显示内置播放控件(播放暂停等),autoplay自动播放,loop循环播放,preload(auto自动加载视频,none用户点击之后再加载)。
- canvas创建一个区域,绘图
第三部分 表现层的CSS
第11章 CSS入门
1。当计算计量值时,单位应紧跟着数字。可忽略0值单位。
2。html5中,style内部样式表没有type=”text/css”这个属性。
3。样式表的权重:内敛样式表>嵌入样式表>外部样式表
4。样式值后加上!important将提高该样式的重要性,除非读者样式表也标识important才可被替换。
5。样式表层级:浏览器默认设置<用户样式设置(读者样式表)<链接的外部样式表(link元素添加)<导入的样式表(@import函数添加)<嵌入样式表(style元素添加)<内敛样式表(开标签中的style属性添加)<任何被作者标记!important的样式规则<任何被读者或用户标记!important的样式规则。
6。相同权重的样式规则冲突,执行最后一个。
第12章
1。网络字体:自创font-face,使用字体嵌入式服务器(Google网络字体免费)
2。通用字体库,首字母无需大写
serif有衬线,sans-serif笔画平直无衬线,monospace等宽,cursive模仿手写,fantasy装饰性做标题
3。字体属性(都可继承inherit):字体名font-family,字体尺寸font-size(1.5em,150%,xx-small,larger),字重粗细font-weight(normal,blod,bolder,lighter,100,200,…,900)字体样式斜体font-style(normal,italic字母弯曲斜体,oblique普通字体倾斜 ),小型的大写字母font-variant(normal,small-caps), 字体快捷属性font(font-style font-weight font-variant font-size/line-height文本线之间的间距 font- family。至少包括size与family值) ,color颜色。
4。em为相对单位,一般body为100%,其他字体大小用em,其值为目标尺寸÷内容尺寸=结果。
5。关联选择器:后代选择器(li em{}),子选择器 (p>em{}直接子代) ,相邻同胞选择器 (h1+p{}仅对于跟在h1之后的p段落有格式修改) ,一般同胞选择器 (h1~h2{}同一父代,仅对跟在h1之后h2进行格式修改)
6。通用选择器,也可关联,如#intro {}。
7。选择器优先级:ID选择器(#)>类选择器(.)>关联选择器> 独立元素选择器
8。字行设置 (都可继承inherit) :行高line-height(2,2em,200%),text-indent(仅第一行缩进,2em,25%,-35px),水平对齐text-align(left,right,center,justify左右都对齐)修饰text-decoration(none,underline,overline,line-through,blink文本闪烁),改变字母大写text-transform(none,capitalize每个单词第一个字母大写,lowercase所有字母小写,uppercase所有字母大写),字母间距letter-spacing(数值),单词间距word-spacing(数值),文本阴影text-shadow(水平移动距离 垂直移动距离 模糊半径(0不模糊) 颜色,可使用多个阴影,以第一个为基础(高亮显示0 0 .7em,凸显效果上方浅色下方深色,浮雕效果上方深色下方浅色) )
9。其他文本属性:vertical-align垂直对齐,空格的处理方法white-space(其中值为pre类似于html的per属性),visibility用来隐藏元素(值为hidden时占用空间在但不可视),text-direction文本阅读方向(ltr左到右,rtl右到左)。
10。改变列表的数字编号 (都可继承inherit)
(1)选择标记:list-style-type:none,disc实心圆,circle空心圆,square方块。
(2)标记位置list-style-position(inside,outside)。
(3)制订自己的编号list-style-image(url/none)
第13章
1。color:rgb(200,178,230); color:rgb(78%,70%,90%); color:#C8B2E6;
2。color:#FFCC00;-> color:#FC0;
3。color:rgba(0,0,0,.5或50%);.5为透明度。
4。前景色color可继承,背景色background-color不可继承(默认transparent透明)
5。不透明度opacity,不可继承,值在0~1之间
6。伪类选择器
(1)链接伪类:a:link{}未点击a:visited{}已点击
(2)用户操作的伪类::focus元素被选择并且准备输入时:hover鼠标指针悬停:active正在点击或触动。
7。伪元素选择器(CSS3双冒号,CSS2单冒号):首行first-line,首字母first-letter,之前插入内容before,之后插入内容after。
8。属性选择器:元素[属性]所有带该属性的元素(简单属性选择器), 元素[属性=“精确值”]所有属性等于该值的元素 (精确属性选择器) , 元素[属性~=“值”]所有属性含有该值的元素 (部分属性选择器) , 元素[属性|=“值”]标记用连字符分开的值 (连字符分隔属性选择器) , 元素[属性^=“值的第一部分”]属性值以子串开始的元素 (起点子串属性选择器), 元素[属性$=“值的最后一部分”]属性值以子串结束的元素 (结尾子串属性选择器), 元素[属性*=“值的任意一部分”]属性值中含有子串的元素 (任意子串属性选择器)。
9。背景图像(不可继承):添加背景图像background-image:url(图像的位置),控制拼贴方向 background-repeat(repeat,repeat-x, repeat-y, no-repeat ),背景位置background-position:水平 垂直(left/center/right top/center/bottom,200px 50px,15% 100%),背景附加方式background-attachment(scroll随窗体滚动,fixed固定,local随元素内容滚动),background-clip指定背景图像可延伸多远(border-box,padding-box,content-box),background-size背景图像尺寸(长度,百分数,auto,cover覆盖整个元素会超出,contain适应包含它的元素会留白),background-orgin计算从哪开始计算 (border-box,padding-box,content-box)。快捷背景属性background( background-color background- image background- repeat background- attachment back
ground- position)此属性小心被覆盖。
10。CSS3可应用多背景
先设置个背景图片(为不支持该属性的浏览器显示),然后指定多背景,最后指定 background-color。
11。渐变:线形渐变0度为向上
```
#banner{background-image:linear-gradient(90deg,yellow,orange 25%,blue)}
```
径向渐变 #banner{background-image:radial-gradient(center,yellow,blue)}
注意供应商前缀,建议使用在线渐变工具www.colorzilla.com/gradient-editor/直接生成代码。
12。@import需要引入style中<style>@import url(“地址”) </style>
第14章 盒子思想(填充,边框和空白边)
(本章皆无法继承)
1。指定盒子尺寸:
方法一:width,height最后用百分数
方法二:box-sizing:content-box,border-box。再指定宽和高,需要浏览器支持。
2。处理溢出overflow:visible,hidden,scroll,auto
3。填充:padding-top, padding-right, padding-bottom, padding-left,padding。
快捷padding:(1)1个值:所有方向 (2)2个值:上下 左右(3)3个值:上 左右 下 (4)4个值:上 右 下 左
4。边框:
(1)边框样式:border-top-style……border-style。none,solid实线,double,dotted,dashed,groove,ridge,inset,outset。
(2)边框厚度:border-top-width…… border-width。长度单位,thin,medium,thick。
(3)边框颜色:border-top-color……border-color
(4)联合使用:border-top……值为style width color,此值可颠倒顺序
(5)圆角边框:border-top-left-radius, border-top-right-radius,border-bottom-left-radius, border-bottom-right-radius。border-radius长度值百分值。注:两个值时为水平和垂直的椭圆。如 border-top-left-radius:50px 100px, border-radius:36px 40px 60px 20px/12px 10px 30px 36px。加浏览器前缀。
(6)图片边框border-image:url(文件位置) 55 55 55 55(上右下左切边的偏移量) stretch(拉伸,也可repeat,round调整大小后拼贴) 加浏览器前缀。
-moz-,-webkit-,-o-
5。空白边
margin-top……margin。值为计量值百分比auto
注:空白边行为:重叠空白边,内联元素的空白边(不可替换元素如文本仅显示左右空白,可替换元素如图像上下左右皆显示),负空白边,如将下段上移
6。display使内敛元素强制成块元素执行盒子效果display:block
7。盒子阴影box-shadow:水平偏移 垂直偏移 模糊距离 扩散距离 色彩 inset(可以使影子显示在盒子内部)。用逗号分隔多个阴影值列表。需使用浏览器前缀。
第15章 浮动与定位
1。浮动
float:left,right,none。默认none。
注:
(1)浮动元素(也包括空白边)在包含元素的内容区域中。
(2)内联也可浮动。内联元素浮动必须有宽度。内联元素的空白边不会重叠。
(3)清楚浮动:clear(left,right,both,none,inherit)
(4)处理包含浮动:将包含元素也是何为浮动且宽度为100% 或者 将溢出overflow设为auto或hidden。
2。定位
position:static(默认),relative,absolute,fixed
top/right/bottom/left:长度计量值,百分比,auto。
(1)相对定位relative,原来的位置被保留,可能会发生交叠
(2)绝对定位absolute,原来的空间被占用。相对最近的包含块定位,若无相对于html。
(3)包含块: position设置为relative,当内联元素作为窗口块时,定位元素是相对于其边框定位,而定位元素是以其外边缘(空白边之外)移动。
(4)堆叠顺序
z-index:数字或auto。
(5)固定定位:相对于浏览器窗口永远固定。应小心移动设备,尽量用JavaScript
第16章 使用CSS进行网页布局
一、四种布局方式
1。固定布局:用div(content,container,wrapper,page)用px指定
2。液态网页设计,以百分比指定宽度,用max-width和min-width指定
3。弹性布局:行长和换行保持不变,用em指定
4。混合布局
二、其他
1。outline与border类似属性,可用来检测布局
三、三种网络布局技术
1。使用浮动元素的两栏和三栏布局
2。使用浮动和负值空白边的源独立布局
3。使用定位的多栏布局
第17章 过渡、变换和动画
1。过渡
(1)指定转变的属性:transition-property:属性名称(如background-color),all
(2)持续时间:transition-duration:时间(如0.2s)
(3)定时功能transition-timing-function:
ease(缓慢启动,加速,缓慢停止),linear(匀速),ease-in(开始缓慢,然后加速), ease-out(快速启动,然后缓慢), ease-in-out(与ease类似,但中间加速不明显),cubic-bezier(#,#,#,#),steps(#,start/end),step-start(突然的状态改变,类似没有效果) ,step-end(持续时间结束后改变状态)。
(4)设置延时transition-delay:时间,与active{opacity:0}一起使用。这可以告诉用户,你在犹豫不决!
(5)快捷属性transition:property duration timing-function delay
注:加供应商前缀。可应用多个属性,若持续时间少将循环进行。
2。变换
注:加供应商前缀。
(1)旋转transform:rotate(-10deg);
旋转点(默认中心点)transform-origin:水平 垂直(百分比,长度,left,center right,top,bottom)。
(2)平移 transform:translateX(50px);
transform:translateY(50px);
transform:translate(50px,25px);
(3)缩放
transform:scaleX(1.5);
transform:scaleY(1.5);
transform:scale(1.5);这三者效果相同
transform:scale(1.5,.5);
(4)倾斜
transform:skewX(15deg);
transform:skewY(30deg);
transform:skew(15deg,30deg);
(5)多个变换
transform:function(value) function(value) ;
(6)3d变换perspective
3。关键帧动画
注:加供应商前缀。
@keyframes colors{
0%{background-color:red;}}
添加动画属性
animation-name:动画名
animation-duration:动画持续时间
animation-timing-function:动画加速方式
animation-delay:动画延时
animation快捷属性
第18章 CSS技术
1。图像代替技术。
如h1#logo{
width:
height:
background:url()no-repeat;
text-indent:100%;推到最右面
white-space:no-wrap;文字不自动换行
overflow:hidden;任何超出元素框的内容都不可视
}
也可 text-indent:-9999px;
2。CSS sprite,使用background-position给每个链接定位。
3。sass语法
定义变量用$ 变量名,定义样式组合@组合名(调用@include 组合名)
4。去除textarea右下角的拖动手,resize:none。
5。样式化表格
(1)表格显示方法border-collapse:separate(表格分开),collapse (表格折叠)。
(2)表格间距border-spacing:水平长度值 垂直长度值
(3)空单元格empty-cells:show,hide
6。设置视窗大小
第四部分 JavaScript行为
第19章 JavaScript简介
1。<script type=“text/javascript”>…</script>
2。JavaScript区分大小写。
3。申明alert(),confirm(),prompt()
4。注释:单行//注释文本;多行/注释文本/
5。变量var foo=5;字符串 var foo=“5”;数组 var foo=[“5”,1];
6。==等于(“5”==5为true)===等同于 (“5”===5为false)
7。var定义局部变量,无var为全局变量
第20章 使用JavaScript
1。DOM节点(元素节点,属性节点,文本节点)
2。访问 DOM节点
(1)通过元素名称
getElementsByTagName()
(2)通过id属性值getElementsById()
(3)通过类属性值
getElementsByClassName()
(4)通过选择器
querySelectorAll()
(5)获得属性值getAttribute()
(6)改变属性值setAttribute()
(7)改变文本节点:变量.innerHTML=“”
(8)改变样式.style
3。添加元素
createElement()添加元素
creatTextNode()输入文本
appendChild()将文本与元素结合
insertBefore()元素前插入某元素
replaceChild()代替
removeChild()移除