从头学前端-H5和CSS3提升

简介: 从头学前端-H5和CSS3提升

html5新特性

  • 新的标签

    header 头部标签
    nav 导航栏标签
    section 某个区域
    footer 尾部标签
    aside 侧边栏
    article 内容标签
    以上都相对于是div标签

  • 多媒体标签

    audio 音频标签

video 视频标签

muted 静音
controls 播放按钮
autoplay 自动播放
loop 循环
poster 封面
  • 新的表单和表单属性

input表单:

type属性值新增选项:email,url,date,time,month.week,time,search,tel,color,number等

表单属性:

required,placeholder、autofocus、autocomplate、multiple;

CSS3新特性

  1. 新增选择器
  • 属性选择器:(权重是10 和class类选择器一样)

    利用属性选择器可以不用借助于类和id选择器 E[attr]
    根据属性=值选择元素 E[attr=val]
    选择属性值结尾、包含或开头的某些元素 E[attr$='val'] E[attr*='val'] E[attr^='val']

  • 结构伪类选择器

    根据文档结构进行选择,常用于根据父级选择器选择子元素
    E:first-child last-child 第一个和最后一个
    nth-child(n) nth-child(2n) n可以是数字,关键字(even或odd)或公式
    E:first-of-type last-of-type nth-of-type(n)
    nth-clild会把所有的盒子都排列序号,所以只使用序号会不准确,而nth-of-type不会,只会把指定类型排列序号;

  • 伪元素选择器

    伪元素选择器可以利用css创建标签元素,属于行内元素
    伪元素选择符主要有 ::before和::after 必须包含有content属性
    伪元素选择器的权重和标签一样都是1

  1. CSS3盒子模型:

    通过box-sizing指定盒模型:两个值:content-box和border-box
    content-box是默认值, border-box盒子的大小为width

  2. 滤镜filter,计算函数calc(),
    ```
    img{ filter:blur(5px) } //图片模糊
    div { width: calc(100% - 50px); }


4. CSS3过渡 transition
> transtion: 要过渡的属性 花费时间 运动曲线 何时开始 
> 最后两个属性可以不写;

<!DOCTYPE html>





相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
22 4
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
30天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
149 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
31 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
27 2
前端基础(九)_CSS的三大特征
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
51 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
23 1
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1