HTML5 第一部分 2018-03-30

一、HTML5概述

表格布局：表格应该存放数据，而不是划分网页结构的。

  • html5 并不仅仅等于 html的next version
  • css的升级，jsapi的升级，html的升级
  1. 广义：新一代开发富客户端（很强交互性和体验）应用程序整体解决方案
    structure + style + interactive 结构 样式 交互。全包了。
  2. 应用场景：
  • 极具表现力的网页
  • 功能非常多的
    pc端：iCloud、office365..
    app端：淘宝、京东..
    weChat端：淘宝、京东..
    混合式本地应用：网易云、有道词典... 淘宝、京东..
    简单的游戏：canvas

二、html5多的东西

  1. html的变化
  • 新标签

更语义化的标签、应用程序标签

  • 新属性

链接关系描述、结构数据标记、ARIA、自定义属性

  • 智能表单

新的表单类型、虚拟键盘适配

  • 网页多媒体

视频、音频、字幕

  • SVG
  • canvas

2D、3D

  1. JavaScriptAPI
  • 核心平台提升
  • 网页存储
  • 设备信息访问
  • 拖放操作
  • 文件
  • 网络访问（移动端多）
  • 多线程
  • 桌面通知
  1. css
    尽量用英文去命名（将不会的单词加入单词本）

三、语义化标签

  1. 让HTML代码符合页面的结构化、标签语义化
    例如让类名变成标签名：
    <div class="nav"> - <nav> //导航
    header、footer、section、article、aside等等
  2. div就是定义一个好无语义的块
  3. 为啥要有语义化标签？
  • 便于开发者阅读，写出更优雅的代码
  • 让浏览器或者爬虫更好解析，从而更好分析其中内容
  • 更好的搜索引擎化
    html的职责是描述一块内容是什么，长什么样子应该由css决定

四、应用程序标签

  • DataList(数据列表)
  • Progress(进度条)
  • Meter(数值显示器)
  • Menu(右键菜单)
  • Details(明细)
  • View Demo
<!-- 要有一个载体input 不常用！！-->
    <input list="input_list" type="text">
        <datalist id="input_list">
           <option value="夹心"></option>
           <option value="饼干"></option>
        </datalist>
    </input>
    <!-- 状态指示器 -->
    <progress value="" max=""></progress>
    <!-- 进度条 -->
    <progress value="75" max="100"></progress>
    <!-- 展示一个数值 （允许的最高值最低值 -->
    <meter min="0" max="100" low="40" high="90" optimum="100" value="50">
     a+
    </meter>
  • 链接关系
 <link rel="prev"  href="01 应用程序标签.html">

<body>
<!-- 通过链接关系属性声明 连入的链接和当前文档之间的关系 -->
     <a href="01 应用程序标签.html" rel="prev">上一页</a>
     <a href="#">下一页</a>
</body>

常见的链接关系表

alternate 文档的可选版本（例如打印页、翻译页或镜像）

start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
stylesheet 文档的外部样式表
contents 文档目录

index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接

五、新属性

  1. 兼容性问题：无法兼容H5的浏览器会默认解析为相应的div
    或者在script脚本中声明：document.createElement("header");
    google开发一个html5shiv.js，把h5所有新标签都放在里面 （if IE 执行那个js）
  2. 结构数据标记* 很少公司使用
  3. ARIA 属性*
    无障碍 富互联网应用程序
  4. 自定义属性（很重要）: data-xxx
    一般都是给a做点击事件，li不应该作为交互事件
    小tip：在控制台输入：document.body 回车
    document.body.contentEditable = "true" 回车
    或者网址中输入：data:text/html,<html contenteditable>
    就可以在网页中编辑文字
    小案例：设置自定义属性&动态将文本添加到li中
    var list = document.getElementById("list");
    for(var id in data){
      var item = data[id];
      var listElement = document.createElement("li");
      // listElement.innerHTML = item.name;
      listElement.appendChild(document.createTextNode(item.name));
      listElement.setAttribute("data-age",item.age);
      listElement.setAttribute("data-name",item.name);
      list.appendChild(listElement);//放循环里，变量本地化，jq必须要这样。

      //可以把多个事件赋到一个元素上 
      // 而把click赋值给元素只能添加一个事件
      listElement.addEventListener('click',function(){
        console.log("age:"+this.dataset['age']);
        console.log("name:"+this.dataset['name']);
        console.log(this.getAttribute("data-age"));
        // /访问的两种形式
      });
    }

