前端三件套

喝咖啡学Java

已于 2023-02-12 15:21:02 修改

阅读量2.8k

点赞数 1

分类专栏： javaweb 文章标签： html5 前端 html

于 2022-12-28 23:07:22 首次发布

本文链接：https://blog.csdn.net/m0_71212413/article/details/128474972

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTML

1.HTML 概述

HTML 是用来写网页的语言，HyperText Markup Language 超文本标记语言。
- 超文本：超越文本的限制，还可以去定义音频，视频，图片....
- 标记语言：由标签构成 <html></html>

2.W3C

W3C:W3C是万维网联盟,定义了网页由三部分组成
- 结构：HTML 语言，基础框架
- 表现：CSS 语言，控制界面的美观和排版
- 行为：JavaScript 语言，相当于是方法可以去做一些跳转
先解压我提供的静态文件，双击 index.html

使用 css 时的界面
没有的时候
3.标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
- HTML 标签是由尖括号包围的关键词，比如 < html>< /html >
- HTML 标签通常是成对出现的，比如 < b > < / b>
- 标签的第一个元素是开始标签(开放标签)，有斜线的是结束标签（闭合标签）
初尝试需求：

总结
- html 就是用来定义网页的文档
- < body> < /body> 定义文档身体
- < title> < /title> 用来定义html 文档的名称

3.1基础标签

基础标签：就是处理文字相关的标签
- 标题标签：< h1 > < /h1>
  - h1 代表1级
  - h2 代表2级
- 水平线：
  - < hr/>
- 段落标签：
  - < p>< /p>
- 样式标签（官方建议不要使用）
  - 控制颜色 style="color: red"
  - 对齐方式 align
  - 控制大小
- 字体基本操作
  - 加粗 < b> < /b>
  - 斜体 < i >< /i>
  - 下划线 < u> < /u>
- 换行 < br >
- 居中 < center> < /center>
图片标签 < img src="路径" >< /img>
表格标签
- table 定义表格
- th 表示表头
- tr 代表行
- td 代表单元格

列表

无序列表

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

有序列表

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

布局使用 div
媒体
- 音频 <audio src="1.mp3" controls="controls"></audio>
- 视频 <video src="mv.ogg" controls="controls"></video>
a 标签 < a href = "http://www.sycoder.cn"> 管理后台地址</a>
表单标签
- 表单属性
  - action 指定数据提交的路径
  - method get post
- 输入框
  - type 输入类型
    - text 文本
    - radio 单选
    - checkbox 复选框
    - password 密码
    - 文本域

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

输入属性
value 默认值
readonly 只读
disabled 禁用
size 控制大小

 <input type="text" id="lname" name="lname" value="Gates"><br><br>

提交按钮

<input type="submit" value="登录">

下拉列表

<select name="cars">
                <option value="volvo">信用</option>
                <option value="price">价格</option>
                <option value="fiat">销量</option>
            </select>

按钮

<button type="button" onclick="alert('登录成功')">登录！</button>

二、CSS

1.CSS 概述

CSS 是一门语言，用于控制网页表现。
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局

2.快速开始

定义方式

body {
  background-color: lightblue;
}

定义在 style 中

<style>
    body{
        background-color:lightblue;
    }
</style>

3.CSS 语法

语法规则

例子

p {
  color: red;
  text-align: center;
}

p 是我们选择器，选择段落
只要是 p 标签都能够生效

4.CSS 选择器

元素选择器：元素选择器根据元素名称来选择 HTML 元素
- 例子:页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色
```
p {
  text-align: center;
  color: red;
}
```
id 选择器：id 选择器使用 HTML 元素的 id 属性来选择特定元素
- id 必须是唯一的
- 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id
- 注意：id 不能以数字开头
- 例子：这条 CSS 规则将应用于 id="para1" 的 HTML 元素
```
#para1 {
  text-align: center;
  color: red;
}
```
类选择器：类选择器选择有特定 class 属性的 HTML 元素
- 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
- 例子：所有带有 class="center" 的 HTML 元素将为红色且居中对齐
```
.center {
  text-align: center;
  color: red;
}	
```
- 注意：定只有特定的 HTML 元素会受类的影响(元素名称.className)
```
p.center {
  text-align: center;
  color: red;
}
```
通用选择器：通用选择器（*）选择页面上的所有的 HTML 元素。
- 例子：CSS 规则会影响页面上的每个 HTML 元素
```
* {
  text-align: center;
  color: blue;
}
```

5.CSS 导入

