WEB总结-青岛软件培训-Java培训-Python培训学校-万码学堂

2021-07-21 10:41

WEB总结

山

WEB前端

(820)

(0)

(4)

时光飞逝到今天为止学了一个多月的前端也要结束了今天来吧学的前端来进行总结

首先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>

<body>

@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>

#pic{

width: 250px;

filter: blur(10px);

transition: filter 2s,width 2s;

}

#pic:hover{

filter: blur(0px);

width: 300px;

}

</style>

</body>

</html>

<html>

</script>

<body>

function s(x,y)

{

return x/y;

}

</script>

var f = s(3,2);

document.write(w);

</script>

</body>

</script>

</html>

javaScript样式

<html>

</script>

<body>

function s(x,y)

{

return x/y;

}

</script>

var f = s(3,2);

document.write(w);

</script>

</body>

</script>

</html>

javaScript 常用数据

严格区分大小写

单引号和双引号都是相同的

输出语句 document。width（“”）；

字符串变整数 parselnt（）；

字符串变小数 parsefloat（）；

字符串的比较也是用==

var数组={值...}

函数方法

function

{}

?JQuery 比较多可以进行详细的总结

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>