技术总结
这里总结的是html、css、以及js的部分知识点,jquery相关的内容还没有添加进来
html
文本相关标签
标签属性
align = "right(靠右)/center(居中)/left(靠左)"
每个标签都有style属性,用于设置标签的样式
标题标签--h1~h6
字号逐渐变小,换行显示,默认靠左显示
段落标签 --p标签
文本标签
span标签
行内元素,没有默认的样式效果,不换行显示
div标签
块级元素,没有默认的样式效果,换行显示
换行标签
br标签
换行标签,是一个单标签,用于换行
hr标签
单标签,产生一条横线
width属性:设置宽度
color属性:设置颜色
列表标签
ul标签--无序列表
常用方式:
<ul> <li></li> <li></li> </ul>
ol标签--有序列表
常用方式:
<ol> <li></li> <li></li> </ol>
加粗标签
b标签、strong标签
<b>b标签:加粗</b> <strong>strong标签:加粗</strong>
倾斜标签
em标签、i标签
<em>em标签:倾斜</em> <i>i标签:倾斜</i>
删除线标签
del标签
<del>del标签:删除线</del>
下划线标签
<u>u标签:下划线</u>
上标签、下标签
sub下标签
<b>H<sub>2</sub>O</b>
sup上标签
<b>3<sup>3</sup>=27</b>
img标签
功能:引用一张存在的图片,在网页上显示图片
src:引用的图片资源的路径
相对路径:根据当前文件所在的位置,查找需要引用资源的位置(../img/2.jpg) 绝对路径:从协议开始的全路径(http://127.0.0.1:8848/2022.8.5/img/1.jpg)可以省略协议及其域名,直接从根目录开始的路径,也就是绝对路径
alt:如果图片没有正常加载成功,则显示alt的文字说明
<img src="img/1.jpg" width="200px" height="200px" title="美女子" alt="这里有一位女子" />
../ 表示退出当前文件夹
./ 表示当前文件夹,一般可以省略
<img src="./img/2.jpg"width="200px" height="200px"/><!--相对路径-->
超链接标签--a标签
点击超链接标签,可以让页面跳转到新的资源路径,网页的内容被更新
href属性:指定需要跳转的url地址(相对地址、绝对地址)
url:统一资源定位路径(网络上可以访问的资源的路径)
target属性——_blank:打开的内容显示在一个新窗口
target属性——_self:打开的内容显示在当前窗口
表格标签—table标签
用于实现的表格
caption:设置表格的名字
tr:行
td/th:列(单元格) th中的文字会加粗
table标签的属性
border:边框 width:宽度
cellpadding="0":设置文本内容和表格边框的宽度 cellspacing="0":设置的单元格之间的宽度 align:表格显示位置
<!-- colspan="3":把三列合并为1列,让每行的列数相等 --> <td colspan="3" align="center">260</td>
表单相关标签
form标签
表单相关的标签,其内部嵌套用于用户输入数据的标签
action:表单提交的请求地址(url) method:请求的方式get/post encytype:设置enctype的类型,对请求参数的处理方式
如果表单中涉及到文件上传,要求:method只能是post,enctype设置为multipart/form-data
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
label标签
label标签的for属性对应的数据值的input标签的id. 那么单击label标签的时候,input标签获取焦点(光标就在输入框内部,用户就可以直接输入数据)
<label for="inputname">用户名:</label> <label for="inputpwd">密码:</label>
input标签
用于用户输入数据
type:设置标签的类型,对用户输入的数据进行一些设置 name:用户输入的数据,传输到服务器端的时候,Java程序根据name的值,获取到输入框的数据 value:对应的就是用户输入的数据值
type="submit":提交请求(请求的地址+请求的参数)的按钮,单击按钮会触发表单提交事件 “表单提交事件”:发送请求给服务器,并且把请求参数(用户输入的数据)也传输到服务器端
reset事件:清空表单中的数据值
<!-- input标签:用于用户输入数据 type:设置标签的类型,对用户输入的数据进行一些设置 name:用户输入的数据,传输到服务器端的时候,Java程序根据name的值,获取到输入框的数据 value:对应的就是用户输入的数据值 --> <input id="inputname" type="text" name="username" value="tom"/><br> <input id="inputpwd" type="password" name="userpwd"/><br> <!-- type="submit":提交请求(请求的地址+请求的参数)的按钮,单击按钮会触发表单提交事件 “表单提交事件”:发送请求给服务器,并且把请求参数(用户输入的数据)也传输到服务器端 --> <input type="submit" value="提交"/> <!-- reset事件,清空表单中的数据值 --> <input type="reset" value="重置"/>
表单的相关元素
单行文本框:<input type="text" name="user" /><br> 密码框:<input type="password" name="pwd" /><br> 隐藏域:<input type="hidden" name="hide" /><br> 文件上传:<input type="file" name="photyo" /><br> <!-- 单选按钮: 一般一组一个单选按钮,需要设置相同的name值,才能保证只有一个按钮被选中 标签后面的文本提示,是给用户看的,标签的value值是给程序使用的。程序中用0表示男,1表示女 checked="checked",表示设置为默认选中 --> 单选按钮:<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1" checked="checked"/>女<br> 复选框:<input type="checkbox" name="hobbys" value="看书"/>看书 <input type="checkbox" name="hobbys" value="弹琴"/>弹琴 <input type="checkbox" name="hobbys" value="跑步"/>跑步 下拉列表(单选):<select name="city"> <option>请选择</option> <option value="0">上海</option> <!-- 设置默认中选项 --> <option value="1" selected="selected">北京</option> <option value="2">深圳</option> </select> 下拉列表(多选): <!-- multiple="multiple":用于设置下拉列表,支持多选 --> <select name="language" multiple="multiple" size="6"> <option value="java">java</option> <option value="c">c</option> <option value="c++">c++</option> <option value="python">python</option> <option value="html">html</option> <option value="c#">c#</option> </select><br> 多行文本框: <!-- cols="5":设置宽度 rows="10":设置高度 --> <textarea name="info" cols="5" rows="10"></textarea><br> submit:<input type="submit" value="提交数据"/><br> reset:<input type="reset" value="清空数据"/><br> button:<input type="button" value="普通按钮"/><br> 分组标签: <fieldset> <legend>地址</legend> 邮箱:<input type="email" name="email"/> phone:<input type="number" name="phone"/> date:<input type="date" name="date"/> 颜色:<input type="color" name="color"/> </fieldset>
iframe标签
在网页中,可以通过src的路径找到新的网页,嵌套在当前网页中
<iframe src="1.表单相关标签.html" width="400" height="400"></iframe> <iframe src="../2022.8.5/img/1.jpg" width="400" height="400"></iframe> <ul> <!-- a标签的target,指定为iframe标签的name值,那么超链接的内容,则显示到iframe标签中 --> <li><a href="../2022.8.5/1.html文件的结构.html" target="content">1.文件结构</a></li> <li><a href="../2022.8.5/2.文本相关标签.html" target="content">2.文本相关</a></li> <li><a href="../2022.8.5/3.特殊样式的文本标签.html" target="content">3.特殊样式文本</a></li> </ul> <!-- 单击li中的超链接,把超链接的内容显示到iframe标签中 --> <iframe src="../2022.8.5/1.html文件的结构.html" width="300px" height="300px" name="content"></iframe>
html标签分类
display:none; 隐藏标签
块级元素
占据一整行,其他内容换行显示。可以设置width、height。比如:h1,div,p
display:block 设置为块级元素
行内元素
宽高由内容决定,剩下的区域可以显示其他元素。不支持设置width、height比如:span、input
display:inline-block 设置为行内元素
块级行内元素
具有块级元素的特征,但是不换行。可以设置width、height。比如:img
display:inline-block 设置为行内块级元素
css样式
级联样式表,用途调整html中标签的形式的语言
语法规则
"样式名:样式值",比如 color:red 这个指定字体的颜色为红色 "样式名1:样式值1,样式名2:样式值2",比如 color:red,font-size:20px
三种使用方式
内联样式
直接在标签上,通过style属性进行使用
内部样式
在head标签中,通过<style>css语言<style>标签,使用样式
外部样式
通过在head标签中,使用<link href="xx.css">标签,引入css文件,进行样式的使用
#p2{ width: 400px;background-color:blueviolet; } /* 标签选择器 :标签名{}*/ p{ color: crimson; } <!-- 内联样式:只对当前使用的标签有效 --> <p id="p1" style="width: 500px;background-color: aquamarine;">hello world</p> <!-- 内部样式:css语言通过选择器找到标签,然后添加对应的样式 --> <p id="p2">hello world</p> <!-- 外部样式:在css文件中写样式,在html中引用css文件 --> <p id="p3">hello world</p>
css特征
继承性
父元素的一些样式会被其子元素继承。比如字体颜色
<!-- 继承性 --> <div style="background-color: red;color: white;"> <p>hello</p> <a href="#" style="color: white;">a标签</a> </div>
层叠性
一个元素可以有多个样式效果进行叠加
<!-- 层叠性 background:yello; 背景色 font-size:20px; 字体大小 color:#FF0000; 字的颜色 font-weight:bold; 字体的粗细 width:300px;height:200px; 标签的宽、高 overflow:scroll; 溢出,则使用滚动条 --> <p style="background-color: yellow;font-size: 20px;color: cyan;font-weight: bold;width: 300px;height: 200px;overflow:scroll;">hello</p>
优先级
浏览器默认样式 < 标签的默认样式 < [外部样式/内部样式/内联样式]
其中:外部样式/内部样式/内联样式:根据谁后写,谁优先
<!-- 内联样式的优先级高于内部样式和外部样式 --> <h1 style="color: green;">中秋节快到了</h1> <!-- 内部样式和外部样式:谁后写,谁优先 --> <h2>中秋节是团圆的节日</h2> <!-- 通过内部样式设置h3,①根据标签选择器设置字号50px,字体颜色黄色 ②根据id选择器,设置h3标签边框,字体颜色绿色 --> <!-- id选择器优先级 > class选择器 > 标签选择器 --> <h3 id="h3">中秋节:海上生明月,天涯共此时</h3> <!-- 使用三种不同的方式给标签设置样式,不冲突情况都是有效的(层叠性),冲突则以优先级为准 -->
css的选择器
selector,根据某个特征,找到标签
标签选择器
根据标签的名字,选择对应的标签(当前html页面中的该标签都会被选出来)
id选择器
根据标签的id选择标签(一个html页面,id是唯一的,只会选择出一个符合条件的标签)
class选择器
根据标签的class属性选择标签(一个html页面,class允许重读,可以选择多个符合条件的标签)
分类选择器
元素选择器和class/id选择器一起使用
/* 分类选择器的使用 */ span.three{ width: 120px; }
分组选择器
选择器1,选择器2,选择器n...{样式}
/* 分组选择器 */ p,h1{ border: 3px solid black; border-radius: 5px;/*设置边框为圆角*/ }
派生选择器
找子标签(嵌套在内部的第一层符合条件的标签元素) 选择器 > 选择器{} 找子孙标签(嵌套在内部的所有符和条件的标签元素) 选择器 选择器{}
/* 派生选择器:选择子孙 */ #sel span{ padding: 5px; border: 3px solid #008000; } /* 派生选择器:选择子 */ #sel>span{ padding: 5px; border: 3px solid red; }
伪类选择器
hover
鼠标移入元素就是hover
/* 伪类:hover(鼠标移入元素就是hover)。鼠标移入到图片上,图片边框变为白色的2px */ .box img:hover{ border: 2px solid white; }
focus
输入框获取焦点饿时候,设置的样式
/* 伪类:focus,输入框获取焦点的时候,设置的样式 */ #ipt:focus{ height: 30px; }
溢出—overflow
overflow: hidden;/*溢出的解决方式,隐藏溢出部分*/ overflow: scroll;/*设置出现滚动条,溢出的内容通过滚动条查看*/ overflow: visible;/*溢出部分可见,溢出的默认处理方式*/ overflow: auto;/*继承父元素的溢出处理方式*/
css—背景图
/* 背景颜色:background-color 背景图片:background-image:url background-repeat:no-repeat/repeat-x/repeat-y/repeat bacground-size:大小 background-position:图片的区域 background-attachment:背景固定 组合设置:background:颜色 背景图片 重复方式 背景图片top 背景图片left */ div{ border: 1px solid blueviolet; width: 1000px; height: 300px; background-color: aqua;/*背景色*/ background-image: url(img/a.jpg);/*背景图片:url是背景图片地址*/ background-repeat: no-repeat;/*是否重复*/ background-size: cover;/*完全覆盖标签的区域*/ background-position: 0px 0px; background-attachment: fixed;/*背景固定*/ } div{ background: url(img/b.jpg) no-repeat -30px -30px; }
定位—position
top、left、right、bottom设置元素的具体的位置
流定位
页面中的块级元素从上到下一个接一个显示,行内元素在一行中从左到右排,水平分布
浮动定位
让元素脱离了普通的流定位,通过css的float属性设置元素的浮动方向,浮动元素依然在父元素的内部,用它可以实现特殊的定位
.outer { background-color: gray; /* 子元素浮动之后,父元素高度为0,造成溢出现象。 解决方式 :①给父元素设置高度 ②使用overflow,隐藏溢出 */ /* height: 100px; 内部嵌套的元素浮动之后,包裹元素的高度为0,可以给包裹元素设置高度 */ overflow: hidden;/*内部嵌套的元素浮动之后,包裹元素的高度为0,可以使用overflow:hidden;让包裹元素的高度和内部元素高度匹配*/ } p { float: right; /*右浮动:标签浮动之后,影响力其他标签的显示。如果其他标签不想受其影响,可以在标签中通过clear,清除浮动的影响*/ } h1 { clear: both; /*清除浮动的影响 none-不清楚,both-清除两边元素的影响,left-清除左边的影响,right-清除右边的影响*/ }
相对定位—relative
参考自己本身原来的位置
<!-- 父元素div,只是设置了position:relative;没有修改原本的位置 --> <div style="width: 400px;height: 400px;background-color: aquamarine;position: relative;"></div>
绝对定位—absolute
参考的是自己的右相对定位的包裹元素。如果直接父元素没有相对定位,那么就直接找父辈的;如果最终也没有,就找html(body)为准
<!-- 父元素div,只是设置了position:relative;没有修改原本的位置 --> <div style="width: 400px;height: 400px;background-color: aquamarine;position: relative;"> <!-- 调整p标签,让其在四个角落和中心 --> <p style="border: 1px solid blue;position: absolute;top: 0px;left: 0px;">这个是p1标签</p> <p style="border: 1px solid blue;position: absolute;top: 0px;right: 0px;">这个是p2标签</p> <p style="border: 1px solid blue;position: absolute;bottom: 0px;left: 0px;">这个是p3标签</p> <p style="border: 1px solid blue;position: absolute;bottom: 0px;right: 0px;">这个是p4标签</p> <p style="border: 1px solid blue;position: absolute;top: 189px;left: 150px;">这个是p5标签</p> </div>
固定定位—fixed
参考的是html(body)
<!-- 固定定位 position:fixed opacity:0.5;透明度的设置,数据值是0-1(文字也有透明度) backround-color:ragb(29%,10%,61%,0.3),ragb,rag代表颜色的比例,a(0-1)代表透明度(只有背景色透明度有效) --> <div style="position: fixed;left: 1000px;top: 900px;padding: 10px;background-color: rgba(29%, 10%, 61%,0.3);"> <span>京东秒杀</span><br> <span>特色优选</span> </div>
z-index的使用
给元素设置了定位之后,如果被定位的元素的位置相同,则会发生堆叠现象(重合在一起),可以使用z-index,修改显示
z-index:数据;标签设置z-index之后,数据值越大的显示在越上层(就是能被看见的)
img{ position: absolute; width: 70%; height: 70%; z-index: 10; } img:hover{ z-index: 20; }
JavaScript
简称js,<script>标签内部只能写符合js语法规则的语句
作用:操作html和css,实现动态页面
<script type="text/javascript"> // JavaScript简称js,<script>标签内部只能写符合js的语法规则的语句 // 功能:单击id是close的标签,把id是top的标签隐藏 //let span;定义变量(let是定义变量的关键字) let span = document.getElementById("close");//document对象是js的内置对象,getElementById("close")是一个函数,根据id找到元素 let div = document.getElementById("top"); //onclick:js中的单击事件,当元素被单击的时候,则执行单击事件对应的函数 span.onclick = function(){//function表示函数 div.style.display = "none";//修改元素的style属性对应的display样式,赋值为none } </script>
js的三种使用方式
事件定义的方式
<!-- onclick是标签的事件属性, alert('hello')是js中定义的一个弹出警告框的函数--> <button οnclick="alert('hello')">你好</button>
js嵌入到html页面,通过<script>标签来使用
<script> //自定义函数 //js是弱数据类型语言 function f1(a){ alert(a) } //getElementById,根据id获取元素,id是唯一的,所以找出来的是唯一的符合要求的一个元素 let btn = document.getElementById("btn1"); btn.onclick = function(){ alert("点我呀!点我呀!什么都没有!哈哈哈哈"); } </script>
js相关内容写在单独的.js文件中
在html页面上,通过<script src="xx.js">引入js文件,进行使用
<!-- 解释执行的时候,先加载完按钮,js文件中才找得到btn2这个按钮 --> <script src="4.js的使用.js"></script> // 只能写符合js语法规则的语句 let btn2 = document.getElementById("btn2") btn2.onclick = function(){ alert("我爱祖国"); }
for循环的使用
语法规则:
for(循环的起点;循环的判断条件;循环条件的变化){
循环体;
}
//2.练习:在网页上生成10个div标签显示为一行 //通过循环,创建10个div let str = ""; for(let i=0;i<10;i++){ str += "<div></div>"; } //通过innerHTML,把html的字符串,放在body标签中;document.body:找到body元素 //为了避免body标签中原本的内容被覆盖了,把新的标签内容str+原来的内容,然后一起赋值给document.body.innerHTML document.body.innerHTML = str + document.body.innerHTML; //修改十个div的left值,使其不重叠在一起 let divs = document.getElementsByTagName("div");//根据标签名字找,找到的结果是数组 for(let j=0;j<divs.length;j++){ divs[j].style.left = j*110 + "px";//设置div的left的值 //单击div的时候,div的颜色修改为红色 divs[j].onclick = function(){ //this.style.backgroundColor = "red"; this表示当前被单击的对象 divs[j].style.backgroundColor = "red"; } }
js中的变量:用于条件判断的时候,非空转换为true,空转换为false
// js中变量:用于条件判断的时候,非空转换为true,空转换为false let m; if(m){ alert("非空转换为true") }else{ alert("空转换为false") } console.log(m)
数据类型的转换
js—弱数据类型语言
数据类型
-
定义变量的时候是用let定义,没有指定数据类型,给这个变量赋值任意数据类型都可以。
-
string , nubmer, date, boolean , array , object ,function
-
typeof, parseInt ,parseFloat ,toString ,isNaN
-
算术运算过程中true转为1,false转为0.
-
把变量作为条件判断的时候,非空转换为true,空转换为false.
let data ; data = "abc" ; data=100; data=true; data=100.5; data = new Array(); let s = true; let b = 12; // *** js中,boolean参与运算的时候,true转为1,false转为0. console.log(s+b); // 13 let s1 = false; console.log(s1+b); // 12 let s2 = "abc"; // ** js中,有string参与运算的时候,做的是字符串的拼接 console.log(s2+b); // "abc12" console.log(s2+s); // "abctrue" // ** js中, 把变量直接用于条件判断的时候, 非空为true , 空为false. // **** null , undefind ,"" ,'' , 0 , false let s3 = ""; if(s3){ console.log("s3不是空"); }else{ console.log("s3是空"); } // ** 数据类型转换相关的函数 // 1. typeof(变量名) let s4 = "100"; console.log(typeof(s4)); let k = typeof(s4) console.log(k=="number"); // 判断变量是否为number类型。 // 2. toString() var s5 = 100; s5 = s5.toString(); console.log(typeof(s5)); //3. parseInt var s6 = "100.55" console.log(parseInt(s6)); //4. parseFloat console.log(parseFloat(s6)); //5. isNaN var s7 = "aa.55" console.log(isNaN(s7)); // 不是数字,返回true,是数字,返回false. // ** null 与 undefined let s8 ; // s8就是undefined let s9 = null ;// s9就是null. s7 = null; // 清除对象
数组的使用array
创建数组
数组元素可以是任意类型
let arr1 = new Array(); arr1[0] = "abc"; arr1[1] = alert; // 将alert函数的定义赋值给数组 arr1[7] = 100; let arr2 = [1, 2, 3]; ......
数组对象
长度可变,数组元素可以是任意类型。可以通过数组下标的方式操作数组。
数组方法
push()方法
在数组末尾增加元素
let arr3 = new Array(); arr3.push("a"); arr3.push("b"); arr3.push("c"); console.log(arr3);//['a', 'b', 'c']
pop()方法
在数组中弹出最后一个元素
let last = arr3.pop(); console.log("last:" + last);//last:c
unshift()方法
在数组的首位添加元素
// 数组头部插入 arr3.unshift("A") console.log(arr3);// ['A', 'b']
shift()方法
在数组的首位取出元素
let first = arr3.shift() console.log(first);//a
学习心得
经过两周的学习时间,对前端知识的框架有了比较深刻的印象,知道前端三部分每部分的使用方法以及作用。
最开始也接触过一些前端方面的知识,觉得很简单,也比较有趣,因为写了代码能立马看得到效果,而不是像后端。随着后面的学习,对前端的看法又发生了变化,简单是因为我之前只涉及到了最基础的知识点。随着知识的深入,发现也有点力不从心了,有时候一直搞不出来。到最后面的学习,发现自己对这道题如何解答有一个大概清晰的思路,但不知道如何下笔。和一个同学交流之后,感觉就是自己代码写少了,有思路却不知如何着手写,在后续的学习中,更要锻炼自己思考的过程,也要多动手练习,努力实现到最后看到题目就会得心应手的状态
学习到后面的jquery语句,发现前面js中写的语句,使用jquery语句更加方便简洁,也比较容易理解。让我也意识到了jquery还是很重要的。
总的来说,前端的知识自己学得并不算好,虽然最终的小测试做得也还行,但是给我一道题目解答,我会卡半天,甚至可能一道题毫无思路。自我感觉就是,自己代码写少了的缘故,原理懂,知识点也知道,但是就是不会运用到实际的作业中。希望自己多练习,不管是前端还是后端的学习,努力克服这一难关,提升自我。