外部 CSS
- 前提是定义一个外部样式表
- 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
```
<link rel="stylesheet" href="my.css">
```
内部 CSS
- 如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表
- 内部样式是在 head 部分的 <style> 元素中进行定义
```
<style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    } 
</style>
```
行内 CSS
- 行内样式（也称内联样式）可用于为单个元素应用唯一的样式
- 如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性
- 实例：行内样式在相关元素的 "style" 属性中定义
```
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
```
层叠顺序
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 浏览器默认样式

6.CSS 颜色

三、JavaScript(后端程序员了解就行了)

1.概述

avaScript 是属于 HTML 和 Web 的编程语言。
主要是去控制页面动态变化的

1.1演示开灯与关灯案例

程序代码

<h1>开关灯程序演示</h1>
<button onclick="document.getElementById('myImage').src='eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='eg_bulboff.gif'">关灯</button>

2.引入

avaScript 必须位于<script> </script> 标签之内
分类
- 内部脚本
- 外部脚本

2.1内部脚本

2.1.1放入 head 里面

<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "段落被更改。";
        }
    </script>
</head>

2.1.2放入 body 里面

<body>
    <h1>js 在 body 中</h1>
    <p id="demo">没有修改段落前的值</p>
    <button onclick="myFunction()">修改</button>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML="我把段落修改了";
        }
    </script>
</body>

注意：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示

2.2外部脚本

把所有的脚本文件放到外部文件里面去，在需要使用的地方引用
注意：外部文件的扩展名是 js 结尾
在需要使用地方通过 < script src="myScript.js"></ script> 引入
外部脚本不能包含 <script> 标签。
外部脚本优点：
- 能够做到分离解耦，分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签

<body>
    <h1>这里是修改操作</h1>

    <h2 id="id">待修改的标题</h2>
    <p id="p">待修改的段落</p>
    <button onclick="updateTitle()">修改标题</button>
    <button onclick="updateP()">修改段落</button>
</body>
    <script src="my.js"></script>

3.基本使用

1.使用js 输出

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

<body>
    <h1>使用innerHtml 输出</h1>
    <p id="p">这是段落的内容</p>
    <button onclick="f()">修改段落值</button>
    <script>
        function f() {
            document.getElementById("p").innerHTML="修改段落的值";
        }
    </script>
</body>

使用 document.write()
- 注意：使用之后会删除所有的 html
- 该方法测试的时候使用就行

<body>
    <h1>使用writer 输出</h1>
    <script>
        document.write("我是大帅哥，我爱学java")
    </script>
    <p id="p">这是段落的内容</p>
</body>

使用 window.alert()

<body>
        <h1>alert 输出</h1>
        <script>
            window.alert("这里是提示信息")
        </script>
        <p id="p">这是段落的内容</p>
    </body>

使用 console.log()
- 先按 F12 代开 console

<script>
        console.log("测试使用F12的console 控制输出");
    </script>

2.js 语句

语句的构成：值，运算符，表达式，关键词，注释
使用分号结尾和java一样（建议大家加上；养成良好的习惯）
js 的关键字

3.js 语法

变量（和java 一样）使用 var 修饰
运算符（和java一样）
字面量
字符串
js 标识符
- 首字母必须使用字母、下划线、或者 $
- 数值不可以作为首字符
- 使用下划线或者驼峰命名

4.js 注释

单行注释 //
多行注释 ctrl +shift +/

5.let 关键字

可以用来改变作用域范围

6.const 关键字

类似于java 的final

7.运算符

8.数据类型

数值
字符串值
数组
对象
注意：空值和 undifiend 不是一回事
== 和 === 的区别

9.函数

语法
- 使用 function 关键字定义
- 其后是函数名和括号 (参数 1, 参数 2, ...)
- 可以有返回值，但是不用定义返回值类型,使用 return
代码

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

10.条件控制

if 语法

if (条件) {
    如果条件为 true 时执行的代码
}

if else 语法

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

if else if语法

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

switch

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

11.循环

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

while

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

do while

do {
    要执行的代码块
}

while (条件);

4.常用对象

1.字符串

字符串长度使用 length 属性
== 和 === 的区别

2.数组

和java一样
添加

向数组添加新元素的最佳方法是使用 push() 方法

3.自定义方法

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue",f:function (x) {
                console.log(x);
            }};
        console.log(person.firstName);
        person.f(100000);

5.HTML DOM

DOM 是文档对象模型HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsDom</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
</body>
</html>

dom 规范
- Document 整个文本对象
- Element 元素对象
- Text 文本对象
dom 方法
- getElementById 方法
- innerHTML 属性

6.BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话
弹框方法

window.prompt("sometext","defaultText");
window.confirm("sometext");
window.alert("sometext");

7.事件

常用事件
- onchange 改变的时候做出操作
- onClick 点击的时候
- onmouseover
- onmouseout