1. 首页
  2. 分类
  3. html
前端HTML（入门级）
System
2024-08-07
所有,html

以下是一个简单的HTML5文档模板，包含了文档类型声明、页面的标题、一个页面描述的元标签以及一个简单的页面导航。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个简单的HTML页面模板">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是一个示例段落，用于演示如何在HTML文档中添加文本内容。</p>
    </main>
    <footer>
        <p>版权所有 &copy; 2023 我的网站</p>
    </footer>
</body>
</html>

这个HTML文档展示了如何创建一个简单的网站结构，包括头部导航、主要内容区域和底部信息。这对于初学者来说是一个很好的起点，可以通过这个模板学习HTML的基本结构和常用元素。

- 阅读更多 -
HTML 基础知识，带你搞懂前端启动速度优化
System
2024-08-07
所有,html

在Web开发中，优化前端启动速度对于提升用户体验至关重要。以下是一些关键的优化策略和示例代码：

  1. 减少HTTP请求：通过合并文件，例如CSS和JavaScript，减少请求的数量。



<!-- 合并CSS文件 -->
<link href="combined.css" rel="stylesheet">
 
<!-- 合并JavaScript文件 -->
<script src="combined.js"></script>
  1. 使用内容分发网络(CDN)：将静态资源分散到不同的服务器上，加快资源加载速度。



<link href="https://cdn.example.com/style.css" rel="stylesheet">
<script src="https://cdn.example.com/script.js"></script>
  1. 优化图片和静态资源：使用优化工具压缩图片和其他静态资源，减少文件大小。
  2. 懒加载：对于不是立即需要的资源，可以使用懒加载技术。



<img src="placeholder.png" data-src="real-image.png" loading="lazy">
 
<script>
  // 懒加载脚本
  function loadScript(url, callback){
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = () => callback();
    script.src = url;
    document.head.appendChild(script);
  }
 
  // 当需要时才加载实际的JavaScript代码
  window.onload = function() {
    loadScript("actual-script.js", function() {
      console.log("Script loaded!");
    });
  };
</script>
  1. 使用浏览器缓存：通过设置合适的缓存头，让资源在客户端缓存。



<meta http-equiv="Cache-Control" content="max-age=3600">
  1. 代码优化：删除不必要的代码和注释，减少JavaScript的执行时间。



// 优化前
function doSomething(a, b) {
  // 注释：计算a和b的和
  return a + b; // 执行计算
}
 
// 优化后
function doSomething(a, b) { return a + b; }
  1. 服务端渲染(SSR)或预渲染：一些页面内容可以在服务器端生成，减少首屏渲染工作。
  2. 使用Web Workers：在后台运行耗时的JavaScript任务，不阻塞主线程。



// 使用Web Worker
if (window.Worker) {
  const myWorker = new Worker('worker.js');
  myWorker.postMessage('Hello World'); // 发送数据
  myWorker.onmessage = function(e) {
    console.log('Worker replied: ', e.data); // 处理回复
  };
}

通过以上措施，你可以显著改善前端启动和运行的速度，提高用户体验。

- 阅读更多 -
HTML：用对 preload、prefetch提升网页加载速度
System
2024-08-07
所有,html

在HTML中，<link> 标签的 rel 属性可以设置为 preload 或 prefetch 来优化网页加载性能。

preload 用于指定在页面加载生命周期中需要尽早加载的资源，例如样式表、脚本或字体。浏览器会在解析 HTML 时开始预加载这些资源。

prefetch 用于指定页面可能会在未来某个时间点需要但当前不必要的资源。浏览器会在空闲时间预先获取这些资源，并将它们存储在缓存中，以便当用户导航到其他页面时可以更快地使用这些资源。

以下是使用 preload 和 prefetch 的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Preload and Prefetch Example</title>
    <!-- 预加载关键的CSS样式表 -->
    <link rel="preload" href="styles.css" as="style">
    <!-- 预加载关键的JavaScript脚本 -->
    <link rel="preload" href="main.js" as="script">
    <!-- 预取其他可能会用到的资源 -->
    <link rel="prefetch" href="icons.svg" as="image">
    <link rel="prefetch" href="other-script.js" as="script">
</head>
<body>
    <header>
        <!-- 页面内容 -->
    </header>
    <main>
        <!-- 页面内容 -->
    </main>
    <footer>
        <!-- 页面内容 -->
    </footer>
</body>
</html>

在这个例子中，preload 被用于提示浏览器立即开始下载并执行与页面当前加载相关的关键资源。prefetch 被用于指示浏览器在空闲时间下载可能在将来某个时间点需要的资源。这样可以加速页面的加载速度，提升用户体验。

