3、HTML基础——语义化&Emmet语法

语义化&Emmet语法

1. 语义化

1.1 什么是语义化

1. 每一个HTML元素都有具体的含义
   例如：
   a元素：超链接；
   p元素：段落；
   h1元素：一级标题；
   ……

2. 所有元素与显示效果无关
   元素展示到页面中的效果，应该由CSS决定。
   因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出来的效果

1.2 为什么需要语义化

1.为了搜索引擎优化（SEO）

搜索引擎：百度、搜狗、Bing、Google

每隔一段时间，搜索引擎会从中整个互联网中，抓取页面源代码。

语义化做的越好，搜索引擎就会越容易理解源代码，搜索结果越会将页面顺序往前排。

2.为了让浏览器理解网页

2. Emmet语法

1. *是乘的作用，后面跟一个数字，数字是几，就会生成几个标签

在使用中发现的规律：若重复生成的元素为块盒，多个元素之间换行生成；若该元素为行盒，则不换行。

2. $可以代表一个数字，这个数字从1开始，逐步增大，通常和*连用

3. {}里面用于书写标签的文本内容

4. []里面用于书写属性名和属性值（如果不加属性值，则创建属性值为空的属性）

5. >用于指示下一级标签，他们构成父子关系（包含关系）

6. +在当前标签的后面生成一个平级的标签（兄弟关系）

7. #a生成一个id位a的div标签