HTML新增

最新推荐文章于 2024-10-06 06:13:14 发布

21 ℃

最新推荐文章于 2024-10-06 06:13:14 发布

阅读量75

点赞数 1

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_46162015/article/details/119189495

版权

本文详细介绍了HTML5的新语法，包括可省略的元素、新增标签如<header>、<footer>等，并讲解了文本阴影、盒子阴影、CSS3圆角等样式效果的实现方法。同时，讨论了垂直居中布局的多种解决方案，以及媒体文件（视频、音频）的引入方式。此外，还提及了不同浏览器内核的前缀使用。

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

一、H5的语法

1.内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"

2.DOCTYPE声明 <!DOCTYPE html>不区分大小写

3.指定字符集编码 <meta charset="UTF-8">

4.可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta

5.可以省略结束标记的元素：

li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

6.可以省略全部标记的元素：html、head、body、colgroup、tbody

7.属性值可以使用双引号，也可以使用单引号。

二、html5新增标签

1.header 头部区域

2.footer 尾部区域

3.nav 导航区域

4.section 内容区域

5.article 文章

6.aside 辅助信息

7.hgroup 标题组

8.figure 类似于dl dt dd figcaption 标题

-----------

9.mark高亮显示【搜索 str+f 写要搜索的内容】

10.dialog对话框【需要结合open才可显示】

11.画布 canvas

三、文本阴影，text-shadow：

定义/作用：设置文本阴影的效果

语法:text-shadow:x方向的位置 y方向的位置【向下】模糊距离颜色[默认跟文本的颜色一致]

有两个必须的属性值:x方向的位置 y方向的位置

四、盒子阴影，box-shadow

定义/作用:设置盒子的阴影效果

语法:box-shadow:x轴方向 y轴方向模糊距离模糊大小颜色【默认跟字体颜色一致】 inset/outset

五、CSS3的圆角

border-radius：0【左上】 0【右上】 0【右下】 0【左下】；

六、垂直居中的解决方法

垂直居中的方法：【如果有文字需要单独设置 text-align：center】
（1）line-height 和 height的属性值保持一致，可以保证垂直居中的效果
【只对inline元素生效，block/inline-block如果是子级，则会继承父级的line-height实现居中，如果父级没有设置line-height将不生效】
然后给该元素一个宽度，设置margin：auto 则可水平居中
（2）给想要居中的元素设置绝对定位 position：absolute left:0 right:0 top:0 bottom:0  margin:auto也可实现居中对齐
（3）如果元素有 width 和height  则可用定位 position：absolute left：50% top：50%
          margin-left：-【宽度的一半】margin-top：-【高度的一半】
（4）display：inline-block 又设置了line-height和width  则可以用 vertical-align:middle 加上 margin：auto实现垂直居中