一、方便阅读网页结构的标签总结
<!DOCTYPE html> <html> <head></head> <body> <!-- 标题用header == div --> <header>标题</header> <!-- 导航用nav == div --> <nav> <ul> <li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> </ul> </nav> <!-- 文章主体用main == div --> <main> <!-- 文章article == div --> <article> <!-- 章节section == div --> <section>章节一</section> <section>章节二</section> </article> <!-- 需要重点了解媒体文件 --> <audio id="test_audio" controls> <source src=".mp3" type="audio/mpeg"></source> </audio> <!-- 单选框，fieldset 和 legend --> <fieldset> <legend>测试单选框</legend> <input type="radio" id="num1" name="test_choose" value="1"> <label for="num1">choose num1</label><br> <input type="radio" id="num2" name="test_choose" value="2"> <label for="num2">choose num2</label><br> <input type="radio" id="num3" name="test_choose" value="3"> <label for="num3">choose num3</label><br> </fieldset> </main> <!-- 底部元素用footer == div --> <footer>底部信息</footer> </body> </html>
二、快捷键跳转焦点：acesskey（Alt+h/c），tabindex(tab切换焦点)
<!DOCTYPE html> <html> <head></head> <body> <style> div:hover { background-color: yellow; } </style> <header></header> <main> <div tabindex="1">测试盒子1</div> <div tabindex="2">测试盒子2</div> <!-- accesskey 用于链接，按钮，表单组件 --> <a href="#" accesskey="g">测试链接g</a> <button accesskey="b">测试按钮b</button> </main> <footer></footer> </body> </html>
