Web 开发学习笔记(6) --- 前端开发之 HTML5

前言

通过之前的文章, 我们已经搭好了 webapp 的雏形, 不过到目前为止, 我们的前端界面比较简单, 为此, 我们要学习前端的知识, 然后对界面进行改进.

前端的内容可以分为 HTML CSS JavaScript 三部分, 我们首先学习 HTML


HTML5简介

  • 什么是 HTML5 ———— 第五代 HTML 语言
  • 为什么学 H5

    • 所有主流浏览器都支持 h5, chrome, firefox, safari, IE10+
    • H5 改变了用户与文档的交互方式, 尤其是多媒体, 替代了传统的 flash, 多媒体标签 video, audio, canvas
    • 增加了其他新特性

      语义特性、本地存储、网页多媒体(音视频), 二位三维变换, 特效(过渡, 动画)

    • 相比于 h4, 抛弃了不合理不常用的标签和属性, 增加了一些标签和属性, h5代码更加简洁(<!doctype html>, <meta charset="UTF-8")


HTML5 语义化标签

  • header, nav, main, article, aside, footer. 更多标签可以查看这里 HTML Tags
  • 语义化标签的例子


    html

    <!doctype html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="index.css">
    </head>
    
    <body>
        <!-- 语义化标签 -->
        <header>This is header</header>
        <nav>This is nav</nav>
        <main>
            <article>article</article>
            <aside>aside</aside>
        </main>
        <footer>footer</footer>
    </body>
    
    </html>

    css

    *{
        /*padding: 0px;
        margin: 0px;*/
    }
    header{
        width: 100%;
        height: 100px;
        background-color: red;
    }
    nav{
        width: 100%;
        height: 36px;
        background-color: green;
    }
    main{
        width: 100%;
        height: 240px;
        background-color: #ccc;
    }
    main > article{
        width: 80%;
        height: 100%;
        background-color: purple;
        float: left;
    }
    main > aside{
        width: 20%;
        height: 100%;
        background-color: pink;
        float: right;
    }
    footer{
        width: 100%;
        height: 80px;
        background-color: skyblue;
    }


兼容性(IE)

  • IE9 将新的语义标签理解为行级元素, 在设置高度的时候是无效的, 需要在样式中转换为块级元素(block), 如

    main{
        display: block;
    }


input 标签新增的 type 属性


参考资料

阅读 739

推荐阅读
学习笔记
用户专栏

这个专栏记录了我的学习过程,一方面是帮助自己整理总结,另一方面也希望对屏幕前的你有所帮助,如果你...

5 人关注
28 篇文章
专栏主页