新特性（一）HTML5和CSS3新特性

已于 2022-07-05 21:35:12 修改
阅读量418 收藏 4
点赞数
文章标签： css3 html5 css
于 2022-07-05 21:29:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52986400/article/details/125627706
版权

文章目录

一、HTML新增的属性

IE9+以上版本的浏览器才能使用。

1.1HTML5新增的语义化标签

在这里插入图片描述
没有语义
HTML5新增的标签
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  header, nav{
            height: 120px;
            background: pink;
            margin: 15px auto;
            border-radius: 15px;
            width: 800px;
        }
        section{
            width: 500px;
            height: 500px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>

1.2.HTML5新增的多媒体标签

1.音频：<audio>
2.视频：<video>，尽量使用MP4格式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3HTML5新增的input类型

在这里插入图片描述

1.4HTML5新增的表单属性

在这里插入图片描述

二、CSS3新特性

2.1CSS3的现状

  • 新增的CSS3特性有兼容性问题，ie9+才支持
    CSS3新增选择器

2.2属性选择器

在这里插入图片描述

2.3结构伪类选择器

根据文档结构
在这里插入图片描述
在这里插入图片描述

2.3结构伪类选择器

在这里插入图片描述

  • n可以是数字，关键字和公式
  • n如果是数字，就是选择第几个子元素，从1开始
  • n可以是关键字：even偶数，odd奇数

在这里插入图片描述

2.4伪元素选择器（重点）

伪元素选择器可以用CSS创建新标签

在这里插入图片描述

2.5CSS3盒子模型

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了

2.6CSS3其他特性（了解）

CSS3滤镜filter:

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

2.7CSS3过渡❤️❤️❤️

经常和：hover一起使用
在这里插入图片描述
如果想要写多个属性，用逗号分割

释怀°Believe
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html5和css3新特性.pdf
08-19
"html5和css3新特性" HTML5是一种超文本标记语言，用于结构化和显示网页内容。它的新特性包括： 1. 多媒体标签：HTML5引入了多媒体标签，如和，使得网页可以直接播放音频和视频文件。 例如：...
HTML5 CSS3提高 11-01 新增标签及属性 表单 多媒体 结构伪类 伪元素 过渡 小米log jd进度条
Write less，do more
06-20 852
HTML5新特性 语义化标签 （★★） <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档某个区域 <aside> 侧边栏标签 <footer> 尾部标签 多媒体标签 视频标签- video（★★★） 基本使用 当前 <video>元素支持三种视频格式： 尽量使用 mp4格式 使用语法： <video src="media/mi.mp4"></
HTML5&CSS3新特性
weixin_52972575的博客
05-05 8381
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
html5新增了css听觉样式表吗,关于html5新增了哪些标签？css3新增了哪些属性？
weixin_33089993的博客
06-03 131
HTML5中新增标签:定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。:定义声音，比如音乐或其他音频流。:定义图形，比如图表和其他图像。:定义命令按钮，比如单选按钮、复选框或按钮。:定义选项列表。请与 input...
67、CSS3的新特性、HTML5的新特性
sunnnnh的博客
06-18 251
CSS3的选择器 边框圆角 多列布局 （multi-column layout） @Font-face 特性，引入任意字体样式 为文字和盒子添加阴影：text-shadow、box-shadow CSS3 的线性渐变效果 旋转,缩放,定位,倾斜 在CSS3中唯一引入的伪元素是 ::selection CSS3 @keyframes 规则，可以自己创建一些动画等 多背景（添加多个背景） （1）CSS3的选择器 E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n)匹配父元素.
HTML5和css3新特性
田兴的博客
10-21 7601
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 动画、过渡 多列布局 1. 选择器 常规选择器： :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /
浅谈HTML5 & CSS3的新交互特性
09-27
尽管HTML5和CSS3的新特性非常吸引人，但它们的兼容性仍然是一个挑战，因为不同的浏览器对这些新特性的支持程度不一。开发者需要使用渐进增强或优雅降级策略来确保网页在各种浏览器上的正常显示。随着浏览器的更新...
CSS3教程和css3新特性专题
06-06
CSS3是 Cascading Style Sheets（层叠样式表）的第三版，是Web设计领域的一个重要里程碑，引入了许多新的功能和特性，极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3的基础知识以及其独特的新特性，...
CSS3新特性
weixin_51415327的博客
08-23 256
1. 属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <..
HTML5和CSS3新特性
这个世界上有各种各样的人.
05-12 1862
<header>：描述了⽂档的头部区域，于定义内容的介绍展⽰区域。 <nav>：定义导航链接的部分。 <section>：定义⽂档中的节（section、区段）。比如章节、页眉、页脚或⽂档中的其他部分，section通常 包含了⼀组内容及其标题。 <article>：定义独⽴的内容。 <aside>：定义页⾯主区域内容之外的内容（⽐如侧边栏）。 <figure>：标签规定独⽴的流内容（图像、图表、照⽚、代码等等）。 <figcaption>：定义 <figure>元素的标题。 <main>:main元素
HTML5和CSS3新特性一览
weixin_30425949的博客
07-11 2744
HTML51.HTML5 新元素HTML5提供了新的元素来创建更好的页面结构：标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节&lt...
HTML5和CSS3的新特性(浓缩好记版)
热门推荐
我的博客
08-22 1万+
综述：这个问题在面试的时候经常被问到，有必要做一个总结，理解的深刻充分一些 1.html5的新特性？(记住有九大模块内容) 添加了video，radio标签 添加了canvas画布和svg,渲染矢量图片 添加了一些列语义化标签header,footer,main,section,aside,nav等 input的type值新添加了很多属性（email，ur...
Es6新特性
chenacxz的博客
01-02 2588
Es6新特性 模板字符串 传统字符串用法 const str = ‘hello world this is a string’ 模板字符串 const str = hello world this is a \string`console.log(str)//hello world this is astring` const str = hello world this is a \string`console.log(str ) 输出 hello world this is a \string` con
HTML5和css3超实用的新属性集合
hanangjie的专栏
02-29 2372
1.用CSS美化被鼠标选中的文字的样式 Windows自身提供的是一种很难看的墨绿色的颜色，而苹果电脑上提供的是浅绿色。火狐浏览器，IE9，Opera和谷歌浏览器允许我们自定义被选择文字的颜色。/* webkit, opera, IE9 */ ::selection { background:lightblue; } /* mozilla firefox */ ::-moz-selection {
html5，css3新特性
zh__quan的博客
04-01 4870
目录 HTML新标签与特性 常用新标签 新增的input type属性值： 常用新属性 多媒体标签 CSS3 新增选择器 伪元素选择器（CSS3) 背景缩放(CSS3) 凹凸文字 CSS3盒模型 过渡(CSS3) 2D变形(CSS3) transform vertical-align元素对齐方式 线性渐变和径向渐变 HTML新标签与特性 HTML: ...
HTML5和CSS3的新特性
Matcha_ice_cream的博客
03-20 565
简单介绍一下 HTML5 和 CSS3 的部分新特性： HTML5和CSS31、HTML5新特性1.新增的语义化标签2.HTML5中新增的多媒体标签3.HTML5新增的input类型4.HTML5新增的表单属性2、CSS3新特性1.属性选择器2.结构伪类选择器 1、HTML5新特性 html5的新增特性，增加了一些新的 标签、表单和表单属性。 1.新增的语义化标签 在以前的html布局中，我们基本上用的都是div布局，在html5中新增了一些语义化标签。部分如下： 语义化标签 描述 head
总结一下HTML5和css3新特性
weixin_58032613的博客
01-11 557
一、常见的块级、行级、空元素 在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 我们在平常的项目中经常使用到的有: 行内元素有：span a b i img input select strong 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd… 空元素(没
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

释怀°Believe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值