今天学习了HTML的选择器和JavaScript的基础知识。
今日学习内容
1、HTML选择器
层次选择器
<body><p class="active">p1</p><p>p2</p><p>p3</p><ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li></ul></body>12345678910111213141516
后代选择器
/* 后代选择器 某个元素的后面 祖爷爷 爷爷 爸爸 你 */body p{ background: red; } 1234567
结果图:
子代选择器
/*子代选择器 一代 儿子*/body > p { background: yellow; } 1234
结果图:
相邻兄弟选择器
.active +p{ background: palegreen; } 123
结果图:
通用选择器
/*通用选择器 当前选择元素向下所有的兄弟元素 */.active~p{ background: slateblue; } 123456
结果图:
结构伪类选择器:
/* ul的最后一个子元素,不使用我们的class和id选择器 */ ul li:last-child{ background: palegreen; } 123456
/*ul的第一个子元素,不使用我们的class和id选择器*/ ul li:first-child{ background: red; } 1234
/* 选中p1:定位父元素,选择当前的p的第一个选择 选择当前p元素的父级元素,选择父级元素的第一个,并且是当前元素才生效,顺序 */ p:nth-child(2){ background: yellowgreen; } 1234567
/*选择父元素下的p元素的第二个类型*/ p:nth-of-type(2){ background: red; } 1234
/*鼠标悬浮颜色*/ h1:hover{ background: yellow; } 1234
属性选择器
<p class="demo"> <a href="https://www.baidu.com" class="link item first" id="first">1</a> <a href="" class="link item active" id="test">2</a> <a href="image/123.html" class="link item active">3</a> <a href="image/123.png" class="link item">4</a> <a href="image/123.jpg" class="link item">5</a> <a href="adc" class="link item">6</a> <a href="/a.jpg" class="link item">7</a> <a href="abc.doc" class="link item">8</a> <a href="abcd.doc" class="link item last">9</a> </p> <style> .demo a{ float:left; display: block; height: 50px; width: 50px; border‐radius: 10px; background: yellow; text‐align: center; color: red; text‐decoration: none; margin‐right: 5px; font:bold 20px/50px Arial; } </style> /* 属性选择器:属性名=属性值(正则表达式) a[]{ } */ a[id]{ background: red; } a[id=first]{ background: yellowgreen; } /* class中有link的元素的 *=:包含等于 =:绝对等于 */ a[class*="link"]{ background: fuchsia; } /*选中href中的以https开头的元素*/ a[href^=https]{ background: slateblue; } /*选中href中的以png结尾的元素*/ a[href$=png]{ background: #4158D0; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
因为我是学习JAVA的,所有HTML的学习到这里就告一段落了,之后就靠我们自己从其他渠道获取HTML知识。
JavaScript
一、为啥美化网页:
1.有效的传递页面的信息
2.美化页面,页面的漂亮,才能吸引用户
3.凸显主题
4.提高我们的用户的体验
1、span标签
重点突出的文字,使用span标起来:
结果:
2、字体的样式:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* text-align:排班,居中 text-decoration overline:上划线 line_through中划线 underline下划线 */ h1{ color: red; text-align: center; } .p1{ text-indent: 1em; text-decoration: underline; } /* 行高和块高度一样,就可以上下居中 height:300px line-height:300px */ .p2{ background: red; height: 300px; line-height: 300px; } </style></head><body><h1>文章</h1><p class="p1"> 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML (标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]</p><p class="p2"> 简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一 个站点中的多个页面使用了同一套 CSS样式表,而某些页面中的某些元素想使用其他样式,就可以 针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写, 在浏览器中看到的将是最后面设置的样式效果。</p></body></html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
效果图:
3、悬浮和阴影
<style> /*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮类的颜色*/ a:hover{ color: red; font-size: 50px; } /*鼠标按住没有释放的颜色*/ a:active{ color: blue; font-size: large; } /* 参数: 阴影的颜色 水平偏移 垂直偏移 阴影半径 */ #price{ text-shadow: blue 10px 0px 10px; } </style>123456789101112131415161718192021222324252627
二、JS概念
JavaScript介绍:
Js这门语言主要是完成页面的数据验证,一次它运行在客户端,需要运行浏览器来解析执行我们的js代码,原来他的名字LiveScript,为了吸引更多的java程序员去使用,更名为javaScript
Js是弱类型,java是强类型。
特点:
1/交互性(它可以做的就是信息的动态交互)
2/安全性(不能直接访问本地磁盘)
3/跨平台(只要是可以解释js的浏览器都可以执行,和平台没关系)
三、js与我们的html代码结合的方式:
1、引入js的第一种方法
2、引入js的第二种方法:
3、变量
什么是变量?变量就是存方法某些值的内存的命名。
Js的变量类型:
数值类型:number
字符串类型:string
对象类型:object
布尔类型:boolean
函数类型:function
Js中的特殊的值:
Undefined未定义:所有的js变量未赋予初始值的时候,默认都是Undefined
Null:空值
NaN:全称not a number 非数字 非数值
Js中的定义变量的格式:
var 变量名;
var 变量名=值;
4、关系(比较运算)
等号:==等于是简单的做字面值的比较
全等号:===除了比较字面值之外,还会比较两个变量的数据类型
逻辑运算:
且运算:&&
或运算:||
取反运算:!
在js当中,所有的变量都可以作为boolean的变量去使用
0,null,undefined,””(空串)都认为是false
&&且运算:
第一种情况:
当表达式全为真的时候,返回最后一个表达式的值
第二种情况:
在表达式中,有一个为假的时候,返回第一个为假的表达式的值
||或运算:
第一种情况:
当表达式全为假的时候,返回最后一个表达式的值
第二中情况:
只有一个表达式为真,就会返回第一个为真的表达式的值
并且&&和||都是有一个短路效果的,
当这个&&或者||有了结果了,后面的表达式就不再执行。
5、数组
Js中的数组定义:
格式:
Var 数组名=[]; //空数组
Var 数组名=[1,”abc”,true]; //定义数组的同时给它赋值
【免责声明:本文图片及文字信息均由千锋重庆web前端培训小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】