前端代码的联合使用

html css javascript
java
发布日期:   2025-05-24
更新日期:   2025-05-24
文章字数:   1.7k
阅读时长:   7 分
阅读次数:  

1. html+ css+ javascript

1.1. html

1.1.1. 常用插件

  1. HTML CSS Support
  2. Live Server
  3. Auto Rename Tag
  4. open in browser

1.1.2. 常用示例

<!DOCTYPE html>
<html>
<head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <meta charset="UTF-8">
    <!-- 连接外部样式表或脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
<!-- 这里放置页面内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
<!-- 其他内容 -->
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <meta charset="UTF-8">
    <!-- 连接外部样式表或脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
<!-- 这里放置页面内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
<!-- 其他内容 -->
</body>
</html>

1.2. css

1.2.1. 规则

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
}

1.2.2. 导入方式

  1. 内联使用
<h1 style="color: blue; font-size: 30px;">这是一段内联样式文本。</h1>

  1. 外部样式表

    写在中 

    <head>
    <style>        
        h2 {           
            color: red;            
            font-size: 16px;        
        }    
    </style>
</head>

  2. 外部样式表

    使用link连接外部资源，type为“text/css”，href指向样式内容

<head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

1.2.3. 选择器

选择器 形式
元素 p
类 .highlight
id #header
通用选择 *
子元素 父元素> 子元素
后代 ul li 选择了所有在 <ul> 元素内部的 <li> 元素。
相邻兄弟 元素名 + 元素名，例如，h2 + p 选择了与 <h2> 相邻的 <p> 元素。
/* 通用兄弟选择器 */ h4 ~ p { background-color: #1b91ff; }
伪类选择器 用户交互时的属性变化
包括鼠标悬停（:hover ）、链接状态（:active）、第一个子元素（:first-child）

1.2.4. 属性

了解了如何选中我们想要的元素，接下来，我们来学习 CSS 常用的样式属性。CSS 的属性有上百个，但是这不意味着，我们每个都要学习，更多的属性可以参考 这里

1.2.4.1. 盒子模型

描述了文档中的每个元素都被看作是一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距。

img

其中，从内到外分别是：

属性名 说明
内容（Content） 盒子包含的实际内容，比如文本、图片等。
内边距（Padding） 围绕在内容的内部，是内容与边框之间的空间。可以使用 padding 属性来设置。
边框（Border） 围绕在内边距的外部，是盒子的边界。可以使用 border 属性来设置。
外边距（Margin） 围绕在边框的外部，是盒子与其他元素之间的空间。可以使用 margin 属性来设置。 
.demo {
            background-color: aqua; /* 设置背景色 */
            display: inline-block; /* 转换成行内块元素 */
            border: 10px solid green; /* 设置边框样式 */
            padding: 20px; /* 设置内边距 */
            margin: 40px; /* 设置外边距 */
        }

1.2.4.2. 浮动

标准流，浮动、定位

使用float控制浮动格式

.left, .right {
    /* 添加浮动，元素统一向左浮动，向右同理 float:right*/
    float: left;
    width: 300px;
    height: 300px;
    background-color: blue;
}

清除浮动格式，在后续的模块中不再浮动，不允许后续模块浮动

  1. 加上一个空的块级元素，使用clear属性
.clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

  1. 父模块属性中使用clearfix

  2. 使用overflow: hidden 属性

1.2.4.3. 定位

相关属性：

top ,bottom , left ,right

postion属性值

position value
relative 相对于正常文档定位
absolute 相对最近的已经定位的祖先元素定位，没有，则相对初始包含块定位
fixed 固定位置

1.3. javascript

1.3.1. 导入方式

  1. 内联方式（inline):
&lt;script&gt;
    console.log('hello');
&lt;/script&gt;
  1. 外部引入
&lt;script src="myscript.js"&gt;&lt;/script&gt;

1.3.2. 基本语法

var x; // 声明变量
let y = 1; //声明并初始化变量
const PI= 3.14; //声明一个常量
特性 var let
作用域 函数作用域 块级作用域
变量提升 声明会被提升，赋值不提升 存在提升，但有暂时性死区
重复声明 允许在同作用域内重复声明 不允许在同块级作用域内重复声明

1.3.2.1. 函数

funtion hello(a, b){
    return a+b;
}
//闭包是指一个函数能够访问并记住其词法作用域，即使该函数在当前词法作用域之外执行。闭包使得函数可以保持对其创建时的作用域的引用
function outer() {
    var outerVar = "I am outer";

    function inner() {
        console.log(outerVar); // 访问了外部函数的变量
    }

    return inner;
}

1.3.2.2. 关联html中的事件

事件 描述
onClick 鼠标点击
onMouseOver 鼠标经过
onMouseOut 鼠标移出
onChange 文本内容改变
onSelect 文本框选中
onFocuse 光标聚集
onBlur 移开光标
onLoad 网页加载
onUnload 关闭网页

事件处理程序是与特定事件相关联的函数。当事件发生时，关联的事件处理程序将被调用。在 HTML 中，可以通过以下方式添加事件处理程序：

  1. html

    &lt;bottom onClick= 'myFunction()'&gt; Click me&lt;/bottom&gt;

  2. DOM属性

var botton = document.getElementById('myButton');
botton.onclick = function(){
    
};
  1. addEventListener
var button = document.getElementById('myButton');
button.addEventListener('click', function () {
    alert('Button clicked!');
});

1.3.3. 获取元素，并修改内容

DOM 中的一切都是节点。文档本身是一个文档节点，而文档中的元素、属性和文本都是不同类型的节点。主要的节点类型包括：

  1. 元素节点（Element Nodes）： 表示 HTML 或 XML 文档中的元素，如 <div>、<p> 等。
  2. 属性节点（Attribute Nodes）： 表示元素的属性，如 class、id 等。
  3. 文本节点（Text Nodes）： 表示元素的文本内容
// 修改元素文本内容
element.innerHTML = '新的文本内容';

// 添加新的子元素
var newElement = document.createElement('div');
element.appendChild(newElement);

// 移除子元素
var childElement = element.firstChild;
element.removeChild(childElement);

2. 致谢

摘录自Luo

文章作者: 小白菜
文章链接: https://c3f15f6.github.io/2025/05/24/java/%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E7%9A%84%E8%81%94%E5%90%88%E4%BD%BF%E7%94%A8/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 小白菜 !
html css javascript
赏
评论
 上一篇
深度学习 深度学习
2025-05-24 小白菜
下一篇 
2025-05-24 小白菜
  目录