HTMLhtml5 一、html5 开发前的准备 1. html5新特性 2. HTML 5 与HTML 4 的区别 3

一、html5 开发前的准备

1. html5新特性

什么是html： 
  html是指超文本标记语言 （Hyper Text Markup Language）
  html 不是编程语言，是一种标记语言，用来描述网页的一种语言

html5 新特性：
  绘画的canvas标签
  媒介回放的video和audio元素
  对本地离线存储的更好支持

新的特殊内容元素：article、footer、header、nav、section、hgroup、aside、figure

新增的其它元素：
    video、audio、canvas、embed、mark、progress、meter、time、ruby、rt、rb、wbr、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的类型：
    email、url、number、range范围值、Date Pickers日历日期时间
    
新的表单控件：calendar、date、time、email、url、search

浏览器的支持：Safari、Chrome、Firefox、Opera、Mozilla、IE9及以上

开发工具：
  常用：webstorm、notepad++、Eclipse、text sublime、Dreamweaver、
  推荐：Intellij IDEA

前期需要掌握的技能 ：
  html5、xhtml、css3、javascript、jQuery-UI、jQuery-Mobil

2. HTML 5 与HTML 4 的区别

1. 语法的改变
  内容类型：   扩展名以 .html结尾  
  DOCTYPE声明： <!DOCTYPE html>
  指定字符编码：  <meta charset="UTF-8">
  可以省略标记的元素：...
  具有boolean值的属性: checked、disabled
  有些属性值可省略引号: <input type="checkbox" checked=checked />

2. 新增的元素和废除的元素   
  新增的属性:
    1. 表单相关的属性  2. 链接相关的属性  3. 其它属性
  废除的元素:
    能使用css替代的元素：basefont、big、center、font、s、tt、u等
    不再使用frame框架

3. html5在移动开发中的准则

1. 尽量使用单页面开发(SPA)：只请求一次页面 single page application
2. 慎重选择前端UI框架
3. 动画、特效使用准则(60fps)
  浏览器消耗最小的css属性：
        位置-transform:translate(x,y,z)
        大小-transform: scale(n)
        旋转-transform: rotate(ndeg)
        透明度-opacity: 0-1
        http://csstriggers.com/
4. 长度单位推荐使用rem 	
        px 像素相对于显示器屏幕分辨率(pc端常用单位)
        %：根据父元素的倍数来计算(pc端常用单位)
        em 根据父元素的 font-size 值来计算，如果没有给父元素设置 font-size ,就使用根元素的 font-size(pc端常用单位)
        rem根据html根元素的font-size的值的计算方式：通常font-size:10px; 
5. 页面布局：默认(流式布局-适合内容型应用)、绝对定位布局(适合交互类应用)、Flex布局(适合局部使用)

二、html5常用标签和属性

br、hr、input、img、base、link、meta // 单标签

1. html骨架

<!DOCTYPE html>    声明文档类型
<html>             html根节点标签
<head>             用于存放title、meta、base、script、link
  <meta charset="UTF-8" >  // 字符集，不指定时浏览器解析不了中文
  <base target="_blank" >  // 可以设置整体链接的打开状态，默认是_self自身窗口打开
  <link href="favicon.ico" rel="shortcut icon"> // 设置浏览器标签图标(前提:将制作好的ico放到项目根目录)
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   // 兼容性配置,ie以最高级edge渲染
  <meta name="renderer" content="webkit">   // 双核浏览器优先使用webkit引擎  
  <link rel="dns-prefetch" href="//static.360buyimg.com"> // 网站提升性能-dns预解析  
  <meta name="description" content="....">
  <meta name="keywords" content=".....">
<body>  页面主体部分

// 新增的语义化标签
header、footer、hgroup、address 、main、article、aside、section、
header 可以出现多次,可以 包含 h1/a/nav/ul/li 等标签一起使用
footer 可以作为其上层父级内容区块或是一个根区块的脚注信息。如作者、相关阅读链接及版权信息等
hgroup 将标题及其子标题进行分组的元素，1个以上的标题用 hgroup 将 h1~h6 包裹起来分组管理

