html5新增标签+css3新增标签

原创 已于 2024-03-02 16:41:12 修改 · 750 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css3 #前端

于 2024-03-02 11:44:02 首次发布
本文介绍了HTML5中新增的语义化标签和多媒体标签（如video和audio），以及CSS3的属性选择器、结构伪类选择器、伪元素选择器、box-sizing模式、图片模糊处理、calc函数和transition效果的应用实例。

新增标签

一.html5新增标签

1.语义化标签

在这里插入图片描述

2.多媒体标签

（1）视频video

在这里插入图片描述

（2）音频audio

在这里插入图片描述
在这里插入图片描述

（3）.总结

在这里插入图片描述

3.input属性

在这里插入图片描述

4.表单属性

在这里插入图片描述

二.css3新增选择器

1.新增选择器

（1）属性选择器

在这里插入图片描述

（2）结构伪类选择器

在这里插入图片描述

关于n
在这里插入图片描述
区别
在这里插入图片描述
总结
在这里插入图片描述

（3）伪元素选择器

在这里插入图片描述
在这里插入图片描述
应用1
字体图标可以直接放伪元素内容里但需要
不需要再放span标签里
在这里插入图片描述
应用2
土豆案例
在这里插入图片描述

在这里插入图片描述
应用3
在这里插入图片描述

在这里插入图片描述

2.盒子模型（box-sizing：border-box)

在这里插入图片描述
在这里插入图片描述

3.图片模糊处理（filter）

在这里插入图片描述

4.calc函数（）里面可以用±*/计算

在这里插入图片描述

5.transition过渡

在这里插入图片描述
在这里插入图片描述

