html5该怎么样学习？大牛程序员分享html5入门学习顺序

前端开发
2018年06月30日
920

1、css3新增选择器

结构选择器

  • :nth-child(n)：父元素下的第n个子元素

  • :nth-child(odd)：奇数子元素(同nth-child(2n-1))

  • :nth-child(even)：偶数子元素(同nth-child(2n))

  • :nth-child(an+b)：公式

  • :nth-last-child(n)：倒数第n个子元素

  • :nth-of-type(n)：父元素下的第n个指定类型的子元素

  • :nth-last-of-type：父元素下的数第n个指定类型的子元素

  • :first-child：选择父元素下的第一个子元素

  • :last-child：选择父元素下的最后一个子元素

  • :only-child：选择父元素下唯一的子元素

  • :only-of-type：选择父元素下指定类型的唯一子元素

  • :root：选择文档的根目录，返回html

属性选择器：

  • :E[attr]：属性名，不确定具体属性值

  • :E[attr="value"]：指定属性名，并指定其对应属性值

  • :E[attr ~="value"]：指定属性名，其具有多个属性值空格隔开，并包含value值

  • :E[attr ^= "value"]：指定属性名，属性值以value开头

  • :E[attr $="value"]：指定属性名，属性值以value结束

  • :E[attr *="value"]：指定了属性名，属性值中包含了value

  • :E[attr |= "value"]：指定属性名，属性值以value-开头

UI伪类选择器：

  • :enabled：选择启用状态元素

  • :disabled：选择禁用状态元素

  • :checked：选择被选中的input元素(单选按钮或复选框)

  • :default：选择默认元素

  • :valid、invalid：根据输入验证选择有效或无效的input元素

  • :in-range、out-of-range：选择指定范围之内或者之外受限的元素

  • :required、optional：根据是否允许

  • :required：属性选择input元素

动态伪类选择器：

  • :link：选择链接元素

  • :visited：选择用户以访问的元素

  • :hover：鼠标悬停其上的元素

  • :active：鼠标点击时触发的事件

  • :focus：当前获取焦点的元素

其他伪类选择器：

  • :not()：对括号内选择器的选择取反

  • :lang()：基于lang全局属性的元素

  • :target：url片段标识符指向的元素

  • :empty：选择内容为空的元素

  • :selection：鼠标光标选择元素内容

2、背景

  • background-size：背景尺寸

  • background:url() 0 0,url() 0 100%;：多背景

  • background-origin：背景区域定位

  • background-clip：背景绘制区域颜色渐变

  • background-image：linear-gradient()：线性渐变

  • background-image：radial-gradient()：径向性渐变

3、文本属性

  • color:rgba();

  • text-overflow:：是否使用一个省略标记(…)标示对象内文本的溢出(单行文本溢出、多行文本溢出)

  • text-align：文本的对齐方式

  • text-transform：文字的大小写

  • text-decoration：文本的装饰线，复合属性

  • text-shadow：文本阴影

  • text-fill-color：文字填充颜色

  • text-stroke：复合属性。设置文字的描边

  • tab-size：制表符的长度

  • word-wrap：当前行超过指定容器的边界时是否断开转行

  • word-break：规定自动换行的处理方法

4、弹性盒模型

box布局设置给父元素属性：

  • display:box/display:inline-box;

  • box-orient：定义盒模型的布局方向

  • box-direction：元素排列顺序

  • box-pack：对盒子富裕的空间进行管理

  • box-align：在垂直方向上对元素的位置进行管理

box布局设置给子元素属性：

  • box-ordinal-group：设置元素的具体位置

  • box-flex：定义盒子的弹性空间

