前端习题

最新推荐文章于 2023-09-26 16:25:47 发布

L是晴子的球迷

最新推荐文章于 2023-09-26 16:25:47 发布

阅读量419

点赞数

分类专栏： html 文章标签： westos

本文链接：https://blog.csdn.net/qq_40102768/article/details/98197739

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了前端基础知识，包括HTML的title与alt属性区别、块级元素与行内元素、CSS盒子模型，以及JavaScript的数据类型和类的创建。此外，还列举了常见的DOM操作方法，并分享了导航栏和图片列表等项目实例的代码实现。

摘要由CSDN通过智能技术生成

一.简答
1.html 中 title 属性和 alt 属性的区别?
title:规定有关元素的额外信息
alt:alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的
2.请说出几个常用的块级元素和行内元素.
行内元素：与其他行内元素并排,不能设置宽高，默认的宽度就是文字的宽度
块级元素：霸占一行，不能与其他任何元素并列,能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；
常见行内元素有：em,strong,span,button,input,label,code,select,img,
3.介绍一下 CSS 的盒子模型?
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
4.JavaScript 里有哪些数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

5.JS 怎么实现一个类。怎么实例化这个类。

6.请列举五个常用的 Javascript DOM 方法
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
document.createElement(element) 创建 HTML 元素
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

二.项目实例

1.导航栏
网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域,寻找资源。
设置导航栏如下:
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            margin: 5px auto;
            
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            overflow: hidden;
        }
        .header li{
            width: 100px;
            height: 40px;
            display: inline-block;
            padding-top:12px ;
            text-align: center;
        }
        .header li:hover{
            background-color: #00619f;;
        }
        .header li a{
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
        .active{
            background-color: #00619f;
        }
    </style>
</head>
<body>
<div class="header">
    <ul>
        <li class="active"><a href="#">首页</a> </li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>

</div>
</body>
</html>

2.特征布局:图片列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            border: 1px solid ;
            width: 960px;
            height: 269px;
        }
        .word{
            padding-top: 20px ;
            padding-left: 20px;
            padding-right: 20px;


        }
        .word span{
            width: 110px;
            height: 18px;
            color: #000;
        }
        .comtent{
            width:920px ;
            height: 181px;
            padding-top: 20px;
            padding-left: 20px;
        }

        .pic img{
            width: 160px;
            height: 68px;
            /*padding-left: 29px;*/
            margin-top: 20px;

            float: left;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="word">
        <h2>图片展示</h2>
        <hr>
    </div>

    <div class="comtent">
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
        <div class="pic">
            <img src="./img/img5.jpg">
        </div>
    </div>
</div>
</body>
</html>

3.电影排行榜
在这里插入图片描述
代码实现：

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

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            width: 300px;
            height: 100%;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }

        .box h1 {
            color: green;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }


        .box li {
            list-style: none;
            padding: 10px 15px;
            border: 1px dashed gray;

        }


        .box li span {
            background-color: gray;
            display: inline-block;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
        }


        .box li:nth-child(-n+3) span {
            background-color: green;
            color: white;
        }

        .content {
            overflow: hidden;
            margin-top: 5px;

        }

        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }

        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;

        }


        .current .content{
            display: block;
        }
    </style>
</head>
<body>

<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>3</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>4</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>5</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

    </ul>
</div>


</body>
</html>