总结HTML5

Posted 2020-09-22

都说项目页面是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>