专业编程基础技术教程

网站首页 > 基础教程 正文

HTML5之新增语义化标签(html中语义化标签)

ccvgpt 2024-08-03 12:42:12 基础教程 22 ℃

所谓语义化就是一看就知道是做什么的。以前布局只有div,span,ul,li等,div,span对于搜索引擎来说是不具有语义的。

  • 说明

新增的布局类标签,更加具有语义性:

HTML5之新增语义化标签(html中语义化标签)

<div class='header'></div>

<div class='nav'></div>

<div class='content'></div>

<div class='footer'></div>

  • 新增的语义化标签:

w3c 手册中文官网 : http://w3school.com.cn/

<header>头部标签:定义文档的页眉</header>

<nav>导航标签:定义导航链接的部分</nav>

<article>内容标签:标签规定独立的自包含内容</article>

<section>块级标签:定义文档中的节、区段</section>

<aside>侧边栏标签:定义其所处内容之外的内容</aside>

<footer>底部标签:定义文档或节的页脚</footer>

  • datalist 定义下拉列表,请与 input 元素配合使用该元素

<input type="text" value="输入水果名称" list="star"/> <!-- input里面用 list -->

<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->

<option>Apple</option>

<option>Banana</option>

<option>Orange</option>

<option>Grape</option>

<option>Pear</option>

</datalist>

  • fieldset 定义围绕表单中元素的边框,可将表单内的相关元素分组,打包 legend 搭配使用

<fieldset>

<legend>用户登录</legend>

用户名: <input type="text"><br /><br />

密 码: <input type="password">

</fieldset>

Tags:

最近发表
标签列表