HTML5第二节 - 追梦-dream-html教程-PHP中文网

第二回合：html5的新特性

与之前的HTML4.01相比，HTML5增加了非常多的改变：

① 新的语义元素：

、

② 新的元素特性：增加新的元素属性、表单元素、验证功能等内容。

③ 多媒体：增加

立即学习“前端免费学习笔记（深入）”；

④ 2D/3D 绘图：增加

⑤ 存储：增加在线、离线存储功能。

⑥ 连通性：增加客户端与服务器交互的两个内容：Web Sockets(客户端与服务器持久连接)和Server-sent events(服务器推送数据)等。

Google Antigravity

谷歌推出的AI原生IDE，AI智能体协作开发

277

查看详情

⑦ 集成：提供Web Workers、History API、requestAnimationFrame、地理位置等强大的功能。

⑧ 设备访问：提供对摄像头、移动设备的支持。

⑨ CSS3样式：提供了新的背景样式特性、动画、边框等样式。

下面我们用实例来说明下各个标签的使用以及h5与c3的配合。

html代码如下：

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="html5.css"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

   <span style="color: #0000ff;"><</span><span style="color: #800000;">header </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="show"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Header<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Subtitle<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
 
   <span style="color: #0000ff;"></</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 头部结束 </span><span style="color: #008000;">--></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>

        <span style="color: #0000ff;"><</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Nav<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>CSS3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">></span>Javascript<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">nav</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 导航链接部分 </span><span style="color: #008000;">--></span>

        <span style="color: #0000ff;"><</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Article Header<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义头部 </span><span style="color: #008000;">--></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Article Footer<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义尾部 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义文章 </span><span style="color: #008000;">--></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>Article Header<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">header</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
                    <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Article Footer<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"></</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">article</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义文档中的节 </span><span style="color: #008000;">--></span>

        <span style="color: #0000ff;"><</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>Aside<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>do you love this case? if you want make friends with me ,you can add my qq: 1125911451,thank you for your join.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="lian.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="220"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="250"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">aside</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 定义侧边栏目 </span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>Footer<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">><br /><br />css代码如下：<br /></span>

登录后复制

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#CCCCCC</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">Geneva,Arial,Helvetica,sans-serif</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0px auto</span>;<span style="color: #ff0000;">
    max-width</span>:<span style="color: #0000ff;">900px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">solid</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FFFFFF</span>;
}<span style="color: #800000;">

header </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #F47D31</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#FFFFFF</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;
}<span style="color: #800000;">

header h2 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 72px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0px</span>;
}<span style="color: #800000;">

h2 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #F47D31</span>;
}<span style="color: #800000;">

h3 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #F47D31</span>;
}<span style="color: #800000;">

h4 </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #F47D31</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    -webkit-box-shadow</span>:<span style="color: #0000ff;"> 2px 2px 20px #888</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
    -moz-box-shadow</span>:<span style="color: #0000ff;"> 2px 2px 20px #888</span>;<span style="color: #ff0000;">
    -moz-transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0px 150px</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> -120px</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;
    
}<span style="color: #800000;">

nav </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">25%</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">

nav a:link, nav a:visited </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 3px solid #fff</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

nav a:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #F47D31</span>;
}<span style="color: #800000;">

nav h3 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> white</span>;
}<span style="color: #800000;">

#container </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #888</span>;
}<span style="color: #800000;">

section </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">50%</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">

article </span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    -moz-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;
}<span style="color: #800000;">

article header </span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    -moz-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 5px</span>;

}<span style="color: #800000;">

article footer </span>{<span style="color: #ff0000;">
    -webkit-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    -moz-border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">

article h1 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 18px</span>;
}<span style="color: #800000;">

    
aside </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">25%</span>;<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">

aside h3 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> white</span>;
}<span style="color: #800000;">

aside p </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;
}<span style="color: #800000;">
    

footer </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">    
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #F47D31</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">#FFFFFF</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 15px</span>;
}<span style="color: #800000;">

footer h2 </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 14px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> white</span>;
}


<span style="color: #008000;">/*</span><span style="color: #008000;"> links </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #F47D31</span>;
}<span style="color: #800000;">

a:hover </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> underline</span>;
}<span style="color: #800000;">
.show </span>{<span style="color: #ff0000;">
           
          
            -webkit-animation</span>:<span style="color: #0000ff;"> show 25s ease-out infinite</span>;<span style="color: #ff0000;">
            -moz-animation</span>:<span style="color: #0000ff;"> show 25s ease-out infinite</span>;<span style="color: #ff0000;">
            -o-animation</span>:<span style="color: #0000ff;"> show 25s ease-out infinite</span>;<span style="color: #ff0000;">
            animation</span>:<span style="color: #0000ff;"> show 25s ease-out infinite</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
            -ms-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
            -o-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;
        }<span style="color: #008000;">/*</span><span style="color: #008000;">调用动画</span><span style="color: #008000;">*/</span><span style="color: #800000;">
 @-webkit-keyframes show </span>{<span style="color: #ff0000;">
            0% {
                background</span>:<span style="color: #0000ff;"> #f47d31</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;">  white</span>;
            }<span style="color: #800000;">

            50% </span>{<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> #e0a014</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> #a3d9ff</span>;
            }<span style="color: #800000;">

            100% </span>{<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> purple</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> pink</span>;
            }<span style="color: #800000;">
        }</span><span style="color: #008000;">/*</span><span style="color: #008000;">定义动画</span><span style="color: #008000;">*/<br />效果图如下图所示<img src="http://images2015.cnblogs.com/blog/908680/201604/908680-20160407143653765-667660369.png" alt="" /></span>

登录后复制

我相信现在大家对h5已经产生了浓厚的兴趣，那么现在可以自己动手去撸代码，用h5开发页面，在下一节里我将继续为大家讲解h5的应用