过一遍前端的东西(未完善)

最新推荐文章于 2021-08-08 08:39:26 发布

苏夏ヾ

最新推荐文章于 2021-08-08 08:39:26 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html css web js javascript

本文链接：https://blog.csdn.net/qq_43003183/article/details/108478015

前端专栏收录该内容

4 篇文章

订阅专栏

本文全面介绍了HTML、CSS和JavaScript的基础知识，涵盖了网页结构搭建、样式设计及动态效果实现，适合前端开发初学者。

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

HTM,CSS

HTML: 用于开发网页的一门技术
CSS: 用于修饰、渲染网页的一门技术
HTML+CSS可以开发一个非常美观、非常漂亮的网页
开发网页盖房子
HTML标签搭建网页的结构砖块(搭建房子的结构)
CSS属性石灰、油漆等涂料

MTML概述

HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）
标记:也叫标签、元素等，就是用尖括号(<>)括起来的一组内容，例如：

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

由W3C组织提供(CSS/xml)

关于HTML的细节:
(1)使用HTML开发的网页文件通常以 .htm或.html 为后缀!
(2)使用HTML开发的网页文件由浏览器负责解析并显示
(3)HTML是文档的一种(txt/word/ppt/pdf等)
总结: HTML就是用于开发网页的一门语言!!

MTML的结构

<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		Hello CGB1808...
	</body>		
</html>

HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
	上面是html5.0的声明, 也是目前最常用的版本
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1.html标签

<head>、<body>

2.html属性

3.html空格和换行

HTML标签

图像标签

通过img标签可以在网页中插入一副图像

<img src="imgs/meinv.jpg" width="50%"/>

超链接标签

超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下，你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
<img alt="tmooc" src="imgs/tmooc.png" />
</a>

表格标签

<h1>案例：在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
    <tr><!-- 用于定义一个表格行 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>11</td><!-- 用于定义一个单元格 -->
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

CSS概述

什么是CSS？（了解）

CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式… }

/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
	background-color:#efbdef; 
	font-size: 22px;
	font-weight: bolder;
}

class选择器

id选择器

代选择器

常用属性总结

文本属性

1、text-align 设置元素中文本水平对齐方式，其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本下划线，其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent: 设置文本首行缩进单位: 像素/百分比

4、letter-spacing: 设置字符间隔/间距，其常用取值为:

normal
像素值

5.text-shadow: 设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，
第二个值为阴影垂直位移，
第三个值为阴影扩散值，
第四个值为阴影颜色

字体属性

font-size：设置字体大小

font-weight：设置字体粗细 bold、bolder、normal 100/200/300../900

font-family：设置字体，比如微软雅黑、黑体、楷体等

color：设置字体颜色

JavaScript简介

什么是JavaScript(了解)

全称叫做JavaScript,简称叫做JS

由NetScape(网景)公司提供，是一门嵌入在浏览器中执行的脚本语言
JS运行在浏览器中，负责实现网页中的动画效果
或者是实现表单校验等功能

JS特点和优势(了解)

1、特点：
(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型的语言

2、优势：
(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(Java 虚拟机 JS 浏览器)
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

2、通过script标签引入外部的JS文件

JavaScript语法

注释格式

JS的注释符号和Java的注释符号相同，如下：

// 单行注释内容
/* 多行注释内容 */

数据类型

基本数据类型
(1)数值类型(number)
(2)字符串类型(string)
(3)布尔类型(boolean)
复杂数据类型
主要指对象(JS的内置对象，自定义的对象，函数，数组)

变量声明

JS中是通过var关键字声明变量，声明的变量是不区分类型，可以指向任意的数据。例如：

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

JS运算符

JS和Java中的运算符大致相同，例如：

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式

JS语句

JS中的语句和Java中的语句也大致相同
if分支结构
if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：

if (条件 1){
	当条件 1 为 true 时执行的代码
}else if (条件 2){
	当条件 2 为 true 时执行的代码
}else{
	当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch语句
使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：

switch(n){
	case 1:
		执行代码块 1
		break;
	case 2:
        执行代码块 2
		break;
    ...
	default:
		与 case 1 和 case 2 不同时执行的代码
}

for循环语句 – 循环代码块一定的次数**

for (语句 1; 语句 2; 语句 3){
	被执行的代码块
}

while循环 – 在指定条件为真时循环执行代码块**

while (条件){
	需要执行的代码
}

案列1：成绩的判断

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
	alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
	alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
	alert("您的成绩属于: 不及格!");
}else{
	alert("您的输入有误, 请重新输入!");
}

如图示：
在这里插入图片描述

JS数组

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组中的细节问题:*

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){
	函数体
}

jQuery

什么是jQuery(了解)

jQuery: JavaScript Query JS查询
jQuery是一门轻量的、免费开源的JS函数库
jQuery可以极大的简化JS代码
jQuery的核心思想：“写的更少，但做的更多”

轻量的：是指一个技术对代码或程序的侵入程度是比较低的。*

jQuery的优势(了解)

(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
(3) 可以通过修改css属性控制页面的效果
(4) 可以兼容常用的浏览器

jQuery引入

jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。

文档就绪事件函数

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	//1.获取id为demo的h1元素
	var h1 = document.getElementById( "demo" );
	//2.获取h1元素中的内容( innerHTML )
	alert( h1.innerHTML );
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

jQuery选择器(重点掌握)

基本选择器

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

基本过滤选择器

(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

jQuery总结

html元素操作

1、创建元素

$("<div></div>") -- 创建一个div元素，返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个表示div元素的jQuery对象

*2、添加子元素

$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素

3、删除元素

$("div").remove() -- 删除所有的div元素

JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
    //通过当前元素的父元素删除当前元素(始终删除第一个)
    divArr[0].parentNode.removeChild( divArr[0] );
}

4、替换元素

$("div").replaceWith("<p>我是来替换的…</p>")

html元素内容和值的操作

<div>这是一个div11元素
    <span>这是一个span元素</span>
    这是一个div1111元素
</div>
<input type="text" name="user"/>

元素属性和css属性操作

jQuery事件绑定

方式1(js版)：

<script>
function fn(){
	alert("input按钮被点击了...");
}
</script>
<body>
	<input onclick="fn()" type="button" value=*"点我\~!" /\>
</body>

方式2(js版)：

<script>
    window.onload = function**(){
        //获取id为btn的元素
        var btn = document.getElementById("**btn**");
        btn.onclick = function(){**
        alert("input按钮被点击了...");
    }
}
</script>
<body>
	<input id=*"btn" type="button" value="点我~!" />
</body>

方式3(jQuery版)：

<script>
$(function(){
    //当点击btn按钮时,触发点击事件执行其中的函数
    $("#btn").click( **function**(){
        alert("input按钮被点击了...");
    });
});
</script>
<body>
	<input id=*"btn" type="button" value="点我~!" /\>
</body>

JSP、EL、JSTL

什么是JSP

JSP和Servlet都是由SUN公司提供的动态Web资源开发技术。

SP看起来像一个HTML，但和HTML不同的是，JSP中可以书写Java代码，可以通过Java代码展示动态的数据。

静态Web资源：任何人在任何条件下访问时，看到的都是相同的效果，这样的资源叫做静态Web资源。（html、css、js等）
动态Web资源：不同的人，在不同的条件下访问时，看到的都是不同的效果，这样的资源叫做动态Web资源。（Servlet、jsp、php、.NET等）