美文网首页我爱编程
ui框架小部分单词

ui框架小部分单词

作者: 郭的妻 | 来源:发表于2018-03-22 18:19 被阅读50次

    第一单元

    主体结构元素

      (1):article                      独立文章内容

    (2):section              定义文档中的节(区间)

    (3):aside                  主题内容说明(侧边栏)

    (4):nav                          导航链部分

    (5):time                        机器可读日期时间

    (6):datetime                  可指定日期

    非主体元素

    (1):header                      页面头部

    (2):footer                        页脚

    (3):address                    文档作者的联系信息

    (4):main                        文档的主要内容

    表单域增强元素

    formaction                覆盖form中的action      提交地址

    formmethod              覆盖form中的method  提交方式

    submit  image            必须通过具有submit 功能的控件

    autofocus                  自动获得焦点

    required                    必填项

    placeholder                提示内容

    pattern                      正则

    autocomplete        自动保存用户输入    (off--关闭      on---开启)

    表单控件(新增)

    search                      搜索关键字

    email                        邮件(格式:内容@内容)

    url                            输入网址  (格式:http://.~~~)   

    number                    数字输入框

    range                        滑块类型

    color                        颜色

    date                        日期

    time                        时间

    week                          星期

    month                      月

    tel                在移动端会弹出输入数字键盘

    新增表单验证

    checkValidity()  验证用户输入的内容是否正确  返回(true)(false)

    取消表单验证

    novalidate()            加给form

    formnovalidate()    加给submit

    setCustomValidite() 自定义错误信息

    新增页面元素

    mark                        突出显示

    progress                    进度条(ie9以下不支持)

    figure                        独立内容

    figcaption                  标题(必须在figure内部)

    details                      详细信息,点击详细信息,进行展开

    summary

    第二单元

    音频视频标签

    audio        音频

    video        视频

    source      媒介元素

    媒体元素属性

    :controls        显示/隐藏用户控制界面

    :autoplay    媒体是否自动播放

    :loop          媒体是否自动循环播放

    :.currentTime    当前播放时间

    :.duration        媒体总时间(未加载完返回NaN  正常返回秒)

    :.volume          音量相对值(0.0——1.0)

    :.muted          是否静音(静音----true  不静音----false)

    媒体元素

    :.paused          是否暂停

    :.ended            是否播放完毕

    :.error            媒体发生错误的时候 返回错误代码

    :.currentSrc    义字符串的形式返回媒体地址

    :.play ()          播放

    :.pause()      暂停

    :.load ()      重新加载

    事件

    :.onended      播放结束

    :.ontimeupdate    播放位置改变时运行的脚本

    :.oncanplay        能播放的时候

    Video的特性

    :poster      视频播放前的预览图片

    :width / height      设置视频的尺寸

    :videoWidth / videoHeight    视频的实际尺寸

    第三单元 

    画布:    Canvas

    用法:

    (1):获取canvas  (2):创建绘图环境 用(.getContext())调用2d

    方法:

    :.strokeRect(x,y,width,height)    空心矩形

    :.fillReck(x,y,width,height)          实心矩形

    :.clearReck(x,y,width,height)      清空矩形内的指定元素

    :.moveTo(x,y)                  开始的坐标(起点)

    :.lineTo(x,y)                      结束的坐标(终点)

    :.stroke()  连线(通过moveTo和lineTo的路径)

    :.fill()                                    填充

    :.beginPath()                        创建开始路径

    :.closePath()                  关闭路径

    属性:

    :.strokeStyle                设置空心矩形边框的颜色

    :.fillStyle                    设置实心矩形的背景颜色

    :.lineWidth                          线条的宽度(像素)

    圆:

    .arc(x,y,r,起始角,结束角,(true=逆时针,false =顺时针))

    公式:角度90=度数*Math.PI/180

    方法:

    :.translate(x,y)    位移

    :.Scale(1,1)  缩放 (1不放大不缩小, 小于1缩小, 大于1放大)

    :.rotate()    旋转 (30度) 30*Math.PI/180

    :.Save()      保存

    :.restore()  恢复

    第四单元 

    插入图片(图片加载完,在执行canvas  ().onload=function(){})

    定位语法(3种)

    :drawImage(图片,x,y)    定位图像

    :drawImage(图片,x,y,width,height)

    定位图像 并规定图的高度和宽度

    :drawImage(图片,sx,sy,swidth,sheight,x,y,width,height)

    :sx,sy=剪切的位置    swidth,sheight=剪切的宽高

              x,y=  定位位置    width,height=显示的大小

    设置背景: 创建画布名.

    :.createpattern(图,平铺方式) 指定的方向重复指定的元素

    渐变:

    :.createLinearGradient(x1,y1,x2,y2)  创建线性渐变

    x1,y1=起点 x2,y2=终点

    :.createRadialGradient(x1,y1,r1,x2,y2,r2)创建放射性渐变

    (3)共同属性:渐变名.

    :.addColorStop(位置(0-1),颜色)

    Canvas文本

    :.strokeText(文字,x,y)    空心文字

    :.fillText(文字,x,y)        实心文字

    :.font  =(“40px  宋体”)    文字大小

    :.textAlign=(left=start,right=end,center)水平对齐方式

    :.textBaseline(top,middle,bottom)    垂直对齐方式

    阴影:

    :shadowOffsetX / shadowOffsetY  (向x,y轴偏移)

    :shadpwBlur =  模糊

    :shadowcolor    颜色

    第五单元

    新选择器:

    :querySelsctor()    单个

    :querySelsctorAll()  多个

    拖拽事件:

    :draggable: 设置true 可以实现拖拽

    拖拽事件元素(拖拽事件元):

    :.ondragstart    开始拖

    :ondrag          正在拖(连续触发)

    :ondragend    拖动结束

    目标元素事件:

    :.ondragenter      进入目标

    :.ondragover        在目标的上面

    注意:(有ondrop事件必须在on大染缸ondragover加阻止默认事件  e.preventDefault())

    :.ondragleave      离开目标

    :ondrop              释放目标

    拖放事件3  (可以拖拽除图片外的其他标签)

    格式:

    :设置图片event.dataTransfer.setData(“url”,this.src)

    :设置内容 event.dataTransfer.setData(“nr”,this.src)

    事件:

    :.dataTransfer      对象

                setData()    设置数据

                getData()    获取数据

    :effectAllowed            设置光标样式

    第六单元  本地存储

    对象:

    :localStorage()  存储的数据没有时间的限制

    :sessionStorage() 有时间限制 用户关闭浏览器会删除

    对象方法:

    :setItem(key,value)  保存数据

    :getItem(key)    读取数据

    :removeItem(key)  删除单个

    :clear()                删除多个

    :.key(index)  索引的key

    检测获取的内容类型

    Typeof

    转换对象的方法

    :parse()  字符串转换为对象

    :stringify()对象转化为字符串

    第七单元  css3选择器

    相邻选择器

    :.a+.b      + 相邻的下一个紧跟元素

    :.a~.b      ~相邻后面所有不紧跟元素

    属性选择器

    :[class]      只选取属性名

    :[class = ”a”]    只选中该属性名的属性值

    :[class ~=”ab”]  只选中该属性名中具有该属性值 ab=词

    :[class ^=  ”a”]  只选中以.a值开头的第一个元素

    :[class  $= ”a”]  只选中以.a值结尾的最后元一个元素

    :[class  *= ”a”]  包含a的都选中

    :[class  |= ”a”]  只选中以a/a- 开头,以a开头的时候,只

                                      允许有一个值a

    伪类选择器    (爱恨原则  (love  hate))

    ::link  伪类 未访问链接 的添加样式

    ::visited  伪类 已访问链接 的添加样式

    ::hover  伪类鼠标移到元素上的添加样式

    ::active    伪类鼠标点击与释放之间发生的事件

    结构性伪类

    ::root    文档的根元素

    ::not(.a)  非指定的元素

    ::empty  没有子元素的每一个父元素(空盒子)

    ::target  用于选取当前活动的目标元素(用于锚链接)

    ::first-child    父级下的第一个子元素。

    ::last-child      父级下的最后一个子元素

    ::only-child      每个父级下唯一子元素。

      2n=even=偶数    2n+1= odd = 奇数

    :E:nth-child(n)  父级下的第n个子元素,且这个元素得是E

                                      元素;

    :E:nth-last-child(n)  每个父级下的第n个子元素 ,且这个

                                    素得是E元素;从最后一个子元素开始计数。

    ::nth-of-type(n)        每个父级下的第n个子元素

    ::nth-last-of-type(n)    每个父级下的第n个子元素 ,从最

                                              一个元素开始计数。最后一个子元素

    表单属性

    ::focus            选取获得焦点的元素

    ::enabled            元素处于可用状态时的样式

    ::disabled            元素处于不可用状态时的样式

    ::read-only          元素处于只读状态时的样式

    ::read-write        可读可写的元素

    ::checked  单选框 / 复选框处于选中状态时的样式

    ::default页面打开时,默认选中状态的单选框/复选框的样式

    ::indeterminate当页面打开时,单选框中没选中状态时样式

    :::selection伪类选择器指定当元素处于选中状态时的样式

    伪元素选择器

    (1)::first-line            选取指定选择器的首行。

    (2)::first-letter:      元素中的首字母或第一个字使用样式;

    (3)::before: 某个元素之前插入内容

    (4)::after: 某个元素之后插入内容;

    (5):Content 属性:需要与:before  :after 配合使用!

    第八单元  移动端头部标签

    http-equiv  文件头作用(正确和精确显示网页内容)

    http-equiv  属性 

    :refresh    文档自动刷新时间间隔

    :content-type    文档的字符编码

    :content-language    显示语言的设定

    :X-UA-compatible    文件兼容性

    name :  HTML文档的描述  关键字  作者

    name属性

    :description    页面的描述

    :keywords    逗号的分隔的关键字词列表

    Viewport(重点)(用户网页的可视区域)

    Viewport属性

    :width=device-width      设备宽/高度

    :initial-scale=1  初始缩放比例

    :maximum-scale=1  最大缩放比例

    :minimum-scale=1  最小缩放比例

    :user-scalable  (no  yes)用户是否可以手动缩放

    format-detection格式检测

    format-detection属性

    (1):telephone(no=禁止把数字转化为拨号链接)

                      (yes=开启数字转化为拨号链接)

    :email=(no禁止作为邮箱地址yes开启文字默认邮箱地址)

    :adress=(no禁止跳转至地图yes开启地址直接跳转地图)

    :-webkit-user-select:禁止选中文本

                    none=文本不选择          text= 可以选择文本

    :-webkit-appearance:none;去掉表单样式

    -webkit-tap-highlight-color:rgba(0,0,0,0); 去掉a、input

                          button点击时的蓝色外边框和灰色半透明背景

    :-webkit-input-placeholder {color}修改  placeholder样式

    重点(em  rem)

    :em  相对父级元素来设置字体

    :rem  相对body,html根源来设置字体大小

    第九单元  盒模型

    盒模型  (2种)

    :标准模式        box-sizing: content-box;

              标准盒宽高=width/height+padding+border+margin

    :怪异模式        box-sizing: border-box;

    怪异盒宽高=width/height+margin=padding+border+margin+内容区宽高

    弹性盒:是除css3的新的布局模式(由弹性容器和弹性元素组成)

    弹性盒的基本属性

    :display(

    属性值:  flex=块元素布局 

    inline-flex =内元素布局

    :flex-direction      主轴方向

    属性值:row=从左到右 

    row-reverse=从右到左

    column=从上到下

    column-reverse=从下到 上

    (3):flex-wrap      是否换行

      属性值:nowrap=不换行 

    wrap=换行

    wrap-reverse=倒序换行

    (4):flex-flow  复合属性  (方向  换行)

        属性值:(row nowrap )    (column  nowrap)

    (5):justify-content    水平对齐方式

    属性值:flex-start=左对齐   

    flex-end=右对齐   

    center=居中

                space-between=两端对齐 

    space-around= 分布元素周围

    :align-items    垂直对齐方式

    属性值:flex-start=上对齐 

    flex-end=下对齐   

    center=居中

    baseline=以第一行的文字位置为基准

    stretch=拉升  子元素高度为0/auto

    :align-content  各个行的对齐方式

    属性值:flex-start=上对齐   

    flex-end=下对齐 

    center=居中

    space-between=两端对齐 

    space-around= 分布元素周围

    stretch=拉升  子元素高度为0/auto

    :条目的顺序:order(自定义子元素的显示顺序)

    :条目尺寸的弹性(子元素)

    属性值:flex-grow  扩张比例

                flex-shrink  收缩比例

    :文字对齐方式:align-self

    相关文章

      网友评论

        本文标题:ui框架小部分单词

        本文链接:https://www.haomeiwen.com/subject/mjqzqftx.html