美文网首页
哪里有Web前端培训?大牛程序员分享html5入门学习路线顺序

哪里有Web前端培训?大牛程序员分享html5入门学习路线顺序

作者: d4498058d090 | 来源:发表于2019-02-28 17:18 被阅读0次

    HTML5目前非常火爆,而专家判断其在未来10年内都不会过时。越来越多的小伙伴也都开始学习HTML5技术,但许多小伙伴不知学习HTML5该从何处着手,也不知正确的的HTML5学习路线是怎样的,这也就导致了学习HTML5的效果不佳,效率更是不高。那么小编今天就与大家分享一条正确的学习路线,为诸位小伙伴解惑。

    可以找一些不错的HTML5相关书籍来学习,理论知识也需要掌握,而且书籍可以做一些笔记,重点难点可以标记,不懂和重点多看多记,这样能更好的掌握。

    推荐五本不错的HTML5书籍,它们确实是学习HTML5的好帮手。分别是《HTML5 + CSS3 从入门到精通》、《响应式web设计:HTML5和CSS3实战》、《HTML5移动web开发实战详解》、《疯狂HTML 5/CSS 3/Java讲义》、《HTML5与CSS3权威指南》、《HTML5触摸界面设计与开发》。那么下面分享一些必学的知识点:

    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-ordinal-group 设置元素的具体位置

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

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

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

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

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

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

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

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

    设置给子元素:

    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: 计算或脚本输出

    相关文章

      网友评论

          本文标题:哪里有Web前端培训?大牛程序员分享html5入门学习路线顺序

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