1. 首页
  2. 分类
  3. 前端技术
7.JavaWeb&HTML：构建数字世界的语言和结构
System
2024-08-21
所有,html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字世界的门</title>
    <style>
        body {
            background-color: #F3F3F3;
            color: #333333;
            font-family: 'Arial', sans-serif;
            margin: 20px;
        }
        h1 {
            color: #005799;
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>数字世界的门</h1>
    <p>在这个数字世界里，你将体验编程的乐趣。</p>
    <p>点击下方的链接开始你的编程之旅：</p>
    <ul>
        <li><a href="https://www.codecademy.com/" target="_blank">Codecademy</a> - 在线编程学习平台</li>
        <li><a href="https://www.coursera.org/" target="_blank">Coursera</a> - 来自世界顶级大学的在线课程</li>
        <li><a href="https://www.edx.org/" target="_blank">edX</a> - 来自世界顶级大学的在线课程</li>
    </ul>
</body>
</html>

这段代码展示了如何在HTML中创建一个简单的页面，其中包括标题、段落和超链接列表，同时还包含了内联样式来增强页面的视觉效果。这是一个入门级的例子，展示了如何将HTML、CSS和链接结合在一起，构建一个基本的交互式数字世界的入口。

- 阅读更多 -
HBuilder 创建html无法运行 预览404
System
2024-08-21
所有,html

报错解释：

HBuilder 创建的 HTML 文件无法运行预览时出现 404 错误通常意味着找不到请求的资源。这可能是因为文件没有正确部署到服务器，或者文件的路径不正确。

解决方法：

  1. 确认文件路径：检查文件是否在正确的目录中。如果是本地文件，确保文件的位置与你在浏览器中输入的URL路径相匹配。
  2. 检查服务器配置：如果你正在使用本地服务器进行预览，确保服务器正在运行，并且配置正确。
  3. 检查文件名：确保文件名没有拼写错误，并且服务器有权限访问该文件。
  4. 检查URL格式：如果是在线网站，确保URL格式正确，例如协议（http://或https://）、域名、端口（如果非标准端口）和路径。
  5. 清除缓存和Cookies：有时浏览器缓存可能导致问题，清除缓存和Cookies后再尝试。
  6. 检查HBuilder设置：确保HBuilder的设置中正确配置了服务器信息。

如果以上步骤无法解决问题，可以尝试重启HBuilder，或者查看HBuilder的日志文件获取更多信息。

- 阅读更多 -
vue初识，创建实例绑定容器，基本数据处理，v-if,v-else,v-else-if,v-text,v-html，v-show的含义
System
2024-08-21
所有,html



<!DOCTYPE html>
<html>
<head>
    <title>Vue 初识</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
    <!-- 绑定 Vue 的容器 -->
    <div id="app">
        <!-- 条件渲染 -->
        <div v-if="type === 'A'">
            A 类信息
        </div>
        <div v-else-if="type === 'B'">
            B 类信息
        </div>
        <div v-else-if="type === 'C'">
            C 类信息
        </div>
        <div v-else>
            其他类信息
        </div>
 
        <!-- 文本插值 -->
        <p>{{ message }}</p>
 
        <!-- HTML 插值，注意：不建议使用，可能会引起XSS攻击 -->
        <div v-html="rawHtml"></div>
 
        <!-- 事件绑定 -->
        <button v-on:click="sayHello">点击我</button>
    </div>
 
    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                rawHtml: '<strong>Bold Message</strong>',
                type: 'A' // 根据这个属性来切换条件渲染
            },
            methods: {
                sayHello: function() {
                    alert('Hello, Vue!');
                }
            }
        });
    </script>
</body>
</html>

这段代码展示了如何使用Vue.js创建一个简单的应用，包括条件渲染、文本插值、HTML插值和事件绑定。注意，在实际开发中应避免使用v-html，因为它可能会引入XSS攻击风险。

