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基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...
- HTML5 基础知识（1）——基本标签
## HTML**概念**:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ...
- HTML5基础知识（一）---标签
在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...
- Web的架构与html5基础知识
图1:完整的Web应用构架 图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ...
- html5基础知识学习
HTML5腾讯课堂--html5前端开发视频 https://ke.qq.com/course/89671 html5_video http://www.myexception.cn/jquery/2 ...
- HTML5基础知识习题 一
1. HTML5 之前的 HTML 版本是什么? 答: HTML 4.01 2. HTML5 的正确 doctype 是? 答: <!DOCTYPE html> 3. 在 HTML5 中, ...
- 【前端】之HTML5基础知识
HTML5 文件格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- HTML5基础知识汇总（一）
一.HTML的开发工具和使用的浏览器 开发工具:记事本等文本编辑器,Atom.VisualStudioCode( VSCode).Brackets.Sublime text和Hbuider. 浏览器: ...
- 前端 | HTML5基础知识
1 HTML定义 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本.图片.声音等内容进行描 ...
随机推荐
- Data.gov.uk电子政务云，牛津大学NIE金融大数据实验室王宁：数据治理的现状和实践
牛津大学NIE金融大数据实验室王宁:数据治理的现状和实践 我是牛津互联网研究院的研究员,是英国开放互联网的一个主要的研究机构和相关政策制订的一个机构.今天主要给大家介绍一下英国数据治理的一些现状和实践 ...
- java double保留小数点的零的问题，java保留小数点问题
1.用DecimalFormat格式化,DecimalFormat df=new DecimalFormat("0.00"); System.out.println(df.form ...
- Navicat数据存放位置和备份数据库路径设置
navicat的数据库存放位置在什么地方?带着这样的疑问,我们去解决问题,navicat是默认安装,mysql也是默认安装,数据库存在默认用户所在的目录下面. 安装MySQL时,请选择“Custom” ...
- mongodb 物理删除数据
刚开始用mongodb的时候,感觉很好用,速度很快,不过后面就遇到一个问题,数据物理内存一直增加,删除表也不管用. 然后网上找了各种办法,最后发现一个办法管用,就是物理删除存储数据. 操作如下: 1. ...
- HDU 1051 Wooden Sticks【LIS】
题意:给出n个木头的重量wi,长度li,如果满足w[i+1]>=w[i]且l[i+1]>=l[i],则不用耗费另外的加工时间,问至少需要多长时间加工完这些木头. 第一次做这一题目也没有做出 ...
- 设置sudo不输入密码 sudoers 编辑出错后的补救方法
一 设置sudo为不需要密码 有时候我们只需要执行一条root权限的命令也要su到root,是不是有些不方便?这时可以用sudo代替.默认新建的用户不在sudo组,需要编辑/etc/sudoers文件 ...
- MapView的用法
一.MapView 1.显示用户的位置点(用蓝色圆点标记) mapView.showsUserLocation = YES; 2.代理方法 1> 当定位到用户的位置就会调用 - (void)ma ...
- UITabbar item 设置笔记
很长一段时间都是用代码来写UITabbarController,试着用xib来写一次,但是遇到tabbar item的图标自定义的时候不知道从何入手,比如定义选定前和选定后的icon图片,这地方还是不 ...
- 【转】让Souce Insight支持多种语言的语法高亮：Python,Ruby,ARM汇编,windows脚本文件（bat/batch），PPC，SQL，TCL，Delphi等
原文网址:http://www.crifan.com/source_insight_support_highlight_for_python_ruby_arm_batch_ppc_sql_tcl_de ...
- ios ViewController 页面跳转
从一个Controller跳转到另一个Controller时,一般有以下2种: 1.利用UINavigationController,调用pushViewController,进行跳转:这种采用压栈和 ...
