HTML多媒体嵌入高级语义化与结构化数据专题测试

<div class="form"><div class="input"><span>用户名</span><input type="text"></div></div>

<form><label for="username">用户名</label><input id="username" type="text"></form>

<form><div class="field"><span>用户名</span><input type="text"></div></form>

<div role="form"><p>用户名</p><input type="text"></div>

fieldset用于样式美化，legend用于显示图标

fieldset用于分组相关表单控件，legend用于描述该分组标题

fieldset用于创建表格布局，legend用于表格标题

fieldset用于隐藏表单字段，legend用于显示错误信息

<table><tr><td>标题</td></tr><tr><td>数据</td></tr></table>

<table><thead><tr><th>标题</th></tr></thead><tbody><tr><td>数据</td></tr></tbody></table>

<div class="table"><div class="row"><div class="cell">标题</div></div></div>

<table><tr><th>标题</th></tr><tr><td>数据</td></tr></table>

使用headers属性将单元格链接到外部CSS文件

使用headers属性指向表头单元格的id，建立语义关联

使用headers属性定义表格的排序方式

使用headers属性设置表格的默认样式

<div class="nav"><a href="/">首页</a><a href="/about">关于</a></div>

<nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li></ul></nav>

<nav><a href="/">首页</a><a href="/about">关于</a></nav>

<div role="navigation"><span onclick="go('/')">首页</span></div>

<div class="breadcrumb"><a href="/">首页</a> > <a href="/p">产品</a> > 详情</div>

<nav aria-label="面包屑"><ol><li><a href="/">首页</a></li><li><a href="/p">产品</a></li><li aria-current="page">详情</li></ol></nav>

<nav><span>首页</span> / <span>产品</span> / <span>详情</span></nav>

<ul class="breadcrumb"><li>首页</li><li>产品</li><li>详情</li></ul>

提高网页的视觉美观度

帮助搜索引擎理解页面内容，获得富媒体搜索结果

减少网页加载时间

增加网页的JavaScript功能

Microdata（微数据）

RDFa

JSON-LD

Microformats（微格式）

使用专门的XML标签定义语义

在HTML标签的class属性中添加特定的语义化类名

使用JavaScript动态生成元数据

在HTTP响应头中添加结构化信息

<div class="person"><span>张三</span><span>zhang@test.com</span></div>

<div class="vcard"><span class="fn">张三</span><a class="email" href="mailto:zhang@test.com">zhang@test.com</a></div>

<person name="张三" email="zhang@test.com"></person>

<meta name="person" content="张三"><meta name="email" content="zhang@test.com">

Product（产品）

Recipe（食谱）

Animation（动画）

Event（活动）

LocalBusiness（本地商家）

hCard（人物/组织信息）

hCalendar（日历事件）

hStyle（样式定义）

hReview（评论/评价）

hRecipe（食谱）

name

price

color

brand

image

aria-expanded

aria-selected

aria-label

aria-checked

aria-disabled