HTML5新标签和特性
HTML5新标签与特性
1.兼容性问题(ie9以上的版本)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308183103780.png)]
2.文档类型设定
document
HTML:sublime输入html:4s
XHTML:sublime输入html:xt
HTML5:sublime输入html:5 <!DOCTPY html>
3.字符设定
:html与XHTML中建议这样去写 :HTML5标签中建议这样去写
4.常用新标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SyrlZzJC-1647847660822)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308183654492.png)]
datalist 标签定义选项列表。请与input元素配合使用该元素。例:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyNhGBUj-1647847660823)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184055553.png)]
fieldset元素可将表单内的相关元素分组,打包 legend搭配使用。例:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnMpVJjg-1647847660824)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184219605.png)]
2.新增表单属性
常用新属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NkZKD0qp-1647847660825)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184602722.png)]
3audio多媒体
HTML5通过标签解决音频播放的问题。
使用相当简单,如下图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zAHiRza-1647847660827)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185022713.png)]
并且可以添加附加属性:
autoplay自动播放
controls 是否显不默认播放课件
loop 循环播放
由于版权问题,不同浏览器可支持播放的格式是不一样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3YRUra26-1647847660828)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185206964.png)]
2.css新增选择器
结构伪类选择器(css3)
:first-child:选取其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):匹配属于其父元素的第N个子元素,不论元素类型
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HvKq7wk6-1647847660829)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185705564.png)]
属性选择器
选取标签带有某些特殊属性的选择器,我们称为属性选择器,例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAz5aJEi-1647847660830)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185756833.png)]
伪元素选择器
1.E::first-letter文本的第一个单词或者字(如中文,日文,韩文等)
2.E::first-line文本第一行;
3.E::selection可改变选中文本的样式;
使用after伪元素清除浮动
:after方式为空元素的升级版,好处是不用单独加标签了
使用方法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8edq4khp-1647847660831)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308191614569.png)]
优点:符合闭合浮动思想,结构语义化正确
缺点:由于IE6-7不支持:after,使用zoom:1触发hasLayout。
css盒模型
css3中可以通过box-sizing来指定盒模型,即可指定为content-box,border-box,这样我们计算盒子。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0HFTxB4-1647847660832)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308192042549.png)]
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhgffekg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01