首页 前端知识 html5中的新增知识点

html5中的新增知识点

2024-05-22 09:05:55 前端知识 前端哥 558 287 我要收藏

<article>

<h1>一篇文章</h1>

<p>文章内容…</p>

<footer>

<p><small>版权:html5jscss网所属,作者:小北</small></p>

</footer>

</article>

复制代码

复制代码

<article>

<header>

<h1>一篇文章</h1>

<p><time pubdate datetime=“2012-10-03”>2012/10/03</time></p>

</header>

<p>文章内容…</p>

<article>

<h2>评论</h2>

<article>

<header>

<h3>评论者: XXX</h3>

<p><time pubdate datetime=“2012-10-03T19:10-08:00”>~1 hour ago</time></p>

</header>

<p>哈哈哈</p>

</article>

<article>

<header>

<h3>评论者: XXX</h3>

<p><time pubdate datetime=“2012-10-03T19:10-08:00”>~1 hour ago</time></p>

</header>

<p>哈?哈?哈?</p>

</article>

</article>

</article>

复制代码

2.3 section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

复制代码

<article>

<h1>前端技术</h1>

<p>前端技术有那些</p>

<section>

<h2>CSS</h2>

<p>样式…</p>

</section>

<section>

<h2>JS</h2>

<p>脚本</p>

</section>

</article>

复制代码

2.4 aside 元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等、

复制代码

<article>

<p>内容</p>

<aside>

<h1>作者简介</h1>

<p>小北,前端一枚</p>

</aside>

</article>

复制代码

2.5 header元素展示一个区域的头部分

2.6 footer元素展示一个区域的尾部分

2.7 hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1h6元素放在其内,譬如文章的主标题和副标题的组合

<hgroup>

<h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>

<h2>HTML 5</h2>

</hgroup>

2.8 figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。figcaption 标签定义 figure 元素的标题(caption)。“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>

<figcaption>黄浦江上的的卢浦大桥</figcaption>

<img src=“shanghai_lupu_bridge.jpg” width=“350” height=“234” />

</figure>

**3、**非主体结构标签

3.1  标签定义选项列表。

复制代码

<input type=“text” list=“taglist” />

<datalist id=“taglist”>

<option>苹果</option>

<option>橘子</option>

<option>西红柿</option>

</datalist>

复制代码

3.2 details标签定义文档细节

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

3.3 menu标签定义列表

<menu>

<li>home</li>

<li>home</li>

<li>home</li>

</menu>

3.4 address地址标签

复制代码

<address>

Written by <a href=“mailto:webmaster@example.com”>Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

复制代码

3.5 progress进度条标签

下载进度:

<progress>

</progress>

3.6 mark高亮显示

<mark>中国</mark>人民最伟大

3.7 

<p>

我们在每天早上 <time>9:00</time> 开始营业。

</p>

3.8 新增的表单元素

复制代码

<input type=“email” />

<input type=“url” />

<input type=“tel” />

<input type=“number” min=“1” max=“20” step=“4” />

<input type=“range” min=“1” max=“20” step=“4” />

<input type=“search” />

<input type=“color” />

<input type=“date” />

<input type=“month” />

<input type=“week” />

<input type=“time” />

复制代码

3.9 新增的input属性

3.9.1 用户输入自动完成功能

复制代码

<input type=“text” list=“citylist” />

<datalist id=“citylist”>

<option>BeiJing</option>

<option>QingDao</option>

<option>QingZhou</option>

<option>QingHai</option>

</datalist>

</form>

复制代码

3.9.2 页面加载的时候获取焦点

<input type=“text” autofocus=“autofocus” />

3.9.3 form外也可以做数据提交

</form>

<input type=“text” name=“address1” form=“form1” />

3.9.4 form内的内容也可以改action地址

<input type=“submit” value=“提交” formaction=“2.aspx” />

</form>

3.9.5 file可以支持多文件上传了

<input type=“file” name=“img” multiple=“multiple” />

3.9.6 支持自定义验证功能了

请输入邮政编码:<input type=“text” pattern=“[0-9]{6}” title=“请输入6位数的邮编” />

<input type=“submit” />

</form>

3.9.4 新增默认内容提示了

<input type=“text” placeholder=“请输入用户名”/>

3.9.5 新增不能为空属性

请输入邮政编码:<input type=“text” required=“required” />

<input type=“submit” />

</form>

3.10 新增全局属性

3.10.1 contenteditable 属性规定是否可编辑元素的内容。

3.10.2 hidden 属性规定对元素进行隐藏。

<p>这是一段可见的段落。</p>

3.10.3 tabindex 属性规定当使用 “tab” 键进行导航时元素的顺序。

<a href=“http://www.w3school.com.cn/” tabindex=“2”>W3School</a>

<a href=“http://www.google.com/” tabindex=“1”>Google</a>

<a href=“http://www.microsoft.com/” tabindex=“3”>Microsoft</a>

3.11 其他属性

3.11.1 ol的reversed属性对列表顺序进行降序

复制代码

<li>SHUFFLE!/三界恋曲</li>

<li>扑杀天使</li>

<li>零之使魔</li>

<li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li>

<li>to love/出包王女</li>

</ol>

复制代码

3.11.2 js的async 属性规定一旦脚本可用,则会异步执行。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9031.html
标签
评论
发布的文章

Qt构建JSON及解析JSON

2024-09-29 22:09:49

NPM:配置阿里镜像库

2024-09-29 22:09:46

npm版本切换工具nvm

2024-09-29 22:09:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!