【JavaWeb】前端基础(HTML+CSS+JavaScript)

最新推荐文章于 2024-03-05 20:04:04 发布

派大星啦啦啦

最新推荐文章于 2024-03-05 20:04:04 发布

阅读量2k

点赞数

分类专栏： Java 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44544908/article/details/129693612

版权

Java 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

一、前端介绍

1.Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World wide web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的结构（页面元素和内容)。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等)。
JavaScript：负责网页的行为（交互效果)。

在这里插入图片描述

二、HTML和CSS

1.什么是HTML、CSS

HTML ( HyperText Markup Language) ：超文本标记语言。
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签构成的语言
  - HTML标签都是预定义好的。
  - HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
  - 例如：<a>展示超链接，<img>展示图片，<video>展示视频。
CSS (Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。

2.HTML 实例

新建文本文件，后缀名改为.html
编写HTML结构标签
在<body>中填写内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Word</title>
	</head>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落。</p>
	</body>
</html>

3.VS Code安装使用

Visual Studio Code（简称 VS Code )是Microsoft于2015年4月发布的一款代码编辑器。
VS Code对前端代码有非常强大的支持，同时也其他编程语言（例如:C++、Java、Python、PHP、Go等)。
VS Code提供了非常强大的插件库，大大提高了开发效率。
官网：https://code.visualstudio.com

（1）插件安装

Chinese (Simplified) Language Pack
- 适用于vsS Code 的中文（简体）语言包。
Code Spell Checker
- 拼写检查器。比如 banana单词写错成banane，会提示你是否修改成banana，也可以将banane添加至检查器的字典中。
HTML CSS Support
- 在编写样式表的时候，自动补全功能大大缩减了编写时间。
JavaScript (ES6) code snippets
- 支持ES6语法提示。
Mithril Emmet
- 一个能大幅度提高前端开发效率的一个工具，用于补全代码。
Path Intellisense
- 路径提示插件。
Vue 3 Snippets
- 快速生成Vue3代码。
VueHelper
- vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码。
Auto Close Tag
- 自动闭合HTML/XML标签。
Auto Rename Tag
- 自动完成另一侧标签的同步修改。
Beautify
- 格式化html，js，css。
Bracket Pair Colorizer
- 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。
Open in browser
- vscode不像DE一样能够直接在浏览器中打开html.而该插件支持快捷键与鼠标在键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括Firefox.，Chrome，Opera，IE以及Safari。
Vetur
- Vue多功能集成插件，包括: 语法高亮，智能提示，emmet。错误提示。格式化、自动补全。debugger。 vscode官方钦定Vue插件，Vue开发者必备。
IntelliJ IDEA Keybirlhlings
- 安装VSCode的插件Intelli] IDEA Keybindings即可在VSCode中使用IDEA的快捷键。

4.基础标签&样式

（1）标题

1）标题排版

图片标签：<img>

src：指定图像的url（绝对路径 / 相对路径)
width：图像的宽度（px：像素 / %：相对于父元素的百分比)
height：图像的高度（px：像素 / %：相对于父元素的百分比)

路径书写方式：
绝对路径：
绝对磁盘路径：<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
绝对网络路径：<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/ news_logo.png">
相对路径：
./ ：当前目录，./可以省略的
../：上一级目录

标题标签：<h1> ~ <h6>
水平线标签：<hr>

2）标题样式

①CSS引入方式：

行内样式：写在标签的style属性中（不推荐）

<h1 style="属性名:属性值;属性名:属性值;">中国新闻网</h1>

内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
```
<style>
h1{
	属性名:属性值;
	属性名:属性值;
}
</style>
```

外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

h1{
	属性名:属性值;
	属性名:属性值;
}

<link rel="stylesheet" href="css/news.css">

CSS属性：

color: 设置文本颜色
font-size: 字体大小（单位：px）

②颜色表示形式：

在这里插入图片描述
注意：#红色绿色蓝色

③`<span>`标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

④CSS选择器：

CSS选择器：用来选取需要设置样式的元素(标签)

元素选择器：
id选择器：
类选择器：

优先级：ID>类>元素

3）超链接

标签：

<a href=" ..." target="...">哔哩哔哩</a>

属性：
href：指定资源谅问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
css属性：
text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
color：定义文本的颜色。
```
a{
	color: black;
	text-decoration: none;
}
```

（2）正文

1）排版

