颠覆你的认知-以大厂方式带你重学HTML设计

544 阅读2分钟

前言: 常常新手学习前端中会学习大量的语法,学习各个标签页面的作用,其实前端并不是一项繁琐而又枯燥的学科。当你前端学的越深入,你越能发现,写前端页面的人就像是一个导演,编写着剧本。 HTML是演员,而CSS则是化妆师,为演员赋予视觉效果。

让我们以一段简单的HTML页面步入今天的讲解。我们先来看下文的页面效果。

image.png

上文是一个简单的键盘敲击乐,也就是当点击键盘后会出现声音,让我们以导演的视角来导演这场戏。

页面的基础设计

导演一场戏一定得先将演员给请出

这场戏的演员很简单首先可以观察到页面上有8个按键,每个按键中分别有着一个大写字母和三个小写字母,于是我们清晰明了,本场戏的演员就是他们。再来观察一下他们的关系:大写字母和小写字母都在按键中,因此我们能够用Emmet表达式快速生成框架:.keys>(.key>div+span.sound)*8。这是emmet表达式,在下文有介绍。

演员已经就绪,则该给他们化妆了

要使用css进行页面的样式设计,而css的引入方式有三种,常常使用第三种方法进行设计,能很好的进行页面的职责分离

行内样式:写在标签的styel属性中

<body>
    <p style="color: brown">
        hello world
    </p>
</body>

内部样式表,通过 style 标签来写 CSS(可以写在文件的任何位置,通常写在head标签中)


<head>
<style>
        p {
            color: red;
        }
    </style>
</head>

外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <p>
        hello world
    </p>
</body>

上文在编写html页面的时候我们使用了emmet

Emmet的详细使用:加速HTML与CSS编写的利器

1. 什么是Emmet

Emmet是一个极为强大的工具,能够极大地提高开发者在编写HTML和CSS时的效率。它通过缩写语法(类似快捷方式)来生成大量的HTML结构或CSS规则,使得开发者能够用最简洁的方式实现最复杂的布局和设计。

2. Emmet基本语法

Emmet语法非常简洁,通过简单的缩写来生成代码结构。常见的缩写规则包括:

  • 元素标签

    • div → <div></div>
    • ul>li*3 → <ul><li></li><li></li><li></li></ul>
    • div#id → <div id="id"></div>
    • div.class → <div class="class"></div>
  • 嵌套结构

    • div>ul>li*3 → <div><ul><li></li><li></li><li></li></ul></div>
    • header>nav>ul>li*2>a → <header><nav><ul><li><a></a></li><li><a></a></li></ul></nav></header>
  • 乘法符号* :表示生成多个元素。

    • li*5 → <li></li><li></li><li></li><li></li><li></li>
    • div#id>ul>li*4 → <div id="id"><ul><li></li><li></li><li></li><li></li></ul></div>
  • ID和类名

    • section#main → <section id="main"></section>
    • section.main → <section class="main"></section>
    • div#header.main → <div id="header" class="main"></div>
  • 组合多个标签

    • header>nav>ul>li*3>a[href="#"] → <header><nav><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></nav></header>
  • 属性设置

    • input[type="text"] → <input type="text">
    • a[href="#"].btn → <a href="#" class="btn"></a>

学会上面的技能已经能够极大的提升开发效率,但想当一个合格的切图崽还是不够,跟着我继续学习吧!下一篇: