13

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

一、变化的元素

1.1 DOCTYPE

clipboard.png

clipboard.png

1.2 meta声明

clipboard.png

1.3 <link> 标签

clipboard.png

1.4 <script> 标签

clipboard.png

二、HTML5语义

clipboard.png

clipboard.png

2.1 新增标签

clipboard.png

2.1.1 article

clipboard.png

clipboard.png

clipboard.png

2.1.2 header

clipboard.png

2.1.3 footer

clipboard.png

2.1.4 nav

clipboard.png

clipboard.png

2.1.5 aside

clipboard.png

clipboard.png

2.1.5 section

clipboard.png

clipboard.png

2.1.6 内容分组标签:main

clipboard.png

2.1.7 内容分组标签:figure和figcaption

clipboard.png

2.1.8 文本标签:time

clipboard.png

clipboard.png

2.1.9 i 标签

clipboard.png

2.1.9 b 标签

clipboard.png

2.1.10 em 标签

clipboard.png

2.1.11 strong 标签

clipboard.png

clipboard.png

三、星巴克网站制作

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

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

clipboard.png

页面初始化:

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

四、音视频播放

4.1 视频

clipboard.png

clipboard.png

clipboard.png

兼容所有的浏览器播放:

clipboard.png

4.2 音频

clipboard.png

clipboard.png

clipboard.png

五、新增input类型

5.1 input类型

clipboard.png

clipboard.png

clipboard.png

datalist:

clipboard.png

clipboard.png

keygen:

clipboard.png

clipboard.png

output:

clipboard.png

clipboard.png

六、表单验证

clipboard.png

6.1 类型

clipboard.png

6.2 必填字段

clipboard.png

clipboard.png

clipboard.png

clipboard.png

禁用表单验证:

clipboard.png

clipboard.png

总结:

clipboard.png

七、新增表单属性

clipboard.png

7.1 placeholder

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

八、全局属性

clipboard.png

clipboard.png

clipboard.png

clipboard.png

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

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


Bohr
6.5k 声望3.3k 粉丝