H5C3第一天——新增标签、音频、视频、新增input控件、表单属性、属性选择器、禁用按钮、结构伪类选择器、伪元素选择器

最新推荐文章于 2022-09-23 22:58:17 发布

艾洛_

最新推荐文章于 2022-09-23 22:58:17 发布

阅读量337

点赞数 1

文章标签： html5 css3 html css

本文链接：https://blog.csdn.net/Aiello001/article/details/108598733

版权

本文详细介绍了HTML5的新特性，包括新增的header、nav、article等标签，音频和视频的处理，如支持的格式、属性设置，以及input控件的扩展。此外，还探讨了CSS3的属性选择器，如类、属性、伪类选择器，并解析了结构伪类和伪元素选择器的用法，如`:first-child`、`:nth-child()`等。

摘要由CSDN通过智能技术生成

什么是HTML5

H5 + CSS3 + JS

新增标签

header　　　头部
nav　　　　　导航
article　　　　内容
section　　　块级
aside　　　　侧边栏
footer　　　　尾部
在这里插入图片描述
注：需要转为块级元素　　display:block

音频

<audio src="小猪佩奇.mp3" autoplay controls ></audio>

支持格式：　ogg，MP3，wav
属性：　　　controls　　　显示播放控件
　　　　　　autoplay　　　自动播放（谷歌浏览器禁用）
　　　　　　src　　　　　地址
　　　　　　loop　　　　　循环播放

因为不同浏览器支持不同音频格式：

    <!-- 当1.mp3出错时，自动切换到下一个 ... -->
    <audio>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾洛_

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

重温前端基础（一） HTML、CSS、H5C3

←か淡定☆ ヾ的博客

10-10

1760

目录0. WEB 标准构成1. HTML1.1 HTML概念1.2 超文本含义1.3 页面语言1.4 字符集1.5 标签语义化1.6 常用标签1.7 图像标签 img1.8 链接标签1.9 锚点定位 0. WEB 标准构成构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。标准说明结构结构用于对网页元素进行整理和分类，咱们主要学的是HTML。表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

大前端学习笔记--持续随缘更新

JackieDYH的博客

02-10

1237

目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌：特点——简洁、快速、安全内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司：特点——非盈利、Gecko项目开源内核——Gecko Safari苹果——苹果...

4 条评论您还未登录，请先登录后发表或查看评论

H5C3新增标签

DAIYA_JIE的博客

09-23

689

H5C3新增标签和选择器，属性

H5伪类，伪元素

weixin_30695195的博客

06-25

212

伪类选择器1.first-child:匹配父类元素下的第一个子元素。div > a:first-child; 2.last-child:匹配父类元素下的最后一个子元素。 3.nth-child(n):匹配父类元素下的第几个子元素,odd为奇数，even为偶数，或者用n的表达式来取元素，如2n+1。 4.nth-last-child(N):匹配父元素下的倒数第几个子元素。 5.nth-...

h5c3新增标签及用法

10-20

html5 css3中新增的属性事件新增DOM选择和操作样式、网络监听接口、全屏接口；CSS3中 transition过渡、transform二维变换、transform3D转换、动画animation、伸缩布局等等

html5新增标签demo,H5C3新增

weixin_30717635的博客

06-04

160

一.HTML5新特性1.HTML5新增的语义化标签标签语义头部标签导航标签内容标签定义文档某个区域侧边栏标签尾部标签注意点在IE9中需要转成成块级元素才能使用display: block2.HTML5新增的多媒体标签(1)视频标签支持：MP4 WebM Ogg属性值用法autoplayautoplay自动播放，google默认禁用controsconrols展示控件widthpx播放器宽度heig...

C3有哪些新增的属性

weixin_47169110的博客

07-19

821

css3的新增属性都有哪些? 颜色rgba 渐变linear-gradient radial-gradient 背景background-size background-origin background-clip 文字阴影text-shadow 边框阴影border-shadow 圆角边框border-radius 边框图片border-image 盒子模型box-sizing 过渡transition 动画animate @keyframes 2D转换transform

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)

qq_36609655的博客

07-02

1万+

第1章Html Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。就是给文本加上含有语义的标签。接下来应该学习更多具体语义标签：一、结构（固定的结构） <html> <head> <title></title> </head> <bod...

前端200道面试题及答案（更新中）

热门推荐

m0_65450343的博客

06-11

11万+

H5C3进阶—HTML5+CSS3新增标签

luolin_forest的博客

06-09

392

CSS3 2D动画

c3新增表单属性

qq_38892819的博客

06-08

442

form{ width: 100%; margin:0 auto; /*最大宽度*/ max-width: 640px; /*最小宽度*/ min-width: 320px; font-family: "Microsoft Yahei"; } input{

html5 css3 input,HTML5+CSS3从入门到精通 input 对伪元素(:before :after)的支持情况

weixin_39636164的博客

06-16

167

本篇教程探讨了HTML5+CSS3从入门到精通 input 对伪元素(:before :after)的支持情况，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。<做一个自定义视觉效果的Switch组件，直接用input的微元素就可以实现。代码如下：html>input:before测试input:before,input:after{content:...

qq_39833794的博客

03-03

335

HTML5新增标签及规范css3新增选择器整理HTML5 新增表单及 input设置样式注意点

H5之input属性

qq_46179838的博客

12-02

3714

文章目录一、常用属性1、信息提示框placeholder2、单选框radio、多选框checkbox3、提交 submit（需要在form标签里面使用）二、不常用的（兼容性问题）（一）、Calender类1、file 选择文件上传2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）5、datetime-local 选择年月

2017年最新web面试题之C3新特性

Wz1135640的博客

09-25

2087

估计很多朋友在找工作的过程中都会遇到面试官提问的环节，上一次小编就有学员在面试的过程中把面试官问到了，结果肯定可想而知了，下面就来总结一下C3新特性的问题。常见的面试官问法：你用CSS3实现过哪些动画，如何实现？你做过的那些CSS3的效果啊？你知道CSS3里面的盒模型不？说说你对伸缩布局是怎么了解的？...... 你能解释一些CSS3中的文本效果么？（te

比较好用的H5标签

qq_38796823的博客

10-10

266

detais标签 <details>标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例： <details> <summary>Click Here to get the user details</summary> <table> <tr> <th&.

C3新增的一些属性总结

木木的博客

06-06

3654

C3的选择器： 1.关系选择器：ul>li子代选择器 ul li后代选择器 .now+li后一个兄弟为li的元素 .now~li后面所有为li的兄弟元素 2.属性选择器：li[属性||自定义属性 ='值'] li里面属性或者自定义属性=值的元素 li[属性] 所有有此属性的元素 ...

HTML5新增标签及CSS3新增属性

杜小白的博客

03-06

4563

一、h5新增标签新增元素说明video表示一段视频并提供播放的用户界面audio表示音频canvas表示位图区域source为video和audio提供数据源track为video和audio指定字母svg定义矢量图code代码段figure和文档有关的图例figcaption图例的说明main主内容区time日期和时间值mark高亮的引用文字datalist提供给其他控件的预定义选项keygen...

H5移动端自定义选择器——layPicker日期选择器详解

资源摘要信息:"本文档主要介绍了一个基于jquery实现的移动端选择器组件——layPicker，主要面向H5移动端的使用环境。该组件被广泛应用于需要进行日期选择、级联选择等操作的场景中，特别是在移动端设备上提供了一个...