- 阅读更多 -
HTML文本结构说明
System
2024-08-07
所有,html

HTML文本结构标记主要用于描述文本的结构和语义，使得搜索引擎和其他设备（如屏幕阅读器）能更好地理解和解释文本内容。以下是几个常用的HTML文本结构标记：

  1. <h1> 到 <h6>：定义标题，<h1> 最重要，<h6> 最不重要。
  2. <p>：定义段落。
  3. <em>：定义强调文本，通常斜体显示。
  4. <strong>：定义更加强烈的强调文本，通常粗体显示。
  5. <blockquote>：定义块引用，通常会缩进显示。
  6. <q>：定义短的引用。
  7. <ul>、<ol>、<li>：无序列表、有序列表和列表项。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>文本结构示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <em>这是强调文本，将以斜体显示。</em>
    <strong>这是强调文本，将以粗体显示。</strong>
    <blockquote>
        这是一个块引用。
    </blockquote>
    <q>这是一个短引用。</q>
    <ul>
        <li>无序列表项 1</li>
        <li>无序列表项 2</li>
    </ul>
    <ol>
        <li>有序列表项 1</li>
        <li>有序列表项 2</li>
    </ol>
</body>
</html>

以上标记可以帮助增强你的网页的可读性和搜索引擎优化（SEO）。

- 阅读更多 -
前端学习从0到1第一天:初见html
System
2024-08-07
所有,html

在学习HTML的过程中，我们首先需要了解HTML是用来做什么的，它的基本结构是怎样的，以及它包含哪些基本元素。

HTML (Hypertext Markup Language) 是用于创建网页的标准标记语言。HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标签，这些标签用来包围和标注文本的不同部分，使得网页内容可以被浏览器解析并展示出适当的效果。

以下是一个简单的HTML示例，它展示了HTML页面的基本结构：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

在这个例子中，我们定义了一个HTML文档的开始 <!DOCTYPE html>，这是一个文档类型声明，用于通知浏览器的解析器使用哪种HTML版本来解析这个文档。

接下来，<html> 和 </html> 标签包裹了整个页面，它们是HTML文档的开始和结束标记。

在 <head> 标签内，我们定义了网页的标题 <title>，这个标题会显示在浏览器的标题栏上。

在 <body> 标签内，我们添加了三个基本元素：

  • <h1> 标签定义了一个大标题。
  • <p> 标签定义了一个段落。
  • <a> 标签定义了一个超链接。

这个简单的HTML页面展示了HTML的基本结构和一些基本元素，对于初学者来说是一个很好的起点。

- 阅读更多 -
[golang gin框架] 2.Gin HTML模板渲染以及模板语法,自定义模板函数,静态文件服务
System
2024-08-07
所有,html



package main
 
import (
    "github.com/gin-gonic/gin"
    "html/template"
    "net/http"
)
 
func main() {
    router := gin.Default()
 
    // 指定模板文件夹
    router.LoadHTMLGlob("templates/**/*")
 
    // 自定义模板函数
    router.SetFuncMap(template.FuncMap{
        "myFunc": func(s string) string {
            // 对s进行处理
            return s
        },
    })
 
    // 静态文件服务
    router.Static("/static", "./static")
 
    // 路由处理
    router.GET("/", func(c *gin.Context) {
        // 渲染模板并返回
        c.HTML(http.StatusOK, "index.html", gin.H{
            "title": "主页",
        })
    })
 
    // 启动服务
    router.Run(":8080")
}

这段代码演示了如何在Gin框架中设置模板渲染、自定义模板函数以及如何为静态文件提供服务。在实际开发中，你需要将myFunc和"index.html"模板文件替换为你的具体实现。

- 阅读更多 -
HTML中的自适应布局
System
2024-08-07
所有,html

自适应布局是网页设计的一种方式，它允许一个网站在不同的设备（如手机、平板、桌面计算机等）上具有不同的显示效果。在HTML中，可以使用CSS的媒体查询（Media Queries）来创建自适应布局。

