从头学前端-H5和CSS3提升

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

html5新特性

  • 新的标签

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

  • 多媒体标签

    audio 音频标签

video 视频标签

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

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: 要过渡的属性 花费时间 运动曲线 何时开始 
> 最后两个属性可以不写;
AI 代码解读

<!DOCTYPE html>





相关文章
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
76 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
93 1
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
91 6
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
154 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等