#今日说码#前言(Web前端初印象)

房东的_猪

已于 2022-08-12 16:14:03 修改

阅读量260

点赞数

文章标签：前端

于 2022-07-05 20:19:10 首次发布

本文链接：https://blog.csdn.net/abner_/article/details/125528020

版权

#今日说码#(Web前端初印象)

特辑

例如：随着后端技术的不断发展，前端这门技术的需求也在日益扩大，强大的后端功能需要相对应好看的前端去展现给用户。

一、Web是什么？

Web是基于超文本和HTTP的、全球性的、动态交互的、跨平台的图形信息系统，是建立在Internet上的一种网络服务，为浏览器在网上为用户提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

二、前端三剑客

1.HTML

所谓就是简单通用的全置标记语言，(超文本标记语言)。如果将前端比作是一个人，那么html是这个人的身体。
1、html不区分大小写，但是一般用小写；
2、注释不能嵌套；
3、浏览器的纠错一定要避免；
4、html标签规范，要么成双成对，要么自然结束；
5、标签可以嵌套，但是不能交叉；
如下是一段典型的HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <div id="h">
            <div class="h">
                <ul>
                    <li>
                        <a href="#">小米官网</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">小米商城</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">MIUI</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">ioT</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">云服务</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">天星数科</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">有品</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">小爱开放平台</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">企业团购</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">资质证照</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">协议规则</a><span class="s1">|</span>
                    </li>
                    <li style="width:70px">
                        <a href="#">下载app</a><span class="s1">|</span>
                        <div class="p"></div>
                    </li>
                    <li>
                        <a href="#">Select Location</a>
                    </li>
                </ul>
            </div>
</body>

</html>

2.CSS

层叠样式表，可以让html元素表现出不同的样式，如果把HTML比作是网站的身体，那么CSS就是身体所需要的衣帽装饰等。设置他的字体、颜色、背景、边框等等、CSS文件就是一个外部样式表。
如下是一段典型的CSS代码：

*{
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* header部分 */
header {
    width: 100%;
    height: 50px;
    background-color: rgb(247, 87, 87);
}

header li {
    float: left;
    text-align: center;
    line-height: 48px;
    margin: 1px 5px;
}

3.JavaScript

JavaScript即所谓的“JS”，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。脚本语言，是一种解释性脚本语言，是一种基于对象的脚本语言，不仅可以创建对象，还可以使用现有对象，将前面两个剑客(一个比作身体、一个比作衣帽装饰)，那么可以将JS比作“行为”，赋予了这个人物一个行为。
如下是一段典型的JavaScript代码：

*{
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* header部分 */
header {
    width: 100%;
    height: 50px;
    background-color: rgb(247, 87, 87);
}

header li {
    float: left;
    text-align: center;
    line-height: 48px;
    margin: 1px 5px;
}a