Web前端开发学习记录（一）

LLC74

已于 2024-09-12 14:17:45 修改

阅读量297

点赞数 4

分类专栏：前端学习文章标签：前端学习

于 2024-09-12 14:07:56 首次发布

本文链接：https://blog.csdn.net/weixin_73989383/article/details/142173044

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.了解Html\Css\Javascript所负责的领域

Html负责的是将网页的几个主体板块罗列出来。

Css负责美化这个网页，比如导航栏的样式，字体大小、颜色等。

Javascript负责将这个网页变得更加高级，比如加一些选项什么。

2.制作一个小内容的演示

目录展示：

（1）下拉菜单

在桌面上创建一个自命名文件夹，在vs中打开，新建一个menu.html的文件，在body中添加内容，在head中添加组件。一个简单的区域就做好了。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #menu li {
            width: 100px;
            height: 40px;
            float: left;
            background: #2C0CF8;
            line-height: 40px;
            text-align: center;
        }

        #menu a {
            color: #fff;
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 40px;
        }

        #menu li ul li {
            background: #8281F4
        }
    </style>

    <script src="js/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#menu a").hover(function () {
                $(this).parent().find("ul").slideDown();
            }, function () {
                $(this).parent().find("ul").slideUp();
            });
        });
    </script>
</head>


<body>
    这是佳宝的菜单
    <ul id="menu">
        <li><a href="#">菜单1</a>
            <ul>
                <li>子菜单11</li>
                <li>子菜单12</li>
                <li>子菜单13</li>
            </ul>
        </li>
        <li><a href="#">菜单2</a>
            <ul>
                <li>子菜单21</li>
                <li>子菜单22</li>
            </ul>
        </li>
        <li><a href="#">菜单3</a>
            <ul>
                <li>子菜单31</li>
                <li>子菜单32</li>
            </ul>
        </li>
    </ul>
    【<a href="index.html">返回</a>】
</body>

</html>

（2）做一个静态的小页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佳宝的首页</title>
</head>
<body>
    <img src="images/welcome.jpg" alt="">
    <table width="1200" border="1">
        <tr>
            <td>个人简介</td>
            <td>单元练习</td>
            <td>阶段作业</td>
            <td>期末作业</td>
        </tr>
        <tr>
            <td>肤白貌美</td>
            <td>全能艺人</td>
            <td>变瘦</td>
            <td>一百昏</td>
        </tr>
        <tr>
            <td>185</td>
            <td>唱跳rap</td>
            <td>变高</td>
            <td>一百昏</td>
        </tr>
        <tr>
            <td>大帅哥</td>
            <td>篮球</td>
            <td>变壮</td>
            <td>一百昏</td>
        </tr>
    </table>
</body>
</html>

新建一个index.html的文件，按“shift+!+Tab”可自动生成，在title中可修改页面标题。

引入图片：只需建立images文件夹，添加相应图片，采用“<img src="images/welcome.jpg" alt="">”的格式引入就好，引号内只需打images/,点击回车即可。

制作表格：在body中输入"table>tr*4>td*4",自动生成行和列，采用以下格式“<table width="1200" border="1">”即可定义大小。

定义表格头部：“表格头部+特殊行”：


    <table border="1">
        <caption>表格名字</caption> <!--  caption表示表格的名字 -->
        <thead>  <!-- thead表示表格的头部，通常指的是类别分类 -->
            <th>姓名</th>  <!-- th表示特殊单元格 -->
            <th>年龄</th>
        </thead>

在vscode中，单机右键，选择“Open with Live Server”，跳转网页，即可在上方得到网址：

http://127.0.0.1:5500/index.html