渡课课堂总结（8.4考试整理+学习心得）

最新推荐文章于 2023-07-19 14:11:34 发布

HACKER6666

最新推荐文章于 2023-07-19 14:11:34 发布

阅读量251

点赞数 1

分类专栏：学习总结

本文链接：https://blog.csdn.net/weixin_42623761/article/details/81437187

版权

学习总结专栏收录该内容

23 篇文章 0 订阅

订阅专栏

考试内容

一.理解题

1.简述什么是HTML的语义化，以及如何使用HTML的语义化。

基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.在前端开发中，使用什么技术实现了内容与样式的分离？并阐述内容与样式分离的原因。

使用外部样式表 <link type=”text/css” rel=”stylesheet” href=”css路径” />来进行内容与样式分离
把样式单独抽离出来，代码会得到精简和重用，后期的维护会变得非常简单。我只用写一个 class 的样式，就可以同时更改多个有相同 class 的元素的样式；只用一个 css 文件，就可以同时链接到多个 HTML 页面上。

3.HTML是一个标签语言，那么标签语言的语法结构是什么样的，以及使用标签语言为什么能表现一个复杂丰富的网页？

<!DOCTYPE html>
         /!--HTML文档由html，head和body三大元素构成--/
<html>
    <head>
        <meta charset="utf-8">
        <title>网页名</title>
         /!--head是HTML文件头标记符，即文档头。包含对文档基本信息（包含文档标题，文档搜索关键字，文档生成器等属性）描述的标记--/
    </head>
         /!--body用于定义一个HTML文档的主体部分，包含对网页元素（文本，表格，图片，动画和链接等）描述的标记。--/
    <body>        
    </body>
</html>

通过HTML将所需要表达的信息按某种规则写成HTML文件通过专用的浏览器来识别并将这些HTML翻译成可以识别的信息就是所见到的网页。

4.请阐述一个HTML元素被加载样式的步骤以及原理

先加载HTML然后在head里面如果引用了外部的css,就请求这个css的文件，在把请求到的css文件渲染到页面中。

5.为什么使用DIV+CSS技术就能完成对页面的布局？

1、div+css有利于搜索引擎爬虫：一般而言相同网页页面html文件table布局字节大于div+css布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。
2、重构页面修改方便（div+css改版方便）：一般DIV+CSS页面都是html和css文件分开的也就是说一个网页的内容与表现形式的分离，一般修改小小部分的css文件里css样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有table不具备的方便性。
3、div+css页面增加网页打开速度：这里是特性决定了他们的性能，因为div+css页面是div的html和css文件分开的，而浏览器打开该网页的时候是同时下载html和css，所以可以提高网页打开速度，而table还有个特性就是浏览器打开的时候必须是浏览器下载以<table>开始,并</table>结束后才显示该块的内容，而div的html是边加载边将内容呈现到浏览器上，div+css网站大大增强用户体验作用。大家都知道网页多等1秒钟都会降低浏览者的等待时间。

二.基础题

1.如何实现DIV的水平居中？

margin: 0 auto;

2.IMG标签在定义的时候，要注意定义哪4个属性，其中alt属性的作用是什么？

1：src属性：规定显示图像的URL。
2：alt属性：规定图像的替代文本。
3：height:定义图像的高度。
4：width: 设置图像的宽度。

3.CSS的选择器有哪些？并写出语法

1：id选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 “#” 来定义，只能在每个 HTML 文档中出现一次。
2：class类选择器用于描述一组元素的样式，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示
3：标签选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

4.CSS有几种定位，分别代码什么意思？

1：ralative相对定位如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
2：absolute绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

5.CSS的浮动是什么意思，如何清除浮动？

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
清除浮动使用clear属性 clear 属性的值可以是：
left（左侧不允许浮动元素）
right（右侧不允许浮动元素）
both（左右两侧均不允许浮动元素）
none（默认值。允许浮动元素出现在两侧）

6.JS中的数据类型有哪些？定义一个对象类型的创建代码（比如学生）。

字符串、数字、布尔、数组、对象、Null、Undefined

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var student = {
                studentCode:"007",
                name:"潇洒哥",
                age:15,
                sex:"男"
            }
            alert(student.studentCode)
            alert(student.name)
            alert(student.age)
            alert(student.sex)
        </script>
    </body>
</html>

