江帅帅
江帅帅

《HTML 简易速速上手小册》第6章：HTML 语义与结构（2024 最新版）

《HTML 简易速速上手小册》第6章：HTML 语义与结构（2024 最新版）_第1张图片

文章目录

  • 6.1 语义化标签的重要性
    • 6.1.1 基础知识
    • 6.1.2 案例 1：使用 `
      `, `
      `, `
    • 6.1.3 案例 2：构建带有嵌套语义化标签的新闻网站
    • 6.1.4 案例 3：创建一个带有 `
      `, `
      `, 和 `
      ` 的摄影作品集
  • 6.2 HTML 文档结构最佳实践
    • 6.2.1 基础知识
    • 6.2.2 案例 1：创建一个具有清晰结构的个人博客页面
    • 6.2.3 案例 2：创建一个在线教育平台的主页
    • 6.2.4 案例 3：构建一个具有多个页面部分和动态内容的企业网站
  • 6.3 辅助技术和可访问性考虑
    • 6.3.1 基础知识
    • 6.3.2 案例 1：创建一个具有高可访问性的图像画廊
    • 6.3.3 案例 2：创建一个可访问性良好的表单
    • 6.3.4 案例 3：创建一个适用于屏幕阅读器的文章**

6.1 语义化标签的重要性

6.1.1 基础知识

  • 语义化标签的定义：在HTML中，语义化标签是那些具有明确含义的标签，它们告诉浏览器和开发者这部分内容是什么，而不仅仅是怎么看起来。这就像给网页的每个部分贴上标签，清楚地说明它们的角色和功能。
  • 为什么语义化重要：使用语义化标签可以提高网站的可访问性、搜索引擎优化（SEO）和维护性。这就像在图书馆中正确地分类书籍，让人们更容易找到他们需要的东西。

6.1.2 案例 1：使用
,
,

让我们构建一个简单的博客页面，使用语义化标签来组织内容。

DOCTYPE html>
<html>
<head>
    <title>我的博客title>
head>
<body>
    <header>
        <h1>我的博客标题h1>
        <nav>这里是导航栏nav>
    header>
    <article>
        <h2>博客文章标题h2>
        <p>这里是文章内容...p>
    article>
    <aside>这里是一些相关链接或广告aside>
    <footer>这里是页脚信息footer>
body>
html>

6.1.3 案例 2：构建带有嵌套语义化标签的新闻网站

现在，我们来构建一个新闻网站的主页，运用更多的语义化标签。

DOCTYPE html>
<html>
<head>
    <title>新闻网站title>
head>
<body>
    <header>
        <h1>新闻网站标题h1>
        <nav>导航链接nav>
    header>
    <section>
        <article>
            <header>
                <h2>新闻标题 1h2>
                <p>发表日期和作者p>
            header>
            <p>新闻内容摘要...p>
            <footer>
                <p>评论数: 10p>
            footer>
        article>
        <article>
            <header>
                <h2>新闻标题 2h2>
                <p>发表日期和作者p>
            header>
            <p>新闻内容摘要...p>
            <footer>
                <p>评论数: 5p>
            footer>
        article>
    section>
    <footer>页脚信息footer>
body>
html>

6.1.4 案例 3：创建一个带有
,
, 和
的摄影作品集

最后，让我们创建一个摄影作品集页面，使用一些不太常见的语义化标签。

DOCTYPE html>
<html>
<head>
    <title>摄影作品集title>
head>
<body>
    <header>
        <h1>我的摄影作品h1>
    header>
    <main>
        <figure>
            <img src="photo1.jpg" alt="照片1描述">
            <figcaption>这是照片1的描述figcaption>
        figure>
        <figure>
            <img src="photo2.jpg" alt="照片2描述">
            <figcaption>这是照片2的描述figcaption>
        figure>
    main>
    <footer>版权信息footer>
body>
html>

通过这些案例，你可以看到语义化标签如何使网页结构更加清晰，内容更加易于理解。这不仅对用户体验有益，也有助于搜索引擎更好地理解和索引网页内容。随着你逐渐掌握这些标签的使用，你的网页将变得更加结构化和内容丰富。

6.2 HTML 文档结构最佳实践

6.2.1 基础知识

  • 了解HTML文档的骨架：每个HTML文档都有一个标准的结构，它就像是建筑的蓝图，定义了网页的基本框架。这包括 , , , 和 。
  • 头部（Head）的作用： 部分包含了网页的元数据，比如标题 </code>, 链接到CSS文件的 <code><link></code>, 和脚本 <code><script></code>。虽然这些元素在页面上不直接显示，但它们对网页的功能和外观至关重要。</li> <li><strong>主体（Body）的结构</strong>：<code><body></code> 是你的网页内容所在的地方，它可以包含文本、图片、链接、表格等各种元素。</li> </ul> <h3>6.2.2 案例 1：创建一个具有清晰结构的个人博客页面</h3> <p>我们将构建一个个人博客页面，包含头部、导航栏、主内容区域、侧边栏和页脚。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>我的个人博客<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>欢迎来到我的博客<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>文章<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关于我<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>博客文章标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这里是文章内容...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>侧边栏标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>一些附加信息...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>版权信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>6.2.3 案例 2：创建一个在线教育平台的主页</h3> <p>接下来，我们将创建一个在线教育平台的主页，包括课程列表、教师简介和用户评论。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>在线教育平台<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>在线教育平台<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>课程<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>教师团队<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>学员评价<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>热门课程<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 课程列表 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>我们的教师<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 教师列表 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>学员评价<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 评论列表 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>联系我们<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>6.2.4 案例 3：构建一个具有多个页面部分和动态内容的企业网站</h3> <p>最后，我们将创建一个企业网站，包含产品介绍、用户测试和合作伙伴信息。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>企业网站<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>企业名称<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>产品<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>案例研究<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>合作伙伴<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>产品介绍<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 产品信息 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token punctuation">></span></span>案例研究<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 案例分析 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>新闻与更新<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 新闻列表 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>版权所有 © 企业名称<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>通过这些案例，我们可以看到一个良好结构化的HTML文档是如何构建的，以及如何使用不同的标签来组织内容和提升用户体验。每个案例都展示了如何使用HTML构建一个具有清晰结构和逻辑的网页，使其既易于维护又对用户友好。</p> <p></p> <hr> <h2>6.3 辅助技术和可访问性考虑</h2> <h3>6.3.1 基础知识</h3> <ul> <li><strong>可访问性的重要性</strong>：可访问性确保了所有用户，包括残障人士，都能访问和使用网站。这就像确保建筑有坡道和电梯，方便所有人进入。</li> <li><strong>使用合适的标签</strong>：HTML提供了一系列标签和属性来增强网站的可访问性，如<code><alt></code>属性用于图像描述，使视障用户通过屏幕阅读器理解图像内容。</li> <li><strong>表单可访问性</strong>：为表单元素正确使用<code><label></code>标签，确保所有用户都能理解每个表单项的用途。</li> </ul> <h3>6.3.2 案例 1：创建一个具有高可访问性的图像画廊</h3> <p>我们将构建一个简单的图像画廊，其中每张图片都有描述性的<code><alt></code>标签。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>可访问性图像画廊<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>我的图像画廊<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>描述图像1的内容<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>描述图像2的内容<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>描述图像3的内容<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>6.3.3 案例 2：创建一个可访问性良好的表单</h3> <p>这个示例展示了一个带有清晰标签的表单，方便所有用户填写。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>可访问性表单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>注册表单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>姓名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电子邮件:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>6.3.4 案例 3：创建一个适用于屏幕阅读器的文章**</h3> <p>在这个例子中，我们将创建一个文章页面，其中使用了适当的标题和语义化标签，以便屏幕阅读器用户能够轻松地导航。</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>适用于屏幕阅读器的文章<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>文章标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#section1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>第一节<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#section2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>第二节<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>第一节标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>第一节内容...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>section2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>第二节标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>第二节内容...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>页脚信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>通过这些案例，你可以看到如何通过HTML增强网站的可访问性，使其对各种用户更加友好。这不仅是关于遵守指导原则，更是关于创造一个每个人都可以轻松访问和享受的数字空间。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1752383975587856384"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(《HTML,简易速速上手小册》,html,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1940035470838788096.htm" title="IDE：vscode常用插件" target="_blank">IDE：vscode常用插件</a> <span class="text-muted">十秒耿直拆包选手</span> <a class="tag" taget="_blank" href="/search/IDE%26amp%3BOS/1.htm">IDE&OS</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>BetterComments一款美化注释的插件，可以根据不同种类的注释，显示不同的颜色，一目了然。BracketPairColorizer/BracketPairColorizer2这是一个找对象的插件，不是帮你们找对象啊，是帮你找到括号的另一半。HighlightMatchingTag这也是一个找对象的插件，找的是标签的对象，看我上一个插件的演示图片中，当我点击一下html标签，配对的标签就会出</div> </li> <li><a href="/article/1940017321296850944.htm" title="小程序学习笔记：优化商铺列表页面的下拉刷新功能" target="_blank">小程序学习笔记：优化商铺列表页面的下拉刷新功能</a> <span class="text-muted">you4580</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>在前端开发中，下拉刷新功能能显著提升用户体验，让用户方便地获取最新数据。今天就来和大家分享在开发商铺列表页面时，如何实现并优化下拉刷新功能，同时美化相关窗口样式。本文以微信小程序开发为例进行讲解。开启下拉刷新功能在微信小程序里，开启下拉刷新很简单。找到商铺列表页面的.json配置文件，添加enablePullDownRefresh配置节点，把它的值从默认的false改成true，就能开启下拉刷新效</div> </li> <li><a href="/article/1940016814599761920.htm" title="推客小程序系统开发全攻略：从设计到落地的完整实践" target="_blank">推客小程序系统开发全攻略：从设计到落地的完整实践</a> <span class="text-muted">wx_ywyy6798</span> <a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F/1.htm">推客系统</a><a class="tag" taget="_blank" href="/search/%E7%9F%AD%E5%89%A7/1.htm">短剧</a><a class="tag" taget="_blank" href="/search/%E7%9F%AD%E5%89%A7%E7%B3%BB%E7%BB%9F/1.htm">短剧系统</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2/1.htm">推客</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">推客系统开发</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">推客小程序</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%AE%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91/1.htm">推客小程序开发</a> <div>移动互联网时代，社交电商已成为不可忽视的商业形态，其中推客（分销）系统凭借其裂变式传播特性，成为众多企业流量变现的核心工具。本文将全面剖析推客小程序系统的开发全流程，从产品设计到技术实现，再到运营优化，为开发者提供一站式解决方案。一、系统架构设计：构建稳固基石一个完整的推客小程序系统需要前后端协同工作，采用分层架构设计是保证系统可扩展性的关键。前端展示层主要负责用户界面交互，采用组件化开发模式提升</div> </li> <li><a href="/article/1940001686357602304.htm" title="从零开始：网页设计与制作基础全攻略" target="_blank">从零开始：网页设计与制作基础全攻略</a> <span class="text-muted"></span> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML——网页大厦的基石二、CSS——网页的美妆大师三、过渡和动画——让网页动起来四、原型设计与开发工具——设计师的左膀右臂五、案例分析——排雷避坑六、完整项目开发流程——步步为营前言在网页设计与制作的奇妙世界里，每一个页面都是设计师思想与技术碰撞的结晶。今天，咱们就来唠唠这其中的门道，不管你是初出茅庐的新手，还是想</div> </li> <li><a href="/article/1939999165736087552.htm" title="Cursor黑科技：AI编程实战技术文章" target="_blank">Cursor黑科技：AI编程实战技术文章</a> <span class="text-muted">yuehui001</span> <a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a> <div>引言概述AI编程工具的发展现状Cursor在AI编程领域的独特定位文章目标：展示Cursor的核心功能与实战应用Cursor的核心功能解析智能代码补全：基于上下文的代码生成能力自然语言转代码：通过对话式交互生成完整功能模块代码重构与优化：自动化识别并改进代码质量错误诊断与修复：实时分析代码逻辑并提供解决方案实战场景一：快速原型开发需求描述转化为可执行代码的流程示例：构建一个简易待办事项应用对比传统</div> </li> <li><a href="/article/1939992725487153152.htm" title="react-别名路径配置" target="_blank">react-别名路径配置</a> <span class="text-muted">前端小趴菜05</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在前端开发中，别名路径配置（AliasPathConfiguration）是一种通过配置工具或框架，将特定的路径别名映射到实际文件路径的方法。这样可以简化文件引用路径，提高代码的可读性和维护性。为什么要进行别名路径配置？在我们做项目的时候一定会引入文件，如果要引入的文件层级太深的话肯定会出现很多'../../../../../'，会增加一些不必要的麻烦。所以我们通过@替代src路径，方便开发过程中</div> </li> <li><a href="/article/1939992598684954624.htm" title="前端如何动态执行JavaScript代码？" target="_blank">前端如何动态执行JavaScript代码？</a> <span class="text-muted">程序员小寒</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>今天来聊一聊javascript如何动态执行js代码，我总结了以下四种方法。第一种方式：evaleval函数会将传入的字符串作为js代码执行，并且返回最后一个表达式的值。eval('console.log(1)')//1eval的特点：同步执行；执行环境为当前作用域。leta=1;functiontest(){leta=2;eval('console.log(a)');//2}test();使用e</div> </li> <li><a href="/article/1939981378913366016.htm" title="【Docker】docker的数据持久化" target="_blank">【Docker】docker的数据持久化</a> <span class="text-muted">一直奔跑在路上</span> <a class="tag" taget="_blank" href="/search/Docker/1.htm">Docker</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a> <div>在Docker中，容器的文件系统是临时的。如果容器被删除或重新创建，所有未保存的数据都会丢失。为了解决这个问题，我们可以使用以下两种方式来持久化数据：方式一：使用BindMounts实现数据持久化BindMounts允许你将宿主机文件系统中的目录或文件挂载到容器内的某个目录。这种方式非常直接，适合在开发和测试环境中使用。案例：运行一个Nginx容器，并将宿主机上的html目录挂载到容器内的/usr</div> </li> <li><a href="/article/1939978981902184448.htm" title="前端使用Axios时的跨域问题" target="_blank">前端使用Axios时的跨域问题</a> <span class="text-muted">itanly</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>跨域问题的本质跨域问题源于浏览器的同源策略（Same-OriginPolicy），该策略限制了不同源（协议、域名、端口任一不同）之间的资源交互。Axios作为HTTP客户端，在浏览器环境中受此策略约束。后端配置CORS最标准的解决方案是后端配置CORS（跨域资源共享）。以下是Node.jsExpress框架的示例配置：constexpress=require('express');constcor</div> </li> <li><a href="/article/1939960697832140800.htm" title="Mac10.7.5 XCode4.5.2 ios6编译VLC1.1.0" target="_blank">Mac10.7.5 XCode4.5.2 ios6编译VLC1.1.0</a> <span class="text-muted">woohyuknrg</span> <a class="tag" taget="_blank" href="/search/iOS/1.htm">iOS</a> <div>参考了这篇博文：http://blog.csdn.net/madongchunqiu/article/details/7625083，根据后面的问答修改了一些脚本内容，以及编译时遇到的问题说明只针对真机编译，前几步跟上面博文一样：1.到http://www.videolan.org/vlc/download-ios.html下载3个压缩文件2.创建目录（比如/VLC)，并将3个源代码包解压在目录内</div> </li> <li><a href="/article/1939954267695673344.htm" title="从零构建现代JavaScript技术栈：Node.js与Yarn基础配置指南" target="_blank">从零构建现代JavaScript技术栈：Node.js与Yarn基础配置指南</a> <span class="text-muted">施想钧</span> <div>从零构建现代JavaScript技术栈：Node.js与Yarn基础配置指南js-stack-from-scratchverekia/js-stack-from-scratch:是一个从零开始构建现代JavaScript开发栈的教程，包括工具、技术和实践。适合JavaScript开发人员、前端开发人员和初学者，以及对构建现代Web应用程序感兴趣的人员。项目地址:https://gitcode.co</div> </li> <li><a href="/article/1939951620913688576.htm" title="全网最全学习Zephyr开发中文教程资料汇总-从基础文档视频到上手实操示例" target="_blank">全网最全学习Zephyr开发中文教程资料汇总-从基础文档视频到上手实操示例</a> <span class="text-muted">聆思科技AI芯片</span> <a class="tag" taget="_blank" href="/search/Zephyr%E4%BF%9D%E5%A7%86%E7%BA%A7%E4%B8%8A%E6%89%8B%E6%95%99%E7%A8%8B/1.htm">Zephyr保姆级上手教程</a><a class="tag" taget="_blank" href="/search/zephyr/1.htm">zephyr</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%A8%A1%E6%80%81/1.htm">多模态</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/iot/1.htm">iot</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a><a class="tag" taget="_blank" href="/search/%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">驱动开发</a> <div>Zephyr作为一款开源且极具灵活性与可扩展性的实时操作系统（RTOS），拥有原生的BLE协议栈、完整的Net协议栈，涵盖TCP/IP与应用层协议，具备出色的实时性，支持硬实时任务调度，确保系统响应的确定性延迟，并且内存占用极小。丰富的通信机制、深度集成的电源管理模式等，也进一步提升了其在嵌入式领域的竞争力。然而，要深入掌握Zephyr开发并非一蹴而就之事。为了方便大家顺利踏上Zephyr开发之路</div> </li> <li><a href="/article/1939942674270318592.htm" title="视频断点续播全栈实现：基于HTML5前端与Spring Boot后端" target="_blank">视频断点续播全栈实现：基于HTML5前端与Spring Boot后端</a> <span class="text-muted">独立开发者阿乐</span> <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%88%9B/1.htm">原创</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/Boot/1.htm">Boot</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/video%E5%85%83%E7%B4%A0/1.htm">video元素</a> <div>文章目录视频断点续播功能实现方案核心思路前端实现HTML结构JavaScript实现SpringBoot后端实现1.依赖配置(pom.xml)2.实体类3.存储库接口4.服务层5.控制器实现要点视频断点续播功能构思图流程说明用户交互：前端核心功能：后端处理：数据存储：我的个人网站：乐乐主题创作室视频断点续播功能实现方案核心思路实现视频断点续播需要前后端配合，主要包括：前端记录播放进度后端存储进度信</div> </li> <li><a href="/article/1939915577506197504.htm" title="对比2个数据库：google Cloud Firestore 和 supabase" target="_blank">对比2个数据库：google Cloud Firestore 和 supabase</a> <span class="text-muted">waterHBO</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">云端数据库</a> <div>帮我对比一下：CloudFirestore和supabase尤其是，是否免费，注册难度，是否需要银行卡注册，我没有国外的银行卡（我在中国大陆）。以及免费额度是多少，上手难度，即，学习曲线因为我平时一般是写小项目，我的数据库一般使用json或是sqlite3第1个回答好问题！下面是CloudFirestore（Firebase）和Supabase的全面对比，特别关注了中国大陆用户关心的注册、费用、学</div> </li> <li><a href="/article/1939900321186770944.htm" title="服务端渲染SSR：原理、实践与未来趋势" target="_blank">服务端渲染SSR：原理、实践与未来趋势</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>深入解析服务器端渲染（SSR）：原理、实践与未来趋势在当今追求极致用户体验的Web开发领域，服务器端渲染（SSR）已成为解决性能与SEO难题的关键技术。本文将带你深入理解SSR的核心机制、应用场景及前沿实践。一、SSR的本质与工作原理SSR（Server-SideRendering）指在服务器端生成完整HTML页面并发送至浏览器的技术。与客户端渲染（CSR）不同，SSR的核心流程如下：请求解析：用</div> </li> <li><a href="/article/1939896791747063808.htm" title="【代码审计】安全审核常见漏洞修复策略" target="_blank">【代码审计】安全审核常见漏洞修复策略</a> <span class="text-muted">秋说</span> <a class="tag" taget="_blank" href="/search/Java%E4%BB%A3%E7%A0%81%E5%AE%A1%E8%AE%A1/1.htm">Java代码审计</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%AE%A1%E8%AE%A1/1.htm">代码审计</a> <div>文章目录1.异常信息泄露修复建议不推荐用法推荐用法2.文件上传漏洞错误示例（缺乏校验）安全示例（含格式/扩展名校验）3.SQL注入漏洞（MyBatis${}）示例修复建议4.生成组件间接依赖生成依赖树建议5.间接依赖组件的漏洞什么是间接依赖后端修复1后端修复2前端修复1前端修复26.XSS（跨站脚本攻击）错误示例（存在风险）安全示例（自动转义）修复建议7.接口未鉴权修复建议8.路径遍历漏洞错误示例</div> </li> <li><a href="/article/1939894269816926208.htm" title="Flask + GPT 实践" target="_blank">Flask + GPT 实践</a> <span class="text-muted">红鼻子时代</span> <a class="tag" taget="_blank" href="/search/flask%E9%A1%B9%E7%9B%AE/1.htm">flask项目</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、前言本篇文章会介绍从零开始构建一个基于Flask+GPT的小项目的过程。总共有四个版本的迭代，包括：1、调用GPT接口并渲染到前端页面；2、使用Flask提供的session来实现登录和登出功能；3、用SQLAlchemy管理数据库，实现用户注册和登录；4、记录和分页查看用户与GPT的对话历史。二、项目环境与依赖Python版本：建议3.7+Flask：最常用的PythonWeb框架之一ope</div> </li> <li><a href="/article/1939893261384609792.htm" title="uni-app subPackages 分包加载：优化应用性能的利器" target="_blank">uni-app subPackages 分包加载：优化应用性能的利器</a> <span class="text-muted">阿珊和她的猫</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录subPackages配置注意事项优点使用场景在uni-app中，sub</div> </li> <li><a href="/article/1939892127068647424.htm" title="【C#】两个list根据某个元素比较差集" target="_blank">【C#】两个list根据某个元素比较差集</a> <span class="text-muted">weixin_30594001</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1.今天突然跟前端有一点小小的分歧，传输数据和数据库里的数据做比对，该前端做处理还是后端，(并不是都不愿意做，相反，都愿意在自己那端处理==)2.最后终于归结我这了，好久之前做过list比对，记得刚写代码的时候，两个list比对？那就无限foreach呗，当然实现是能实现，这就很影响比对效果和代码的整洁度了。3.接下来，我回忆起来了我之前写过的一个比较方法，拿出来记录一下//重写比较方法publi</div> </li> <li><a href="/article/1939891748394299392.htm" title="java+vue+SpringBoo智慧旅游系统（程序+数据库+报告+部署教程+答辩指导）" target="_blank">java+vue+SpringBoo智慧旅游系统（程序+数据库+报告+部署教程+答辩指导）</a> <span class="text-muted"></span> <div>源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿ppt+部署教程+代码讲解+代码时间修改工具技术实现开发语言：后端：Java前端：vue框架：springboot数据库：mysql开发工具JDK版本：JDK1.8数据库：mysql数据库工具：Navicat开发软件：idea主要角色及功能介绍本次系统的用例图做出了十分明确的功能划分，在设计时可以有很好的设计思路进行设计和延展。（1）管理员用</div> </li> <li><a href="/article/1939886127213244416.htm" title="前端base64遇到的坑：window.btoa中文报错的修复方案" target="_blank">前端base64遇到的坑：window.btoa中文报错的修复方案</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>问题是这样的：同事在使用的过程中发现一个问题：点击确定按钮后，有个报错提示。如下截图所示：报错文本是：invalidcharactererrorfailedtoexecutebtoaonwindowthestringtobeencodedcontainscharactersoutsideofthelatin1range详情：前端base64遇到的坑：window.btoa中文报错的修复方案</div> </li> <li><a href="/article/1939884308172959744.htm" title="Spring Security 鉴权与授权详解（前后端分离项目）" target="_blank">Spring Security 鉴权与授权详解（前后端分离项目）</a> <span class="text-muted"></span> <div>前言在现代Web开发中，前后端分离架构已经成为主流。后端专注于提供RESTfulAPI，而前端通过AJAX请求与后端交互。在这种架构下，如何对用户进行认证（Authentication）和授权（Authorization）成为了系统设计中的核心问题。SpringSecurity是Spring框架中用于构建安全系统的模块，它不仅提供了强大的安全机制，还支持灵活的自定义配置。本文将围绕鉴权失败和成功时</div> </li> <li><a href="/article/1939867302753267712.htm" title="Go语言利用TPL完成代码生成器——struct模型" target="_blank">Go语言利用TPL完成代码生成器——struct模型</a> <span class="text-muted">学历真的很重要</span> <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/go/1.htm">go</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、TPL文件在Go语言中的概念TPL文件通常指模板文件（TemplateFile），在Go语言中主要用于HTML或其他文本的模板化处理。Go标准库提供了text/template和html/template两个包来支持模板功能。1.使用text/template处理TPL文件text/template适用于普通文本模板的生成。以下是一个简单的例子：packagemainimport("os""t</div> </li> <li><a href="/article/1939864782756704256.htm" title="前端Vue面试八股常考题（二）" target="_blank">前端Vue面试八股常考题（二）</a> <span class="text-muted">LuxTorch</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>文章目录1、VueRouter如何配置404页面？1.基础配置步骤2.高级用法2、Vue中的过滤器有哪些应用场景？Vue3如何替代？1.过滤器的核心功能2.典型应用场景3.Vue3中的替代方案3、Vue中computed和methods的区别是什么？示例对比4、什么是Vue的前端路由？如何实现？1.核心实现方式：VueRouter2.VueRouter配置步骤3.VueRouter核心功能特性5、</div> </li> <li><a href="/article/1939863019517440000.htm" title="【自然语言处理-NLP】文本预处理技术" target="_blank">【自然语言处理-NLP】文本预处理技术</a> <span class="text-muted">云博士的AI课堂</span> <a class="tag" taget="_blank" href="/search/%E5%93%88%E4%BD%9B%E5%8D%9A%E5%90%8E%E5%B8%A6%E4%BD%A0%E7%8E%A9%E8%BD%AC%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">哈佛博后带你玩转机器学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/NLP/1.htm">NLP</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E9%A2%84%E5%A4%84%E7%90%86/1.htm">数据预处理</a><a class="tag" taget="_blank" href="/search/NLP%E6%95%B0%E6%8D%AE%E9%A2%84%E5%A4%84%E7%90%86/1.htm">NLP数据预处理</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>以下内容将从基本概念到实用代码分步骤、分场景地详细介绍NLP常见文本预处理方法及其背后的思想。如果无法从外部导入数据，我们会模拟一份简易文本数据（如字符串列表），并在此基础上演示预处理代码及详细解释，确保在常规Python环境下可以运行。一、文本预处理的常见需求和作用在自然语言处理（NLP）任务（如机器学习、深度学习、大模型开发）中，原始文本数据通常会包含各种噪声，例如：多余的空格、换行符、特殊符</div> </li> <li><a href="/article/1939842101881663488.htm" title="手把手教你入门vue+springboot开发（十三）--无感token前端实现" target="_blank">手把手教你入门vue+springboot开发（十三）--无感token前端实现</a> <span class="text-muted">段鸿潭</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>文章目录前言一、前端代码实现1.登录处理2.刷新token请求增加3.请求拦截器修改4.响应拦截器修改5.测试结果二、代码逻辑优化前言上一篇我们研究了无感token刷新的实现方案以及后端代码实现，本篇我们将详细研究一下前端代码实现，前端代码实现过程中也有很多细节的地方需要注意，重点要关注前端代码编码过程中的业务逻辑处理。一、前端代码实现1.登录处理Login.vue文件中：//调用接口,完成登录l</div> </li> <li><a href="/article/1939832777197285376.htm" title="Pytest 断言基础：轻松掌握测试验证技巧" target="_blank">Pytest 断言基础：轻松掌握测试验证技巧</a> <span class="text-muted">努力搬砖的咸鱼</span> <a class="tag" taget="_blank" href="/search/%E6%8E%8C%E6%8F%A1Pytest%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/1.htm">掌握Pytest：从新手到专家</a><a class="tag" taget="_blank" href="/search/pytest/1.htm">pytest</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>概述在编写测试时，断言（assertions）是验证代码行为是否符合预期的关键工具。Pytest提供了简单且强大的断言机制，让测试变得直观易懂。本文将带你了解如何使用Pytest进行基本的断言操作，帮助你快速上手。什么是断言？断言是一种用于检查程序内部状态是否如预期的方法。如果断言失败（即条件不满足），则会抛出异常并报告错误信息，从而帮助开发者迅速定位问题所在。在Pytest中，你可以直接使用Py</div> </li> <li><a href="/article/1939826980111314944.htm" title="day45-Django RestFramework（drf）实战案例" target="_blank">day45-Django RestFramework（drf）实战案例</a> <span class="text-muted">生而自由爱而无畏</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.6DjangoRestFramework（drf）实战案例1.需求请结合上述学习的drf知识开发简易版《抽屉新热榜》。其中包含的功能如下：注册输入：手机号、用户名、密码、确认密码。登录输入：手机号或用户名+密码注意：登录成功后给用户返回token，后续请求需要在url中携带token（有效期2周）我的话题-我的话题列表-创建话题-修改话题-删除话题（逻辑删除）我的资讯-创建资讯（5分钟创建一个</div> </li> <li><a href="/article/1939822946658873344.htm" title="为什么要学习 next.js 框架 + Vercel 部署平台，因为我想把自己的 app 分享给别人。" target="_blank">为什么要学习 next.js 框架 + Vercel 部署平台，因为我想把自己的 app 分享给别人。</a> <span class="text-muted">waterHBO</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端开发太卷？不如给你的React换个“豪华座驾”和“F1赛道”**如果你像我一样，从create-react-app的时代一路走来，你一定经历过那种“甜蜜的烦恼”：React给了你一个超强的V8引擎，但造车剩下的所有事——从方向盘(路由)、底盘(项目结构)到导航系统(数据管理)——都得你自己撸。结果就是，每个项目开始前，你都在重复发明轮子，在Webpack的配置地狱里苦苦挣扎。好消息是，时代变了</div> </li> <li><a href="/article/1939817650771259392.htm" title="opc server 开发心得" target="_blank">opc server 开发心得</a> <span class="text-muted">carelg</span> <a class="tag" taget="_blank" href="/search/server/1.htm">server</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a><a class="tag" taget="_blank" href="/search/input/1.htm">input</a><a class="tag" taget="_blank" href="/search/output/1.htm">output</a><a class="tag" taget="_blank" href="/search/tags/1.htm">tags</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a> <div>这段时间公司项目上需要把数据通过OPCSERVER开放接口，在网上及CSDN上SEARCH了好久，感觉CSDN上的资料还是比较专业的，但也有做广告的,我摸索了一周时间，有点心得，并用在工程上，一下是一周体会;一：WINTECH的开发包WINTECH网站上可下载开发包，WTOPCSVR.DLL有VBVCVC#的例程，但是DEMODLL,可运行30分钟，比较容易上手，但对开发者来说不能从内核上了解OP</div> </li> <li><a href="/article/117.htm" title="Algorithm" target="_blank">Algorithm</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];</div> </li> <li><a href="/article/244.htm" title="mongoDB 复杂查询表达式" target="_blank">mongoDB 复杂查询表达式</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n</div> </li> <li><a href="/article/371.htm" title="Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space" target="_blank">Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------</div> </li> <li><a href="/article/498.htm" title="文件上传 下载 解析 相对路径" target="_blank">文件上传 下载 解析 相对路径</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a> <div>有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。 下面总结一下遇到的问题： 文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。 在上传图片，或者文件时，使用form表单来操作。 前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&</div> </li> <li><a href="/article/625.htm" title="怎么实现qq空间批量点赞" target="_blank">怎么实现qq空间批量点赞</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>纯粹为了好玩！！ 逻辑很简单 1 打开浏览器console；输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加</div> </li> <li><a href="/article/752.htm" title="判断是否为中文" target="_blank">判断是否为中文</a> <span class="text-muted">灵静志远</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87/1.htm">中文</a> <div>方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((</div> </li> <li><a href="/article/879.htm" title="一个电话面试后总结" target="_blank">一个电话面试后总结</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。 面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：   在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。   然后对list和map分别举几个类型：   list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了</div> </li> <li><a href="/article/1006.htm" title="MSSQL中Escape转义的使用" target="_blank">MSSQL中Escape转义的使用</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/MSSQL/1.htm">MSSQL</a> <div>IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL</div> </li> <li><a href="/article/1133.htm" title="一个简单的存储过程" target="_blank">一个简单的存储过程</a> <span class="text-muted">asialee</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E9%80%A0%E6%95%B0%E6%8D%AE/1.htm">构造数据</a><a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div>           今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此：            DELIMITER $$ DROP PROCEDURE IF EXISTS inse</div> </li> <li><a href="/article/1260.htm" title="annot convert from HomeFragment_1 to Fragment" target="_blank">annot convert from HomeFragment_1 to Fragment</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%8C%85%E9%94%99%E8%AF%AF/1.htm">导包错误</a> <div>创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap</div> </li> <li><a href="/article/1387.htm" title="Weblogic10两种修改端口的方法" target="_blank">Weblogic10两种修改端口的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8F%B7/1.htm">端口号</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/config.xml/1.htm">config.xml</a> <div>一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &</div> </li> <li><a href="/article/1514.htm" title="mysql 操作指令" target="_blank">mysql 操作指令</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连； 二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys</div> </li> <li><a href="/article/1641.htm" title="【Hive一】Hive入门" target="_blank">【Hive一】Hive入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive，在系统变</div> </li> <li><a href="/article/1768.htm" title="ajax 三种提交请求的方法" target="_blank">ajax 三种提交请求的方法</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jqery/1.htm">jqery</a> <div>1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v</div> </li> <li><a href="/article/1895.htm" title="mongodb开发环境下的搭建入门" target="_blank">mongodb开发环境下的搭建入门</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>  linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-</div> </li> <li><a href="/article/2022.htm" title="编程之美-最短摘要的生成" target="_blank">编程之美-最短摘要的生成</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran</div> </li> <li><a href="/article/2149.htm" title="json数据解析及typeof" target="_blank">json数据解析及typeof</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/typeof/1.htm">typeof</a><a class="tag" taget="_blank" href="/search/json%E8%A7%A3%E6%9E%90/1.htm">json解析</a> <div> // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&</div> </li> <li><a href="/article/2276.htm" title="流程系统设计的层次和目标" target="_blank">流程系统设计的层次和目标</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>                               流程系统设计的层次和目标  </div> </li> <li><a href="/article/2403.htm" title="RMAN List和report 命令" target="_blank">RMAN List和report 命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/report/1.htm">report</a><a class="tag" taget="_blank" href="/search/rman/1.htm">rman</a> <div>LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可</div> </li> <li><a href="/article/2530.htm" title="二叉树:红黑树" target="_blank">二叉树:红黑树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div>    红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &</div> </li> <li><a href="/article/2657.htm" title="C语言homework3，7个小题目的代码" target="_blank">C语言homework3，7个小题目的代码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数，</div> </li> <li><a href="/article/2784.htm" title="自定义按钮, 图片在上, 文字在下, 居中显示" target="_blank">自定义按钮, 图片在上, 文字在下, 居中显示</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>#import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa</div> </li> <li><a href="/article/2911.htm" title="MySQL查询语句练习题，测试足够用了" target="_blank">MySQL查询语句练习题，测试足够用了</a> <span class="text-muted">flyvszhb</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR</div> </li> <li><a href="/article/3038.htm" title="转：MyBatis Generator 详解" target="_blank">转：MyBatis Generator 详解</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>  MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.</div> </li> <li><a href="/article/3165.htm" title="让程序员少走弯路的14个忠告" target="_blank">让程序员少走弯路的14个忠告</a> <span class="text-muted">jingjing0907</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>  无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放</div> </li> <li><a href="/article/3292.htm" title="nginx和NetScaler区别" target="_blank">nginx和NetScaler区别</a> <span class="text-muted">流浪鱼</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方</div> </li> <li><a href="/article/3419.htm" title="第11章 动画效果（下）" target="_blank">第11章 动画效果（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3546.htm" title="FAQ - SAP BW BO roadmap" target="_blank">FAQ - SAP BW BO roadmap</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/BW/1.htm">BW</a> <div>http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i</div> </li> <li><a href="/article/3673.htm" title="关于java堆内存溢出的几种情况" target="_blank">关于java堆内存溢出的几种情况</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div>【情况一】： 　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环； 　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决： 　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx</div> </li> <li><a href="/article/3800.htm" title="Manifest.permission_group权限组" target="_blank">Manifest.permission_group权限组</a> <span class="text-muted">阿尔萨斯</span> <a class="tag" taget="_blank" href="/search/Permission/1.htm">Permission</a> <div>结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>