总结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 :异步执行;