HTML意思是超文本标记语言

一个html的基本结构如下：

目前常用的两种文档类型是xhtml 1.0和html5

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：

......

... ...

...

通过 、、、、、,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： 用作主标题（最重要的），其后是 （次重要的），再其次是 ，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开 html换行

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入来强制换行

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体

1、div标签 块元素，表示一块内容，没有具体的语义。2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。

1、em标签 行内元素，表示语气中的强调词2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名4、strong标签 行内元素，表示非常重要的内容

标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

在网页上定义一个有编号的内容列表可以用、配合使用来实现，代码如下：

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

在网页上定义一个无编号的内容列表可以用、配合使用来实现，代码如下：

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表通常用于术语的定义。标签表示列表的整体。标签定义术语的题目。标签是术语的解释。一个中可以有多个题目和解释，代码如下：

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

1、外联式：通过link标签，链接到外部样式表到页面中。

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

3、内联式：通过标签的style属性，在标签上直接写样式。

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;

font-size 设置文字的大小，如：font-size:12px;

font-family 设置文字的字体，如：font-family:'微软雅黑';

font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

line-height 设置文字的行高，如：line-height:24px;

text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

常用的选择器有如下几种：

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。举例：

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。举例：

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例：

....

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。举例：

多个选择器，如果有同样的样式设置，可以使用组选择器。举例：

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置边框 设置一边的边框，比如顶部边框，可以按如下设置：

上面三句可以简写成一句：

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

设置内间距padding

设置盒子四边的内间距，可设置如下：

上面的设置可以简写如下：

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

margin相关技巧 1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性2、设置一边的外边距，一般设置margin-top3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框2、外部盒子设置 overflow:hidden3、使用伪元素类：

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。5、inherit 规定应该从父元素继承 overflow 属性的值。

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

内联元素内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

解决内联元素间隙的方法 1、去掉内联元素之间的换行2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性display属性是用来设置元素的类型及隐藏的，常用的属性有：1、none 元素隐藏且不占位置2、block 元素以块元素显示3、inline 元素以内联元素显示4、inline-block 元素以内联块元素显示

文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

关于定位 我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

定位元素特性 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级 定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局 1、固定在顶部的菜单2、水平垂直居中的弹框3、固定的侧边的工具栏4、固定在底部的按钮

属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

总结 在网页制作中，如何选择合适的图片格式呢？1、网页制作中，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；2、制作网页图标时候，如果图标含多种颜色，可以使用gif或png图片；如果图标是单色，而且要求有很好的显示效果，可以使用svg；如果是动画图标，可以使用gif。

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪类和属性选择器，如： content、:hover 权重值为105、标签选择器和伪元素选择器，如：div、p、:before 权重值为16、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）3、E:first-child：匹配元素类型为E且是父元素的第一个子元素4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）8、E:first-of-type：匹配父元素的第一个类型为E的子元素9、E:last-of-type：匹配父元素的最后一个类型为E的子元素10、E:only-of-type：匹配父元素中唯一子元素是E的子元素11、E:empty 选择一个空的元素12、E:enabled 可用的表单控件13、E:disabled 失效的表单控件14、E:checked 选中的checkbox15、E:not(s) 不包含某元素

16、E:target 对应锚点的样式

设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：border-radius:50%;

box-shadow：h-shadow v-shadow blur spread color inset;分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

1、transition-property 设置过渡的属性，比如：width height background-color2、transition-duration 设置过渡的时间，比如：1s 500ms3、transition-timing-function 设置过渡的运动方式

4、transition-delay 设置动画的延迟5、transition: property duration timing-function delay 同时设置四个属性

1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、translateY、translateZ 设置三维移动8、rotateX、rotateY、rotateZ 设置三维旋转9、scaleX、scaleY、scaleZ 设置三维缩放10、tranform-origin 设置变形的中心点11、backface-visibility 设置盒子背面是否可见

1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线

5、animation-delay 动画延迟6、animation-iteration-count 动画播放次数 n|infinite7、animation-direction

8、animation-play-state 动画状态

9、animation-fill-mode 动画前后的状态

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

h5新增的主要语义化标签如下：

1、header 页面头部、页眉2、nav 页面导航3、article 一篇文章4、section 文章中的章节5、aside 侧边栏6、footer 页面底部、页脚

页面使用标签布局示意图：

html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签 支持格式：ogg、wav、mp3

对应属性：1、autoplay 自动播放2、controls 显示播放器3、loop 循环播放4、preload 预加载5、muted 静音

source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。

video标签 支持格式：ogg、mp4、webM

属性：1、width2、height3、Poster

可选第三方播放器：1、cyberplayer2、tencentPlayer3、youkuplayer

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

背景图强制改变大小，可以使用background新属性

background新属性 background-size:

背景图强制改变大小，可以使用background新属性

background新属性 background-size:

背景图强制改变大小，可以使用background新属性

background新属性 background-size:

设备屏幕有多种不同的分辨率，页面适配方案有如下几种：

1、全适配：流体布局+响应式布局2、移动端适配：

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc() 可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

box-sizing 1、content-box 默认的盒子尺寸计算方式2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

相应布局的伪代码如下：

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

cssrem安装

cssrem插件可以动态地将px尺寸换算成rem尺寸

下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

1、容器属性display : flex声明使用弹性盒布局

flex-direction : row | row-reverse | column | column-reverse确定子元素排列的方向

flex-wrap : nowrap | wrap | wrap-reverse元素超过父容器尺寸时是否换行

flex-flow : flex-direction | flex-wrap同时设置flex-direction 和 flex-wrap

justify-content : flex-start | flex-end | center | space-between | space-around子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式

align-items : flex-start | flex-end | center | baseline | stretch子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式

align-content : flex-start | flex-end | center | space-between | space-around | stretch设置多行子元素在行方向上的对齐方式

2、条目属性flex : none | window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = myalert; function myalert(){ alert('ok!'); } } ......  

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

函数传参

函数'return'关键字 函数中'return'关键字的作用：1、返回函数执行的结果2、结束函数的运行3、阻止默认行为

通过条件来控制程序的走向，就需要用到条件语句。

运算符 1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=3、条件运算符：==、===、>、>=、 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 gulp网站：http://gulpjs.com/

常用gulp插件：压缩js代码（gulp-uglify）less的编译（gulp-less）css的压缩 （gulp-minify-css）自动添加css3前缀（gulp-autoprefixer）文件改名字 (gulp-rename)

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

1、代码的压缩与合并2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。3、使用内容分发网络 CDN4、为文件设置Last-Modified、Expires和Etag5、使用GZIP压缩传送6、权衡DNS查找次数(使用不同域名会增加DNS查找)7、避免不必要的重定向(加"/")

1、使用结构清晰，简单，语义化标签2、避免空的src和href3、不要在HTML中缩放图片

1、精简css选择器 2、把CSS放到顶部3、避免@import方式引入样式4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html5、使用css动画来取代javascript动画6、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn7、使用css sprite8、使用svg图形9、避免使用CSS表达式

10、避免使用滤镜

1、减少引用库的个数2、使用requirejs或seajs异步加载js3、JS放到页面底部引入4、避免全局查找5、减少属性查找6、使用原生方法7、用switch语句代替复杂的if else语句8、减少语句数，比如说多个变量声明可以写成一句9、使用字面量表达式来初始化数组或者对象10、使用DocumentFragments或innerHTML取代复杂的元素注入11、使用事件代理(事件委托)12、避免多次访问dom选择集13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover14、使用Web Storage缓存数据15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)