视频标签：<video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
音频标签：<audio>
src：规定音频的url
controls:：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>

CSS样式：

line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp;

2）布局

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域(content)、内边距区域（padding)、边框区域(border)、外边距区域〈margin)

在这里插入图片描述

布局标签：实际开发网页中，会大量频繁的使用div和span 这两个没有语义的布局标签。
标签：<div> <span>

特点：

div标签：
- 一行只显示一个（独占一行)
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（( width、height )
span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高( width、height)

CSS属性：

width：设置宽度height:设置高度
border：设置边框的属性，如:1px solid #eee;
padding：内边距
margin：外边距

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right …

（3）表格标签

<table>：定义表格
<tr>：定义表格中的行，一个表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格

<table border="1px" cellspacing="0" width="600xp">
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td>华为</td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td>阿里</td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>

    </table>

在这里插入图片描述

（4）表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

表单项：不同类型的input元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式。GET、POST
- get:表单数搪拼接在url后面，?username=java ,大小有限制
- post:表单数据在请求体中携带，大小没有限制

注意：表单项必须有name属性才可以提交

 <!-- 
        form表单属性：
            action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
            method：表单的提交方式
                get:在url后面拼接表单数据,比如: ?username=Tom&age=12,url长度有限制,默认值
                post:在消息体(请求体)中传递的，参数大小无限制的
     -->

     <form action="" method="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" name="提交">
     </form>

<input>：表单项，通过type属性控制输入形式。
<select>：定义下拉列表，定义列表项。
<textarea>：文本域

在这里插入图片描述

三、JS

1.什么是JavaScript?

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由Brendan Eich 发明，并于1997年成为ECMA标准。
ECMAScript 6 (ES6)是最新的JavaScript 版本（发布于2015年)。

ECMA：ECMA国际（前身为欧洲计算机制造商协会)，制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而lavaScript是遵守ECMAScript的标准的。

2.js引入方式

（1）内部脚本：将Js代码定义在HTML页面中

JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
	alert("Hello JavaScript")
</script>

（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部]S文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合，例如：<script src="js/demo.js"/>

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

alert("Hello JavaScript")

3.js基础语法

（1）书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无，建议加上
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/

大括号表示代码块

//判断
if(count == 3){
	alert(count);
}

（2）输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

<script>
	window.alert("Hello JavaScript");//浏览器弹出警告框
	
	document.write("Hello JavaScript");//写入HTML,在浏览器展示
	
	console.log("Hello JavaScript");//写入浏览器控制台
</script>

（3）变量

JavaScript中用var关键字(variable的缩写)来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线(_）或美元符号($)
- 数字不能开头
- 建议使用驼峰命名

驼峰命名法
指混合使用大小写字母来构成变量和函数的名字。当变量名或函数名是由一个或多个单词连结在一起构成的唯一识别字时，第一个单词以小写字母开始，从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myName、myAge，这样的变量名看上去就像骆驼峰一样此起彼伏，因此被称为驼峰命名法。

注意：

ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let 关键字所在的代码块内有效，且不允许重复声明。
ECMAScript 6新增了const 关键字，用来声明一个只读的局部常量。一旦声明，常量的值就不能改变。

（4）数据类型

JavaScript中分为：原始类型和引用类型。

原始类型：
- number: 数字（整数、小数、NaN(Not a Number))
- string:字符串，单双引皆可
- boolean:布尔。true, false
- null:对象为空
- undefined:当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

（5）运算符

算术运算符：+，- ，*，l，% ，++，–
赋值运算符：=，+=，-= ，*= ，/=，%=
比较运算符：>，<， >= ，<=，!=，==，===
逻辑运算符：&&，ll，!
三元运算符：条件表达式? true_value: false_value

==会进行类型转换，===不会进行类型转换

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a == 10); //true

（6）类型转换

字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
```
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)
```
其他类型转为boolean：
- Number：0和NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null和undefined：均转为false。

（7）流程控制语句

if…else if …else…
switch
for
while
do … while

4.js函数

介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName(参数1,参数2..){
	//要执行的代码
}

注意：
- 形式参数不需要类型，因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实际参数列表)
定义方式二：

var functionName = function(参数1,参数2..){
	//要执行的代码
}

JS中，函数调用可以传递任意个数的参数。但是函数只接受前几个定义的参数。

//定义
function add(a , b){
	return a+ b;
}
//调用
var result = add(10,20);
alert(result)

