时光飞逝 到今天为止学了一个多月的前端也要结束了 今天来吧学的前端来进行总结
首先WEB 第一个就是HTML标签
HTML标签
?在HTML标签里有几个标签是经常用到的 <head></head> <body> </body> <meta charset="utf-8"/>
?
2.排版标签
(1)换行标签 <br/> （用的比较少）
(2)水平线 <hr/>
属性：color：颜色
颜色的写法：有两种写法：1）颜色的英文单词 2）RGB三原色(red green blue) #ffffff
属性：width：宽度
值有两种写法：1）像素值（300px）2）百分比(30%)
区别：百分比会随着浏览器大小而改变，像素不会。
属性：size：控制水平线的粗细。单位是像素。
属性：align：控制水平线的对齐方式
(3)空格：
(4)段落标签（用的相对较多）
<p></p>
特点：在开始和结束的位置上，各产生一行空行。
属性：align：对齐的方式 文字的显示位置。
取值：left,center,right
(5)<div></div>
<span></span>
标签非常的简单，就是在浏览器上声明一块区域。
区别：div后面有换行，span没有。
(6)块级元素和行内元素（了解）
1)行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2)块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
eg.例子可以复制到.html文件里，用浏览器打开查看效果，对比着查看
2.字体标签
这里顺便提提RGB三原色：
RGB三原色：红，绿，蓝。
用2位16进制的数据表示每种颜色的取值范围。取值0~255共256种颜色。255 = 15*16+15*1 = ff。每种颜色范围00~ff
这个是用，我们就可以表示所有的颜色了：
#rrggbb
#000000:黑色
#ffffff:白色
#ff0000:红色
#00ff00:绿色
#0000ff:蓝色
.列表标签
把数据进行格式化，指定的格式。
(1)列表标签
<dl>(define list title)是定义语，dd(define list define )是定义说明（用的较少）
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>
dd标签的特点：默认缩进和自动对齐的。
(2)有序列表和无序列表
有序列表ol(Ordered List)：（也是比较多的）
<ol>
<li></li>
</ol>
属性： type 类型 (规定列表标记类型)这样一个属性:A,a,I,i,1.默认是阿拉伯数字 1
start 从哪开始(控制序号开始的值)默认开始值为1
无序列表ul(Unordered List)：（用的非常多）
<ul>
<li></li>
</ul>
属性：type
*列表项：li(List Item)
<img />
(1)属性：
src="图片的地址"
width 图片的显示宽度
height 图片显示的高度
alt 图片的说明文字，当图片不存在的时候显示的文字
border 图片的边框
align 控制图片相对于图片基线居于上，中，下
1.CSS样式
1 margin 上下间距
2 list-style ：none 去电点
3 padding 左右间距
4 text-align ：center 文字居中
5 line-height 行高对齐
6 background-color: white; 变色的CSS样式
7 border: 1px solid red; 边框的粗细 颜色
8 text-align: center; 文本框里边的内容居中
9 color 前景色
10 font-size : 9pt; /*文字大小*/
11 background-color:#F5E2EC; /*背景颜色*/
12 background-image : url(/image/bg.gif); /*背景图片*/
13 a:hover /*鼠标转到链接*/
14 a /*所有超链接*/
15 font-size
16 text -align riqht
<html>
<head></head>
<body>
<input type="file">
<style type="text/css">
@keyframes my{
from{
background-color: aqua;
}
to{
background-color: antiquewhite;
}
}
@-webkit-keyframes my{
}
/*Safari*/
@keyframes my2{
25%{
background-color: aqua;
}
50%{
background-color: antiquewhite;
}
75%{
background-color: black;
}
100%{
background-color: blue;
}
}
#d{
animation-name: my2;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 2s;
width: 200px;
height: 200px;
}
CSS样式公式
</style>
animation: my2 4s infinite alternate;
<div id="d">
</div>
<style type="text/css">
#pic{
width: 250px;
filter: blur(10px);
transition: filter 2s,width 2s;
}
#pic:hover{
filter: blur(0px);
width: 300px;
}
</style>
<img src="images/1.jpg" id="pic">
</body>
</html>
<html>
<script type="text/javascript">
</script>
<head></head>
<body>
<script type="text/javascript">
function s(x,y)
{
return x/y;
}
</script>
<script type="text/javascript">
var f = s(3,2);
document.write(w);
</script>
</body>
<script type="text/javascript">
</script>
</html>
javaScript样式
<html>
<script type="text/javascript">
</script>
<head></head>
<body>
<script type="text/javascript">
function s(x,y)
{
return x/y;
}
</script>
<script type="text/javascript">
var f = s(3,2);
document.write(w);
</script>
</body>
<script type="text/javascript">
</script>
</html>
javaScript 常用数据
严格区分大小写
单引号和双引号都是相同的
输出语句 document。width（“”）；
字符串变整数 parselnt（）；
字符串变小数 parsefloat（）；
字符串的比较也是用==
var数组={值...}
函数方法
function
{}
?JQuery 比较多可以进行详细的总结
1.
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script><script type="text/javascript"></script>
JQuery 要和JS一起用才行这是一个注意事项
JQuery 当中有很多的方法和属性 其实JQuery 的精华部分 就在于怎么调用里面的方法和属性
<html>
<head></head>
<body>
<input type="file">
<style type="text/css">
@keyframes my{
from{
background-color: aqua;
}
to{
background-color: antiquewhite;
}
}
@-webkit-keyframes my{
}
/*Safari*/
@keyframes my2{
25%{
background-color: aqua;
}
50%{
background-color: antiquewhite;
}
75%{
background-color: black;
}
100%{
background-color: blue;
}
}
#d{
animation-name: my2;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 2s;
width: 200px;
height: 200px;
}
</style>
animation: my2 4s infinite alternate;
<div id="d">
</div>
<style type="text/css">
#pic{
width: 250px;
filter: blur(10px);
transition: filter 2s,width 2s;
}
#pic:hover{
filter: blur(0px);
width: 30u0px;
}
</style>
<img src="images/1.jpg" id="pic">
</body>
</html>
这一段代码使用CSS样式来做的 主要的作用是做了 每个4秒颜色会自动变化颜色 并且里面运用CSS 3.0样式来做的充分运用3.0样式优势代替了判断使得代码变得更加简洁了效率也提高了不少。
这一段时间 学了HTML标签 怎么用比如<inpit><p> <s> <img> 还有CSS样式<width> <height> <margin> <border> 这些常用的 还有JS啊 JQuery 等等 也是为了以后的学习打下基础
这也是在万码学堂的第三个月 也马上要进java的高级阶段了 时间过的也很快 也为了自己早点就业努力这。
0条评论
点击登录参与评论