// h5新增的全局属性
contentEditable="true/false"   允许用户编辑元素内容 
designMode="on/off"     只能在js脚本中修改编辑，指定为on时，页面可编辑，off不可编辑
hidden="true/false"     元素内容可见状态，true 元素不可见，false时元素可见
spellcheck=""        针对input文本输入框和textarea做语法检查,例输入错误单词时，会有波浪线提示
tabindex=""          通过按tab键获得标签焦点

chrome调试面板

elements -->  dom元素
console -->  调试、报错
source --> 源代码分析:例该网站用到了jquery、vue、webpack、ES6...
network --> 异步加载相关
memory --> 内存相关
Application --> 整个网站应用相关:cookie、storage...cache缓存、字体
scurity --> 安全
performance/Audits --> 性能相关

2. 新增的语义化标签

datalist 选项列表

// 与input标签配合使用：input 里使用list属性； datalist 里用id属性实现和input 连接
<input type="text" value="输入明星" list="star"/>  
<datalist id="star">
  <option>刘德华</option>
  <option>刘若英</option>
  <option>刘小琴</option>    
  <option>郭富城</option>
  <option>张学友</option>
  <option>郭子仪</option>
</datalist>

fieldset 将表单内的相关元素分组、打包

<fieldset>
  <legend>用户登录</legend>               legend 分组标题
  用户名：<input type="text"/><br/>
  密  码：<input type="password"/>    
</fieldset>

3. 标题、段落、文本格式化

h1-h6 
<p></p>
<b></b>  <strong></strong>  粗体
<i></i>  <em></em>  斜体
<s></s>  <del></del> 删除线
<u></u>  <ins></ins>  下划线

4. 字体

字体家族

serif 衬线 例:宋体、带装饰性    sans-serif 非衬线  规则
monospace 等宽 每个字母的空间都一样
cursive 手写体  fantasy 花体(英文常见)
注意：字体族不需要用双引号包裹

多字体fallback使用方式

/* 当指定的字体找不到，接着往后找，以便适配不同的平台 */
font-family: "Ping Fang SC", "Microsoft Yahei", monospace;

自定义字体 2步骤

/* 1. 将下载好的字体放到项目目录下：   例: .ttf  .eot  .svg  .wof   */
/* 2. 声明字体, 指向资源--下载好的 IndieFlower 手写体*/
@font-fact{ font-family:"IF", src: url(./IndieFlower.ttf); } 
.custom-font{ fontFamily: IF; }  /* 3. 使用字体 */

其它字体图标

iconfont字体图标：
1.引入css 文件(文件中声明了字体名、地址、类名)  
    <link rel="stylesheet" type="text/css" href="./iconfont.css" />
2. 挑选相应的图标并获取类名，应用于页面
    <i class="iconfont icon-xxx"></i>

1.去icomoon.io  里下载需要的字体图标:
  打开网站后 点击 icoMoon APP,选择自己需要的字体图标
2、复制 fonts 文件夹的里4个文件至 京东项目的fonts文件夹
3、css样式文件中 声明字体：
  复制iconmoon文件夹里 style.css 的@font-face{...}
  例： 注意：url 的路径 根据情况 需要重新设置一下
  @font-face {  /* 电脑中没有的字体，我们需要声明 */
          font-family: 'icomoon'; 
          src:  url('fonts/icomoon.eot?7kkyc2');
          src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
        }
4、使用字体图标
  <li><i></i>北京</li> 复制 icomoon文件夹里的 demo.html的对应图标 至<i>标签中
  css：
  li i {
        font-family: "icomoon";   /* 一定保证和上面的 font-family: 相同 */
        font-style: normal;  // 取消字体的倾斜样式
        color: #ccc;
}

追加字体图标：
1、进到 iconmoon.io 网站
打开网站后 点击 icoMoon APP
2、点击 import Icons 按钮，选择 Icomoon文件夹 中的selection.json 文件
3、追加图标，重新下载
4、将新下载的fonts文件夹中的4个文件夹 替换掉 原来项目中的

