html5+css3
html5定义很多简便东西和宽松语法：
    文档头：
        <!doctype html>
    文档编码：
        <meta charset="utf-8">
    单标记：可以不加结尾斜杠
是什么？
html5是建立在html4的基础上
    只是多了一些新的标签和属性
 
css3是建立在css2的基础上
    只是多了一些新的样式
 
不用管兼容了。因为根本也就不兼容
一些误区：
1.html5写起来跟html4完全不一样?
    html4怎么写，html5就怎么写
2.移动端写起来跟pc端完全不同？
    pc端怎么写，移动端就怎么写，只是尺寸不同。
3.移动端写起来比pc端难？
    移动端比pc端简单
4.h5只能写移动端？
    移动端
    游戏
    WEBApp
        原生
                java   object-c
        web     
        混合
html5
<header></header> 页眉
<nav></nav>      列表导航
<hgroup></hgroup>    标题组
<footer></footer>    页脚
<section></section>    区域  布局
<article></article>    文章
<aside></aside>        侧边栏
<figure></figure>    一般用于图片或视频，组合
<figcaption></figcaption>    对图片说明
<time></time>       时间
<datalist></datalist>    数据列表
    配合input来用
    <input type="text" list="data">
    <datalist id="data">
        <option></option>
    </datalist>
 
<details></details>    简单描述
<summary>概要</summary>
    <p>具体详细描述</p>
 
    open 加上可以打开
 
<dialog></dialog>   对话
 
<address></address>  地址
<mark></mark>        标记
<keygen>    form配合来用，提供了一个秘钥
 
<progress></progress>
     标签    header secation footer nav video audio canvas
以上标签兼容不好：
    兼容IE9+
 
    IE8 7 6
想兼容：需要引入一个插件：html5shiv.js
    https://en.wikipedia.org/wiki/HTML5_Shiv
条件语句：
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
 
html5shiv.js 本质创建一个一对header、footer等...
表单：
    type类型：
        会自动校验，不是全部的，不完全
        * 手机上自动切换键盘
    email:   邮箱
    url     地址
    tel     电话
    number      数字
    range      滑块
    search      搜索
 
    color      颜色
    date      日期
    datetime
    month
    week
 
    新增属性：
    autofocus   自动聚焦
    autocomplete    自动补全   off
    placeholder    文字提示
 
    required    必填项
    pattern        正则验证
 
    novalidate      关闭校验(加到form身上)
    formaction      给submit加提交网址
    \w+@[a-z0-9-]+(\.[a-z]{2,6}){1,2}
本地存储
    cookie
    localStorage
 
                          cookie             localStorage
    生存周期           有                  没有
    操作                 难                  简单
    容量                 4KB              5MB
    提交                 会                  不会
 
 
    localStorage.xxx = xxx;             设置
    localStorage.xxx;                     获取
    delete localStorage.xxx;             删除
 
    兼容到ie7
    delete     是删除属性的
var json={
   name:'abc',
   age:30 
};

delete json.name;

自定义 属性（新的设置方法）
data-xxx="xxx";
向后兼容
obj.dataset.xxx;
可以遍历
性能低：oBtn.dataset.index--oBtn.index多选择了一个属性导致它的性能偏低
例子：
<script>
document.addEventListener('DOMContentLoaded',function(){
    var oBtn = document.getElementsByTagName('input')[0];
    alert(oBtn.dataset.index);
     oBtn.dataset.a = "5";设置一个自定义属性
          遍历

          for(var name in oBtn.dataset){

      alert(name+'=='+oBtn.dataset[name]);
 }
},false);
</script>
<input type="button" value="abc" data-index="a" />
js里面新增东西：
 
    选择元素：
        选择出来一组元素:
        document.querySelectorAll('#div1');
 
        选择出来一个元素
        document.querySelector('#div1');
    属性操作:
        a). .
        b). []
        c). attribute()
 
    自定义属性：
        用attribute绝对靠谱
 
        现在的自定义属性，都是随便写的，为了向后兼容(html6,html100)，占用了呢？
 
        data- 自定义属性
 
    获取：
        obj.dataset.xxx
 
        data-index-show  -> obj.dataset.indexShow
 
    设置：
        this.dataset.indexOne=1;
 
        <input data-index-one="1">
 
    选项卡：
        aBtn[i].index=i;
 
        aBtn[i].dataset.index=i;
 
class:
        obj.classList    所有的class
        obj.add(sClass)    添加class
        obj.remove(sClass)  删除class
        obj.contains(sClass)  判断是否有class
        obj.toggle(sClass)    切换class