5.js对象

（1）Array

JavaScript中 Array对象用于定义数组。
定义：

var变量名=new Array(元素列表);//方式一
var arr = new Array(1,2,3,4);

var变量名=[元素列表];//方式二
var arr = [1,2,3,4];

访问：

arr[索引]=值;
arr[10] = "hello";

特点：长度可变，类型可变

JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据。

属性：

length：设置或返回数组中元素的数量

方法：
在这里插入图片描述

箭头函数(ES6):是用来简化函数定义语法的。具体形式为: (…)=>{…}，如果需要给箭头函数起名字: var xox=(.)=>{…}

var arr =[ 1,2,3，4 ];
arr [10] = 50;
for (let i = 0; i < arr.length; i++){
	console.log (arr[i]);
}

//forEach:遍历数组中有值的元素
arr.forEach (function(e){
	console.log (e);
})
//ES6箭头函数:(...) ->{ ...}
arr.forEach ((e) -> {
console.log (e);
})

//push:添加元素到数组末尾
arr.push (7,8,9);

//splice:删除元素
arr.splice (2,2) ;

（2）String

string字符串对象创建方式有两种：

var 变量名 =new String("...");//方式一
var str = new String("Hello String");

var变量名= "..." ;//方式二
var str = "Hello String";
var str = 'Hello String';

属性：

length：字符串的长度

方法：
在这里插入图片描述

//创建字符串对象
//var str = new string ( "Hello string" );
var str = "Hello string";
console.log (str);
//length
console.log (str.length) ;
//charAt
console.log (str.charAt(4));
//indexof
console.log (str.indexof("lo"));
//trim
var s = str.trim ();
console.log (s) ;
//substring (start, end) ---开始索引，结束索引(含头不含尾)
console.log (s.substring(0,4));

（3）JavaScript自定义对象

定义格式:

var 对象名= {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){}
};

var user = {
name:"Tom",
age:20,
gender:"male",
eat:function(){
	alert("用膳~");
	}
};

调用格式:

对象名.属性名;
对象名.函数名();

console.log(user.name) ;
user.eat();

（4）JSON

概念：JavaScript Object Notation, JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
key必须使用双引号。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

{
	"name" : "Tom",
	"age" :20,
	"oamder" : "male"
}

定义：

var变量名= '{"key1":value1,"key2":value2}';

value的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：

var userStr = '{“name” : “erry” , “age”:18,“addr”:[ “北京”, “上海”, “西安”]};

JSON字符串转为JS对象：

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串：

var jsonStr = JSON.stringify(jsObject);

（5）BOM

概念：Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象

1）Window

介绍：浏览器窗口对象。
获取：直接使用window，其中 window.可以省略。

window.alert("Hello window");
alert( "Hello window");

属性：
- history：对History对象的只读引用。请参阅History对象。
- location：用于窗口或框架的 Location对象。请参阅Location对象。
- navigator：对 Navigator对象的只读引用。请参阅Navigator对象。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

//confirm -对话框-―确认: true ,取消: false
Var flag = confirm ("您确认删除该记录吗?");
alert (flag);

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

//定时器- setInterval --周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log ("定时器执行了"+i+"次");
},2000);

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

//定时器- setTimeout --延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);

2）Location

介绍：地址栏对象。
获取：使用window.location获取，其中window.可以省略。

window.location.属性;
location.属性;

属性：
- href：设置或返回完整的URL。

location.href = "https://www.baidu.com";

（6）DOM

概念：Document Object Model ,文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1. Core DOM——所有文档类型的标准模型
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
2. XML DOM——XML文档的标准模型
3. HTML DOM——HTML文档的标准模型
  - Image： <img>
  - Button ： <input type='button'>
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
1. 根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
1. 根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');
```
1. 根据class属性值获取，返回Element对象数组
```
var clss = document.getElementsByclassName('cls');
```

6.JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码。

（1）事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了!');
}
</script>

方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
document.getElementById( ' btn' ).onclick=function(){
alert('我被点击了!');
}
</script>

（2）常见事件

在这里插入图片描述

派大星啦啦啦

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】前端基础(HTML+CSS+JavaScript)

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World wide web Consortium，万维网联盟）负责制定。HTML：负责网页的结构（页面元素和内容)。CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等)。JavaScript：负责网页的行为（交互效果)。HTML ( HyperText Markup Language) ：超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
复制链接

扫一扫