5. img 图像

<img 
    src="url路径"  
    相对路径: ./当前  ../上一层目录  
    绝对路径：file:// 当前电脑   http://  https:// 网络
    alt="当图片不能正常显示时，出现的文字" 
    title="鼠标悬停在图像上时，出现的文字"
    width="宽度"
    height="高度"
    border="粗细 样式 颜色"
/>

6. a 链接+锚点定位

<a href="跳转目标地址" target="目标窗口的弹出方式_self / _blank" >更多</a>
/* 注意：外部链接目标地址 必须以 http:// 开头, 内部链接目标地址：直接找到.html文件 */

锚点定位

适用于较长的页面，可以点击某个关键词，从而迅速到达页面中的指定位置

实现步骤：
  1. 使用 <a href="#id名" >链接文本</a>
  2. 使用相应的id名标注跳转目标的位置
例:
  <a href="#life">个人生活</a>
  ...
  <h3 id="life">个人生活</h3>

7. ul ol dl 有序无序列表

无序列表 ul li  <ul type="circle空心圆/ square正方形"></ul>
有序列表 ol li  <li>相当于一个容器，可容纳所有元素
自定义列表 dl dt dd  小米商城网站底部结构

8. form 表单

收集、传递用户信息，在html中，完整的表单由3部分构成：

表单域
相当于容器，用来容纳所有表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据就无法传送到后台服务器。
提示文本一个表单通常需要包含一些说明性文字，用来提示用户进行填写和操作。
表单控件包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

<form action="后台地址" method="提交方式post/get" name="表单名称" enctype="">
  ...    
</form>

action=""  // 规定向何处提交表单的地址（URL）（提交页面）。
enctype="" // 规定被提交数据的编码 默认：url-encoded   文件上传："multipart/form-data"
method="" // 规定在提交表单时所用的 HTTP 方法（默认：GET）

label标签

// 用于绑定一个表单元素，当点击label时，被绑定的表单元素会获得输入焦点。
使用方式：
1.用label标签直接包裹
  <label>输入账号：<input type="text"/></label>
2. 如果label里有多个表单元素，想定位到某个，通过for id 方式
  <label for="test">输入账号：
    <input type="text"/>
    <input type="text" id="test"/>
  </label>

input控件

type="text/password/radio/checkbox/button/submit/reset/image/file"
name="控件名称 自定义"
value="默认文本值 自定义"
checked="默认被选中的项"
maxlength="允许输入的最多字符数"

// html5新增属性
<input type="text" placeholder="请输入用户名">    占位符，当用户输入时，里面文字消失
<input type="text" autofocus/>       实例：当进入百度网址后，搜索框自动获得焦点
<input type="file" multiple/>    多文件上传
<input type="text" required/>    必填项，内容不能为空

checkbox复选框和label的搭配使用

// 案例：雪碧图（来源：慕课网）
<div class="checkbox">
  <input type="checkbox" id="handsome">
  <label for="handsome">我很帅气</label>
</div>

<style>
.checkbox input{display: none;}
.checkbox input + label{
  background: url(./images/checkbox-01.png) left center no-repeat;
  background-size: 20px 20px;
  padding-left: 20px; 
}
.checkbox input:checked + label {
  background-image: url(./images/checkbox-02.png);
}
</style>

select下拉菜单

<select name="sex">
  <option value="male" selected="selected">男</option>
  <option value="female">女</option>    
</select>

<!--注意：select 中至少包含一对option； 在option中定义selected="selected"时，当前项极为默认选中项-->

textarea 文本域控件

<!-- 实例：网友评论、留言、创建多行文本输入框  -->
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

**总结3个域**
    1. 文本域 <textarea> 留言
    2. 文件域 <input type="file"/> 上传文件
    3. 表单域 <form> 收集表单控件信息并提交的

h5新增的表单属性

1.form="表单id"

<!-- 声明该元素从属于指定表单 --> 
<!-- html4中，表单内的从属元素必须书写在表单内部， -->
<!-- 而在html5中，可以把它们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了 --> 
<form id="testform">
  <input type="text" />