//先添加active，在删除，在添加...
oDiv.classList.toggle('active');   
app:应用
 
    原生app（native app）：
        ios        oc（object-c）
        android        java
 
        缺点：至少需要两个团队，耗费资金，开发周期长   
        优点：性能高(大型3D游戏)、必须可以使用麦克风、摄像头
 
    hybrid app: 混合app
        本质也还是一个网页，可以调用一些接口
 
    web app:   本质html5网页，页面，外层包个壳子
        优点：跨平台、团队不需要很多人
        缺点：性能凑合、不能去调用底层东西
 

html5基础知识的更多相关文章

  1. HTML5基础知识及相关笔记

    HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...

  2. HTML5 基础知识（1）——基本标签

    ## HTML**概念**:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ...

  3. HTML5基础知识（一）---标签

    在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...

  4. Web的架构与html5基础知识

    图1:完整的Web应用构架 图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ...

  5. html5基础知识学习

    HTML5腾讯课堂--html5前端开发视频 https://ke.qq.com/course/89671 html5_video http://www.myexception.cn/jquery/2 ...

  6. HTML5基础知识习题 一

    1. HTML5 之前的 HTML 版本是什么? 答: HTML 4.01 2. HTML5 的正确 doctype 是? 答: <!DOCTYPE html> 3. 在 HTML5 中, ...

  7. 【前端】之HTML5基础知识

    HTML5 文件格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. HTML5基础知识汇总（一）

    一.HTML的开发工具和使用的浏览器 开发工具:记事本等文本编辑器,Atom.VisualStudioCode( VSCode).Brackets.Sublime text和Hbuider. 浏览器: ...

  9. 前端 | HTML5基础知识

    1 HTML定义 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本.图片.声音等内容进行描 ...

随机推荐

  1. java操作office和pdf文件页面列表导出cvs，excel、pdf报表.

    在平常的开发中我们常常遇到不仅仅只是导出excel报表的情况.有时候也需要导出pdf或者CSV报 表.其实原理都差不多.刚开始本来不打算也这篇博客介绍这个的.感觉这篇博客和前面的博客有点雷同.原理基本 ...

  2. Webservce、WCF、WebApi的区别

    Web Service It is based on SOAP and return data in XML form. It support only HTTP protocol. It is no ...

  3. 推荐一款开源的原型设计软件--pencil

    如果觉得内置的元素不够,可以直接用类似屏幕截图软件直接剪切粘贴,并且可以制作自己的元素集合.很好用 http://pencil.evolus.vn/ Easy GUI Prototyping Penc ...

  4. 多个MapReduce作业相互依赖时，使用JobControl进行管理

    要处理复杂关系的数据,一个工程里面绝对不止一个MapReduce作业,当有多个MapReduce作业时,       并且每个作业之间有依赖关系,所谓的依赖就是一个作业得到的结果是另外一个作业的输入, ...

  5. find命令下的atime,ctime,mtime

    Linux下的find命令在目录结构中搜索文件,并执行指定的操作.linux下的find命令提供了相当多的查找条件,功能很强大,由于find的功能很强大,所以他的选项也很多,今天我们来细说一下find ...

  6. POJ 1201 Intervals (差分约束系统)

    题意 在区间[0,50000]上有一些整点,并且满足n个约束条件:在区间[ui, vi]上至少有ci个整点,问区间[0, 50000]上至少要有几个整点. 思路 差分约束求最小值.把不等式都转换为&g ...

  7. [转]就这样，创建了自己的运行时共享库（RSL）

    原文地址:http://riaoo.com/?p=1405 博客园的下载地址(版权归原作者) http://files.cnblogs.com/tianlanliao/CustomRSL.zip 创建 ...

  8. 多线程&多进程解析：Python、os、sys、Queue、multiprocessing、threading

    当涉及到操作系统的时候,免不了要使用os模块,有时还要用到sys模块. 设计到并行程序,一般开单独的进程,而不是线程,原因是python解释器的全局解释器锁GIL(global interpreter ...

  9. 2016第20周四java基础概念

    简单的说JDK=JRE+Java编译器.调试器.工具类库等:JRE=JVM(类似于jre目录下的bin)+必要运行的类库(类似于jre目录下的lib) JVM:Java Virtual Mechina ...

  10. Android实例] android获取web服务器端session并验证登陆

    传统网页实现用户登陆一般采用session或cookie记录用户基本信息又或者两者结合起来使用.android也可以采用session实现用户登陆验证并记录用户登陆状态时的基本信息,session是在 ...