网页编辑常用快捷方式+学习技巧+网站开发流程

一. 常用快捷方式

1.乘法 *： ul>li*5

在编辑器中输入缩写代码： ul>li*5 ,然后按下拓展键（默认为tab），即可得到代码片段

例如：ul>li*5      =========>Tab

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

li*5     ==========>Tab

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

2.后代 >： nav>ul>li

例如：nav>ul>li    ==========>Tab

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

nav>ul>li*5    ==========>Tab

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

3.兄弟 +： div+h3+p*3

例如：div+h3+p*3    ==========>Tab

<div></div>
<h3></h3>
<p></p>
<p></p>
<p></p>

4.缩写 ： div>dl>(dt+dd)*3+footer>p

例如：      ============>Tab

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <footer>
            <p></p>
        </footer>
    </dl>
</div>

(div>dl>(dt+dd)*3)+footer>p     ========>Tab

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

5.自增符号： $ 

例如：ul>li.item$*5          ============>Tab

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

6.缩写 ： #header

例如：     ============>Tab

<div id="header"></div>

7.缩写 ： p.class1.class2.class3

例如：     =============>Tab

<p class="class1 class2 class3"></p>

p.haha      =============>Tab

<p class="haha"></p>

8.缩写 ： ul>.class

例如：   ===========>Tab

<ul>
    <li class="class"></li>
</ul>

ul>li.class       ===========>Tab

<ul>
    <li class="class"></li>
</ul>

9.其他百度

二. 学习技巧：高手是怎样炼成的

1. 观摩优秀的网站，可以F12键查看它的源代码。

2.分析优秀作品的页面结构。

3.模仿优秀的作品，尝试着自己去做一下。

4.尝试着创新，在模仿作品中加入自己的创意思路。

5.反复进行以上四个步骤，知道你自己可以创作出优秀的作品，把自己变成高手。

右击将好的网页另存成文件夹！！

三. 网站开发流程

网站的基本开发流程如下，明白流程，可以明确自己的职责和项目环节，有重点的学习。

1. 网站策划--交互设计--网页设计（视觉设计）--前端开发（前端工程师）--测试网页--网站发布--后期维护

2. 沟通的重要性： 多与后端技术，美工设计等协作人员沟通。

第一步就是创建项目文件夹存放相应的素材、文档等