</form>
<textrea form="testform"></textrea>

2.formaction="后台url"

// 将表单提交到不同的页面:
// html4中，表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，
// html5中可以为所有的"提交按钮"，增加不同的formaction属性，使单击不同的按钮可以将表单提交到不同的页面。

<form id="testform" action="后台url地址">
  <input type="submit" name="s1" value="v1" 
    formaction="http://localhost:8080/test/test01.jsp" />提交到test01.jsp页面
  <input type="submit" name="s2" value="v2" 
    formaction="http://localhost:8080/test/test02.jsp" />提交到test02.jsp页面
  <input type="submit" name="s3" value="v3" 
    formaction="http://localhost:8080/test/test03.jsp" />提交到test03.jsp页面    
</form>

3.formmethod="post/get"

// 对每一个表单元素分别指定不同的提交方法
  // html4中，表单的method属性 指定提交方法
  // html5中，formmethod 属性可以对每一个表单元素分别指定不同的提交方法
  
  <form id="testform">
  <input type="submit" name="s1" value="v1" formmethod="post" 
    formaction="http://localhost:8080/test/test02.jsp"/>post提交
  <input type="submit" name="s2" value="v2" formmethod="get" 
    formaction="http://localhost:8080/test/test02.jsp"/>get提交    
</form>
  
<!-- get请求 注意浏览器地址栏url：  localhost:8080/test/test02.jsp?s2=v2 -->

4.formenctype="text/plain"

对表单元素分别指定不同的编码方式
属性值："application/x-www-form-urlencoded"  默认编码方式，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）
"text/plain"   空格转换为 "+" 加号，但不对特殊字符编码。
"multipart/form-data"  不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

html4中，表单元素的enctype属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码
html5中，可以使用formtype属性对表单元素分别指定不同的编码方式.

<form>
  <input type="text" formenctype="text/plain" />   
  <input type="text" formenctype="multipart/form-data" /> 
  <input type="text" formenctype="application/x-www-form-urlencoded" />     
</form>

5.formtarget="_blank'

指定提交后在何处打开所需加载的页面
html4中，target属性用于指定在何处打开表单提交后所需要加载的页面
html5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面

"_blank"   在新窗口中打开
"_self"     默认。在相同的框架中打开
"_parent"   在父框架集中打开
"_top"      在整个窗口中打开
"framename" 在指定框架中打开

<form id="testform">
  <input type="submit" name="s1" value="v1" formtarget="_blank" 
    formaction="http://localhost:8080/test/test01.jsp" />post提交 
  <input type="submit" name="s2" value="v2" formtarget="_self" 
      formaction="http://localhost:8080/test/test02.jsp" />get提交   
</form>

6.labels

// 在html5中，为所有可使用标签的表单元素、button、select元素等，定义labels属性，属性值为一个nodeList对象，代表该元素所绑定的标签元素所构成的集合

<script>
function Validate(){
  var txtName = document.getElementById("txt_name"); 
  var btn = document.getElementById("btn"); 
  var form = document.getElementById("testform");  
  if(txtName.value.trim()===""){
    var label = document.createElement("label");
    label.setAttribute("for", "txt_name");
    form.insertBefore(label, btn);
    txtName.labels[1].innerHTML = "请输入姓名";
    txtName.labels[1].setAttribute("style","color:red; font-size:14px;")  
  }    
}
</script>
<form id="testform" >
  <label id="label" for="txt_name">姓名：</label>
  <input id="txt_name">
  <input type="button" id="btn" value="验证" onclick="Validate()" />
</form>

9. table表格

<table>
  <caption>表格标题</caption>      caption定义表格标题，必须紧跟table之后
  <thead>                         thead 定义表格头部
    <tr>			        tr 行标签 定义表格中的一行
      <th>...</th>                th 表头标签，谓语表格的第一行或第一列，文本加粗居中
      <th>...</th>  
    </tr>
  </thead>
  <tbody>                               tbody 定义表格主体
      <tr><td>...</td><td>..</td></tr>    td 单元格标签 表示一行中有多少列 or 多少个单元格
     			合并单元格：先上+先左  colspan 跨列合并  rowspan 跨行合并
  </tbody>  
