江帅帅
江帅帅

《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/1830471824861917184.htm" title="蓝色炫酷碎粒子HTML5导航源码" target="_blank">蓝色炫酷碎粒子HTML5导航源码</a> <span class="text-muted">酷爱码</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>源码介绍蓝色炫酷碎粒子HTML5导航源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面效果预览源码获取蓝色炫酷碎粒子HTML5导航源码</div> </li> <li><a href="/article/1830461107014299648.htm" title="我的创作纪念日" target="_blank">我的创作纪念日</a> <span class="text-muted">喵喵的柠檬汁</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>机缘怎么说呢，我的第一篇博客是《HTML5的web工作线程》，当时看完《HeadFirstHTML5Programming》就在想，要是我当时在社团学习的时候碰到这本书，那不是嘎嘎乱杀，登上老大宝座，不得不说，我被这本书代入式的情景教学和幽默风趣的语言风格所深深吸引了，这里也要感谢幕后的翻译工作者。当时的这篇博客更像是一篇简单学习笔记，根本谈不上是技术博客，但那时动手实践和发第一篇博客的激动，却为</div> </li> <li><a href="/article/1830456405056909312.htm" title="h5在ios qq浏览器打开图片不显示" target="_blank">h5在ios qq浏览器打开图片不显示</a> <span class="text-muted">O蚂蚁O</span> <div>把图片链接改变成https即可：纯前端实现代码：1、在vue项目的main.js添加过滤器：//图片过滤Vue.filter('imgHost',function(value){varimgStrArr=value.split("?");//console.log(imgStrArr[0]);varhttpHead=imgStrArr[0].split(":");if(httpHead[0]=="</div> </li> <li><a href="/article/1830455770664235008.htm" title="html()" target="_blank">html()</a> <span class="text-muted">知识分享share</span> <div>$(document).ready(function(){$("div").html("欢迎学校jquery!");})</div> </li> <li><a href="/article/1830454932680044544.htm" title="WordPress 后台缓存插件：WP Admin Cache提高缓存页面" target="_blank">WordPress 后台缓存插件：WP Admin Cache提高缓存页面</a> <span class="text-muted">818源码资源站</span> <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD00818.cn/1.htm">源码下载00818.cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD818%E8%B5%84%E6%BA%90%E7%AB%99/1.htm">源码下载818资源站</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>使用WordPress建站会安装一些静态缓存插件，比如：WPRocket、CacheEnabler、CometCache、W3TotalCache、WPSuperCache、WPFastestCache、HyperCache等等，这些都用于缓存前端。今天介绍一款专门用于缓存后台的插件：WPAdminCache。启用后，提速效果还是很明显，比如后台所有文章页面秒开。缓存会在更新文章、保存设置、保存小</div> </li> <li><a href="/article/1830454050815045632.htm" title="加密与安全_前后端通过AES-CBC模式安全传输数据" target="_blank">加密与安全_前后端通过AES-CBC模式安全传输数据</a> <span class="text-muted">小小工匠</span> <a class="tag" taget="_blank" href="/search/%E3%80%90%E5%8A%A0%E5%AF%86%E4%B8%8E%E5%AE%89%E5%85%A8%E3%80%91/1.htm">【加密与安全】</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/AES-CBC/1.htm">AES-CBC</a> <div>文章目录Pre概述前端加密是否有意义？环境准备加密方法、MODE和PADDING的选择前端后端应用：从传输到解密的全过程安全性增强动态生成密钥和初始向量1.前端：动态生成密钥和IV2.后端：解密动态密钥和IV结语Pre加密与安全_解密AES加密中的IV和Seed加密与安全_双向RSA+AES加密及Code实现加密与安全_常见的分组密码ECB、CBC、CFB、OFB模式介绍概述当我们在前端和后端之间</div> </li> <li><a href="/article/1830452036005621760.htm" title="nginx部署前端vue项目" target="_blank">nginx部署前端vue项目</a> <span class="text-muted">iangyu</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Nginx上部署Vue.js前端项目相对简单，通常包括以下几个步骤：1.构建Vue.js项目首先，你需要将Vue.js项目打包为静态文件。npmrunbuild这将生成一个dist文件夹，里面包含了你的Vue.js应用的所有静态资源。2.安装Nginx在服务器上安装Nginx。如果你使用的是Ubuntu，可以使用以下命令安装：sudoaptupdatesudoaptinstallnginx3.配</div> </li> <li><a href="/article/1830448280153190400.htm" title="javascript模板" target="_blank">javascript模板</a> <span class="text-muted">wanggs</span> <div>模板DocumentClick{{title}}{{content}}$(function(){$("#btn").click(function(){varhtml=$("#template").html();html=html.replace("{{id}}",Math.random());html=html.replace("{{title}}","Hello,"+newDate().getT</div> </li> <li><a href="/article/1830443466828640256.htm" title="javascript网页设计案例" target="_blank">javascript网页设计案例</a> <span class="text-muted">Min_nna</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jquery%E5%8A%9F%E8%83%BD/1.htm">jquery功能</a><a class="tag" taget="_blank" href="/search/ai%E5%88%86%E6%9E%90/1.htm">ai分析</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>以下是一些使用JavaScript进行网页设计的案例，这些案例展示了JavaScript在前端开发中的强大功能和灵活性。每个案例都包含了基本的实现思路和代码示例。图片画廊（ImageGallery）功能：展示一组图片，并支持点击放大查看。实现思路：使用HTML和CSS创建图片网格。使用JavaScript处理图片点击事件，显示放大的图片。代码示例：ImageGallery×consti</div> </li> <li><a href="/article/1830434639743905792.htm" title="Nginx部署前端Vue项目" target="_blank">Nginx部署前端Vue项目</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>在使用Nginx部署前端Vue项目时，我们主要关注的是如何高效地将静态资源（HTML、CSS、JavaScript、图片等）提供给客户端浏览器。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Nginx作为一个高性能的HTTP和反向代理服务器，非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目，包括环境准备、Vue项目构建、Nginx配置、部署过程以及</div> </li> <li><a href="/article/1830421409759850496.htm" title="简单易上手的生成对抗网络" target="_blank">简单易上手的生成对抗网络</a> <span class="text-muted">茶冻茶茶</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%88%90%E5%AF%B9%E6%8A%97%E7%BD%91%E7%BB%9C/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/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a> <div>模型原理生成对抗网络是指一类采用对抗训练方式进行学习的深度生成模型，包含的判别网络和生成网络都可以根据不同的生成任务使用不同的网络结构。生成器：通过机器生成数据，最终目的是骗过判别器。判别器：判断这张图像是真实的还是机器生成的，目的是找出生成器做的假数据。构建GAN模型的基本逻辑：现实问题需求→建立实现功能的GAN框架(编程)→训练GAN(生成网络、对抗网络)→成熟的GAN模型→应用。GAN训练过</div> </li> <li><a href="/article/1830419013977600000.htm" title="使用 Nginx 部署前端 Vue 项目" target="_blank">使用 Nginx 部署前端 Vue 项目</a> <span class="text-muted">vvvae1234</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在这篇文章中，我们将深入探讨如何使用Nginx部署一个Vue.js前端项目。Vue是一个流行的前端JavaScript框架，而Nginx则是一个性能卓越的Web服务器和反向代理服务器。通过将这两者结合起来，我们可以高效地托管我们的前端应用。一、环境准备在开始部署之前，我们需要确保我们的环境中已安装以下软件：Node.js和npm：用于构建Vue项目。VueCLI：用于快速创建Vue项目。Nginx</div> </li> <li><a href="/article/1830415106148757504.htm" title="jQuery实现前端下载功能" target="_blank">jQuery实现前端下载功能</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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>js实现前端下载功能前端代码html代码导出明细js代码functionexportExcel(){//定义要发送的参数letpostData=$("#searchForm").serializeObject();//发送POST请求fetch('${ctxPO}/url/PosInvoiceUrlController/exportPosInvoice',{method:'POST',body:J</div> </li> <li><a href="/article/1830414349781528576.htm" title="unity3d引擎缓存优化技术_unity3d优化总结篇" target="_blank">unity3d引擎缓存优化技术_unity3d优化总结篇</a> <span class="text-muted">weixin_39732991</span> <a class="tag" taget="_blank" href="/search/unity3d%E5%BC%95%E6%93%8E%E7%BC%93%E5%AD%98%E4%BC%98%E5%8C%96%E6%8A%80%E6%9C%AF/1.htm">unity3d引擎缓存优化技术</a> <div>转自http://www.unitymanual.com/thread-21597-1-1.html此总结由自己经验及网上收集整理优化内容包括：1.代码方面；2.函数使用方面；3.ngui注意方面；4.数学运算方面；5.内存方面；6.垃圾回收方面等等...本着相互交流共同进步的原则好了，总结如下：1.尽量避免每帧处理,可以每隔几帧处理一次比如：[C#]纯文本查看复制代码functionUpdate</div> </li> <li><a href="/article/1830409935008133120.htm" title="使用Nginx部署前端Vue项目" target="_blank">使用Nginx部署前端Vue项目</a> <span class="text-muted">bigbig猩猩</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>在使用Nginx部署前端Vue项目时，我们主要关注的是如何高效地将静态资源（HTML、CSS、JavaScript、图片等）提供给客户端浏览器。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Nginx作为一个高性能的HTTP和反向代理服务器，非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目，包括环境准备、Vue项目构建、Nginx配置、部署过程以及</div> </li> <li><a href="/article/1830406811560275968.htm" title="新手小白如何开展副业?操作简单好上手的副业分享!" target="_blank">新手小白如何开展副业?操作简单好上手的副业分享!</a> <span class="text-muted">测评君高省</span> <div>今年疫情的影响导致很多人产生了危机感，不再觉得工作会一直保持稳定。现在，探索副业成为一种潮流，与之相伴的事一个很酷的词，叫做“斜杠青年”。面对这次严峻的挑战，我们要做的是想尽办法，提高自己的工作效率和工作能力，把自己的工作做好之余，去寻找更多的可能。那么，小白如何通过副业赚钱？1、探索副业赚钱模式：在我们探索副业的时候，要找到自己兴趣和市场需求的结合点。比如说你的爱好是写作，那么就可以兼职做自媒体</div> </li> <li><a href="/article/1830399088420548608.htm" title="前端框架与库的区别：深入解析与实战指南" target="_blank">前端框架与库的区别：深入解析与实战指南</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8Bhtml/1.htm">前端基础入门三大核心之html</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/H5/1.htm">H5</a> <div>前端框架与库的区别：深入解析与实战指南基本概念和作用框架库功能使用思路与代码示例示例一：使用React框架构建组件示例二：使用Lodash库进行数据处理示例三：使用Vue.js框架进行双向数据绑定实际工作中的使用技巧经验分享自行拓展内容在前端开发领域，框架（Framework）和库（Library）是两个经常被提及但又容易混淆的概念。它们都是构建Web应用程序的重要工具，但各自拥有不同的设计哲学和</div> </li> <li><a href="/article/1830399087422304256.htm" title="前端开发中的单元测试与端到端测试：全面解析与实战指南" target="_blank">前端开发中的单元测试与端到端测试：全面解析与实战指南</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8Bhtml/1.htm">前端基础入门三大核心之html</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/H5/1.htm">H5</a> <div>前端开发中的单元测试与端到端测试：全面解析与实战指南引言单元测试：基础与实践基本概念目的与优势实战演练示例一：加法功能单元测试扩展视角端到端测试：场景与执行基本概念目的与优势实战演练示例二：登录流程端到端测试扩展视角结合经验的技巧分享引言在现代前端开发中，测试是保证代码质量和维护系统稳定性不可或缺的一环。单元测试（unittesting）与端到端测试（end-to-endtesting）是两种常用</div> </li> <li><a href="/article/1830398960100012032.htm" title="前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南" target="_blank">前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8Bhtml/1.htm">前端基础入门三大核心之html</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83/1.htm">前端三大核心</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a> <div>前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中，选择合适的图像格式是至关重要的一步，它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式</div> </li> <li><a href="/article/1830396312865042432.htm" title="DOM 方法：深入解析与实用指南" target="_blank">DOM 方法：深入解析与实用指南</a> <span class="text-muted">wjs2024</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>DOM方法：深入解析与实用指南引言文档对象模型（DOM）是Web开发中的一个核心概念，它为HTML和XML文档提供了一个结构化的表述方式。DOM方法则是操作这些文档的接口，允许开发者添加、删除和修改页面元素。本文将深入探讨DOM方法，并提供实用的指南，帮助读者更好地理解和应用这些方法。DOM基础在深入了解DOM方法之前，我们需要掌握一些DOM的基础知识。DOM将HTML或XML文档表示为树形结构，</div> </li> <li><a href="/article/1830394046116360192.htm" title="python3爬虫——贴吧实战" target="_blank">python3爬虫——贴吧实战</a> <span class="text-muted">没耕过田的牛</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>初学者之贴吧爬虫一、思路二、步骤1.引入库2.载入网页数据3.分析结构提取信息4.将结果写入txt文件中三、封装四、总结一、思路明确目的及需求，以剑来吧为例。本次实例练习准备爬取“剑来吧”每个帖子的标题、帖子链接、发帖作者、发帖时间、回帖数量，那么拿到网页，二话不说先进入开发者模式先观察html文档结构——找规律。因为直接在网页源码上看很难看出结构特征，可以将源码粘贴到工作区排版后再进一步观察，很</div> </li> <li><a href="/article/1830392281736245248.htm" title="python网络爬虫（二）——数据的清洗与组织" target="_blank">python网络爬虫（二）——数据的清洗与组织</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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>  学会了网络爬虫发送请求后，我们可以获得一段目标的HTML代码，但是还没有把数据提取出来，接下来需要进行数据的清洗与组织。foritemindata:result={'title':item.get_test(),'link':item.get('href')}print(result)  首先明确要提取的数据是标题和链接，标题在a标签中，提取标签的正文用get_text()方法；链接在a标签的</div> </li> <li><a href="/article/1830391397795065856.htm" title="SpringBoot项目集成数据脱敏（密码加密）功能" target="_blank">SpringBoot项目集成数据脱敏（密码加密）功能</a> <span class="text-muted">明明在干嘛</span> <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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><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%E8%84%B1%E6%95%8F/1.htm">数据脱敏</a><a class="tag" taget="_blank" href="/search/jasypt/1.htm">jasypt</a><a class="tag" taget="_blank" href="/search/AES/1.htm">AES</a> <div>代码连接【https://gitee.com/pengmqqq/sensitive-data-encryption】介绍后端敏感数据加密的一些解决方案，包括：配置文件敏感数据加解密前端传输敏感数据加解密数据库获取的敏感数据加解密软件架构配置文件数据脱敏：Jasypt+AES前后端传输以及数据库存储数据脱敏：AOP+AES使用说明配置文件数据脱敏将需要脱敏的数据进行加密之后再放入配置文件（注意要使用</div> </li> <li><a href="/article/1830373244272734208.htm" title="Selenium + Python 自动化测试14（发送报告）" target="_blank">Selenium + Python 自动化测试14（发送报告）</a> <span class="text-muted">立黄昏粥可温</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E6%B5%8B%E8%AF%95/1.htm">模块测试</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a> <div>我们的目标是：按照这一套资料学习下来，大家可以独立完成自动化测试的任务。上一篇我们讨论了使用HTMLTestRunner生成HTML报告的方法。本篇文章我们接着讲生成HTML报告是否可以自动邮件发送出去，提高我们测试报告的及时性，方便性，避免自己手动操作发送。1、SMTP介绍SMTP:simplemailtransferprotocol简单邮件传输协议。是一组由源地址到目的地址传送邮件的规则。py</div> </li> <li><a href="/article/1830363289356431360.htm" title="微信小程序利用canva进行大图片压缩" target="_blank">微信小程序利用canva进行大图片压缩</a> <span class="text-muted">kaka-333</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>找了很多方法没找到合适的图片压缩第三方库，有没有推荐的微信小程序压缩图片的第三方库呀（有的话，互帮互助，感谢）我自己写了个简易的压缩方法，其实就是等比例的缩小图片，并把png转为jpg，毕竟png的颜色太多。wxml:js：canvasCompress(obj,n){let{tempFiles}=this.datalet_this=thisreturnnewPromise((resolve,rej</div> </li> <li><a href="/article/1830350556338679808.htm" title="如何设置element ui选择结束时间为23:59:59？" target="_blank">如何设置element ui选择结束时间为23:59:59？</a> <span class="text-muted">weixin_42220130</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4/1.htm">时间</a><a class="tag" taget="_blank" href="/search/%E7%BB%93%E6%9D%9F/1.htm">结束</a> <div>两个方法，不过都是针对于传值给后端做的处理，不包括前端展示1每次发送请求时更改结束时间给后端//请求函数getDataList(){this.dataListLoading=true;//请求参数手动更改if(this.searchForm.timeArray.length===2&&this.searchForm.timeArray[1]!==""){this.searchForm.timeAr</div> </li> <li><a href="/article/1830348414047580160.htm" title="vue之MVC与MVVM区别" target="_blank">vue之MVC与MVVM区别</a> <span class="text-muted">火红_</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</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/javascript/1.htm">javascript</a> <div>、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、MVC：M-model-模型：数据处理（数据库、接口）V-view-视图：用户界面、页面（HTML编写的）C-control-控制器：编写js业务逻辑例如：从页面view层触发一个按钮获取数据，就会向C控制器层请求自己需要的数据，而C控制器就会向M模型层请求数据，M模型层就会把数据传给C，C再传给V视图层。MVVM：M-model-</div> </li> <li><a href="/article/1830340979626962944.htm" title="html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇)" target="_blank">html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇)</a> <span class="text-muted">游苏昱</span> <a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80%E5%8F%8Ajs%E8%84%9A%E6%9C%AC%E5%9F%BA%E7%A1%80/1.htm">html语言及js脚本基础</a> <div>什么是变量？变量是用于存储信息的容器变量的声明语法：var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头；变量也能以$和_符号开头(不过我们不推荐这么做)；变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾。有个好的编码习惯，都要以;结尾数据类型在JavaScript中，一段信息就是一个值(value)。</div> </li> <li><a href="/article/1830324465972637696.htm" title="vim 简易配置" target="_blank">vim 简易配置</a> <span class="text-muted">raoxu_1154492168</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>setnocompatiblesetbackspace=2"--------------display-----------------setnu"行号syntaxon"语法高亮setruler"显示当前行和列setshowcmd"显示部分命令setshowmode"最后一行显示当前模式"setmatch"显示括号匹配"--------------display-----------------"</div> </li> <li><a href="/article/1830296610773495808.htm" title="JavaScript 模块化开发：ES6 模块与 CommonJS 的对比与应用" target="_blank">JavaScript 模块化开发：ES6 模块与 CommonJS 的对比与应用</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</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在发展过程中出现了多种模块化规范，其中最为广泛使用的有ES6模块（也称为ESModules）和CommonJS模块规范。本文将从原理、语法、应用场景和两者对比等多个方面深入探讨这两种模块化规范，帮助开发者更好地理解和应用</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>