HTML语义化

语义化优点

1. 让页面结构更加清晰
2. 方便SEO(可以让网站排名靠前)

还原设计师稿子步骤

1. 划分区域
2. 填充内容

语义化结构元素

1. h5之前一直用div划分页面区域
2. h5中新增了带语义的结构元素与div没有本质区别
   • <header>用于表示页面或者某个区域的头部
   • <nav>用于表示导航栏
   • <aside>表示跟周围主题相关的附加信息
   • <article>用于表示文章或者其他可以独立页面存在的内容
   • <section>用于表示一个整体的一部分主题
   • <footer>用于表示页面或者某个区域的底部

---

批量生成元素方法 EMMET

标签名*个数 tab+enter (webstrom)

a*20>{超链接$$$}

• a：元素名称
• *：乘号
• 20：数量
• 内容用{}括起来
• $一位数
• $$两位数
• $$$三位数

footer>nav>a*5>{超链接$}

关于emmet批量生成标签不自动换行问题

webstrom解决方法

File -> Setting -> Editor -> Code Style -> HTML -> Other -> Inline Elements ->
找到要生成的行内元素（a），将其删掉就可以实现emmet行内元素批量生成标签也可自动换行

lorem:铭文乱序，快速假文

随机填充一段英文单词

lorem5:5个单词

p*10>lomer1

section>（h2{标题}）+ p*10>lorem2）
生成

    <h2>内容</h2>
    <p>Lorem ipsum.</p>
    <p>Porro, quaerat.</p>
    <p>Cupiditate, ullam.</p>
    <p>Perferendis, qui.</p>
    <p>Cumque, odio.</p>
    <p>At, quibusdam.</p>
    <p>Suscipit, voluptatem?</p>
    <p>Consequatur, laboriosam.</p>
    <p>Quas, ullam!</p>
    <p>Animi, aperiam.</p>
  </section>