</table>

border="默认0 无边框"
cellspacing="2px" 单元格与单元格边框之间的间距，默认2px
cellpadding="1px" 单元格内容与单元格边框之间的空白间距，默认1px
width="宽度"
height="高度"
align="left/right/center"

10. audio、video、embed多媒体

audio 音频

<!--1. 普通写法 -->
<audio controls src="**.mp3" autoplay loop></audio>

<!--2. 为了浏览器兼容，需要提前做3种声音文件：支持3种音频格式：ogg、mp3、wav -->
<audio controls autoplay>
  <source src="**.mp3"></source>
  <source src="**.ogg"></source>
  <source src="**.wav"></source>
</audio>

autoplay 自动播放 默认：不自动播放   --配合播放模式一起使用：
controls 是否显示默认的播放控件
loop 循环播放 loop="2"就是循环2次，loop 或 loop="-1"表示无限循环
实例：打开网站后的背景音乐，通过src属性指定音频文件路径即可

video 视频

<!--1. 普通写法:   width="设置播放窗口宽度"    height="播放窗口高度" -->
<video controls src="**.mpeg4" autoplay loop></video>

<!--2. 为了浏览器兼容，支持3种视频格式：ogg、mp4、webM -->
<video controls autoplay>
  <source src="**.mp4"></source>
  <source src="**.ogg"></source>
  您的浏览器不支持视频播放
</video>

三、html5中的API

1.获取页面元素+类名操作+自定义属性

document.querySelector("任意css选择器") // 获取指定选择器的第一个元素
document.querySelectorAll("任意css选择器") // 获取指定选择器的集合(多个元素)

Dom.classList.add("类名"); // 给当前dom元素添加类样式 例: divObj.classList.add("bg")
Dom.classList.remove("类名"); // 给当前dom元素移除类样式
Dom.classList.contains("类名"); // 检测是否包含类样式
classList.toggle("类名"); // 切换类样式

// 自定义属性    
<div data-test="123"></div>  // 在标签中，以data-自定义属性名="属性值"  声明
// 1. js中获取自定义属性值 Dom.dataset[自定义属性名]
console.log(Dom.dataset);// 返回的是一个对象 {test: "123"}
// 2. js中设置自定义属性
Dom.dataset.自定义属性名=值 或 Dom.dataset[自定义属性名]=值

2.文件读取(小文件)

// 读取文件
<input type="file" />
<script>
  var input = document.querySelector("input");
  input.onchange = function(){
    var file = this.files[0]; // 1.获取到文件
    var reader = new FileReader(); // 2. 创建读取器对象的实例
    reader.readAsText(file,'utf8'); // 3.以文本方式读取文件
    // 获取读取的结果
    reader.onload = function(){ // 4.只有当文件读取完成后,才可以获取文件信息内容
      console.log(reader.result);
      document.body.innerHTML += reader.result
    }
  }
</script>

// 图片上传预览
<input id="input" type="file">
<script>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    console.log( input.files ) //上传文件FileList对象
    const reader = new FileReader()
    //readAsDataURL()方法：读取文件内容，结果用data:url的字符串形式表示
    reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件
    // 读取成功回调
    reader.onload = ()=>{
        // 创建img节点
        const img = new Image()
        // 将读取的文件内容结果用data:url的字符串形式表示来赋值给img的src属性
        img.src = reader.result// reader.result为获取结果
        document.body.appendChild(img)  // 追加节点
    }
}, false)
</script>   

// FileReader文件读取器对象： 有3个读取文件方法, 返回结果在result中 
readAsBinaryString()  -- 将文件读取为二进制编码
readAsText()  -- 将文件读取为文本
readAsDataURL()  -- 将文件读取为DataURL

// FileReader 的相关事件
onabort  中断时触发
onerror  出错时触发
onload  文件读取成功后完成时触发
onloadend  读取完成触发，无论成功或失败
onloadstart   读取开始时触发
onprogress  读取中

3.获取网络状态(移动端适用)

