zoukankan      html  css  js  c++  java
  • 全栈工程师知识点汇总——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>

  • 相关阅读:
    “数学题”——传钱
    kafka笔记——入门介绍
    SpringBoot集成Dubbo+Zookeeper
    MySql基本语法
    动态规划
    总结
    Java反射
    软件清单
    Java IO操作
    Spring Boot AOP的使用
  • 原文地址:https://www.cnblogs.com/kathyhong/p/11225342.html
Copyright © 2011-2022 走看看