常见

HTML :

注意 声明文档类型
'经过一段时间转到另外某个页面
标签 除了定义解析编码还有优化SEO设置
举例：

meta：vp 快捷打开



//content="IE=redge" 如果是IE浏览器打开 就用用户的最新版本

长段落引用 //有个可选属性 cite="URL"，告知引用的文字来源
强调字体，加粗
短文引用
斜体
删除线(横贯线)

换行

---

分界线
符号实体 : & nbsp;空格

地址标签
短篇计算机代码

长篇计算机代码
ol>li 有序列表
ul>li 无序列表
dl>dt+dd 自定义列表
table>tr>th+tr>td表格
td属性 rowspan 表示一竖列中 占几格
td属性 colspan 表示一横行中 占几格
超链接
a标签 target 属性补充：
_blank :在新的页面打开
_parent: 在父框架集中打开被链接文档。
_self:默认。在相同的框架中打开被链接文档。
_top :在整个窗口中打开被链接文档。
//让当前页面所有a标签 target属性打开方式一样
插入图片
form 表单：

提交表单到#

文本框

密码框

select>option 下拉列表 //option 属性 selected="selected"默认选中项 文本域

分组1

//表单分组

input type 类型 ：
raido:单选按钮 checkbox：复选按钮 file:文件选择框
submit:提交按钮 reset:重置按钮 email:邮箱
checked 属性 默认选中状态
raido name属性名要一样才能单选
required input 属性 设置后必填项
resize: none 文本域禁止拉伸

快捷键 (Emmate 语法)：
举例：
ul>li>a[href="#"]*2

   

option{哦嗨哟}*2
哦嗨哟
哦嗨哟

CSS：

浏览器对多个样式来源进行叠加，最终确定结果的过程
来源有五个
1.内联样式>2.内部样式>3.外部样式表>4.浏览器用户自定义样式>5.浏览器默认样式
选择器优先级 important>id>class
引入方式：
1.内联：

2.嵌入式：
3.外部链接： // @import url(文件路径) 将css文件样式导入到当前位置
常见css属性：
width height background border padding margin font-size font-family color line-height text-align text-indent
.class ｛｝ //类选择器
.box li { ｝ //后代选择器
h1[id] [class]{ } //属性选择器
ele:nth-child(n) //属于其父元素的第 N 个子元素。
overflow、display、visibility的区别
visibility:hidden 隐藏元素 要占据空间 属性值visibility或initial 可显示子元素

• 三个方式去掉设置间距基线
  font-size=0
display:block
vertical-align:middle;

display, text-transform（控制英文字体大小写）, overflow , visibility ,opacity , direction（设置文本流方向）, font-weight , cursor white-space（文本空白符+换行）, font-style （字体倾斜） , text-decoration （文本线） , word-spacing （英文单词间距）, letter-spacing （中文单词间距） ,outline: none (取消元素周围的轮廓线), box-sizing ,column-count( 表示父元素里面的文本显示几列 ) , box-reflect（反射（倒影））, zoom(设置元素缩放) , vertical-align text-overflow: ellipsis(文字变成省略号)

css3

transform （对元素进行旋转、缩放、移动或倾斜）
选择器：
｛｝ //所有标签选择器
p{} div{} //标签选择器
#name｛｝ //ID选择器
h1.class{ } //符合选择器 选择所有h1标签名为class名字的
h1, h2, p { } //并集选择器
div > p { } //子元素选择器
div[class="test"]{ } //设置 class 属性值包含 "test" 的所有 div 元素
[class^="icon-"]{ } //class属性内容以icon-开头
ele:first-letter //段落首字母或文字设置
伪类：
: link 未被访问的连接
: hover 鼠标指针悬停在元素上
: active 被按下时候发生的改变
: visited 访问之后的改变
: focus 获得焦点时的改变

overflow 溢出隐藏方式 限于块级元素
display:none; 隐藏元素 包含子元素 不占据空间

• 整站项目开发：
  两种方式：
  一：从头往下一次把每个盒子写完
  二：先把整站的布局搞定，然后把每个布局盒子中的子元素补齐（模块化）

• 平稳退化：
  浏览器在不支持javascript的情况下仍能顺利访问网站。

• 渐进增强：
  用一些额外的信息去包裹原始数据几乎都符合‘平稳退化’原则

• 向后兼容：
  自己的理解：现代大多数浏览器兼容DOM属性和方法，而老式浏览器就算支持JS 但有可能依然不理解DOM →向老的浏览器兼容 （平稳退化）

HTML5

getImageData()：
复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布,返回的数据是一个对象，此对象包含三个属性，分别是data、width和height，其中data就是图像的像素数据。data是一个一维数组，顺次记录着每个像素点的RGBA信息。R代表红色，G代表绿色，B代表蓝色，A代表不透明度，其取值范围均为0-255。对于A，0代表完全透明，255代表完全不透明

canvas putImageData() ：
复制画布上指定矩形的像素数据，将图像数据放回画布。
canvas fillRect()：
绘制“已填色”的矩形。默认的填充颜色是黑色 两个点 p1是对象的x轴起始 p2是对象的y轴起始 p3画布的宽 p4画布的高
fillStyle = "" 设置画布样式
lineWidth 属性设置线条的宽度，lineCap属性设置线条末端 平头、圆头、方头，lineJoin属性控制线条相交的方式的圆交、斜交、斜接
clearRect() 清除画布上矩形区域
beginPath() 绘制新路径
fillText() p1 字符串，x轴 y轴
对象属性：font 、textAlign、textBaseline

toDataURL()：
canvas中将图片的二进制格式转为dataURL格式使用的方法
drawImage() ：
在画布上绘制图像、画布或视频 第一个放图片元素 第二个放xy的点
drawImage有三种用法
context.drawImage(img, x, y);
这种方法会将图片左上角置于坐标相对于画布的(x， y)点上，如果画布尺寸足够则画出整个图像，否则将超出画布的部分舍弃

context.drawImage(img, x, y, width, height);
新绘制的图像会根据指定的尺寸进行放大或缩小

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
sx和sy指定图像被截取部分左上角在图片上的坐标，swidth和sheight指定图像被截取部分的尺寸，x和y指定图像被截取部分画在画布上的位置，width和height指定图像被截取部分在画布上重绘的尺寸
grayscale 属性
element.grayscale //灰度图