博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
9.12日学习笔记
阅读量:5150 次
发布时间:2019-06-13

本文共 1886 字,大约阅读时间需要 6 分钟。

HTML5
1. 语法简洁(DOCTYPE,Charset)
2. 语义化标签(易读性增加,SEO优化)
3. 新增的表单标签
4. JS新增的API语法
Canvas画布(图形,动画)
SVG矢量图(无损)
本地存储(7天免登陆)
离线缓存(不联网都可以正常浏览)
多媒体(audio,video)
地理定位(经纬度等等)
拖拽上传
web worker(多线程)
访问设备信息
JS新增的一些语法

 

HTML5兼容问题
大部分语法支持IE9+
以下代码可以让IE8-支持一部分的H5标签
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

 

HTML5布局标签
<header></header> -- 头部
<footer></footer> -- 尾部
<main></main> -- 主要内容
<aside></aside> -- 侧边栏
<nav></nav> -- 导航菜单的容器
<hgroup></hgroup> -- 放标题的容器
<article><article> -- 一篇文章、一条完整的回复
<section></section> -- 主题内容
<address></address> -- 作者信息,联系方式
<mark></mark> -- 黄色背景,黑字
<time></time> -- 放时间的
<figure> -- 修饰图片的,figcaption作为图片描述
<img>
<figcaption></figcaption>
</figure>

 

新增属性
<div contenteditable="true"></div> -- 内容可以被编辑
<div hidden></div> -- 标签被隐藏

 

多媒体标签(IE9+)
<
audio src="xx.mp3" muted loop
autoplay controls></audio>
<
video src="xx.mp4" muted loop autoplay
controls poster="xx.jpg"></video>
muted:静音
loop:单曲循环
autoplay:自动播放(被浏览器给禁止)
controls:控制条
poster:第一帧画面(视频封面)
 

 

   

 

 

 表单标签

新增

placeholder 输入提示框信息
multiple 多选
autofocus 只允许一个焦点
autocomplete 自动完成
step 输入合法数字间隔
required 必填
textarea  多行文本输入框
 
   
账号: <input type="text" placeholder="请输入用户名">
爱好:<select multiple>
<option value="">睡觉</option>
<option value="">游戏</option>
</select>
喜爱的名人:input type="text" list="myList">
<datalist id="myList">
<option value="马x">搜索次数111</option>
<option value="周x">搜索次数222</option>
</datalist>
籍贯:<input type="text" autofocus>
账号:<input type="text" required name="username" autocomplete="on/off">
年龄:<input type="number" min="18" max="120" step="1" value="18"/>
家庭住址:
<select>
<option value="">陕西</option>
<option value="">四川</option>
</select>省
<select>
<option value="">西安</option>
<option value="">咸阳</option>
</select>市
<select>
<option value="">莲湖</option>
<option value="">未央</option>
</select>区
<textarea cols="30" rows="5"></textarea>

转载于:https://www.cnblogs.com/liuyangya/p/9636696.html

你可能感兴趣的文章
用CSS美化你的HTML
查看>>
LeetCode#189 Rotate Array
查看>>
潮流设计:15个创意的 3D 字体版式作品欣赏
查看>>
modern.IE – Web 开发必备的 IE 浏览器测试工具
查看>>
非常酷的国外网站导航设计案例欣赏
查看>>
40个优秀的单页网站设计范例(下篇)
查看>>
未来的Web:让你惊叹的 Chrome 浏览器实验项目
查看>>
TCP系列22—重传—12、Forward Retransmit
查看>>
在某公司工作一年的自我总结01
查看>>
外煤关注:百度收购大部分糯米股份
查看>>
聚集索引和非聚集索引(整理)
查看>>
博弈---斐波那契博弈
查看>>
eclipse 项目转as项目时 .so文件 jniLibs的设置
查看>>
C#常见的异常
查看>>
apache中若干模块的安装
查看>>
(转)Android进程管理详解
查看>>
SpringBoot 基础
查看>>
ubuntu安装sublime-text
查看>>
Memcache命令及参数用法
查看>>
NET Core 拓展方法和中间件集合(支持NET Core2.0+)
查看>>