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

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

阅读量：6569 次

发布时间：2019-06-24

本文共 1353 字，大约阅读时间需要 4 分钟。

前言

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

    
          Title    
          
          
      
       This is header
      
    
      
       This is nav
      
    
              
       
        article
       
        
       
        aside
       
    
      
    
      
       footer

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