前端“三剑客”——HTML,CSS,JS

最新推荐文章于 2024-06-16 17:29:19 发布

weiyubuxxx

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量737

点赞数 23

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/wyb666123/article/details/134462336

版权

本文详细介绍了CSS的基本概念、选择器的使用、样式表的引入方式以及JavaScript的核心语法、DOM和BOMAPI，还涵盖了数据类型、运算符、流程控制、函数和对象的创建等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

CSS:

概念

CSS层叠样式表,CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分类.
基本语法规范

选择器{

样式的声明内容(键值对的方式)

}
- 选择器:页面中有很多元素,而选择器就是定位这些元素并选择它
- 声明内容:修改后的样式
示例:

<style>
  h1{
    color:red;
    font-size:30px;
    }
<style>

引入方式
- 内部样式
使用style标签,把CSS嵌套在html中

<head>
  <style>
    h1{
      color:red;
      font-size:30px;
      }
  </style>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

内联样式

直接在元素内部使用style标签,写入CSS

<h1 style="color:green;">Hello</h1>

外部样式

创建css文件,并且通过link标签引入

//1.创建css文件
p{
  color:red;
}

//2.使用link标签引入 格式:<link rel="stylesheet" href="[css文件路径]">
<head>
  <link rel = "stylesheet" href="test.css">
</head>
<body>
  <p>天下无双</p>
</body>

基础选择器
- 标签选择器

p{
  color:red;
}
div{
  color:green;
}

<p>One</p>
<p>Two</p>
<div>One</div>
<div>Two</div>

类选择器(语法规则: .类名)

.t{
  color:red;
 }
<p class="t">One</p>
<div class="t">Two</div>

id选择器(语法规则: #id名)

.t{
color:red;
}
#r{
font-size:100px;
}
<p id="r">One</p>
<div id="t">Two</div>

通配符选择器

*{
  color:red;
}


选择器	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择,最灵活,最常用
id选择器	能选出一个标签	同一个id在一个标签中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

复合选择器
- 后代选择器
选择每个父元素中的某个子元素

语法格式:

元素1 元素2 {样式声明}

1.元素1和元素2要使用空格分割
2.元素1是父级,元素2是子级,只选元素2,不影响元素1

示例1: 把ol中的 li 颜色修改而不影响ol

ol  li {
  color :red;
 }
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ol>
<ul>
  <li>!!!</li>
  <li>@@@</li>
  <li>###</li>
</ul>

示例2:后代不一定是儿子,也可以是孙子

ol li h3{
  color:red;
 }
<ol>
  <li>AAA</li>
  <li>BBB</li>
  <li><h3>嘿嘿嘿</h3> CCC</li>
</ol>

示例3: 不一定使用标签选择器,也可以是任意选择器的组合

.One li a{
  color: red;
}
<ol class="One">
    <li>+++</li>
    <li>---</li>
    <li>*** <a href="#">===</a></li>
</ol>

子选择器

与子代选择器相似,但是它只能选择子标签

语法格式:

元素1 > 元素2 {样式声明}

1.  使用大于号分割
2.  只选儿子,不能选孙子元素

<div class="one">
    <a href="#">One</a>
    <p><a href="#">Two</a></p>
</div>

使用后代选择器会把One和Two都变为红色,因为Two是他的孙子

.one a{
  color: red;
}

使用子选择器只会选择One

.one>a{
  color: red;
}

并集选择器

可以选择多组标签

元素1, 元素2 { 样式声明 }

示例:把h1标签和a标签变红

h1, a {
  color: red;
}

<h1>111</h1>
<p>222</p>
<a href="#">333</a>

伪类选择器

可以根据元素的状态进行选择,比如:未访问,访问过,悬停,点击

a : link {样式代码}
a : visited {样式代码}
a : hover {样式代码}
a : active {样式代码}

a:link {
    color: black;
    /*去除a标签的下划线*/
    text-decoration: none;
}
a:visited{
    color: green;
}
a:hover {
    color: red;
}
a:active{
    color: blue;
}

<a href="#">小猫</a>

CSS三大特性
- 层叠性
- 继承性
- 字体属性(font,font-family,font-size,font-style,font-weight)
- 文本属性(text-align,text-shadow,line-height,word-spacing,letter-spacing)
- 颜色属性(color,background-color,border-color)
- 其他CSS属性(visibility,cursor,opacity,list-style,text-transform)
- 优先级
- 第一优先级:在属性后面使用!important,它会覆盖页面内任何位置定义的元素样式
- 第二优先级:元素标签中的style属性,即内联样式
- 第三优先级 :ID选择器定义的样式
- 第四优先级: 类选择器,属性选择器,伪类选择器定义的样式
- 第五优先级:标签选择器定义的样式
- 第六选择器:通配符选择器

JavaScript :

概念

JavaScript 属于脚本语言,不需要编译,由浏览器解析执行

JavaScript支持面向对象

