html5简单总结

HTML5概述

语义
  • html5中的节段和提纲
  • html5中的 音频和视频
    音频 视频
  • html5中 的表单
连通性

服务器和浏览器直接能够通过web socket网络套接字来保持连通。

离线和存储

localStores

3D 图像&效果

canvas WebGL svg

性能 & 集成

增加了web worker 能够让js操作线程。

设备访问

使用地理位置、摄像头、触控事件、检测设备方向、都是给移动端提供的API

样式

border-radius 边框阴影。

HTML5新的语义化标签

新的骨架结构

<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>Documenttitle>
head>
<body>
    
body>
html>
新的规范
  • html5中的规定标签不一定是全是 小写 字母
  • html5中自封闭标签不一定要 /结尾封闭标签
  • html5 可以不加 引号了
  • html5中规定所有的type类型可以不写。比如javascript类型。
html5中的提纲标签(IE9开始兼容)
  • 部分区域语义
  • 文章语义
  • 头部语义
  • 脚注语义
  • 用来包裹h1 h2 h3 h4 h5 h6

都是块级标签,没有任何默认样式,容器级标签;可以包裹任何标签,但是div标签不能包裹提纲标签

新的语义元素

<figure> 
	<img src="images/1.jpg">
	<figurecaption>testfigurecaption>
figure>

<progress value="60" max="100">60progress>
 
 <address>重庆address>
 
 <time>12:00time>
 
 <p><mark>这是重点mark>p>
 
 <p><ruby>月明<rp>(rp><rt>つきあrt><rp>)rp>ruby>かり昇る頃p>
 <p>灯る <ruby>赤提灯 <rp>(rp><rt>あかちょうちんrt><rp>)rp>ruby>p> 

html5简单总结_第1张图片

表单元素的加强

标签的新type

  • search 搜索框
  • number 数字
  • tel 电话
  • url 网址
  • color 颜色
  • email 邮箱

    <input type="number" min="1" max="123" pattern="">
    <input type="email" name="" id="">
    <input type="url" name="" id="">
    <input type="tel" name="" id="">
    
    <input type="date" name="" id="">
    <input type="color" name="" id="">
    
    <label>
        <input type="radio" name="sex" id="">label>
    
    <input type="text" name="" id="" list="notice">
    <datalist id="notice">
        <option value="北京">北京option>
        <option value="东兴">东兴option>
        <option value="东秀">东秀option>
    datalist>
    
    <input type="search" name="" id="" autofocus>
    
    <input type="text" name="" id="" placeholder="123">

在这里插入图片描述

音频和视频

HTML4.01插入视频和音频,必须用flash.使用插入flash.
使用优酷视频的分享可以拿到html代码,对页面进行嵌入播放。

html5使用标签(支持mp4ogv)插入视频
html5使用标签(支持mp3ogg)插入音频


    <video autoplay controls width="500" height="300">
        <source src="video/1.mp4">
        <source src="video/2.mp4">
    video>
    

    
    <audio src="1.mp3" autoplay controls>audio>

你可能感兴趣的:(html5)