window.navigator.onLine  // 返回布尔值
// 网络状态事件
window.ononline=function(){}  //  联网时触发该事件
window.onoffline=function(){}  // 断网时触发该事件

<script>
var state = window.navigator.onLine;
if(state){ 
  alert("您好，当前出于联网状态"); 
}else{ 
  alert("当前属于断网状态") }
</script>

4.获取地理定位

window.navigator.geolocation.getCurrentPosition(success,error); //只能获取一次当前地理位置信息 
function success(msg){ alert(msg);}
function error(msg){ alert(msg); }

// 实时获取地理位置(推荐使用)  --chrome浏览器不支持，选择 ie浏览器
<div id="demo"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br />Longitude: " + position.coords.longitude;
}
getLocation();
</script>

案例

// 地理定位小案例
<script src="http://api.map.baidu.com/api?v=2.0&ak=j2Kkclbr7wh86BEoBv5KlFwTXUGE4OA8"></script>
  <style>
    body,html,#allmap{
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="allmap"></div>
  <script>
    window.navigator.geolocation.watchPosition(suc, err);
    function suc(position){
      // 1.  获取当前经纬度信息
      var wd = position.coords.latitude;
      var jd = position.coords.longitude;

      // 2. 将信息传入 百度地图api功能
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(jd, wd);
      map.centerAndZoom(point, 15);

      // 创建定位点图片
      var pt = point;
      var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
      var marker2 = new BMap.Marker(pt, {icon:myIcon});
      map.addOverlay(marker2);
    }

    function err(){
      console.log("获取地理定位失败~~")
    }
  </script>

5.本地存储

本地存储数据,传统方式以document.cookie来进行存储,但由于其存储大小只有4K左右，并且解析复杂

// localStorage 永久生效，多窗口共享，容量大约为20M
window.localStorage.setItem(key, value) // 设置存储内容
window.localStorage.getItem(key)  // 获取内容
window.localStorage.removeItem(key) // 删除内容
window.localStorage.clear()  // 清空内容

// sessionStorage 生命周期为关闭当前浏览器窗,可以在同一个窗口下访问,数据大小为5M左右
window.sessionStorage.setItem(key, value);
window.sessionStorage.getItem(key);
window.sessionStorage.removeItem(key);

6.ie9以下低版本不认识html5标签的解决方案

在不支持html5新标签的浏览器里会将新标签解析成行内元素inline对待。火狐、opera

<!-- 方式1：创建html5 标签 -->
<script>
  document.createElement("header");   
  document.createElement("footer");   
</script>

<!-- 方式2：条件注释：低版本才能识别然后执行的    lt 小于  lte 小于等于 -->
<!-- [if lt IE9] >
  <script src="./js/htmlshiv.min.js"></script>
<![endif]-->

四、cavas画布

后续补充

HTML

一、html5 开发前的准备

1. html5新特性

2. HTML 5 与HTML 4 的区别

3. html5在移动开发中的准则

二、html5常用标签和属性

1. html骨架

chrome调试面板

2. 新增的语义化标签

datalist 选项列表

fieldset 将表单内的相关元素分组、打包

3. 标题、段落、文本格式化

4. 字体

字体家族

多字体fallback使用方式

自定义字体 2步骤

其它字体图标

5. img 图像

6. a 链接+锚点定位

锚点定位

7. ul ol dl 有序 无序列表

8. form 表单

label标签

input控件

checkbox复选框和label的搭配使用

select下拉菜单

textarea 文本域控件

h5新增的表单属性

1.form="表单id"

2.formaction="后台url"

3.formmethod="post/get"

4.formenctype="text/plain"

5.formtarget="_blank'

6.labels

9. table表格

10. audio、video、embed多媒体

audio 音频

video 视频

三、html5中的API

1.获取页面元素+类名操作+自定义属性

2.文件读取(小文件)

3.获取网络状态(移动端适用)

4.获取地理定位

案例

5.本地存储

6.ie9以下低版本不认识html5标签的解决方案

四、cavas画布

7. ul ol dl 有序无序列表