前端入门知识（五）

文章目录

• 一、emmet一键生成标签
• 二、一部分属性
• 总结

---

前言

今天emmet标签学习，是为了快速生成标签块；而属性是为了部分标签修改属性，为了日常做网页例题更加相似，需要背景颜色或者颜色、字体大小的更改。

---

一、emmet

a+p
<a herf=""></a>
<p></P>

+

是标签之间的并列，例子中是超级链接标签a与段落标签p的并列。

h3>span

<h3><span></span></h3>

>

是标签之间的嵌套，例子中是标题标签h3里面嵌套了个隔离标签span.

p*5


<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

*

是标签的重复次数，例子中是段落标签p重复了五次

(p+h1)*2

<p></p><h1></h1>
<p></p><h1></h1>

()

是代表里面的标签是一个整体，例子中是段落标签p与标题标签h1一起重复了五次

p>{a1}

<p>a1</p>

{}

是代表里面的文本是前面标签的内容，例子中是p标签中文本内容是a1

p*3>{a$}


<p>a1</p>
<p>a2</p>
<p>a3</p>

$

是代表文本内容递增，例子是p标签重复三次，而内容也使递增

二、一部分属性

1.color

<p style="color:red">a1</p>

color是前景色，例子里面是代表里面的字显示是红色

2.background-color

<p style="background-color:red;"></p>

background-color是背景色，例子是p标签里面的背景色为红色，字体为默认黑色

3、font-size

<p style="font-size:10px;"></p>

font-size是字体大小，文本默认为16px，就是1em，例子是p标签里面的字体是10px，比正常字体小

---

总结

emmet是快速生成代码块的方法，熟练掌握能大幅提升完成效率，而基础属性是为了网页例题比之前模板更加好看。