HTML选择器和JS基础

最新推荐文章于 2023-11-28 15:54:22 发布

巴黎最后的探戈舞步

最新推荐文章于 2023-11-28 15:54:22 发布

阅读量320

点赞数 1

文章标签： js html javascript html5

本文链接：https://blog.csdn.net/lxt118518/article/details/109103351

版权

本文介绍了HTML的选择器（层次、后代、子代、相邻兄弟、通用及结构伪类），并通过实例展示了如何使用CSS实现文本美化，如字体样式、悬浮效果和颜色控制。同时概述了JavaScript的基础应用，如页面交互、变量、关系运算、数组和基本语法，以及与HTML的结合方式。

摘要由CSDN通过智能技术生成

第四天

今天学习了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>

后代选择器

/*
   后代选择器
      某个元素的后面  祖爷爷 爷爷 爸爸 你
*/
body p{
     background: red;
 }

结果图：
在这里插入图片描述

子代选择器

/*子代选择器  一代  儿子*/
body > p {
    background: yellow;
}

结果图：在这里插入图片描述
相邻兄弟选择器

.active +p{
    background: palegreen;
}

结果图：
在这里插入图片描述
通用选择器

/*通用选择器
    当前选择元素向下所有的兄弟元素
*/
.active~p{
    background: slateblue;
}

结果图：
在这里插入图片描述

结构伪类选择器：

在这里插入图片描述

        /*
        ul的最后一个子元素，不使用我们的class和id选择器
        */
        ul li:last-child{
            background: palegreen;
        }

		/*ul的第一个子元素，不使用我们的class和id选择器*/
        ul li:first-child{
            background: red;
        }

 	  /*
      选中p1:定位父元素，选择当前的p的第一个选择
      选择当前p元素的父级元素,选择父级元素的第一个，并且是当前元素才生效，顺序
 	  */
        p:nth-child(2){
            background: yellowgreen;
        }

 /*选择父元素下的p元素的第二个类型*/
        p:nth-of-type(2){
            background: red;
        }

/*鼠标悬浮颜色*/
        h1:hover{
            background: yellow;
        }

属性选择器

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

因为我是学习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>

效果图：
在这里插入图片描述

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>

二、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

在这里插入图片描述

&&且运算:
第一种情况：
当表达式全为真的时候，返回最后一个表达式的值
第二种情况：
在表达式中，有一个为假的时候，返回第一个为假的表达式的值
||或运算：
第一种情况：
当表达式全为假的时候，返回最后一个表达式的值
第二中情况：
只有一个表达式为真，就会返回第一个为真的表达式的值
并且&&和||都是有一个短路效果的，
当这个&&或者||有了结果了，后面的表达式就不再执行。