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

2024年4月2日 131次阅读 来源: FrozenMap

前言

通过之前的文章, 我们已经搭好了 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 属性

参考资料

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