渡课学习感悟2018.8.5 string 没弄懂

学习内容

常用类 String 的 API 讲解;
运用 String 完成 Url 提取 域名的实例讲解;
HTML CSS JavaScript 部分知识的整体串讲。

学习感悟

上课讲的真的没有听懂多少,有点绕。好在知道需要知道些什么,回家慢慢看吧。考试我感觉还行,至少我没有看到那些问题一筹莫展,证明学了点东西了,从无到有很开心,至于这个有能有多少,再努力咯。

考试内容重写

1.什么是HTML语义化,以及如何使用?
基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等。
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
. 尽可能少的使用无语义的标签div和span;
. 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
. 不要使用纯样式标签,如:b、font、u等,改用css设置。
. 需要强调的文本,可以包含在strong或em标签中,strong默认样式是加粗(不要用b),em是斜体(不要用i);
. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
2.在前端开发中,使用什么技术实现了内容和样式的分离?分离的原因?
HTML+CSS。因为页面显示的是内容和相应的表单,而CSS可以很好的将这些内容进行分块组装后,再按照整体的布局进行调整,可以在后期的改版等方面能够不动前面的内容只是更改布局以及背景、图片、表现形式等,这样更便于优化,所以才进行了分离;其实不分离的话就是说每个页面你都需要给在里面嵌入CSS内部样式,这样你要是每个页面的样式都一样,那每个页面的样式都要重新COPY一边,对于后面的修改来说更改量太大了,而用CSS和页面分离的方式可以只要修改一个CSS文件来使得整个网站的样式进行优化,便于修改。
3.HTML是一个标签语言,语法结构是什么样的,以及其为什么能表现一个复杂的网页?
这里写图片描述
4.阐述一个HTML元素被加载样式的步骤以及原理。
先加载HTML然后在head里面如果引用了外部的css,就请求这个css的文件,在把请求到的css文件渲染到页面中。
5.为什么使用DIV +CSS技术就能完成对页面的布局?
DIV本身就是容器性质的,不但可以内嵌table还可以内嵌文本和其它的HTML代码;CSS是CascADIngstyleSheets的简称,中文译作“层叠样式表单”,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者所有页数的网页的外观和格式。
6.如何实现DIV的水平居中?
margin:0 auto;
7.img标签在定义的时候要注意定义哪4个属性,其中alt的属性的作用?
src alt height width alt的作用是 规定图像的替代文本。
8.CSS的选择器有哪些,写出语法。
派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
red {color:red;}
green {color:green;}
类选择器,以一个点号显示。
.center {text-align: center}
属性选择器,对带有指定属性的 HTML 元素设置样式。
[title]{color:red;}
9.CSS有几种定位,分别代码什么意思?
CSS 相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
CSS 绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
10.CSS的浮动是什么?如何清除浮动?
CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
11.JS中的数据类型有哪些?定义一个对象类型的创建代码(比如学生)。
字符串、数字、布尔、数组、对象、Null、Undefined
var person={
firstname : “Bill”,
lastname : “Gates”,
id : 5566
};
12.JS中函数有什么作用?定义一个完成的数学加法运算函数。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。








+




function (id) {              return document.getElementById(id);          }              function pi(str) {                  return parseInt(str);          }              function count() {                  var s1Value = ("s1").value;
var s2Value = ( " s 2 " ) . v a l u e ; v a r r s = p i ( s 1 V a l u e ) + p i ( s 2 V a l u e ) ; v a r r s S p a n = ("rs");
rsSpan.value = rs;
}



13.书写JS如何修改HTML元素属性值的代码以及如何修改元素样式的代码?
document.getElementById(” “).innerHTML
document.getElementById(” “).style
14.使用HTML+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;
}





















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







#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;
}






10秒
20秒
30秒






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)
}

猜你喜欢

转载自blog.csdn.net/hjx19950203/article/details/81436379