H5+C3新增属性

最新推荐文章于 2022-04-15 23:20:32 发布

不明真相的末影人丶

最新推荐文章于 2022-04-15 23:20:32 发布

阅读量160

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/moyingrenlike/article/details/115396074

版权

本文详细介绍了HTML5中的语义化标签如<header>,<nav>,<article>等，以及多媒体标签<video>和<audio>的使用方法和属性。同时，讲解了新增的表单元素和输入类型，如email, url等，以及CSS3的新选择器、伪类和新属性，如border-box、calc()和transition。此外，还提到了CSS3滤镜和过渡效果的应用。

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

H5新增语义化标签

–html5的新增标签都有兼容性的问题，基本都是IE9+以上版本的浏览器菜支持，不考虑兼容问题的话可以大量使用

1.新增语义化标签

新增的语义化标签更加有利于浏览器的搜索引擎搜索，也方便了网站的搜索引擎优化
-1.<header>头部标签
-2.<nav>导航标签
-3.<article>内容标签
-4.<section>定义文档某个区域
-5.<aside>侧边栏标签
-6.<footer>尾部标签

2.多媒体标签

-1.视频标签video
–当前video标签支持三种视频格式、尽量使用mp4格式
使用语法：<video src="media/mi.mp4"></video>
兼容写法：

 <video>
     <source src="move.mp4" type="video/mp4">
     <source src="move.ogg" type="video/ogg">
     您的浏览器暂不支持<video>标签
 </video>

video常用属性
autoplay 视频就绪自动播放（谷歌浏览器需设置静音muted播放才能使用）
controls 向用户显示播放控件（一般使用js实现）
loop 循环播放
muted 静音播放
以上四个属性的值与属性相同

width/height 设置视频窗口的宽高

preload 设置是否预先加载视频–on开启预先加载、–off关闭预先加载

src 视频的路径
poster 加载完毕等待播放前的画面图片路径

eg：

<video src="media/mi.mp4" autoplay muted loop poster="media/mi.jpg"></video>

-2.音频标签audio
–与视频标签一样支持三种格式,但尽量使用mp3格式
使用语法：<audio src="media/mi.mp3"></audio>
兼容写法：

<audio>
    <source src="mi.mp3" type="audio/mpeg">
    <source src="mi.ogg" type="audio/ogg">
    您的浏览器暂不支持<audio>标签
</audio>

常用属性：
autoplay 加载就绪后立即播放–音频文件无法设置自动播放（可用js解决）
controls 向用户显示播放控件
loop 循环播放
src 文件路径

eg：

<audio src="media/music.mp3" autoplay controls loop>

3.新增表单元素

常见输入类型

text password radio checkbox button file hidden submit reset image

–新增的输入类型

email 限制输入必须为邮箱地址
url 限制输入必须为url（网址）类型
date 限制输入必须为日期类型
time 限制输入必须为时间类型
month 限制输入必须为月类型
week 限制输入必须为周类型
number 限制输入必须为数字
tel 限制输入必须为手机号码
search 搜索框
color 颜色选择表

新增表单属性

placeholder 表单提示信息（更改样式使用input::placeholder{}）
multiple 多选文件、用于文件域，下拉菜单也可使用
autofocus 自动获取焦点
autocomplete 自动填充 on开启、off关闭、一般都会关闭（如果要实现自动填充，表单必须有name属性并且表单被提交过-写在from表单域内提交才有效）
required 设置表单为必填

去除search的删除按钮、去除number的增减按钮

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

CSS3新增属性

1.CSS3新增选择器

–属性选择器【是独立的选择器，可以单独或多个使用、权重为（0，0，1，0）】
E[att]——选择具有att属性的E元素
E[att=“val”]——选择具有att属性并且属性值等与val的E元素
E[att^=“val”]——选择具有att属性并且属性值以val开头的E元素
E[att$=“val”]——选择具有att属性并且属性值以val结尾的E元素
E[att*=“val”]——选择具有att属性并且属性值含有val的E元素

–结构伪类选择器
E:first-child——匹配父元素中的第一个子元素E
E:last-child——匹配父元素中的最后一个子元素E
E:nth-child(n)——匹配父元素中的第n个子元素E——括号内可以写数字或者公式，公式必须以n开头才有效，n从0开始计算
E:first-of-type——匹配E类型的第一个
E:last-of-type——匹配E类型的最后一个
E:nth-of-type(n)——匹配E类型中的第n个——括号内可以写数字或者公式，公式必须以n开头才有效，n从0开始计算
child和of-type的区别
child选择器选择时先看child结构伪类选择器，再看前面的E是否匹配
of-type选择器选择时先匹配前面的E，再选择of-type

–伪元素选择器、权重（0，0，0，1）
::before - 在元素前插入内容、默认为行元素
::after - 在元素后插入内容、默认为行元素
伪元素选择器创造的元素再文档中时找不到的，所以称之为伪元素
语法：element::before{}
before、after里必须有content属性，否则无效。