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

时间 2019-12-07

标签 web 开发学习笔记前端 html5 html 栏目 HTML 繁體版

原文原文链接

前言

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

前端的内容能够分为 HTML CSS JavaScript 三部分, 咱们首先学习 HTMLhtml

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

语义化标签的例子web

htmlchrome

<!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>

csscanvas

*{
    /*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;
}
```

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

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

`input` 标签新增的 `type` 属性

参考资料

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

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

input 标签新增的 type 属性

参考资料

`input` 标签新增的 `type` 属性