HTML5新增标签及CSS3新增属性
杜小白的博客
03-06 4651
一、h5新增标签新增元素说明video表示一段视频并提供播放的用户界面audio表示音频canvas表示位图区域source为video和audio提供数据源track为video和audio指定字母svg定义矢量图code代码段figure和文档有关的图例figcaption图例的说明main主内容区time日期和时间值mark高亮的引用文字datalist提供给其他控件的预定义选项keygen...
html5+css3+JS代码
05-22
HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术，它们共同构成了Web开发的三驾马车。在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的...
html5新增及删除标签
weixin_33804990的博客
06-23 1404
一、新增标签 有一种划分为，功能性标签【html5新增，如canvas，旧浏览器没有】和语义性标签【如header等只是增强语义，没有新功能】。下面按照分几个小类来说。 1、结构标签  新增的结构标签，之前都是用div实现的，为了语义化，html5从div派生出很多新的标签。这些新增的结构标签有助于将文档分成几个逻辑部分。如下： a、section标签 表示页面中的一个独立内容区块，里面...
HTML5新增标签
最新发布
2302_76678927的博客
06-03 1472
pattern 填写正则表达式，适用于文本输入类表单控件，（注意：多行输入不可用，且空的输入框不会验证，往往与required配合）autocomplete 自动完成，可以设置为on，或者off，适用于文字输入类表单控件（注意：密码输入框和多行输入框不可用）preload ：auto/metadata/none 视频加载，若使用autoplay，则忽略该属性。preload：auto/metadata/none 音频加载，若使用autoplay，则忽略该属性。例如：电量，磁盘用量。
HTML5和CSS3新增
weixin_51178398的博客
04-09 303
nth-child对父元素里面所有孩子排列选择（序号是固定的），先找到第n个孩子，然后看是否和E匹配。④n可以是公式：（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）nth-of-type对父元素里面的指定元素进行排列选择。before在父元素内容的前面创建元素，afte在父元素内容的后面插入元素。:匹配父元素中的最后一个E元素E：nth-child（n）②n如果是数字，就是选择第n个子元素，里面的数字从1开始，新建的伪元素在文档树中找不到，所以称之为伪元素。
精选资源
HTML5+CSS3移动商城-分类
04-29
1. 新增语义化标签：HTML5引入了、、、、和等语义化标签，这些标签有助于提高页面的可读性和搜索引擎优化。在移动商城分类页面中，可以使用来定义商品类别，来展示每个商品详情，用于构建导航菜单。 2. 数据存储：...
精选资源
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
在HTML5中，新增了诸如语义化标签（如、、等）、离线存储（Application Cache）、拖放功能、媒体元素（、）等特性，这些都极大地提高了网页的互动性和可访问性。CSS3则引入了更多的选择器、布局模式（如Flexbox和...
HTML5+CSS3+JavaScriptWeb前端开发案例教程（慕课版）-测试卷.rar
07-08
HTML5、CSS3和JavaScript是现代Web前端开发的三大核心技术，它们共同构建了网页的结构、样式和交互性。这份“HTML5+CSS3+JavaScript Web前端开发案例教程（慕课版）-测试卷.rar”压缩包文件包含了针对这三种技术的...
HTML5+CSS3实例源码（包含20个）
12-30
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地扩展了网页的视觉表现力和交互性。HTML5是超文本标记语言的第五次重大修订，而CSS3则是层叠样式表的最新版本，这两者的结合为开发者提供了更多创新的可能性。 ...
CSS3新标签
m0_45229352的博客
03-02 2517
前端笔记，CSS3新标签
HTML5和CSS3新增内容
初竹殇的博客
05-27 277
CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 颜色：新增RGBA，HSLA模式 文本效果 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 text-outline 规定文本的轮廓。 text-overflow 规定当文本溢出包含元素时发生的事
css3新语法,CSS3新特性
weixin_42512483的博客
08-03 386
2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码3.动画 animation：动画名称，一个周期花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)复制代码4.形状转换 transform:适用于2D或3D转换的元素rotate(30...
HTML5与CSS3新增特性
weixin_45768538的博客
04-24 530
（七）HTML5与CSS3新增特性 1. HTML5新特性 1.1 HTML5新增语义化标签 <header>：头部标签 <nav>：导航标签 <article>：内容标签 <section>：定义文档某个区域 <asider>：侧边栏标签 <footer>：尾部标签 1.2 HTML5新增多媒体标签 1. 视频 <vedio> 所有浏览器支持 mp4 格式。 autoplay="autoplay" controls=
### html5和css3新增属性
梁爽的博客
11-22 448
1.html5表单类新增属性 input后的type属性值 文本域 单选按钮 复选框 下拉列表 密码域 提交按钮 可单击按钮 图像按钮 隐藏域 重置按钮 文件域 html5新增的input输入类型 email类型: 用于验证邮箱格式 当提交表单时，会自动验证email域的值 URL:用于验证URL地址值，当提交表单时，会自动验证url值 number:会根据你的设置，选择...
HTML5以及CSS3新增特性
qq_61219755的博客
07-16 623
如果我们在样式设置中进行的是nth-child的方法设置的，那么section中的子元素没有一个会改变颜色。例如n就是选择所有子元素，2n是选择偶数位的子元素，2n+1表示选择奇数，以此类推。如果我们使用的是nth-of-type来设置的，子元素中的熊大一行就会改变样式，这时因为nth-of-type是先匹配元素类型，对指定的标签中的子元素进行排序，再匹配第1个子元素的，所以就会进行样式的更改。5.before在父元素内容的前面创建元素，after在父元素内容的后面创建元素。.........
HTML5的新增标签
Ma10110517的博客
04-18 334
html5 新增标签：语义化更好 多媒体功能：video\audio 表单功能增强 新的属性 本地存储 获取拖拽内容信息 地理位置信息 canvas画布 <header>-----定义页眉 <nav>---------定义导航 <article>------定义文章 <main>------定义主体 <section>-----定义文档中的节（section、区段） <aside>-------定义文章的侧边栏 <footer&g
前端——html5 和css3 的新增特性
江一铭
07-05 700
我的理解的是 h5 呢并不只是新增一些标签和样式，更多的是里面新增的一些功能。例如重力感应，他可以让我们感知当前手机的状态，可以帮助我们完成手机摇一摇，监听当前我们步数，还有开启 3d 模式让我们的 2d 空间变成一个 3d 模式,而且 h5 中为了挺高页面性能，页面元素的变大，不在是元素本身的大小变化，而是一种视觉上的效果，从而减少了 dom 操作，防止了页面的重绘，当然 h5 中不单单是这些还有webgl 游戏引擎 canvas、svg 完成图表以及一些小游戏的开发例如大转盘，数钱游戏，jd 妈妈再打我
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值