以下是一个简单的HTML和CSS代码示例，展示了如何使用自适应布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应布局示例</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  
  .header, .footer {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
  }
  
  .content {
    padding: 20px;
  }
  
  @media (min-width: 768px) {
    .header, .footer {
      background-color: #ddd;
      padding: 20px;
      text-align: center;
    }
    
    .content {
      display: flex;
      justify-content: space-between;
    }
    
    .sidebar {
      background-color: #f2f2f2;
      padding: 20px;
      width: 30%;
    }
    
    .main-content {
      width: 70%;
    }
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>自适应布局示例</h1>
</div>
 
<div class="content">
  <div class="sidebar">
    <h2>侧边栏</h2>
    <p>侧边栏内容...</p>
  </div>
  <div class="main-content">
    <h2>主要内容</h2>
    <p>主要内容区域...</p>
  </div>
</div>
 
<div class="footer">
  <p>页脚信息...</p>
</div>
 
</body>
</html>

在这个示例中，.header和.footer类用于设置页眉和页脚的样式，而.content类在不同屏幕尺寸下使用媒体查询来决定是否需要设置侧边栏（.sidebar）和主要内容（.main-content）的样式。当屏幕宽度大于或等于768像素时，.content会变为flex容器，并且.sidebar占30%宽度，.main-content占70%宽度。这样，在大屏幕上，内容会被分为两栏，侧边栏在左边，主要内容在右边。

- 阅读更多 -
用eclipse和ECharts库编写HTML的折线图和条形图
System
2024-08-07
所有,html

在Eclipse中创建一个简单的HTML页面，包含折线图和条形图的示例代码如下：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 折线图和条形图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 容器 -->
    <div id="line-chart" style="width: 600px;height:400px;"></div>
    <div id="bar-chart" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('line-chart'));
        var barChart = echarts.init(document.getElementById('bar-chart'));
 
        // 指定图表的配置项和数据
        var optionLine = {
            title: {
                text: '折线图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        var optionBar = {
            title: {
                text: '条形图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(optionLine);
        barChart.setOption(optionBar);
    </script>
</body>
</html>

这段代码首先引入了ECharts库，然后创建了两个div容器，分别用于显示折线图和条形图。接着，通过echarts.init方法初始化了两个ECharts实例，并为它们指定了相应的配置项和数据。最后，使用setOption方法将配置项应用到实例上，渲染出折线图和条形图。

- 阅读更多 -
使用老北鼻CharGPT对话查询 Qt/C++ 使用gumbo-parse解析加载的html全过程
System
2024-08-07
所有,html



#include <iostream>
#include <gumbo.h>
 
// 假设GumboNodeToString已经实现，用于将Gumbo节点转换为字符串
std::string GumboNodeToString(const GumboNode* node);
 
// 假设GumboOutputFree已经实现，用于释放Gumbo解析输出内存
void GumboOutputFree(GumboOutput* output);
 
// 解析HTML并查询特定标签的函数
std::string queryHtmlTag(const std::string& html, const std::string& tag) {
    // 解析HTML
    GumboOutput* output = gumbo_parse(html.c_str());
    if (!output) {
        return "HTML解析失败";
    }
 
    // 查询特定标签
    std::string result;
    auto root = output->root;
    if (root->type == GUMBO_NODE_DOCUMENT) {
        gumbo_query((GumboNode*)root, [&](GumboNode* node)
            if (node->type == GUMBO_NODE_ELEMENT &&
                tag == GumboStringPieceToString(node->v.element.tag)) {
                result = GumboNodeToString(node);
                return true;  // 找到第一个匹配即停止查询
            }
            return false;
        });
    }
 
    // 清理Gumbo使用的内存
    GumboOutputFree(output);
 
    return result;
}
 
int main() {
    std::string html = "<html><body><p>Hello, world!</p></body></html>";
    std::string tag = "p";
    std::string result = queryHtmlTag(html, tag);
    std::cout << result << std::endl;
    return 0;
}

这个例子展示了如何使用Gumbo库来解析HTML并查询特定标签。在实际应用中，你需要实现GumboNodeToString和GumboOutputFree这两个函数，以及gumbo_query的相关实现（这个函数在Gumbo库中不存在，需要自行实现或使用其他方式进行查询）。

- 阅读更多 -
vue快速入门v-html
System
2024-08-07
所有,html

在Vue中，v-html指令用于设置元素的innerHTML。这意味着它会渲染实际的HTML，并不会转义字符串。

警告：在生产环境中使用 v-html 可能会导致 XSS 攻击，如果你的内容是用户提供的，请确保你清理了它。

示例代码：




<template>
  <div>
    <!-- 将innerHtml属性的值渲染到p元素中 -->
    <p v-html="innerHtml"></p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 这里的内容将被渲染为HTML
      innerHtml: '<span style="color: red;">这是红色的文本</span>'
    }
  }
}
</script>

在这个例子中，<span>标签和它的内容会被渲染，而不是作为纯文本显示。这使得你可以在Vue组件中动态地插入HTML内容。

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