• 全栈工程师知识点汇总——html5(上)


    一、HTML5

    1、新特性:
    1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
    2. 新表单元素引入
    3. 新语义标签的引入
    4. canvas标签(图形设计)
    5. 本地数据库(本地存储)
    6. 一些API
    好处:
    1. 跨平台
    例如:比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

    缺点:
    1. pc端浏览器支持不是特别友好,造成用户体验不佳


    2、## 新语义标签

    ### 网页布局结构标签及兼容处理

    ```html
    <header></header>
    <footer></footer>
    <article></article>
    <aside></aside>
    <nav></nav>
    <section></section>
    ....

    布局结构标签 兼容IE处理方式:

    a、document.createElement("nav");
    display:block;


    b、通过js插件——(语义标签兼容处理插件:html5shiv.js)
    <script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>

    c、(终极解决方案)快捷键:cc:ie6 + tab键
    <!--[if lte IE 8]>
    <script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>
    <![endif]-->

    ### 多媒体标签及属性介绍

    <video></video> 视频
    属性:controls 显示控制栏
    属性:autoplay 自动播放
    属性:loop 设置循环播放

    <audio></audio> 音频
    属性:controls 显示控制栏
    属性:autoplay 自动播放
    属性:loop 设置循环播放


    多媒体标签在网页中的兼容效果方式(巧用source兼容)

    <video>
    <source src="code/多媒体标签/trailer.mp4">
    <source src="trailer.ogg">
    <source src="trailer.WebM">
    </video>

    ### 智能表单控件

    <input type="email">

    email: 输入合法的邮箱地址(省去写正则表达式的烦恼)
    url: 输入合法的网址
    number: 只能输入数字
    range: 滑块
    color: 拾色器
    date: 显示日期
    month: 显示月份
    week : 显示第几周
    time: 显示时间

    ### 表单属性

    form属性:
    autocomplete = on | off 自动完成(默认打开)
    novalidate (= true | false) 是否关闭校验


    input属性:
    * autofocus 自动获取焦点
    multiple 实现多选效果
    * placeholder:"" 占位符 (提示信息)
    * required 必填项

    form = "id"

    list = "id"
    例: <input type="text" list="abc"/>
    <datalist id="abc">
    <option value="123">12312</option>
    <option value="123">12312</option>
    <option value="123">12312</option>
    <option value="123">12312</option>
    </datalist>

  • 相关阅读:
    天地图专题六:复杂操作,天地图上标注点的连线以及模拟点击事件
    天地图专题五:在天地图上绘制电子区域并保存数据
    天地图专题四:在天地图上显示运行轨迹
    天地图专题三:根据标注点的范围确定天地图的中心点和缩放级别
    天地图专题二:在天地图上循环显示标注点以及悬停显示信息窗口
    天地图专题一:加载天地图
    从百度地图批量获取中国县级以上行政区划边界坐标
    【百度地图API】如何获取行政区域的边界? (转载)
    高德地图api之location定位
    url中的空格
  • 原文地址:https://www.cnblogs.com/kathyhong/p/11225342.html
Copyright © 2020-2023  润新知