HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性

上一篇:HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO

一、变化的元素

1.1 DOCTYPE

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

1.2 meta声明

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

1.3 <link> 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

1.4 <script> 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

二、HTML5语义

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1 新增标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.1 article

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.2 header

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.3 footer

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.4 nav

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.5 aside

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.5 section

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.6 内容分组标签:main

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.7 内容分组标签:figure和figcaption

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.8 文本标签:time

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.9 i 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.9 b 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.10 em 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

2.1.11 strong 标签

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

三、星巴克网站制作

浏览器标题栏的上小图标:

<link rel="shortcut icon" href="images/favicon.ico">

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

页面初始化:

*{
    padding: 0;
    margin: 0;
    font: inherit;
    }

四、音视频播放

4.1 视频

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

兼容所有的浏览器播放:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

4.2 音频

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

五、新增input类型

5.1 input类型

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

datalist:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

keygen:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

output:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

六、表单验证

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

6.1 类型

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

6.2 必填字段

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

禁用表单验证:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

总结:

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

七、新增表单属性

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

7.1 placeholder

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

八、全局属性

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

《HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性》

下一篇:HTML5和CSS3系列(四):常见样式、背景、Web字体、2D转换、过渡

参考教学视频:HTML5和CSS3新特性视频教程

    原文作者:唐成勇
    原文地址: https://segmentfault.com/a/1190000013145292
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