7.JS中，函数有什么作用？定义一个完整的数学加法运算函数，要求输入参数为两个加数，返回值为两个数的和。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" id="s1" style="width: 80px;">
        <span style="margin: 0 10px; font-size: 20px;">+</span>
        <input type="text" id="s2" style="width: 80px;">
        <input type="button" id="rsBtn" value="=" style="margin: 0 10px;" onclick="count()">
        <input type="text" id="rs" style="width: 80px;">
        <script type="text/javascript">
            function $(id) {
            return document.getElementById(id);
        }
            function pi(str) {
                return parseInt(str);
        }
            function count() {
                var s1Value = $("s1").value;
                var s2Value = $("s2").value;
                var rs = pi(s1Value) + pi(s2Value);
                var rsSpan = $("rs");
                rsSpan.value = rs;
        }
        </script>
    </body>
</html>

8.书写JS如何修改HTML元素属性值的代码以及如何修改元素样式的代码？

<!DOCTYPE html>
<html>
<body>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
document.getElementById("p1").style.fontSize="larger";
</script>
</body>
</html>

三.编程题

1.使用HTML+CSS完成如下页面的代码实现（黑板图示）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #form {
                border: 0px solid black;
                width: 1280px;
                height: 800px;
                margin: 0 auto;
                margin-top: 60px; 
            }
            #head {
                border: 0 solid black;
                background-color: greenyellow;
                width: 1280px;
                height: 150px;
            }
            #one {
                border: 0 solid black;
                background-color: blue;
                width: 280px;
                height: 550px;
                float: left;
            }
            #two {
                border: 0 solid black;
                background-color: darkgrey;
                width: 800px;
                height: 550px;
                float: left;
            }
            #three {
                border: 0 solid black;
                background-color: pink;
                width: 200px;
                height: 550px;
                float: left;
            }
            #foot {
                border: 0 solid black;
                background-color: aqua;
                width: 1280px;
                height: 100px;
                float: left;
            }
        </style>
    </head>
    <body>
        <!--总表格-->
        <div id="form">
            <!--头部-->
            <div id="head">
            </div>
            <!--中间第一格-->
            <div id="one">
            </div>
            <!--中间第二格-->
            <div id="two">
            </div>
            <!--中间第三格-->
            <div id="three">
            </div>
            <!--底部-->
            <div id="foot">
            </div>
        </div>
    </body>
</html>

这里写图片描述

2.使用JavaScript实现一个倒计时功能（黑板图示），需求如下：
a) 定义一个选择框，内容项为倒计时的时间，例如10秒、20秒、30秒….
b) 定义一个开始按钮和一个数值显示区域，一旦点击开始，就开始按照选择框中的数字进行倒计时，一旦到0秒，页面显示“时间到”字样。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #border {
                margin: 0 auto;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                background-color: black;
                font-size: 50px;
                color: white;
                font-weight: 800px;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="border">
        </div>
        <select id="p1">
            <option value="10">10秒</option>
            <option value="20">20秒</option>
            <option value="30">30秒</option>
        </select>
        <br><br>
        <input type="button" value="点击" onclick="myFunction()">
    </body>
    <script type="text/javascript">
        var x = 0;
        function myFunction() {
            x = document.getElementById("p1").value;
            settime();
        }
        function settime() {
            x = x * 1;
            setTimeout(function() {
                document.getElementById("border").innerHTML = x;
                if(x >= 0) {
                settime();
            } else {
                document.getElementById("border").innerHTML = "时间到";
            }
            x--;
            },1000)
        }
    </script>
</html>

这里写图片描述

学习心得

目前为止HTML、CSS、JavaScript已经学完了，经过这些天的学习，现在已经可以搭建简单的静态网页。

这段时间的学习也比较有规律和循循渐进，首先是初步对HTML的了解，然后是对各个标签的学习和使用，标签不难，只不过短时间还不能完全吸收，毕竟记忆有限，学到后面也会忘记一些前面的知识。所以只能通过练习，不断得巩固和积累。

学完了HTML的标签，接下来是CSS了。学到这CSS才发现，前面学的有些玩意都用不上了。但知识这东西，都是从积累开始的，从浅到深，从易到难。CSS也是几天就基本学完了，上午一般都是听老师讲课，下午练习，听课的时候感觉还行，但练习的时候就无从下手了，只能说明我练得还不够多。

最后轮到JS了，学的最差的也就是JS，以上考试内容JS部分也是让朋友教的，真的感觉里面的内容很绕，直到现在学完了还是觉得有点懵逼，自己只能多花点时间在这上面了。

学习没有捷径，只能一步一步脚踏实地得打好基础。

HACKER6666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渡课课堂总结（8.4考试整理+学习心得）

考试内容一.理解题1.简述什么是HTML的语义化，以及如何使用HTML的语义化。基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2.在前端开发中，使用什么技术实现了内容与样式的分离？...
复制链接

扫一扫