总结HTML5
都说项目页面是HTML5写的,但是HTML5的特别之处用了多少?
1、是不是页面布局都是统一的div,然后class写样式?可是HTML5提供了好多新标签 ,css中直接用标签名即可定义样式,不用费力想class名了!
其中大多数元素也和div 一样{display:block;},只有figure不同,它自带margin ,表示一段独立的流内容,在文档主体内容中的一个独立的单元。
<!--标签 header nav article aside footer section figure main mark details-->
<header style="background-color: aqua; height:20px"></header> <nav style="background-color: red;height:20px"></nav> <article style="background-color: yellow;height:20px"></article> <aside style="background-color: blue;height:20px"></aside> <section style="background-color: royalblue;height:20px"> </section> <figure style="background-color: blueviolet;height:200px">
<figcaption>PRC</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda cupiditate, dicta distinctio facilis fuga fugiat inventore magnam maiores maxime minima nam necessitatibus praesentium quisquam rem, repellat saepe sed voluptatum?</p>
</figure> <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis dolor dolorum minima nemo non perspiciatis porro sit. At deserunt eius enim modi natus nemo nesciunt numquam reprehenderit totam, voluptatibus!</main> <mark>hello,world!</mark> <details>
<summary>Html5</summary>
13213
</details>
2、form 中的元素可以不在form中,只需要加form="" ,required formtarget formaction 你知道多少?
<form action="" id="textForm">
<label for="txt_name">用户名:</label>
<input type="text" id="txt_name" autofocus required/>
<input type="submit" formaction="a.html" formtarget="_blank"/>
</form>
<textarea name="" id="" cols="30" rows="10" form="textForm"></textarea>
3、下拉菜单快速搜索
<input type="text" list="grouplist"/>
<datalist id="grouplist">
<option value="group1">group1</option>
<option value="name">name</option>
<option value="haidian">haidian</option>
</datalist>
4、details 与summary
<details>
<summary>Html5</summary>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut itaque pariatur quae quisquam ut. Asperiores autem consequatur consequuntur
exercitationem expedita id, laboriosam nisi officiis omnis, perferendis repellendus sunt tempora vitae!
</details>
5、cite 表示作品:如一本书、一篇文章、一首歌曲...
6、script 新增了defer 和async 属性,他们都可以加快页面的加载速度,使脚本加载不妨碍页面其他元素加载。
defer :脚本下载完后,继续执行;
async :异步执行;
总结HTML5的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
随机推荐
- JAVA课程设计个人博客 学生基本信息管理 201521123117 李心宇
1. 团队课程设计博客链接 http://www.cnblogs.com/ll321/p/7067598.html 2.个人负责模块或任务说明 ①主要有三个界面的设计,包括:登录界面,功能选择界面还有 ...
- 201521123022 《Java程序设计》 第十一周学习总结
1.本章学习总结 2.书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问 Q1.1 除了使用synchronized修饰方法实现互斥同步访问,还 ...
- 201521123075 《Java程序设计》第11周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...
- 201521123027 <java程序设计>第11周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2.书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchro ...
- php中获取当前系统时间、时间戳
今天写下otime($time, $now)为将时间格式转为时间戳,$time为必填.清楚了这个,想了解更多,请继续往下看. 3. date($format)用法比如:echo date(‘Y-m-d ...
- 如何实现Sublime Text3中vue文件高亮显示的最有效的方法
今天第一次使用Sublime Text3软件,在实现vue文件高亮显示的过程中一直报错,经过了半天时间的不停尝试终于找到了最有效的一种解决方法!错误提示如下: 刚开始尝试了很多方法都不行,只要打开in ...
- JavaScript随笔
文档模式 主要模式2中混杂模式和标准模式. 1混杂模式,混杂模式会让IE的行为与(包含非标准特性的)IE5相同. 2标准模式,标准模式让IE的行为更接近标准行为. 准标准模式:通过过渡型或框架集型触发 ...
- 深入浅出数据结构C语言版(19)——堆排序
在介绍优先队列的博文中,我们提到了数据结构二叉堆,并且说明了二叉堆的一个特殊用途--排序,同时给出了其时间复杂度O(N*logN).这个时间界是目前我们看到最好的(使用Sedgewick序列的希尔排序 ...
- [UIKit学习]02.关于UIButton
按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 按钮也是一种容器,在这一点上跟UIView类似 按钮的三种状态 normal(普通状态) 默认情况(Default) 对 ...
- 初入ubuntu
登入root :su root 安装 vim: sudo apt-get install vim 安装 gcc(g++):sudo apt-get install gcc(g++) 非常实用的修改分辨 ...