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

第一部分 开始起步

1. 博客托管发布站点：WordPress,Blogger,Tumblr,Squarespace
2. 样式模版学习：Samantha Warren的文章“Style Tiles and How They Work”（www.alistapart.com/articles/style-tiles-and-how-they-work/）
3. 学习自适应web设计：《Reponsive Web Design》Ethan Marcott。初级网页设计必读书
4. 未来友好站点：futurefriend.ly。汇聚了当今许多优秀手机设计师。
5. 其他学习：逐步提高方法，自适应web设计，移动专用网络，可访问性（508节，WAI-ARIA），站点性能。

第二部分 HTML结构化标记

第四章

1. 多个连续空格，只会显示一个。
2. 制表符识别为空格。
3. 浏览器会忽略不认识的元素名。
4. 元素坚持用小写字母标记。
5. 文档类型说明html5
7. DOM文档对象模型
8. 强调文本
10. 空元素 (src,alt)
    

    ---

11. 网页出错
12. 若某些块元素闭标签省略斜线，浏览器将新块元素的开始，当做其结束。
13. 网页有一半不见了，可能是因为缺失关闭括号>或引号。
14. 浏览器能显示的图片格式为.gif，.jpeg.或jpg，.png。

第五章

1. 群组标题（仅限最高的浏览器）

    <hgroup>
            <h1>…h1>
            <h2>…h2>
     hgroup>

1. 无序列表中
   只能有列表项元素。但是列表项中可放其他元素。
2. 无序列表嵌入另一个无序列表时，自动改变为二级列表的项目符号样式。当嵌套一个有序列表时，编号样式不变。
3. 设置有序列表的初始编号。
   如：
   1. 定义列表：

   <dl>//定义列表
       <dt>dt>//列表项
       <dd>dd>//定义
   dl>

   1. 不能将标题和内容组织元素放入dt里，但dd里可以包含。
   2. 长的块级引用
      
      ，短引用q
   3. 预格式化文本(不忽略回车和多个空格符)

   4. figure：用于给文本添加图片或阐述文本中的某些内容，可以包含任何内容，是独立单元。figcaprtion为其添加一段说明。
   5. 使浏览器支持html5，添加以下代码到文档头部
   1. 区段section独立的内容article
   2. 有联系却无关的内容aside
   3. 主导航链接nav
   4. 页眉header页脚footer，其内部不能再嵌套header和footer
   5. 联系信息address
   6. 内联元素：abbr缩写，em强调，strong重要，b关键词(粗体)，i不同的语调(斜体)，s不正确的文本(删除线)，u注释文本(下划线)，small法律文本小字打印(更小)，q短引用自动加引号，cite引用(默认斜体)，dfn定义术语(蓝色)，sub下标，sup下标，mark标记文本(文本赋予浅色背景)。
   7. 内联元素abbr缩写，如

   <abbr title="Points">ptsabbr>
   <abbr title="American Type Founders">ATFabbr>

   1. 程序代码内联元素：code代码，samp程序示例，kbd用户键盘输入文本，这三者默认等宽字体。var变量默认为斜体。
   2. wbr单词换行，当一行没足够空间来显示一个单词时，就会在wbr指定的位置换行。
   3. 泛型块级元素div
   4. 范型内联元素span
   5. id和class的特性值区分大小写，一个元素可同时拥有id和class，也可拥有多个class，用空格隔开。
   6. 特殊字符以&开始，以；结束。 空格
   7. pubdate 属性指示 元素中的日期 / 时间是文档（或最近的前辈
      元素）的发布日期。

   第六章 添加链接

   1. “../”返回上一层目录
   2. “文件夹名”下一层目录
   3. “/文件夹名”站点根目录相对路径，/代表根目录，不能在本地机器使用，放到最终服务器上可使用。
   4. 链接网页中指定点，用#。如
   5. 连接到另一文档的片段。 如
   6. 给target指定某个具体名称，如display，所有链接都会在这个窗口打开。
   7. 邮件链接mailto，如href=”mailto:[email protected]”。
   8. 电话链接: href=”tel:+1805551212”。

   第七章 添加照片

   1. src和alt属性是img元素中必需的。

   第八章 表格标记

   1. table表格，tr行，th表头，td单元格
   2. caption表格标题(表格上方居中)
   3. 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>

   1. scope=”col” 规定单元格是列的表头，scope=”row”规定单元格是行的表头
   2. colspan列合并(向右延伸，跨越正确的列数)，rowspan行合并(向下延伸，跨越正确的行数)
   3. headers属性用于td元素内，明确绑定到一个表头的id值中。

   第九章 表单

   1. form内不能再包含form元素
   2. form表单元素的属性：action用于处理表单的程序或脚本的位置。method方法(get默认显示表单内容，post发送保护信息)。
   3. name特性标记变量名
   4. 文本输入控件：input单行输入(type=”text”，value默认值maxlength限制最大字符长度 )，textarea多行文本(placeholder提供简短的提示，cols宽rows高 )
   5. disabled使控件失效，无法选中;readonly使控件不能被更改。
   6. 密码输入框type=”password”，搜索域search，电子邮件地址email，电话号码tel，地址url，提交submit(可不需要name)，重置reset (可不需要name)，button自定义按钮 。

   7. datalist输入类型提供包含建议值的下拉菜单。与input结合。如：

      type="text" list="1" name="education">
      

   8. button元素

   9. 单选按钮(多个name相同)
      checked=”checked”，也可为简单的checked默认选中某个按钮。
   10. 复选框 (多个name相同，也可不同)
       
   11. 下拉菜单，select菜单控件(size=”1”)option选项 optgroup选项组
   12. 滚动菜单select(size为显示行数，multiple允许选用多项，如 )，option(selected默认选定)
       optgroup，用label属性为选项组提供标题。
       文件选择控件，
       
       表单的属性设定(方法编码方式)必须如下：
       method=”post” enctype=”multipart/form-data”
   13. 隐藏控件
   14. 日期时间控制 (HTML5) ，日期输入控件 (初始值必须为YYYY-MM-DD格式)时间输入控件time(hh-mm-ss)，与时区有关的日期时间控件( YYYY-MM-DDThh-mm-ssTZD)， 没有时区的日期时间控件( YYYY-MM-DDThh-mm-ss)，一年中某一个月month( YYYY-MM )，一年中某一个星期week( YYYY-W# )

   15. 数字输入(HTML5) 选择框range滑块。
       如：

       <input type="number" name="guests" min="1" max="6">
       <input type="range" name="satis" min="0" max="10" step="1">

   16. 颜色选择器 (HTML5)

   17. 其他html5表单元素progress持续状态的进展消息，meter动态更新状态，output计算输出值，keygen密钥对生成器
   18. label：隐式关联，label元素中嵌套表单控件和其描述；显示关联，label for=”控件ID值”
   19. fieldset表单控件的逻辑组，legend用来对其提供说明。
   20. web表单设计《web form design》luke

   第十章 HTML5

   1. 添加视频 其他属性：width宽，height高，poster=”“在视频播放前提供一张静止的图片(ios3设备无法播放带有poster属性的视频)，controls显示内置播放控件(播放暂停等)，autoplay自动播放，loop循环播放，preload(auto自动加载视频，none用户点击之后再加载)。
   2. 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中

   第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。
   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()移除