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;
}
```

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

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

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

参考资料

FrozenMap

引用和评论

在 minikube 中使用 nfs

不使用 JS 纯 CSS 获取屏幕宽高

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

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

前言

HTML5简介

HTML5 语义化标签

兼容性(IE)

input 标签新增的 type 属性

参考资料

FrozenMap

引用和评论

在 minikube 中使用 nfs

不使用 JS 纯 CSS 获取屏幕宽高

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

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