Web前端学习心得(1)

最新推荐文章于 2022-11-01 10:32:24 发布

m0_63637575

最新推荐文章于 2022-11-01 10:32:24 发布

阅读量289

点赞数

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

本文链接：https://blog.csdn.net/m0_63637575/article/details/122397522

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习笔记

HTML

超文本标记语言 ( HTML ) 是用来构建网页内容的代码。它用于定义内容的结构和语义。

HTML使用标记标签来描述网页。HTML 文档包含 HTML 标签和纯文本，也就是所说的网页。HTML 元素指的是从开始标签到结束标签的所有代码(注意不能忘记结束标签）。

CSS

层叠样式表 (CSS) 是用来添加样式到你网站的代码。它可以让页面更美观。

CSS 规则集（rule-set）由选择器和声明块组成：选择器指向需要设置样式的 HTML 元素，声明块包含一条或多条用分号分隔的声明（注意写的时候不要漏掉分号）。

JS

JavaScript 是一种用来添加交互功能到你的网站的编程语言。

学习方法

以练为主，以看为辅，保持热情。先制定一个目标：模仿一个页面，所有的行动都围绕这个目标进行。在学习了HTML后就可以将网站的大致框架写出来，可以HTML和CSS同时学习，这样会更有利于保持学习的热情。在写代码时也会遇到不会的，这时可以查一查文档，也可以与周围的人交流。在交流的过程中就会发现自己还有很多都不了解，代码也写得不好看，从而达到共同进步。

学习心得

看到一个网页在自己的手中一步步被完善，感到特别喜悦。然后学习这个内容最重要的就是要自己上手去练，写的多了自然就会了。

下面为模仿的百度页面的代码：

<!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>百度一下，你就知道</title>

    <style>
        .top-box{
            position: absolute;
            left: 0;
            top: 0;  
            font-size: 13px;
            font-family: Arial,sans-serif;
        }
        .top-box:hover{
            color: #1E90FF;
        }
        .look-box{
            position: absolute;
            top: 20%;
            left: 35%;
        }
        .for-box{
            position: absolute;
            top: 40%;
            left: 20%;
        }
        .end-box{
            position:fixed;
            top: 95%;
            font-size: 12px;
            font-family: Arial,sans-serif;
        }
        .right-box{
            position:absolute;
            left: 90%;
            top: 0%;
            font-size: 14px;
            
        }
        .news{
            margin:20px 10px;
            width: 600px;
            height: 40px;
            font-size:15px;
        }
    </style>
</head>
<body>
    <div class="top-box">
        <table border="0"
    cellpadding="10px">
        <tr>
            <td><a href="http://news.baidu.com/" target="_blank" style="text-decoration:none;color: #000000;">新闻</a></td>
            <td><a href="https://www.hao123.com/" target="_blank" style="text-decoration:none;color: #000000;">hao123</a></td>
            <td><a href="https://map.baidu.com/@11914676.68,3881573.31,12z" target="_blank" style="text-decoration:none;color: #000000;">地图</a></td>
            <td><a href="https://tieba.baidu.com/index.html" target="_blank" style="text-decoration:none;color: #000000;">贴吧</a></td>
            <td><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank" style="text-decoration:none;color: #000000;">视频</a></td>
            <td><a href="https://image.baidu.com/" target="_blank" style="text-decoration:none;color: #000000;">图片</a></td>
            <td><a href="https://pan.baidu.com/?from=1026962h" target="_blank" style="text-decoration:none;color: #000000;">网盘</a></td>
            <td><a href="https://www.baidu.com/more/" target="_blank" style="text-decoration:none;color: #000000;">更多</a></td>
        </tr>
    </table>
    </div>
    <div class="right-box">
        <table border="0"
        cellpadding="10px">
            <tr>
                <td ><button type="button" style="background-color: #1E90FF;color: #ffffff;border-radius: 10px;border: none;">登录</button></td>
                <td>设置</td>
            </tr>
        </table>
    </div>
    <div class="look-box">
        <img src="#" width="300px"  height="100px"  ><!--这里是百度的图片-->
    </div>
    <div class="for-box">
        <table border="0">
            <tr>
                <td><input type="text" style="width:600px; height:38px; vertical-align:middle; bordercolor:#1E90FF; "/></td>
                <td><input type="button" value="百度一下" style="background:#1E90FF;font-size: 19px; color:#FFFFFF; border:none; width:100px; height:44px; margin-left:-5px; vertical-align:middle;"></td>
            </tr>
        </table>
        <br/>
        <table  cellpadding="10px" >
            <tr>
                <td style="padding-left:14px;padding-top:3px;">百度热搜 ></td>
                <td style="width: 300px;color: #9b9fac;"><a >换一换</a></td>
            </tr>
            <tr class="news">
                <td ><a   style="text-decoration:none ;color: #000;" href=""><span style="color:#fe2d46;">1</span>&nbsp&nbsp各地贯彻十九届六种全会精神纪实&nbsp&nbsp<span style="color: #faa90e;">热</span></a></td>
                <td><a   style="text-decoration:none;color: #000;" href=""><span style="color:#9b9fac;">4</span>&nbsp&nbsp金域医学：丢样本伪造数据传言不实&nbsp&nbsp<span style="color: #faa90e;">热</span></a></td>
            </tr>
            <tr class="news">
                <td><a  style="text-decoration:none;color: #000;" href=""><span style="color:#ff6600">2</span>&nbsp&nbsp天津累计报告新冠阳性137例&nbsp&nbsp<span style="color: #faa90e;">热</span></a></td>
                <td><a  style="text-decoration:none;color: #000;" href=""><span style="color:#9b9fac;">5</span>&nbsp&nbsp天津返大连感染学生：遭网暴压力大&nbsp&nbsp<span style="color: #fe2d46;">新</span></a></td>
            </tr>
            <tr class="news">
                <td><a  style="text-decoration:none;color: #000;" href=""><span style="color:#faa90e;">3</span>&nbsp&nbsp稳住农业基本盘做好三农工作&nbsp&nbsp<span style="color: #faa90e;">热</span></a></td>
                <td><a  style="text-decoration:none;color: #000;" href=""><span style="color:#9b9fac;">6</span>&nbsp&nbsp男子当街撒198张百元大钞</a></td>
            </tr>
        </table>
    </div>
    <div class="end-box">
        <table border="0"
        cellpadding="10px">
        <td><a href="https://home.baidu.com/" target="_blank" style="text-decoration:none;color: #9fa1a3;">关于百度</a></td>
        <td><a href="https://ir.baidu.com/"  target="_blank" style="text-decoration:none;color: #9fa1a3;">About Baidu</a></td>
        <td><a href="https://www.baidu.com/duty/"  target="_blank" style="text-decoration:none;color: #9fa1a3;">使用百度前必读</a></td>
        <td><a href="https://help.baidu.com/"  target="_blank" style="text-decoration:none;color: #9fa1a3;">帮助中心</a></td>   
        <td><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank" style="text-decoration:none;color: #9fa1a3;">京公安网备11000002000001号</a></td>
        </table>
    </div>
</body>
</html>