设为首页收藏本站
查看: 3041|回复: 0

[前端开发] 011 HTML5详解（一）

[复制链接]
真是低调le
  • TA的每日心情
    开心
    2024-1-13 00:31

    • 签到天数: 535 天

    [LV.9]以坛为家II
    发表于 2021-9-15 19:54:55 | 显示全部楼层 |阅读模式
    本帖最后由 真是低调le 于 2021-9-15 19:54 编辑

    HTML5的介绍

    Web 技术发展时间线

    - 1991 HTML

    - 1994 HTML2

    - 1996 CSS1 + JavaScript

    - 1997 HTML4

    - 1998 CSS2

    - 2000 XHTML1（严格的html）

    - 2002 Tableless Web Design（表格布局）

    - 2005 AJAX

    - 2009 HTML5

    - 2014 HTML5 Finalized


    2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。

    2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。

    H5草案的前身是叫：Web Application，最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。

    2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。

    什么是 HTML5

    HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它*定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

    HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。

    HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。

    HTML5不等于 HTML next version。HTML5 包含： HTML的升级版、CSS的升级版、JavaScript API的升级版。

    总结：HTML5是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。


    富客户端：具有很强的交互性和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。

    PS：

    单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。

    如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。

    HTML5 的应用场景

    列举几个HTML5 的应用场景：

    （1）极具表现力的网页：内容简约而不简单。

    （2）网页应用程序：

    - 代替PC端的软件：iCloud、百度脑图、Office 365等。

    - APP端的网页：淘宝、京东、美团等。

    - 微信端：公众号、小程序等。

    （3）混合式本地应用。

    （4）简单的游戏。

    HTML5 新增的内容








    语义化的标签

    语义化的作用

    语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表。标签语义化的作用：

    - 能够便于开发者阅读和写出更优雅的代码。

    - 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。

    - 更好地搜索引擎优化。

    总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。


    H5在语义上的改进

    在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。

    我们常见的 css+div 布局是：



    在html5中，我们可以这样写：



    传统的做法中，我们通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。

    HTML5 则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

    传统网页布局：

    1. <!-- 头部 -->
    2. <div class="header">
    3.     <ul class="nav"></ul>
    4. </div>

    6. <!-- 主体部分 -->
    7. <div class="main">
    8.     <!-- 文章 -->
    9.     <div class="article"></div>
    10.     <!-- 侧边栏 -->
    11.     <div class="aside"></div>
    12. </div>

    14. <!-- 底部 -->
    15. <div class="footer">

    17. </div>
    复制代码



    H5 的经典网页布局：

    1. <!-- 头部 -->
    2. <header>
    3.     <ul class="nav"></ul>
    4. </header>

    6. <!-- 主体部分 -->
    7. <div class="main">
    8.     <!-- 文章 -->
    9.     <article></article>
    10.     <!-- 侧边栏 -->
    11.     <aside></aside>
    12. </div>

    14. <!-- 底部 -->
    15. <footer>

    17. </footer>
    复制代码


    H5中新增的语义标签

    - <section> 表示区块

    - <article> 表示文章。如文章、评论、帖子、博客

    - <header> 表示页眉

    - <footer> 表示页脚

    - <nav> 表示导航

    - <aside> 表示侧边栏。如文章的侧栏

    - <figure> 表示媒介内容分组。

    - <mark> 表示标记 (用得少)

    - <progress> 表示进度 (用得少)

    - <time> 表示日期

    本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于<nav>。

    PS：单标签不用写关闭符号。

    新语义标签的兼容性处理

    IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。

    引入时，需要做if判断，具体代码如下：

    1.     <!--  条件注释 只有ie能够识别-->

    3.     <!--[if lte ie 8]>
    4.         <script src="html5shiv.min.js"></script>
    5.     <![endif]-->
    复制代码


    上方代码是条件注释：虽然是注释，但是IE浏览器可以识别出来。解释一下：

    - l：less 更小

    - t：than 比

    - e：equal等于

    - g：great 更大

    PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。

    在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。

    但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。

    当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。


    H5中的表单

    传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

    H5中新增的表单类型

    - email 只能输入email格式。自动带有验证功能。

    - tel 手机号码。

    - url 只能输入url格式。

    - number 只能输入数字。

    - search 搜索框

    - range 滑动条

    - color 拾色器

    - time        时间

    - date 日期

    - datetime 时间日期

    - month 月份

    - week 星期


    上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

    代码举例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    6.     <title>表单类型</title>
    7.     <style>
    8.         body {
    9.             margin: 0;
    10.             padding: 0;
    11.             background-color: #F7F7F7;
    12.         }

    14.         form {
    15.             max-width: 500px;
    16.             width: 100%;
    17.             margin: 32px auto 0;
    18.             font-size: 16px;
    19.         }

    21.         label {
    22.             display: block;
    23.             margin: 10px 0;
    24.         }

    26.         input {
    27.             width: 100%;
    28.             height: 25px;
    29.             margin-top: 2px;
    30.             display: block;
    31.         }

    33.     </style>
    34. </head>
    35. <body>
    36. <form action="">
    37.     <fieldset>
    38.         <legend>表单类型</legend>
    39.         <label for="">
    40.             email: <input type="email" name="email" required>
    41.         </label>
    42.         <label for="">
    43.             color: <input type="color" name="color">
    44.         </label>
    45.         <label for="">
    46.             url: <input type="url" name='url'>
    47.         </label>
    48.         <label for="">
    49.             number: <input type="number" step="3" name="number">
    50.         </label>
    51.         <label for="">
    52.             range: <input type="range" name="range" value="100">
    53.         </label>
    54.         <label for="">
    55.             search: <input type="search" name="search">
    56.         </label>
    57.         <label for="">
    58.             tel: <input type="tel" name="tel">
    59.         </label>
    60.         <label for="">
    61.             time: <input type="time" name="time">
    62.         </label>
    63.         <label for="">
    64.             date: <input type="date" name="date">
    65.         </label>
    66.         <label for="">
    67.             datetime: <input type="datetime">
    68.         </label>
    69.         <label for="">
    70.             week: <input type="week" name="month">
    71.         </label>
    72.         <label for="">
    73.             month: <input type="month" name="month">
    74.         </label>
    75.         <label for="">
    76.             datetime-local: <input type="datetime-local" name="datetime-local">
    77.         </label>
    78.         <input type="submit">
    79.     </fieldset>
    80. </form>
    81. </body>
    82. </html>
    复制代码


    代码解释：

    <fieldset> 标签将表单里的内容进行打包，代表一组；而<legend> 标签的则是 fieldset 里的元素定义标题。
    回复

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.056260 second(s), 21 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    首页

    资讯

    社区

    互助

    家园

    群组

    文库

    文图

    组织活动

    总排行榜

    个人日志

    音乐电台

    爱心赞助

    每日签到

    微信机器

    微信图片

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表