- 阅读更多 -
分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析
System
2024-08-21
所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -
Js——时间戳和普通日期（年月日）的相互转换
System
2024-08-21
所有,javascript

在JavaScript中，可以使用内置的Date对象来进行时间戳和普通日期（年月日）的互相转换。

时间戳转普通日期：




// 假设 timestamp 是一个时间戳（单位：毫秒）
var timestamp = 1609459200000; // 例如：2021-01-01 00:00:00
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的
var day = date.getDate();
 
console.log(year, month, day); // 输出：2021 1 1

普通日期转时间戳：




// 假设 year, month, day 分别是年、月、日
var year = 2021;
var month = 1; // 实际月份应该是0-11的数字，1代表1月
var day = 1;
 
// 创建Date对象
var date = new Date(year, month - 1, day); // 注意月份是从0开始的
 
// 获取时间戳
var timestamp = date.getTime(); // 或者使用 date.valueOf() 或者 date.getTime()
 
console.log(timestamp); // 输出：1609459200000

请注意，在JavaScript中，月份是从0开始的，即0代表1月，11代表12月。因此在将年月日转换为Date对象时，月份应该减去1。而从Date对象获取月份时，应该加上1来获取正确的月份值。

- 阅读更多 -
HTML如何让文字底部线条不紧贴在文字下面（既在内容下方又超出内容区域）
System
2024-08-21
所有,html

在HTML中，要让文字底部的线条不紧贴文字下方，可以通过在文字外部添加一个线条元素，并通过CSS样式来调整其位置。以下是一个简单的例子：

HTML:




<div class="text-container">
  <div class="text">这里是文本内容</div>
  <div class="line"></div>
</div>

CSS:




.text-container {
  position: relative;
}
 
.text {
  /* 文本样式 */
}
 
.line {
  position: absolute;
  bottom: 0; /* 线条位于容器底部 */
  width: 100%; /* 线条宽度与容器宽度相同 */
  height: 2px; /* 线条高度 */
  background-color: black; /* 线条颜色 */
  margin-top: 5px; /* 文字和线条之间的间隔 */
}

在这个例子中，.text-container 是文本和线条的容器，.text 是包含文本的元素，.line 是线条元素。通过设置 .line 的 bottom 属性为 0，并且通过 margin-top 给文本和线条之间留出间隔，可以实现线条在文本内容区域之上、但又不紧贴文本内容的效果。

- 阅读更多 -
html 原生网页使用ElementPlus 日期控件el-date-picker换成中文
System
2024-08-21
所有,html

在使用 Element Plus 的 el-date-picker 组件时，若要将日期控件的语言换成中文，可以通过设置 locale 属性来实现。Element Plus 支持多语言，默认是使用英文。

以下是一个简单的例子，展示如何将日期控件的语言设置为中文：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Date Picker Example</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script>
    const { createApp } = Vue;
    const { ElDatePicker } = ElementPlus;
 
    createApp({
      components: {
        'el-date-picker': ElDatePicker,
      },
    }).use(ElementPlus, {
      locale: ElementPlus.lang.zhCn,
    }).mount('#app');
  </script>
</head>
<body>
  <div id="app">
    <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :locale="ElementPlus.lang.zhCn">
    </el-date-picker>
  </div>
</body>
</html>

在这个例子中，我们通过 ElementPlus.lang.zhCn 引入了中文语言包，并通过 :locale 属性将其传递给 el-date-picker 组件。这样，日期控件就会显示为中文界面。

- 阅读更多 -
html 内外边距区别以及解释
System
2024-08-21
所有,html

HTML中的内边距(padding)和外边距(margin)是CSS中两个非常重要的属性，它们用于控制元素与其他元素之间的空间。

内边距（padding）: 内边距是元素边界内部的空间，添加内边距不会影响元素在页面中的总体大小，只是会增加了元素的内容区域。

外边距（margin）: 外边距是元素边界外部的空间，添加外边距会影响元素在页面中的总体大小，根据CSS盒模型，外边距还会影响周围元素的布局。

