语义化&Emmet语法
1. 语义化
1.1 什么是语义化
-
每一个HTML元素都有具体的含义
例如:
a元素:超链接;
p元素:段落;
h1元素:一级标题;
…… -
所有元素与显示效果无关
元素展示到页面中的效果,应该由CSS决定。
因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。
重要:选择什么元素,取决于内容的含义,而不是显示出来的效果
1.2 为什么需要语义化
1.为了搜索引擎优化(SEO)
搜索引擎:百度、搜狗、Bing、Google
每隔一段时间,搜索引擎会从中整个互联网中,抓取页面源代码。
语义化做的越好,搜索引擎就会越容易理解源代码,搜索结果越会将页面顺序往前排。
2.为了让浏览器理解网页
2. Emmet语法
*
是乘的作用,后面跟一个数字,数字是几,就会生成几个标签
在使用中发现的规律:若重复生成的元素为块盒,多个元素之间换行生成;若该元素为行盒,则不换行。
-
$
可以代表一个数字,这个数字从1开始,逐步增大,通常和*连用 -
{}
里面用于书写标签的文本内容 -
[]
里面用于书写属性名和属性值(如果不加属性值,则创建属性值为空的属性) -
>
用于指示下一级标签,他们构成父子关系(包含关系) -
+
在当前标签的后面生成一个平级的标签(兄弟关系) -
#a
生成一个id位a的div标签