码迷,mamicode.com
首页 > Web开发 > 详细

web前端开发H5知识点

时间:2019-11-21 09:52:05      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:top   back   ati   clip   mail   html   circle   htm   大小   

首先h5里面有几个通用的格式,不再像之前每次用div定义。
header
nav
section
aritcle
aside
footer
视频和音频的格式
video:ogg webm mp4
audio:mp3 ogg wav
属性:
width height src controls autoplay loop poster
src 文件源 controls插件,也就是下面的进度条一栏 loop循环播放 poster暂停
表单
text password textarea checkbox radio file select button submit reset
H5 表单:
email,url,date,week,month,time,number,color,range,search
H5表单属性
required 必填项
autocomplete 自动记忆
plactholder 提示信息
pattern 正则表达式pattern=[a-z]{3} 意思就是输入三个字母 了解一下
autofocus 自动聚焦
去边距间距:
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img
*{}

选择器
元素选择器

  • 通配符
    e 标签选择器
    #id id选择器
    .class 类选择器
    关系选择器
    e f 包含选择器
    e>f父子选择器
    e+f 相邻选择器 :e元素后所有的f元素
    e~f 兄弟选择器 e后面所有的兄弟元素f
    伪类选择器
    :link 访问前
    :hover 鼠标悬停时
    :active 点击激活状态
    :visited 访问后
    :focus 获取焦点时
    UI元素状态伪类选择器
    e:checked 选中状态 (只针对单选按钮和复选框)
    e:enabled 可编辑状态 (默认状态)
    e:disabled 禁用状态
    属性选择器
    e[attr]
    e[attr="value"]
    e[attr~="value"] 包含空格及value的e元素
    e[attr|="value"] 有分隔符-的e元素
    e[attr^="value"] 以value开头的e
    e[attr$="value"] 以value结尾的e
    有[attr*="value"] attr中包含value的e标签
    伪对象选择器
    e:first-letter 第一个字符
    e:first-line 第一行
    e:before 前
    e:after 后
    e::selection 选中状态时触发的效果
    结构伪类选择器
    :root 根选择器
    e:first-child 第一个子元素e
    e:last-child 最后一个子元素e
    e:only-child 唯一的一个子元素e
    e:nth-child(n) 第n个子元素e n=odd even 数字 公式
    e:nth-last-child(n) 倒数第n个子元素e
    e:first-of-type 第一个同类型元素
    e:last-of-type 最后一个同类型元素
    e:only-of-type 唯一同类型元素
    e:nth-of-type(n) 第n个同类型元素e n=odd even 数字 公式
    e:nth-last-of-type(n) 倒数第n个同类型元素e
    e:empty 空元素
    ————————————————————————————
    box-shadow 盒子阴影
    box-shadow:水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 [内置或外置]
    background-origin:border-box,padding-box,content-box
    background-clip::border-box,padding-box,content-box
    background:linear-gradient(方向,颜色,……)线性渐变
    background:repeating-linear-gradient(方向,颜色……) 重复线性渐变

径向渐变
background:radial-gradient(中心坐标,形状 大小,颜色……)
大小:
/closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角
/
形状:
circle 或 ellipse(默认椭圆)
background:repeating-radial-gradient() 重复径向渐变

多列
column-count:分列数
column-gap:栏间距
column-rule:分隔线
弹性盒子
父元素中添加
display:flex; display:-webkit-flex;
子元素排列方式 :(父元素添加)
justify-content:flex-start/flex-end/center/space-between/space-around
子元素垂直对齐方式(父元素中添加)
align-item:flex-start/flex-end/center/baseline/stretch
顶端/底端/居中/基线/默认auto
子元素换行方式(父元素添加)
flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit
单行(不换行,会溢出)/多行,自动换行/换行,反转排列/初始化默认效果相似/默认(不换行)
align-content 设置行对齐方式 (添加到父元素中)
前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around
默认/顶端、底端、居中、两端、平均分布
子元素顺序(子元素添加)
order:1,值越小越靠前 可以为负值
子元素对齐(子元素添加)
margin:auto;对象自动留白
按比例分配元素(子元素添加)
flex:比例值
如:
div>div*3
子元素按顺序添加flex:1 flex:3 flex:1 结果:1:3:1

web前端开发H5知识点

标签:top   back   ati   clip   mail   html   circle   htm   大小   

原文地址:https://blog.51cto.com/14584021/2451937

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!