flex布局设置给父元素属性：

  • flex-direction：属性决定显示的方向(即项目的排列方向)

  • flex-wrapflex-wrap：属性定义，如果一行排不下，如何换行。

  • flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  • justify-content：属性定义了项目在水平方向的对齐方式。

  • align-items：属性定义项目在竖直方向上如何对齐。

  • `align-content 属性定义了多行的对齐方式。如果项目只在一行，该属性不起作用。

flex布局设置给子元素：

  • order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可为负值

  • flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex：属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  • align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

5、怪异盒模型(box-sizing)

  • box-sizing：盒模型解析模式

  • content-box：标准盒模型(和css2一样的计算)，计算方法：width/height=border+padding+content

  • border-box：怪异盒模型width/height与设置的值一样 ，content减小3、2D变换、3D变换

6、盒子阴影、倒影

  • box-shadow：阴影box-reflect倒影

7、2D+3D变换

2D变换

  • ransform:rotate()：旋转函数(deg) deg：度数

  • skew(X,Y)：倾斜函数 (deg)

  • skewX()

  • skewY()

  • scale(X,Y)：缩放函数 (正数、负数和小数)

  • scaleX()

  • scaleY()

  • translate(X,Y)：位移函数(px)

  • translateX()

  • translateY()

  • matrix(a,b,c,d,e,f)：矩阵函数

3D变换

  • transform-style(preserve-3d)：建立3D空间

  • perspective：视镜

  • perspective-origin：视镜基点

    x:left/center/right/length/%
    y:top/center/bottom/length/%

  • transform：新增函数

    rotateZ()
    translateZ()
    scaleZ()translate3d(x,y,z)

  • backface-visibility: hidden;

8、动画过渡

  • transition:property duration timing-function delay;

  • transition-property：过渡属性的名称

  • transition-duration：过渡属性花费的时间

  • transition-timing-function：过渡效果速度曲线(贝塞尔曲线详解)

  • transition-delay：过渡效果延迟时间

  • 过渡完成事件：transitionend

9、自定义动画

  • animation-name：动画名称

  • animation-duration：动画执行时间

  • animation-timing-function：动画速度曲线(贝塞尔曲线详解)

  • animation-delay：动画效果延迟时间

  • animation-iteration-count：动画执行次数

  • animation-direction：动画执行方向

  • animation-play-state：动画执行状态

  • animation-fill-mode：动画执行过程效果是否可见

  • @keyframes：规定动画关键帧

    from{} to{}
    0%{} 100%{}

  • 动画事件: animationstart/animationiteration/animationend

10、布局

分栏布局

  • column-width：栏目宽度

  • column-count：栏目列数

  • column-gap：栏目距离

  • column-rule：栏目间隔线

响应式布局:媒体类型

  • *all：所有媒体

  • braille：盲文触觉设备

  • embossed：盲文打印机

  • *print：手持设备

  • projection：打印预览

  • *screen：彩屏设备

  • speech：'听觉’类似的媒体类型

  • tty：不适用像素的设备

  • tv：电视

关键字：

  • and

  • not：关键字是用来排除某种制定的媒体类型

  • only：用来定某种特定的媒体类型

样式引入@media screen----此处内容重点太多，暂保密

11、智能表单及表单验证反馈

input表单type属性值：

  • type = "email"：限制用户输入必须为Email类型

  • type="url"：限制用户输入必须为URL类型

  • type="date"：限制用户输入必须为日期类型

  • type="datetime"：显示完整日期 含时区

  • type="datetime-local"：显示完整日期 不含时区

  • type="time"：限制用户输入必须为时间类型

  • type="month"：限制用户输入必须为月类型

  • type="week"：限制用户输入必须为周类型

  • type="number"：限制用户输入必须为数字类型

  • type="range"：生成一个滑动条

  • type="search"：具有搜索意义的表单results="n"属性

  • type="color"：生成一个颜色选择表单

  • type="tel"：显示电话号码

新增属性：

  • equired: required：内容不能为空

  • placeholder：表单提示信息

  • autofocus：自动聚焦

  • pattern：正则表达式 输入的内容必须匹配到指定正则范围

  • autocomplete：是否保存用户输入值默认为on，关闭提示选择 off

  • formaction：在submit里定义提交地址

  • datalist：输入框选择列表配合list使用 list值为datalist的id值

表单验证反馈：

  • Invalid 事件：validity对象(valid查看验证是否通过)

    input.addEventListener('invalid',fn,false)

  • 阻止默认验证：ev.preventDefault()`

  • formnovalidate 属性：关闭验证

    oText.addEventListener("invalid",fn1,false);
    ev.preventDefault()

  • valueMissing：输入值为空时

  • typeMismatch：控件值与预期类型不匹配

  • patternMismatch：输入值不满足pattern正则

  • customError：不符合自定义验证

  • setCustomValidity();

自定义验证

  • tooLong：超过maxLength最大限制

  • rangeUnderflow：验证的range最小值

  • rangeOverflow：验证的range最大值

  • stepMismatch：验证range 的当前值 是否符合min、max及step的规则

  • output：计算或脚本输出

CSSHTML
巧妙设计—让页面活起来
20个很有用的CSS技巧