首先我们来聊一聊何为Web？

Web如果要说到它真正的定义的话，便是下面这句话：

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。（摘录自百度百科）

能看懂？如果能，那么你便可以忽略我下面的解释了。

那我要给大家解释的就是，Web就是所谓的互联网。

而Web前端设计就是给用户展示的网页页面，也就是网站的前台部分，这里面可能包含了设计、特效、用户交互等。Web前端开发就是创建Web页面，或者APP等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript等衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

名称	作用	注：
HTML	标识性语言，十分重要，web设计离不开它。	部分语法废除，因为CSS比HTML部分语法方便易懂，所以我们常用HTML来提供基本的格式，添加网页内容等。
CSS	用于对HTML标记的内容进行更加丰富的装饰。	就是层叠样式表，一种用来进行装饰的计算机语言。
JS(JavaScript)	为网页添加各式各样的动态功能。	一种高级编程语言，没有它，你的网页就只能看，不能进行使用。

以上便是Web程序设计里面的”三剑客“，各个都是身怀本领，当然，想要学好Web的前端开发，这三样缺一不可。

那准备好了吗，同学们，让我们先从静态网页的学习开始吧。

工具准备：

对于Web开发，也有很多很好用的编译器（比如VS code、WebStorm等），这里我推荐WebStorm，大家可以去www.jetbrains.com下载，虽然需要money，但也有白嫖的方式：

①：可以试用30天，30天后继续试用。（无限卡bug，不过也有不好的地方，他会给你强制退出软件使用。）

②：注册学生身份（须在校本科生）

③：破解版

以上方式②③两种需要的可以私聊，我会给大家提供帮助。♪（＾∀＾●）ﾉ

注册完成后WebStorm打开后是这样的：

大家可以点击New project -> Empty Project 然后选择合适的目录，创建一个空白的工程文件。

然后如图创建一个HTML5的文件，便可以开始你的Web之旅啦！！！！๑乛◡乛๑

进来后大家便可以看见这样的一串神神秘秘的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

其实1，2行这两串代码其实是告诉计算机的，我们呢，需要了解的是如下部分：

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

首先是<html>和</html>，这是一对，也是非常重要的一对标签，名为根标签，所有的网页标签都在这个标签里面。

然后是<head>标签，在第四行我们也能看见一个</head>标签，这个呀其实也是一对，离了谁，都是错的，然后我们在看，我们把<head>到</head>之间的内容称为头部标签，其作用我们在CSS学习时再讲解。

最后是<body></body>标签，这是我们网页主要内容的存放所，也即是网页呈现的内容都放在这个标签里面。

听了那么多句标签，标签的，相信大家对标签这个词有了一定的理解了吧。

啥，还不懂，那我们就继续学习！！！（๑•̀ㅂ•́）و✧

首先我们给大家看一个基本的网页程序是怎样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size:30px;
            color:#70a7ff
        }
        h2{
            color:#ff9728
        }
    </style>
</head>
<body>
<h1 align = 'center'>
    <font color = 'aqua' size = "6">静夜诗</font>  <!--size 只能取1 - 7 -->
</h1>
<h2 align = 'center'><font size = "3">李白</font></h2>
<hr width = '500' size = '4' color = '#69697e'>
<p align = 'center'>
    窗  前  明  月  光，<br>
    疑  是  地  上  霜，<br>
    举  头  望  明  月，<br> <!--br用于换行-->
    低  头  思  故  乡。

</p>
</body>
</html>

这是一个非常简单的网页，它的效果图是：

我们一步步（一行行分析）分析：

①（line6 – line14）：在<head>把标签中，我们发现用了一个<style>标签，并且这个标签也是成对存在的，上文我们说<head>标签时说到了CSS，没错，这个东西，他就是CSS，不过呢，只是其中一种形式，目前我们先作为一个简单的了解。

②（line17-line20）：我们看见了有<h1>,<h2>这样的标签对吧，这个简单的来讲，叫做标题标签，我们可以用的标题标签有（h1 h2 h3 h4 h5 h6），其所包含的内容，字体变化特点是依次变小（默认情况下，也可以手动调整），标题重要性也依次降低，那标题标签的作用呢？它的最主要的作用就是用于文字内容重要性提升，其目的，大家可以简单理解为，方便更好的搜索某些信息。（且，标题标签也是成对存在的！！！！所标记的内容单独占一行！！！）

③（line21）：<hr>是一个单独的标签，只需要一次，并不成对出现，一个妥妥的孤儿，它的作用是画一根长长的线，（也可以手动调整）。

④（line21-line28）：然后就是特别重要的<p>标签的，成对存在，所包含的内容可以说是网页的主体信息，可以写多个<p>标签，但要注意编译器的识别（比如p标签嵌套的运行结果），这个我们之后来讲。大家可以先去试试（提示一下：<p>会找到最近的</p>来组合）。

然后还有个<br>标签，也有备注，是个单标签，用于换行，

but！<p>标签自动换行。比如：

<p>窗  前  明  月  光，</p>
<p>疑  是  地  上  霜，</p>
<p>举  头  望  明  月，</p>
<p>低  头  思  故  乡。</p>

这样输入，他也会自动换行的，也就是一个p标签完成，会自动换行。

说完这个，其实还有一个点：p标签内空格无效：怎么无效呢？看看程序和效果图就知道了，我们如果只学了HTML那么会用&nbsp来表示一个空格，大家可以试试。

至于其他的标签内奇奇怪怪的符号，大家可以去自己照着编译出来试试，Web是动手要求很高的学科，看到这，大家基本已经了解了web这个程序了，那么，去试试编译自己的第一个网站吧！！！之后的文章，我们继续讲解Web的知识点，让你能做出让自己最满意的网站来！！！！

你想自己学习制作一个网站吗？想成为web制作者吗？进来看看吧，说不定你便会爱上前端制作了！

首先我们来聊一聊何为Web？

工具准备：

相关推荐

随机推荐

回顶部