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>

将所有代码打包成一个文件，减少HTTP请求

将代码按路由或功能模块拆分，实现按需加载，减少初始加载体积

将CSS和JavaScript合并到同一文件中

将代码压缩成更小的体积

使用独立的JSON文件存储结构化数据

在HTML标签的属性中直接嵌入结构化数据信息

只能用于XML文档，不支持HTML

必须使用专门的RDF文件格式

<div class="header"><div class="nav"><div class="main"></div></div></div>

<header><nav><main></main></nav></header>

<div id="header"><div id="nav"><div id="main"></div></div></div>

<section class="header"><section class="nav"><section class="main"></section></section></section>

https://example.com/product?id=12345&cat=electronics

https://example.com/p/12345

https://example.com/electronics/wireless-headphones

https://example.com/products/电子/无线耳机

<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>

使用CSS的max-width: 100%和height: auto让视频自适应容器

使用<picture>元素配合<source>为不同屏幕提供不同视频源

使用JavaScript计算容器宽度动态设置视频尺寸

使用CSS的aspect-ratio属性保持视频宽高比

使用Webpack魔法注释/* webpackPrefetch: true */预加载

将所有拆分块在首屏一次性加载

根据路由预判进行preload预加载

使用importmap管理模块依赖关系

hCard（人物/组织信息）

hCalendar（日历事件）

hStyle（样式定义）

hReview（评论/评价）

hRecipe（食谱）

title长度控制在50-60个字符以内，避免在搜索结果中被截断

将重要关键词放在title的开头位置

每个页面使用独特且描述性的title

在title中重复多个关键词以提高相关性

使用CSS Sprites合并小图标

将小图片转换为Base64内联到CSS中

使用字体图标或SVG图标替代图片

将所有JavaScript合并成一个大文件

<audio>元素默认是隐藏的，需要设置controls属性才会显示播放控件

<audio>元素支持与<video>相同的preload属性值

<audio>元素可以使用<source>子元素提供多种音频格式

<audio>元素不支持poster属性