六、智能表单

  1. 新的表单类型（移动端）
<input type="text" required>
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="search" results="10" placeholder="Search...">
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">
  • 主要用来做移动端虚拟键盘的适配
<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

七、网络多媒体

在此之前依赖于e.g.falsh插件

  1. 音频
<audio controls="controls">
  <source src="img/music.mp3" type="audio/mpeg"/>
</audio>
  1. 视频
 <video controls="controls">
  <!-- 不同浏览器支持格式不一样 -->
  <source src="fun.ogg" type="video/ogg" />
  <source src="fun.mp4" type="video/mp4" />
  <!-- 当浏览器不兼容video标签，就会将他以div方式解析,如果支持，这下面的文字就没有意义了 -->
  SHIT 你的浏览器不支持！
</video>

兼容版本：

<video controls="controls" poster="toy.png" autoplay="autoplay"> <!-- 海报和自动播放 -->
    <source src="fun.ogg" type="video/ogg">
    <source src="fun.mp4" type="video/mp4">
    <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
      <param name="allowFullScreen" value="true">
      <param name="allowscriptaccess" value="always">
      <param name="allowFullScreenInteractive" value="true">
      <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&amp;ShowId=0&amp;category=85&amp;Cp=0&amp;ev=1&amp;Light=on&amp;THX=off&amp;unCookie=0&amp;frame=0&amp;pvid=1439005764768c9QpaT&amp;uepflag=1&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.1080&amp;show_ce=0&amp;winType=interior&amp;Type=Folder&amp;Fid=25977506&amp;Pt=0&amp;Ob=1&amp;plchid=z&amp;openScanCode=1&amp;scanCodeText=&quot;限时&quot; 扫码免广告&amp;embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&amp;vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&amp;pageStartTime=1439005764766">
      <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
      <div class="player_html5">
        <div class="picture" style="height:100%">
          <div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
        </div>
      </div>
    </object>
  </video>

html5media组件，IE7以上视频全部兼容

  1. 属性


    image.png
  2. 字幕
    没啥人用。
<video id="clip" controls>
  <source src="fun.mp4" type="video/mp4" /> 
  <track label="English subtitles" kind="subtitles"
  srclang="en" src="video-subtitles-en.vtt" default />
</video>

八、SVG

可缩放矢量图形Scalable Vector Graphics

  1. 矢量图：路径，线条，放大不会失真，基于可扩展标记语言，XML（在放大的时候会去填充线条）
    位图：每个像素点一个颜色去堆积
  2. 优点：优势：体积小，质量高，效果好，可控程度高
    颜色可以通过css调整
  3. 使用方式（引用）

使用
<embed> 标签
<object> 标签
<iframe> 标签：留下来的，缺点：不能通过自己的css控制，svg实际上也是一个文档
Ajax方式加载

QQ图片20180331184353.png

!important 加载css行内样式后可以提高优先级

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,810评论 19赞 139
  • 正面管教读后感
    读了正面管教令我感触较深的就是作者提出了“如果你在管教孩子的过程中感到痛苦，那你的教育方法就错了”与“和善...
    从头开始_4fc4阅读 3,757评论 0赞 0
  • 每日精读之---《奇点临近》
    ●什么是指数增长，假设湖中的浮萍每天增长一倍，30天后浮萍将覆盖整个湖面，引发生态灾难，湖中的鱼因无法得到氧气而被...
    夏天与甲壳虫阅读 3,856评论 0赞 1
  • 少年，你的来信让我荣幸
    门口别着一封信，用牛皮纸卷着，扎个小绳。 啊，这应该叫"札"。 或者现代一点，叫"书简" 。 学校里，有位我不认识...
    行吟斯基阅读 3,345评论 0赞 0

友情链接更多精彩内容