JavaScript是弱类型语言,不太重视类型的匹配

JavaScript安全性强,交互性强
JavaScript的组成

对于运行在浏览器上的JS来说,可以视为分成三个部分:
1.JS核心语法
2.DOM API : 浏览器提供的一组,操作页面元素的API
3.BOM API : 浏览器提供的一组,操作浏览器窗口的API

对于Node.js上执行的JS来说,就是分成两个部分
1.JS核心语法
2.Node.js提供的API
这个API和DOM/BOM 无关了,因为它已经不是在写网页了.没有网页就谈不上DOM,
也没有浏览器,也谈不上BOM
但是这个API 提供了一些其他的功能.
比如: 文件操作,网络操作,系统级的操作

JavaScript的书写形式
- 内嵌式
就是把js写到script标签中,

<body>
  <script>
    alert('hello world')
  </script>
</body>
</html>

行内式

把js写到HTML元素的内部

<buttton onclick="alert('hello world')">按钮</button>

外部式

把js写到一个单独的.js文件中,再通过<script>标签来引入

<script src="my.js"></script>

JavaScript的基础语法
- 定义一个变量

格式 : var 变量名 = 初始值;
<script>
  //创建变量
  var num = 10;//创建了一个名字为num的,数字类型的变量
  var s = 'hello';//创建了一个名字为s的,字符串类型变量
  var arr = [];//创了一个名字为arr的,数组类型的变量
</script>

数据类型

JS中内置的几种类型 
1.数字类型(number):数字,不区分整数和小数
2.布尔类型(boolean):true 真,false 假
3.字符串类型(string) : 字符串类型
4.未定义类型(undefined): 只有唯一的值 undefined 表示未定义的值
5.空类型(null) : 只有唯一的值 null  表示空值
6.符合类型(Symbol) :表示唯一的标识符.他们是一种可用作对象属性键的新类型,
用于定义对象属性时避免命名冲突
7.对象属性(Object) : 表示复杂的数据结构,例如数组和函数

运算符
JavaScript中的除法运算会自动根据结果转换整数或小数
"==" 和 "===": JavaScript中使用"=="和"==="比较两个值的时候,他们具有不同的含义
先统一两个变量的类型再比较值,例如"666"==666的结果为true
先比较类型,类型相同之后再比较值,"666"===666的结果为false
"! ="和"! ==": 与"=="和"==="相似,可以用于比较两个值是否不相等,且前者只比较值,后者比较类型和值
"typeof": 在JavaScript中,有一个特殊的运算符"typeof",可以用于检查变量的数据类型
typeof 12 会返回number
特别注意,typeof是运算符而不是方法,使用时不需要加()
数据类型转换

1.显示转换:

是指通过代码直接将一种数据类型转换为另一种数据类型

字符串转换为数字:使用Number().parselnt()或parseFloat()函数将字符串转换为数字类型
数字转换为字符串:使用toString()方法将数字类型转换为字符串类型

2.隐式转换:

是指在代码执行过程中,JavaScript引擎自动将一种数据类型转换为另一种数据类型

流程控制语句

1.if 语句: 语法和Java 中大致相同,但是判断条件没有类型的限制

2.switch语句: 语法和Java中大致相同,并且也支持字符串类型

3.循环语句: while循环,do ...while 循环和for循环和Java中的很相似,但是JS中不支持增强for循环

函数

在JavaScript中,有两种函数声明方式: 函数声明和函数表达式

函数声明: 是指通过function关键字声明函数,并将其命名

function sum(a,b){
  return a+b;
  }
  //调用
  console.log(sum(5,10));//输出15

函数表达式: 函数表达式是通过将函数赋值给变量或常量来声明

const sum = function(a,b){
  return a+b;
  }
  //调用
  console.log(sum(5,10))//输出15

二者的主要区别是作用域和声明方式:
1.函数声明定义的函数可以在全局作用域中声明,可以在定义之前调用
2.函数表达式 隐式地将函数分配给一个变量,因此必须在定义后才能调用,
函数表达式的作用域取决于函数所分配的作用域

创建对象&&对象的使用

1.使用new 关键字创建对象,适用于类已经声明完成的情况

let d1 = new Date()//创建日期对象
console.log(d1.getFullYear())//2023

2.使用构造函数方式声明类并创建对象

function People(name,age){
  this.name = name;
  this.age = age;
  this.getName = function(){
  return this.name;
  }
}
let p1 = new People('小红',20);
console.log(p1.name) //直接访问属性
console.log(p1.getName()) //调用方法

3.用字面量方式创建对象. {}

具体来说,使用大括号{}来创建一个对象,然后在大括号内部以 propertyName :value 的形式为它添加属性,用function()创建方法

let person = {
  firstName:"John",
  lastName : "Smith,
  age:30,
  fullName :function(){
    return this.firstName +""+this.lastName;
    }
}
console.log(person.age)//直接访问属性
console.log(person.fullName())//调用方法