第一部分开始起步

博客托管发布站点：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()移除

《Web前端工程师修炼之道》学习笔记相关推荐

第二行代码学习笔记——第六章:数据储存全方案——详解持久化技术
本章要点任何一个应用程序,总是不停的和数据打交道. 瞬时数据:指储存在内存当中,有可能因为程序关闭或其他原因导致内存被回收而丢失的数据. 数据持久化技术,为了解决关键性数据的丢失. 6.1 持久化技 ...
第一行代码学习笔记第二章——探究活动
知识点目录 2.1 活动是什么 2.2 活动的基本用法 2.2.1 手动创建活动 2.2.2 创建和加载布局 2.2.3 在AndroidManifest文件中注册 2.2.4 在活动中使用Toast ...
第一行代码学习笔记第八章——运用手机多媒体
知识点目录 8.1 将程序运行到手机上 8.2 使用通知 * 8.2.1 通知的基本使用 * 8.2.2 通知的进阶技巧 * 8.2.3 通知的高级功能 8.3 调用摄像头和相册 * 8.3.1 调用 ...
第一行代码学习笔记第六章——详解持久化技术
知识点目录 6.1 持久化技术简介 6.2 文件存储 * 6.2.1 将数据存储到文件中 * 6.2.2 从文件中读取数据 6.3 SharedPreferences存储 * 6.3.1 将数据存储到 ...
第一行代码学习笔记第三章——UI开发的点点滴滴
知识点目录 3.1 如何编写程序界面 3.2 常用控件的使用方法 * 3.2.1 TextView * 3.2.2 Button * 3.2.3 EditText * 3.2.4 ImageView ...
第一行代码学习笔记第十章——探究服务
知识点目录 10.1 服务是什么 10.2 Android多线程编程 * 10.2.1 线程的基本用法 * 10.2.2 在子线程中更新UI * 10.2.3 解析异步消息处理机制 * 10.2.4 ...
第一行代码学习笔记第七章——探究内容提供器
知识点目录 7.1 内容提供器简介 7.2 运行权限 * 7.2.1 Android权限机制详解 * 7.2.2 在程序运行时申请权限 7.3 访问其他程序中的数据 * 7.3.1 ContentRe ...
第一行代码学习笔记第五章——详解广播机制
知识点目录 5.1 广播机制 5.2 接收系统广播 * 5.2.1 动态注册监听网络变化 * 5.2.2 静态注册实现开机广播 5.3 发送自定义广播 * 5.3.1 发送标准广播 * 5.3.2 发 ...
第一行代码学习笔记第九章——使用网络技术
知识点目录 9.1 WebView的用法 9.2 使用HTTP协议访问网络 * 9.2.1 使用HttpURLConnection * 9.2.2 使用OkHttp 9.3 解析XML格式数据 * 9 ...
安卓教程----第一行代码学习笔记
安卓概述系统架构 Linux内核层,还包括各种底层驱动,如相机驱动.电源驱动等系统运行库层,包含一些c/c++的库,如浏览器内核webkit.SQLlite.3D绘图openGL.用于java运行 ...

《Web前端工程师修炼之道》学习笔记

第一部分开始起步

第二部分 HTML结构化标记

第四章

第五章

第六章添加链接

第七章添加照片

第八章表格标记

第九章表单

第十章 HTML5

第三部分表现层的CSS

第11章 CSS入门

第12章

第13章

第14章盒子思想（填充，边框和空白边）

第15章浮动与定位

第16章使用CSS进行网页布局

第17章过渡、变换和动画

第18章 CSS技术

第四部分 JavaScript行为

第19章 JavaScript简介

第20章使用JavaScript

《Web前端工程师修炼之道》学习笔记相关推荐

最新文章

热门文章

《Web前端工程师修炼之道》学习笔记

第一部分 开始起步

第二部分 HTML结构化标记

第四章

第五章

第六章 添加链接

第七章 添加照片

第八章 表格标记

第九章 表单

第十章 HTML5

第三部分 表现层的CSS

第11章 CSS入门

第12章

第13章

第14章 盒子思想（填充，边框和空白边）

第15章 浮动与定位

第16章 使用CSS进行网页布局

第17章 过渡、变换和动画

第18章 CSS技术

第四部分 JavaScript行为

第19章 JavaScript简介

第20章 使用JavaScript

《Web前端工程师修炼之道》学习笔记相关推荐

最新文章

热门文章

第一部分开始起步

第六章添加链接

第七章添加照片

第八章表格标记

第九章表单

第三部分表现层的CSS

第14章盒子思想（填充，边框和空白边）

第15章浮动与定位

第16章使用CSS进行网页布局

第17章过渡、变换和动画

第20章使用JavaScript