HTML5 使用小结
1.html5新增的常用元素
(a) <article.../>代表独立完整的一遍文章
(b)<section.../>对页面内容进行分块
(c)<nav.../>专门用于定义页面上的导航条
(d)<aside.../>定义附属信息
(e)<header.../>定义文章头部信息
(f)<footer.../>'脚注'
(g)<hgroup.../>含<h1.../>到<h6.../>
(h)<figure.../>图片区域
(t)<figcaption.../>图片区域的标题
(o)<mark>重点关注的内容
(p)<time>引入时间
HTML语义化标签的好处:
第一,语义化的标签更容易被搜索引擎识别,这样可以大大提升搜索引擎的识别读取,提升网站的排名。
第二,方便自己,方便别人二次修改,因为什么地方是什么,放的什么东东,看标签结构就看得清清楚楚了。这也算是一种标准规范
2.HTML5语法的变化
(1)标签不再区分大小写
<p>...</P>
(2)元素可以省略结束标签
不允许写结束标记的标签有: area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略结束标记的标签有: li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部标记的标签有: html、head、body、colgroup、tbody。
“不允许写结束标记的标签”是指,不允许使用开始标记与结束标记将标签括起来的形式,只允许使用“<标签/>”的形式进行书写。
(3)允许省略属性值
checked,readonly,disabled, selected, defer, ismap,noherf,noshade,nowrap,mltiple,noresize
(4)允许属性值不使用引号
<img src=1.jpg> OK的
(5)DOCTYPE声明
<!DOCTYPE html>
(6)指定字符编码
在 HTML4 中,使用 meta 标签的形式指定文件中的字符编码,如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
在 HTML5 中,可以使用对 标签直接追加 charset 属性的方式来指定字符编码,如下所示:
<meta charset="UTF-8">
两种方法都有效,可以继续使用前面那种方式(通过 content 属性来指定),但是不能同时混合使用两种方式,在以前的 HTML代码中可能会存在下面代码所示的标记方式,但在 HTML5 中,这种字符编码方式将被认为是错误的,这一点请注意:
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
从 HTML5 开始,对于文件的字符编码推荐使用 UTF-8。
3.HTML5的表单元素
(1)可指定type属性,有 text , password, hidden, radio,checkbox, image, file, submit, reset,button
(2)form = "form_id"表单控制属性,所有表单控件都必须包含在<form.../>内部,没放进去可指定form
(3)formaction
解决页面中一个表单,包含两个以上的提交按钮,不同按钮提交到不同的action
<input type="submit" value="注册" formaction="register"/>
<input type="submit" value="修改" formaction="login"/>
(4)formmethod post/get
formtarget 改变表单target属性 autofocus: 聚焦
4.HTML5新特性(兼容性,实用性,互通性和通用访问性)
(1)新增的语义化标签
(2)嵌入音频,视频
(3)本地存储 (localStorage , sessionStorage)
HTML5 本地存储和cookies区别:
cookies 缺点:
(1)http请求头会带上data,在服务器端和客户端进行传递(不安全)
(2)大小不能超过4k,存储信息非常有限
(3)会造成主 domian 的污染
HTML5 数据存储在本地,不会传递到服务器,是一种关系型存储。
localStorage 是永久存储, 5M大小, 需要手动清除。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。不是持久化的本地存储,仅是会话级别的存储。
常用API:
.getItem(key)
.setItem(key,value)
.removeItem(key)
.clear() 清除所有的key和value
在使用时应注意:判断浏览器是否支持,必要的异常处理, 避免放入敏感信息, key的唯一性
限制:子域之间不能共享数据, 过期的控制, 超过大小应用算法淘汰旧的, server端获取时需要发post或get
使用场景:1.减少网络传输 2.弱网环境,高延迟,低带宽,放本地(eg. 记住用户的菜单选择)
(4)交互式文档
(5) Canvas 绘制图形
(6)控制SVG图形做动画
HTML5 使用小结的更多相关文章
- HTML5基础小结(二)——标签小例
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0 ...
- HTML5学习小结
HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本.HTML5的第一份正式草案已于2008年1月公布:2012年12月,规范已经正式定稿.W3C计划在20 ...
- html5 日常小结
HTML5新标签汇总 1. html5新的 (input type=类型) 元素 <input type="number" name="quantity" ...
- html5学习小结,float练习。
经过两天的H5学习之后,做了一下float属性的练习,要做出来的效果为: 下面为代码部分,所用到的知识不多,不过才现在刚开始,以后要学的东西还有很多,大家继续加油! <!DOCTYPE html ...
- HTML最新标准HTML5小结
写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 HTML5表单 小结及习题
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...
- IT兄弟连 HTML5教程 多媒体应用 小结及习题
小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题
小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...
随机推荐
- 使用npm install时一直报错-4048 operation not permitted
一:权限问题 首先看到operation not permitted我们能想到权限问题,所以这时候我们可以以管理员身份运行cmd或者直接快捷键Win+X来打开. 二:依赖包错误 如上图,根据错误日志我 ...
- html5(五)拖放
http://www.w3school.com.cn/html5/html_5_draganddrop.asp http://www.cnblogs.com/return-false/p/332628 ...
- html5(四) canvas
http://www.cnblogs.com/Gyoung/archive/2013/04/08/2994515.html
- Ubuntu安装vsftpd并通过xftp连接
1.在ubuntu中安装xftp: sudo apt-get update sudo apt-get install vsftpd sudo service vsftpd restart 2.防火墙添 ...
- Android开发 ---SQLite数据库,lock文件,结果集游标,适配器,安全退出,给连接设置下划线,编辑器,投影,ContentValues存储,DbHelper,activity栈
目录截图: 1.activity_main.xml 主界面效果: <?xml version="1.0" encoding="utf-8"?> &l ...
- jmeter操作练习
1.登录: 2.用户定义变量 3.http请求默认值 这是登录里面的服务器名称或IP可以不用填(以上情况是当多个共用一个IP的时候,可以这样做) 4.配置文件下--CSV Data Set Confi ...
- 2019-04-10-day029-粘包处理
内容回顾 osi五层协议 不是真实存在的,只是抽象出来的模型 应用层 传输层 TCP/UDP TCP :全双工,可靠的,面向连接的,速度慢,对数据大小没有限制 建立连接 :三次握手 SYN ACK 断 ...
- 微信连wifi,中文ssid报Invalid sign tosign错误
Invalid sign tosign错误如上: 是微信官方接受和回传的问题,改固定字符解决: 比如将ssid固定修改为字符串‘ssid’即可:
- JAVA高级篇(三、JVM编译机制、类加载机制)
一.类的加载过程 JVM将类的加载分为3个步骤: 1.装载(Load) 2.链接(Link) 3.初始化(Initialize) 其中 链接(Link)又分3个步骤,如下图所示: 1) 装载:查找并加 ...
- ie8网页时调用特定的css文件
加上条件注释语句<!--[if IE 8]><link rel="".........................><![endif]--> ...