解释和示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  padding: 20px; /* 内边距 */
  margin: 30px;  /* 外边距 */
}
</style>
</head>
<body>
 
<div class="box">Box with padding and margin</div>
 
</body>
</html>

在这个例子中，.box类定义了一个100x100像素的蓝色方块，并且设置了20像素的内边距和30像素的外边距。这意味着该方块的实际内容区域会比100x100像素大20像素（因为内边距在内容区域内部），整个元素（包括边界和内边距）将比100x100像素大20像素（因为外边距在边界外部），总共会增加100像素的大小。

- 阅读更多 -
HTML CSS JS学习笔记之实现网页计算器1，阿里巴巴二面被血虐
System
2024-08-21
所有,html

以下是一个简单的网页计算器实现的代码示例，仅包含HTML和JavaScript，没有使用CSS。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script>
        function calculate() {
            var firstNumber = parseFloat(document.getElementById('firstNumber').value);
            var secondNumber = parseFloat(document.getElementById('secondNumber').value);
            var operator = document.getElementById('operators').value;
            var result;
 
            switch (operator) {
                case '+':
                    result = firstNumber + secondNumber;
                    break;
                case '-':
                    result = firstNumber - secondNumber;
                    break;
                case '*':
                    result = firstNumber * secondNumber;
                    break;
                case '/':
                    if (secondNumber === 0) {
                        result = 'Cannot divide by zero';
                    } else {
                        result = firstNumber / secondNumber;
                    }
                    break;
                default:
                    result = 'Invalid operator';
                    break;
            }
 
            document.getElementById('result').value = result;
        }
    </script>
</head>
<body>
    <input type="text" id="firstNumber" placeholder="First Number">
    <select id="operators">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="secondNumber" placeholder="Second Number">
    <button onclick="calculate()">Calculate</button>
    <input type="text" id="result" placeholder="Result" readonly>
</body>
</html>

这段代码实现了一个简单的计算器功能，用户可以输入两个数字和一个运算符，点击“Calculate”按钮后，会显示计算结果。需要注意的是，这个实现没有包括错误处理，比如输入非数字或除数为零的情况。

- 阅读更多 -
HTML实体字符列表，最新金九银十前端面试合集
System
2024-08-21
所有,html

HTML 实体字符是用于在 HTML 文档中显示预留字符的编码。这样做是为了防止浏览器混淆文本和 HTML 标记。以下是一些常用的 HTML 实体字符及其对应的字符：

  • &lt; 或 \u003C 对应于 <
  • &gt; 或 \u003E 对应于 >
  • &amp; 或 \u0026 对应于 &
  • &quot; 或 \u0022 对应于 "
  • &apos; 或 \u0027 对应于 '
  • &copy; 或 \u00A9 对应于 ©
  • &reg; 或 \u00AE 对应于 ®
  • &trade; 或 \u2122 对应于 ™
  • &euro; 或 \u20AC 对应于 €

在 HTML 中使用实体字符时，你需要在实体字符前面加上 & 并以 ; 结尾。例如，要在网页上显示小于号 <，你应该写成 &lt;。

以下是一个简单的 HTML 示例，展示了如何在页面上使用这些实体字符：




<!DOCTYPE html>
<html>
<head>
    <title>HTML 实体字符示例</title>
</head>
<body>
    <p>显示小于号的实体字符：&lt;</p>
    <p>显示大于号的实体字符：&gt;</p>
    <p>显示和字符的实体字符：&amp;</p>
    <p>显示引号的实体字符：&quot;</p>
    <p>显示版权符号的实体字符：&copy;</p>
    <p>显示注册商标符号的实体字符：&reg;</p>
    <p>显示商标符号的实体字符：&trade;</p>
</body>
</html>

当你在浏览器中查看这个页面时，你会看到特殊字符被正确地显示出来，而不是被浏览器解释为 HTML 标记。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号