LoveEmiliaForever

HTML-介绍-MDN文档学习笔记

HTML-介绍

查看更多学习笔记：GitHub：LoveEmiliaForever
MDN中文官网

HTML-简介

MDN 文档引用：
就其核心而言，HTML 是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。

HTML 的主要特性总结

由不同元素组成的标记语言
标记文本片段为元素，以赋予其含义
组织文档，让其拥有逻辑结构
给予文档额外的功能性

HTML-入门

HTML-组织结构

HTML 构建的文章总体由各种元素组成，元素之间可以嵌套，且由于不同元素含有不同意义，元素之间可以拥有逻辑和排版上的结构
HTML 文章与元素之间的关系大致可以表述如下图所示

HTML-元素分类

元素的具体结构

块级元素和内联元素

块级元素在页面中以块的形式展现
- 块级元素自己独占一行，通常是页面的结构元素
- 块级元素可以嵌套在块级元素内，但不能嵌套在内联元素内
内联元素通常嵌套在块级元素内
- 内联元素不会导致换行
- 内联元素通常和文本一起使用，并带来一些效果

❕元素的类型与 CSS 中display:类型并不一样，尽管 CSS 可以改变元素的显示，但不能够改变元素的类型，也改变不了元素间包含和被包含的关系

❕HTML5 重新定义了元素的分类，原因如上所示，害怕混淆

空元素

有一些元素没有结束标签，它不包含文章片段，而是用来执行一些额外行为
例如或就是用来在文章中插入图片所使用的元素
这些元素称为空元素，如上所示在空元素标签的末尾添加/也是可行的，此时XML也可以识别该元素

HTML-元素属性

属性简介

元素的属性通常是定义元素行为或为元素添加额外信息

属性和属性、属性和标签之间以空格分隔
属性与属性值以=相连
属性值由" "包裹

属性使用示例

    <a href="github.com" title="点击前往GitHub" target="_blank">前往GitHuba>

示例元素的属性声明了元素的额外行为，与额外信息

href属性声明了跳转目的地这个额外信息
title声明了链接描述这个额外信息
target声明了跳转方式这个额外行为

布尔属性

有些属性可以不用写它的属性值，因为它只有一个和它属性名相同的属性值
这种属性称为布尔属性，通常是用于声明某种行为
如表单元素的disable属性就是布尔属性，它表示禁用此表单元素

属性值的引号问题

当元素中只有一个属性时可以不使用" "包裹属性值
但当属性不止一个时，不使用" "包裹属性值则很可能产生错误结果
可以使用" "也可以使用' '包裹属性值，可以嵌套，不能混用

HTML-文档剖析

HTML 页面的一般结构

    DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
            <title>我的测试站点title>
        head>
        <body>
            <p>这是我的页面p>
        body>
    html>

是一个历史遗留问题，现在只需把它加入 HTML 页面文档开头即可
包含了页面的所有内容，称为根元素
包含了一些有关 HTML 页面的信息，其中内容并不显示在页面
用于设置一些独特的信息，如字符集、关键字等等
</code>设置了页面的标题信息</li> <li><code><body></code>包含了所有显示在页面上的信息</li> </ul> <blockquote> <p>❕在 HTML 文档中连续的空格或换行在渲染时都仅被当成一个空格</p> </blockquote> <h4>HTML-实体引用</h4> <p>实体引用类似于转义，是用来表示特殊字符的代码<br> 常用实体引用如下表</p> <table> <thead> <tr> <th align="center">所表示字符</th> <th align="center">实体引用代码</th> <th align="center">所表示字符</th> <th align="center">实体引用代码</th> </tr> </thead> <tbody> <tr> <td align="center"><</td> <td align="center"><code><</code></td> <td align="center">></td> <td align="center"><code>></code></td> </tr> <tr> <td align="center">"</td> <td align="center"><code>"</code></td> <td align="center">’</td> <td align="center"><code>&apos</code></td> </tr> <tr> <td align="center">&</td> <td align="center"><code>&</code></td> <td align="center">空格</td> <td align="center"><code> </code></td> </tr> </tbody> </table> <h4>HTML-注释</h4> <p>只需要用<code></code>包裹起来注释内容即可创建一行 HTML 注释</p> <h3>HTML-head标签内容</h3> <h4><code><title></code>元素的使用</h4> <p><code><title></code>是用来给 HTML 文档添加标题的标签，但是和<code><h1></code>不同</p> <ul> <li><code><title></code>添加的是整个文档文件的标题</li> <li><code><h1></code>是为文档包含的内容添加标题</li> </ul> <h4><code><meta></code>元素</h4> <p><code>元数据</code>是用来描述数据的数据，HTML 中可以使用<code><meta></code>来添加元数据<br> <code><meta></code>有许多不同种类，常见的有如下一些</p> <h5>指定文档字符编码</h5> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</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> </code></pre> <p>不同的字符编码会将同一字符数据解释为不同的字符，为了兼容性考虑，使用<code>utf-8</code>是最好的<br> 虽然某些浏览器会尝试修正错误编码，但这显然不稳妥，应该要指定字符编码</p> <h5>为文档添加作者</h5> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</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>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LoveEmiliaForever<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <ul> <li><code>name</code>属性用于指定<code><meta></code>的类型</li> <li><code>content</code>属性则包含了想要写入的数据</li> </ul> <h5>给文档添加描述</h5> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</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>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</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> </code></pre> <p>给网页添加描述能够让使用者快速了解网页，并且搜索引擎也会使用该元数据</p> <blockquote> <p>❕ 许多的<code><meta></code>特性以及被弃用了，如<code><meta name="keywords" content="关键字"></code></p> </blockquote> <h5>其它类型元数据</h5> <p>某些网站是有自己的元数据协议的，也就是说某些元数据类型是专门使用在特定网站上的<br> 如 Facebook、Twitter 都有一些特有的元数据协议，用于提供扩展服务</p> <h4>自定义站点图标</h4> <p>可以在<code><head></head></code>中指定特定图片作为站点的图标（通常是<code>.ico</code>格式）<br> 可以使用下列语法指定站点图标</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></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 attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/x-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <h4>引入-CSS-文件和-JS-脚本</h4> <p>可以在<code><head></code>内通过<code><link/></code>和<code><script></code>分别引入外部 css 文件、 js 文件</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></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>css文件路径<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>js文件路径<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>给<code><script></code>添加属性<code>defer</code>即意味着告诉浏览器 “在解析完 HTML 文件后再加载 js 文件”。这样可以防止 js 在运行环境尚未完成时运行，避免出现错误</p> <h4>给文档设定主语言</h4> <p>可以通过使用<code>lang</code>属性给元素设定主语言，该属性通常是被放置在<code><html></code>内，以规定该页面的主语言</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<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>html</span><span class="token punctuation">></span></span> </code></pre> <h3>HTML-文本处理基础</h3> <h4>标题和段落</h4> <p>通过将内容包裹在<code><p></code>中可以标记一个段落<br> 通过将标题内容包裹在<code><h1></code>到<code><h6></code>内，可以定义六个等级的标题</p> <ul> <li>使用标题时应该要安排好文档的层次结构</li> <li>每个文档最好只使用一次<code><h1></code>，这是顶级标题</li> <li>标题等级最好不要跳跃式定义</li> <li>每个文档最好不要超过三个级别的标题</li> </ul> <h4>语义化的重要性</h4> <p>语义化标签可以元素赋予对应的含义，使得元素之间能够进行<code>视觉、逻辑、结构上的统一</code></p> <p>这样做的好处有很多</p> <ul> <li>使文档结构清晰，易于阅读</li> <li>让页面后续维护开发更加简单</li> <li>利于搜索引擎提取页面信息</li> </ul> <h4>列表</h4> <h5>无序列表</h5> <p>无序列表是没有顺序标签的，也就是说使用该列表时顺序应该要是无关紧要的事情<br> 如下所示，<code><ul></code>用于声明无需列表，<code><li></code>用于声明列表项</p> <pre><code class="prism language-html"> <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>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>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>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> </code></pre> <h5>有序列表</h5> <p>和无序列表相反，有序列表是有顺序标签的<br> 它们的结构相似<code><ol></code>用于声明有序列表，<code><li></code>用于声明列表项</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>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>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>ol</span><span class="token punctuation">></span></span> </code></pre> <h5>列表嵌套</h5> <p>列表之间是可以嵌套的，只需要在<code><li></code>内部插入<code><ul></code>或<code><ol></code>即可</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>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>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>li</span><span class="token punctuation">></span></span>材料A<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>材料B<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>材料C<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>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <h4>重点强调</h4> <p>HTML 中提供了一些标签用于标记文字，使得文字具有特殊效果，以达到强调文字内容的作用</p> <h5>斜体</h5> <p>可以使用<code><em></code>标记文本以获得斜体字，但是它是具有语义的元素<br> 如果仅仅只是想要斜体字，且没有代表什么含义那么就不应该使用<code><em></code>，可以使用<code><i></code>或是<code><span></code> 或 <code><mark></code> + CSS </p> <pre><code class="prism language-html"> <span class="token comment"></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>em</span><span class="token punctuation">></span></span>《哈姆雷特》<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</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 comment"></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>i</span><span class="token punctuation">></span></span>今天<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</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> </code></pre> <h5>粗体</h5> <p>语义化的粗体标签是<code><strong></code>，普通的粗体标签是<code><b></code></p> <h5>下划线</h5> <p>由于<code>超链接</code>一般会拥有下划线，所以如果要给文字添加下划线，最好定义一些独特的格式<br> 可以使用<code><u></code>定义下划线，但最好使用<code><span></code> 或 <code><mark></code> + css给下划线一个明确的语义，然后使用下划线</p> <h5>表象元素</h5> <p>HTML 中的大部分标签都是具有语义的，但有一些标签没有什么含义<br> 例如<code><i></code>、<code><b></code>、<code><u></code><br> 这些标签定义的元素叫做<code>表象元素</code>，应该减少这些标签的使用</p> <h3>超链接</h3> <h4>超链接简介</h4> <p>超链接是一个<code>地址</code>，指向<code>其它资源</code>或是<code>文档内容</code><br> 点击超链接后就可访问<code>地址</code>，以进行跳转或获取资源</p> <h4>超链接的定义</h4> <p>在 HTML 中可以使用<code><a></code>定义一个超链接，在其中还包含有一些属性以定义超链接</p> <pre><code class="prism language-html"> <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 attr-name">title</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 attr-name">target</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> </code></pre> <p><code><a></code>可以包含<code>块级元素</code>，这基本意味着它可以把任何东西作为超链接而不单单是文字</p> <h4>URL与Path</h4> <p><code>url</code>全名<code>Uniform Resource Locator</code>，它是代表了一个网络位置的字符串<br> 如<code>https://www.baidu.com</code>就是一个<code>url</code></p> <p><code>path</code>一般指本地的文件路径，是访问本地文件的一个路径，代表着文件的逻辑存放位置</p> <p>路径分为<code>相对路径</code>和<code>绝对路径</code></p> <ul> <li>绝对路径是从<code>根目录</code>开始定位文件位置的</li> <li>相对路径则是依据现处位置定位文件位置 <ul> <li>相对于现路径同级则为<code>./</code></li> <li>前往现路径的上一级为<code>../</code></li> </ul> </li> </ul> <p>定义超链接访问文章锚点</p> <ol> <li>为元素设置锚点<code>id=id名字</code></li> <li>设置<code><a></code>的<code>href</code>为<code>#id名字</code></li> <li>点击超链接即可前往对应位置</li> </ol> <h4>超链接最佳实践</h4> <ul> <li>不要使用 url 作为链接的描述</li> <li>链接的描述应该精确、简洁</li> <li>不要用一些没有意义的词描述链接</li> <li>当链接到特殊 url 时应该描述清楚（如下载，观看视频等）</li> <li>当链接到下载文件的 url 时，应该使用<code>download</code>属性指定一个默认的下载文件名</li> </ul> <h4>定义邮箱链接</h4> <p>可以更改<code>地址</code>为<code>mailto:邮件地址</code>来指向一个电子邮箱<br> 甚至可以提前指定好<code>邮件题目subject</code>、<code>收件人cc</code>、<code>邮件内容body</code></p> <pre><code class="prism language-html"> <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> mailto:邮件地址&cc=address1&cc=address2&subject=xxx&body=xxx<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> </code></pre> <blockquote> <p>❗️<code>cc</code>、<code>subject</code>、<code>body</code>中包含的信息应该要被转义过</p> </blockquote> <h3>文本处理进阶</h3> <h4>描述列表</h4> <p>除了<code>无序列表</code>和<code>有序列表</code>外，还存在着<code>描述列表</code><br> 这种列表的每一项包括<code>目标文本</code>和<code>描述文本</code>，其中<code>描述文本</code>可以有多个<br> 它的定义和其它列表也不太一样</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>被描述的东西<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>相关的一些描述，解释，介绍等等<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>被描述的东西<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>相关的一些描述，解释，介绍等等<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>被描述的东西<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>相关的一些描述，解释，介绍等等<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>相关的一些描述，解释，介绍等等<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> <h4>引用</h4> <p>HTML 有用于标记引用的标签，并且有<code>块引用</code>和<code>行内引用</code><br> 浏览器会分别给它们添加默认的样式</p> <pre><code class="prism language-html"> <span class="token comment"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">cite</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>p</span><span class="token punctuation">></span></span>引用一个 HTML 块<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>blockquote</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>p</span><span class="token punctuation">></span></span> 有一句很著名的话， <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q</span> <span class="token attr-name">cite</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>q</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> </code></pre> <p>使用<code><blockquote></code>和<code><q></code>标签虽然为文本添加引用样式，但是不能充分利用<code>cite</code>属性的内容<br> 因此，使用<code><a><cite></cite></a></code>这样的结构更能够体现引用地址</p> <pre><code class="prism language-html"> <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>cite</span><span class="token punctuation">></span></span> 《寂静的春天》 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</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> 描述了一个悲惨的世界 </code></pre> <h4>缩略语</h4> <p>在编辑文档时经常遇到<code>缩略语</code>的编写，为了防止有人不知道缩略语的意思，编写者通常会解释一遍缩略语<br> 如果使用<code><abbr></code>标签，那么当鼠标移到缩略语上时，缩略语会自动浮现出全名</p> <pre><code class="prism language-html"> <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>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hyper Text Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</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> </code></pre> <p>其中<code>title</code>属性应该填写有关缩略语的全称</p> <blockquote> <p>❕曾经有一个<code><acronym></code>也是缩略语，但它已经废弃</p> </blockquote> <h4>联系方式标记</h4> <p>可以使用<code><address></code>标记联系地址</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>address</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>123大街123号<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>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>mailto:123456@gamil.com<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>address</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>❕联系方式标记的位置要小心，不要搞错了<br> <code><address></code>标记的联系方式应该是离它最近的<code><article></code>所属<br> 或是当它放在<code><footer></code>时，它应该是整个页面的联系方式</p> </blockquote> <h4>上标、下标</h4> <p>上标的标签是<code><sup></code>，下标的标签是<code><sub></code></p> <h4>展示计算机代码</h4> <ul> <li><code><code></code>用来标记计算机通用代码</li> <li><code><pre></code>将文本包裹在其中，<code>空白字符</code>和<code>换行符</code>将以原样展示</li> <li><code><var></code>标记变量名</li> <li><code><kbd></code>标记输入</li> <li><code><samp></code>标记输出</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>下面是一段 Python 代码<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>pre</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>BAT<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span>="比亚迪，埃安，特斯拉" <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>STR<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span>=input() print(BAT,STR) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</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>kbd</span><span class="token punctuation">></span></span>我爱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>后，程序会输出<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>比亚迪，埃安，特斯拉我爱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</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> </code></pre> <h4>标记时间和日期</h4> <p>因为文本表示时间的格式太多了，因此可以把时间插入到<code><time></code>中<br> 并为它设置一个<code>机器时间</code>，以此统一时间格式</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2016-06-26<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2023年 6月 26日<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>❕注意如果时间的位数不够，要用零填补其它位置</p> </blockquote> <p>利用<code>datetime</code>设置一个机器时间</p> <h3>文档与网站架构</h3> <p>HTML 不仅能够定义一些细分的结构，也可以使用块级元素定义网页的整体架构，从而使得网页<code>规划整齐</code>、<code>可读性高</code>、<code>语义化强</code></p> <h4>文档的基本组成部分</h4> <ul> <li>页眉 <ul> <li>通常横跨网页顶部，有大标题或标志</li> <li>放置一些网站的通用信息，通常存在于每个网站页面</li> </ul> </li> <li>导航栏 <ul> <li>存放着指向网站各部分的超链接，是一个索引集</li> <li>通常不跟随页面改变而改变</li> </ul> </li> <li>主内容 <ul> <li>存放有网页的展示信息等等</li> </ul> </li> <li>侧边栏 <ul> <li>一些辅助性的功能，通常和主内容有关</li> </ul> </li> <li>页脚 <ul> <li>和页眉相似，放在网页底部</li> <li>通常放置一些声明，链接等等信息</li> </ul> </li> </ul> <p><a href="http://img.e-com-net.com/image/info8/932ad869ab5b407a8e6219427953562c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/932ad869ab5b407a8e6219427953562c.jpg" alt="HTML-介绍-MDN文档学习笔记_第3张图片" width="617" height="483" style="border:1px solid black;"></a></p> <h4>用于构建内容的HTML</h4> <p>HTML 可根据功能来为区段添加标记，使用元素来无歧义地表示内容区段</p> <table> <thead> <tr> <th align="center">标签</th> <th align="center">名字</th> <th align="center">介绍</th> </tr> </thead> <tbody> <tr> <td align="center"><code><header></code></td> <td align="center">页眉</td> <td align="center">如果是<code><main></code>的子元素那么就是网页的页眉<br>如果是<code><article></code>、<code><section></code>的子元素那么就是它们独有的页眉</td> </tr> <tr> <td align="center"><code><nav></code></td> <td align="center">导航栏</td> <td align="center">包含页眉的导航功能，但不应该包含二级链接等等</td> </tr> <tr> <td align="center"><code><main></code></td> <td align="center">主内容</td> <td align="center">存放每个页面独有的内容，每个页面仅有一个</td> </tr> <tr> <td align="center"><code><article></code></td> <td align="center">文章</td> <td align="center">包裹着一篇文章这类的，与其它部分无关</td> </tr> <tr> <td align="center"><code><section></code></td> <td align="center">大分区</td> <td align="center">组织页面的分块</td> </tr> <tr> <td align="center"><code><aside></code></td> <td align="center">侧边栏</td> <td align="center">包含有一些间接信息，辅助功能等等</td> </tr> <tr> <td align="center"><code><footer></code></td> <td align="center">页脚</td> <td align="center">放置页面的页脚，内含一些通用信息</td> </tr> <tr> <td align="center"><code><div></code></td> <td align="center">块级无语义标签</td> <td align="center">配合id、class使用</td> </tr> <tr> <td align="center"><code><span></code></td> <td align="center">内联无语义标签</td> <td align="center">配合id、class使用</td> </tr> <tr> <td align="center"><code><br></code></td> <td align="center">换行</td> <td align="center">适当的换行能够优化结构</td> </tr> <tr> <td align="center"><code><hr></code></td> <td align="center">水平线</td> <td align="center">使用水平线可以分隔不同部分</td> </tr> </tbody> </table> <blockquote> <p>❗️不要滥用<code>div</code>标签，能不用就不用</p> </blockquote> <h3>HTML-调试</h3> <p>通常的代码错误分为下列两种</p> <ul> <li>语法错误：使用错误的编写使得程序无法运行</li> <li>逻辑错误：存在逻辑上的错误使得不能产生预期结果</li> </ul> <p>因为浏览器是以<code>宽松模式</code>运行的，HTML并不容易出现导致程序停止的错误<br> 但正因如此，浏览器在修复语法错误时很可能给出非预期的结果</p> <p>在不规则语法时，可以手动查找<br> 但更好的方法是使用标记验证服务网站，让机器帮助你找到语法错误</p> <h3>HTML-语义化小项目</h3> <p>HTML-语义化-信件<br> HTML-语义化-观鸟者网</p> <footer> ` | 页脚 | 放置页面的页脚，内含一些通用信息 | | ` <div> ` | 块级无语义标签 | 配合id、class使用 | | ` ` | 内联无语义标签 | 配合id、class使用 | | ` <br>` | 换行 | 适当的换行能够优化结构 | | ` <hr>` | 水平线 | 使用水平线可以分隔不同部分 | </div> </footer> <blockquote> <p>❗️不要滥用<code>div</code>标签，能不用就不用</p> </blockquote> <h3>HTML-调试</h3> <p>通常的代码错误分为下列两种</p> <ul> <li>语法错误：使用错误的编写使得程序无法运行</li> <li>逻辑错误：存在逻辑上的错误使得不能产生预期结果</li> </ul> <p>因为浏览器是以<code>宽松模式</code>运行的，HTML并不容易出现导致程序停止的错误<br> 但正因如此，浏览器在修复语法错误时很可能给出非预期的结果</p> <p>在不规则语法时，可以手动查找<br> 但更好的方法是使用标记验证服务网站，让机器帮助你找到语法错误</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1759478080499429376"></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">  <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>  <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>  <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">你可能感兴趣的:(MDN前端入门文档,html,学习,笔记,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1886640317839503360.htm" title="LangChain Ask PDF: 构建基于大语言模型的PDF问答应用" target="_blank">LangChain Ask PDF: 构建基于大语言模型的PDF问答应用</a> <span class="text-muted">m0_75126181</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>LangChainAskPDF:构建基于大语言模型的PDF问答应用在人工智能和自然语言处理技术快速发展的今天,如何有效地处理和利用大量文本信息成为了一个重要课题。本文将介绍一个名为LangChainAskPDF的开源项目,该项目展示了如何利用LangChain和OpenAI等先进工具,构建一个能够"理解"PDF文档并回答相关问题的智能应用程序。项目概述LangChainAskPDF是一个Pytho</div> </li> <li><a href="/article/1886639435462799360.htm" title="毕设开源深度学习图像搜索算法-图像搜索引擎(源码分享)" target="_blank">毕设开源深度学习图像搜索算法-图像搜索引擎(源码分享)</a> <span class="text-muted">knooor</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE/1.htm">毕设</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>文章目录0简介1前言2图像检索介绍(1)无监督图像检索(2)有监督图像检索3图像检索步骤4应用实例最后0简介今天学长向大家分享一个毕业设计项目毕业设计深度学习图像搜索算法-图像搜索引擎(源码分享)项目运行效果：毕业设计深度学习图像搜索算法-图像搜索引擎项目分享:见文末!1前言图像检索：是从一堆图片中找到与待匹配的图像相似的图片，就是以图找图。网络时代，随着各种社交网络的兴起，网络中图片，视频数据每</div> </li> <li><a href="/article/1886638425373732864.htm" title="探索现代全栈开发新境界：AppFullStackDemo，一个基于.NET Core和微前端的综合实践" target="_blank">探索现代全栈开发新境界：AppFullStackDemo，一个基于.NET Core和微前端的综合实践</a> <span class="text-muted">颜殉瑶Nydia</span> <div>探索现代全栈开发新境界：AppFullStackDemo，一个基于.NETCore和微前端的综合实践app_fullstackdemoAppFullStackDemo:DDD/SOLID/CleanCodeApp.NetCore3.1(BackEnd)AngularMaterialPanel(FrontEnd)ReactNative(Mobile)项目地址:https://gitcode.com/</div> </li> <li><a href="/article/1886638047248838656.htm" title="网络安全学习路线图（2025版详解）" target="_blank">网络安全学习路线图（2025版详解）</a> <span class="text-muted">程序员羊羊</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a> <div>近期，大家在网上对于网络安全讨论比较多，想要学习的人也不少，但是需要学习哪些内容，按照什么顺序去学习呢？其实我们已经出国多版本的网络安全学习路线图，一直以来效果也比较不错，本次我们针对市场需求，整理了一套系统的网络安全学习路线图，供大家学习参考。希望大家按照路线图进行系统学习不仅可以更高效的完成上岸，还能够系统化学习，提升自己的后期竞争力。第一阶段：数通安全Windows系统安全1.企业资产安全规</div> </li> <li><a href="/article/1886637291624001536.htm" title="STLG_09_01_程序设计C++语言 - 概述与环境搭建" target="_blank">STLG_09_01_程序设计C++语言 - 概述与环境搭建</a> <span class="text-muted">魔都天健</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>C++是一种功能强大的编程语言，广泛应用于系统开发、游戏设计和高性能计算等领域。它继承了C语言的高效性，同时增加了面向对象的特性，如封装、继承和多态。学习C++需要先搭建开发环境，通常使用集成开发环境（IDE）如VisualStudio或Code::Blocks，安装相应的编译器（如GCC）后，即可开始编写和运行C++代码，开启编程之旅。一、简介C++是一种静态类型的、编译式的、通用的、大小写敏感</div> </li> <li><a href="/article/1886636157580668928.htm" title="几行Python代码，轻松获取美股阿里巴巴的交易数据!" target="_blank">几行Python代码，轻松获取美股阿里巴巴的交易数据!</a> <span class="text-muted">Python资深程序员</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> <div>学Python可以干很多事情，比如爬虫，数据分析，机器学习，但是有一个非常小众的分支，不仅结合了两大高薪行业，而且还薪水非常诱人，就是量化金融岗位。目前Python已经是金融行业最低的一个门槛，几乎所有从事金融证券行业的人都要学会Python。今天给大家分享如何用Python获取美股的交易数据！Python资源共享群：626017123数据获取是数据分析的第一步，找不到可靠、真实的数据，数据分析无</div> </li> <li><a href="/article/1886633885895290880.htm" title="曲线救国——uniapp封装toast消息提示组件(js)" target="_blank">曲线救国——uniapp封装toast消息提示组件(js)</a> <span class="text-muted">AGMTI</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>说明：本组件借用到uv-ui前端框架的作为消息提示，有条件的可以自己设计。另外主要用到@uni-ku/root@1.1.0。目录结构（主要文件）：安装@uni-ku/root@1.1.0npminstall-D@uni-ku/rootvite.config.js:import{defineConfig}from'vite'importunifrom'@dcloudio/vite-plugin-un</div> </li> <li><a href="/article/1886633379617632256.htm" title="Python基础语法：注释和代码风格（PEP 8）详解③" target="_blank">Python基础语法：注释和代码风格（PEP 8）详解③</a> <span class="text-muted">邓瑞军说HelloWorld</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>文章目录一、注释1.1单行注释1.2多行注释1.3文档字符串（docstrings）二、PEP8代码风格2.1缩进2.2每行字符数限制2.3空行2.4引号2.5空格2.6注释2.7命名约定2.8其他建议三、综合复杂示例四、结论在编写Python代码时，注释和代码风格是两个至关重要的方面。良好的注释能够帮助开发者更好地理解代码，提高代码的可读性和可维护性；遵循Python的官方代码风格指南（PEP8</div> </li> <li><a href="/article/1886633253369081856.htm" title="04树 + 堆 + 优先队列 + 图（D1_树（D10_决策树））" target="_blank">04树 + 堆 + 优先队列 + 图（D1_树（D10_决策树））</a> <span class="text-muted">Java丨成神之路</span> <a class="tag" taget="_blank" href="/search/06%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">06数据结构与算法</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> <div>目录一、引言二、算法原理三、算法实现四、知识小结一、引言决策树算法是一种常用的机器学习算法，可用于分类和回归问题。它基于特征之间的条件判断来构建一棵树，树的每个节点代表一个特征，每个叶节点代表一个类别或回归值。决策树算法具有简单、易于理解和解释的特点，且在处理大规模数据时具有较高的效率。本文将介绍决策树算法的基本原理，并提供了Java代码示例来说明其实现过程。二、算法原理决策树算法基于“分而治之”</div> </li> <li><a href="/article/1886633000628711424.htm" title="从零开始部署Dify：后端与前端服务完整指南" target="_blank">从零开始部署Dify：后端与前端服务完整指南</a> <span class="text-muted">engchina</span> <a class="tag" taget="_blank" href="/search/LINUX/1.htm">LINUX</a><a class="tag" taget="_blank" href="/search/Dify/1.htm">Dify</a><a class="tag" taget="_blank" href="/search/%E9%83%A8%E7%BD%B2/1.htm">部署</a> <div>从零开始部署Dify：后端与前端服务完整指南一、环境准备1.系统要求2.项目结构二、后端服务部署1.中间件启动（DockerCompose）2.后端环境配置3.依赖安装与数据库迁移4.服务启动三、前端界面搭建1.环境配置2.服务启动四、常见问题排查五、总结在AI应用开发中，Dify作为一款功能强大的工具，其部署过程涉及多个技术栈的整合。本文将详细讲解如何从零开始搭建Dify的完整环境，包括后端服务</div> </li> <li><a href="/article/1886625938142195712.htm" title="现代OpenGL学习笔记五：变换" target="_blank">现代OpenGL学习笔记五：变换</a> <span class="text-muted">不想不努力的菜菜</span> <a class="tag" taget="_blank" href="/search/OpenGL/1.htm">OpenGL</a> <div>上篇笔记中学习了给图形添加纹理，并且第一次接触到3D物体，并且应用一定的图形旋转，本篇将继续学习变换，从而将静态的物体可以移动，并将不懂的地方进行说明记录。推荐参考原文：https://learnopengl-cn.github.io/https://learnopengl-cn.github.io/01Gettingstarted/07Transformations/变换尽管我们现在已经知道了如</div> </li> <li><a href="/article/1886623291687366656.htm" title="大模型应用之基于Langchain的测试用例生成" target="_blank">大模型应用之基于Langchain的测试用例生成</a> <span class="text-muted">少喝冰美式</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B/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/%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/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BA%94%E7%94%A8/1.htm">大模型应用</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%BE%AE%E8%B0%83/1.htm">大模型微调</a> <div>一用例生成实践效果在组内的日常工作安排中，持续优化测试技术、提高测试效率始终是重点任务。近期，我们在探索实践使用大模型生成测试用例，期望能够借助其强大的自然语言处理能力，自动化地生成更全面和高质量的测试用例。当前，公司已经普及使用JoyCoder，我们可以拷贝相关需求及设计文档的信息给到JoyCoder，让其生成测试用例，但在使用过程中有以下痛点：1）仍需要多步人工操作：如复制粘贴文档，编写提示词</div> </li> <li><a href="/article/1886623164281188352.htm" title="在群晖上搭建基于 PostgreSQL 的 Joplin Server" target="_blank">在群晖上搭建基于 PostgreSQL 的 Joplin Server</a> <span class="text-muted">Ox119O1</span> <a class="tag" taget="_blank" href="/search/postgresql/1.htm">postgresql</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前言笔者一直想找一款能代替MWeb的跨平台工具，由于工作的变更，很多Mac上好用的软件在Windows平台直接无法使用……反正探索了一圈感觉Joplin看起来是不错的，笔记功能和MWeb很像，跨平台，并且笔记数据可以本地保存。恰好笔者近日购买了一台群晖的NAS，一切刚刚好，如同量身定制美滋滋。JoplinServer介绍既然决定将笔记存在本地自己的NAS上面，Joplin提供的JoplinClou</div> </li> <li><a href="/article/1886623165027774464.htm" title="教妹学 Java：异常处理机制" target="_blank">教妹学 Java：异常处理机制</a> <span class="text-muted">沉默王二</span> <a class="tag" taget="_blank" href="/search/Java%E7%A8%8B%E5%BA%8F%E5%91%98%E8%BF%9B%E9%98%B6%E4%B9%8B%E8%B7%AF/1.htm">Java程序员进阶之路</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86%E6%9C%BA%E5%88%B6/1.htm">异常处理机制</a> <div>“二哥，今天就要学习异常了吗？”三妹问。“是的。只有正确地处理好异常，才能保证程序的可靠性，所以异常的学习还是很有必要的。”我说。“那到底什么是异常呢？”三妹问。“异常是指中断程序正常执行的一个不确定的事件。当异常发生时，程序的正常执行流程就会被打断。一般情况下，程序都会有很多条语句，如果没有异常处理机制，前面的语句一旦出现了异常，后面的语句就没办法继续执行了。”“有了异常处理机制后，程序在发生异</div> </li> <li><a href="/article/1886621776738316288.htm" title="OpenGL学习笔记8——变换" target="_blank">OpenGL学习笔记8——变换</a> <span class="text-muted">lxbhahaha</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/OpenGL/1.htm">OpenGL</a><a class="tag" taget="_blank" href="/search/opengl/1.htm">opengl</a><a class="tag" taget="_blank" href="/search/glsl/1.htm">glsl</a><a class="tag" taget="_blank" href="/search/cpp/1.htm">cpp</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%BD%A2%E5%AD%A6/1.htm">图形学</a> <div>OpenGL学习笔记8——变换1概念2应用变换2.1GLM2.2给四边形应用变换1概念基本上都是线性代数的知识，矩阵的运算、向量的运算。就不多写了，挑几个关键点的记一下。点乘，向量和向量之间做点乘，结果是一个标量。点乘是通过将对应分量逐个相乘，然后再把所得积相加。相当于求投影。用来计算角度很方便，可能用在光照的计算。叉乘，向量和向量之间做叉乘，结果还是一个向量，并且这个向量会垂直于两个向量所在的平</div> </li> <li><a href="/article/1886621391235641344.htm" title="Linux - 参考文档" target="_blank">Linux - 参考文档</a> <span class="text-muted">HZero.chen</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E6%88%90%E9%95%BF/1.htm">个人成长</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>内核版本https://kernelnewbies.org/LinuxChanges查看内核版本变化邮件列表http://vger.kernel.org/vger-lists.htmlLinux邮件列表1https://lore.kernel.org/lists.htmlLinux邮件列表2http://vger.kernel.org/vger-lists.html#linux-blockLinu</div> </li> <li><a href="/article/1886620508204625920.htm" title="基于 LangChain 实现数据库问答机器人" target="_blank">基于 LangChain 实现数据库问答机器人</a> <span class="text-muted">敲代码敲到头发茂密</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E6%B5%8B%E8%AF%95%E5%BC%80%E5%8F%91/1.htm">人工智能测试开发</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><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/%E6%9C%BA%E5%99%A8%E4%BA%BA/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/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>基于LangChain实现数据库问答机器人一、简介二、应用场景三、实战案例1、需求说明2、实现思路3、对应源码一、简介在Retrieval或者ReACT的一些场景中，常常需要数据库与人工智能结合。而LangChain本身就封装了许多相关的内容，在其官方文档-SQL能力中，也有非常好的示例。二、应用场景在未出现人工智能，如果想要完成数据查询与数据分析的工作，则需要相关人员有相应的数据库的功底，而在L</div> </li> <li><a href="/article/1886620379355607040.htm" title="《算法零基础100讲》(第61讲) 前缀和(五) 二维前缀和" target="_blank">《算法零基础100讲》(第61讲) 前缀和(五) 二维前缀和</a> <span class="text-muted">英雄哪里出来</span> <a class="tag" taget="_blank" href="/search/%E3%80%8A%E7%AE%97%E6%B3%95%E9%9B%B6%E5%9F%BA%E7%A1%80100%E8%AE%B2%E3%80%8B/1.htm">《算法零基础100讲》</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%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0/1.htm">线性代数</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%BC%80%E5%92%8C/1.htm">前缀和</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E5%89%8D%E7%BC%80%E5%92%8C/1.htm">二维前缀和</a> <div>文章目录一、概念定义1、预处理2、预处理代码实现3、查询4、查询代码实现二、题目描述三、算法详解四、源码剖析五、推荐专栏六、习题练习一、概念定义有关一维前缀和的概念，在《算法零基础100讲》(第57讲)前缀和(一)线性前缀和入门中已经较为清晰的阐述，今天我们来学习二维的情况。1、预处理问题的起源就是对一个矩阵，如何在最快的时间内，求出它的某个子矩阵的和。我们首先把问题简化，对于一个n×mn</div> </li> <li><a href="/article/1886619245765259264.htm" title="30分钟入门CompletableFuture并发工具使用" target="_blank">30分钟入门CompletableFuture并发工具使用</a> <span class="text-muted">LUCIAZZZ</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%AD%A5/1.htm">异步</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a> <div>快速学习基本方法，然后30分钟直接学会CompletableFuture的使用异步处理：supplyAsync（）分析Supplier接口首先我们看看Supplier接口这是一个函数式接口，没有入参，只有一个返回值我们这段代码会在另一个线程执行然后returnpublicclassMain{publicstaticvoidmain(String[]args){CompletableFuturecf</div> </li> <li><a href="/article/1886618864268144640.htm" title="【漫话机器学习系列】079.超参数调优（Hyperparameter Tuning）" target="_blank">【漫话机器学习系列】079.超参数调优（Hyperparameter Tuning）</a> <span class="text-muted">IT古董</span> <a class="tag" taget="_blank" href="/search/%E6%BC%AB%E8%AF%9D%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%B3%BB%E5%88%97%E4%B8%93%E8%BE%91/1.htm">漫话机器学习系列专辑</a><a class="tag" taget="_blank" href="/search/%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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>超参数调优（HyperparameterTuning）是机器学习中优化模型性能的重要步骤之一。超参数是模型在训练之前设定的参数，而不是通过训练数据学习到的参数。正确地选择超参数可以显著提高模型的预测能力，反之，错误的超参数选择可能会导致过拟合、欠拟合或训练过程缓慢。1.超参数的定义超参数是控制学习过程的外部参数，不同于模型参数（例如权重和偏置），超参数不通过训练过程自动优化。常见的超参数包括：学习</div> </li> <li><a href="/article/1886618737939902464.htm" title="【漫话机器学习系列】054.极值（Extrema）" target="_blank">【漫话机器学习系列】054.极值（Extrema）</a> <span class="text-muted">IT古董</span> <a class="tag" taget="_blank" href="/search/%E6%BC%AB%E8%AF%9D%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E7%B3%BB%E5%88%97%E4%B8%93%E8%BE%91/1.htm">漫话机器学习系列专辑</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/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> <div>极值（Extrema）定义极值是数学分析和优化问题中的一个核心概念，指函数在某个定义域内取得的最大值或最小值。根据极值的性质，可以将其分为两类：局部极值（LocalExtrema）：函数在某点附近的最大值或最小值。全局极值（GlobalExtrema）：函数在整个定义域内的最大值或最小值。分类局部极大值（LocalMaximum）：若在点x=a附近存在某邻域，使得对任意x在该邻域内，满足f(x)≤</div> </li> <li><a href="/article/1886617729734078464.htm" title="自学黑客的11个步骤，零基础入门到精通，收藏这一篇就够了" target="_blank">自学黑客的11个步骤，零基础入门到精通，收藏这一篇就够了</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/%E6%95%B0%E6%8D%AE%E5%BA%93/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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>黑客攻防是一个极具魅力的技术领域，但成为一名黑客毫无疑问也并不容易。你必须拥有对新技术的好奇心和积极的学习态度，具备很深的计算机系统、编程语言和操作系统知识，并乐意不断地去学习和进步。如果你想成为一名优秀的黑客，下面是10种最重要的基础条件，请认真阅读：1.了解黑客的思维方式我们生活中用到的网站、软件等，都是由程序员编写的代码构成的。这些代码在设计的过程中，都是基于一种正向的逻辑进行的，为了实现某</div> </li> <li><a href="/article/1886612059643244544.htm" title="selenium.common.exceptions.WebDriverException: Message: unknown error: net::ERR_CONNECTION_CLOSED" target="_blank">selenium.common.exceptions.WebDriverException: Message: unknown error: net::ERR_CONNECTION_CLOSED</a> <span class="text-muted">芝麻团坚果</span> <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>https://www.cnblogs.com/lfri/p/10542797.html参照这篇重装chromedriver根据chromeF12修改代码里的headers设置</div> </li> <li><a href="/article/1886611805946572800.htm" title="全场景深度学习开源框架（MindSpore）" target="_blank">全场景深度学习开源框架（MindSpore）</a> <span class="text-muted">deepdata_cn</span> <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/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/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> <div>MindSpore是华为推出的一款全场景深度学习开源框架。旨在实现不同计算平台（如云端、边缘端、端侧）和不同硬件（如CPU、GPU、Ascend等）之间的高效协同。无论是在数据中心的大规模计算，还是在手机、物联网设备等资源受限的终端上，MindSpore都能灵活适配，充分发挥各硬件平台的性能优势，实现模型的高效训练和推理。该框架引入了自动并行技术，能够根据模型结构和硬件资源自动进行并行策略的搜索和</div> </li> <li><a href="/article/1886609598652149760.htm" title="Cisco Nexus 9000v Switch, NX-OS 10.5(2)F - 虚拟化数据中心交换机" target="_blank">Cisco Nexus 9000v Switch, NX-OS 10.5(2)F - 虚拟化数据中心交换机</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/cisco/1.htm">cisco</a> <div>CiscoNexus9000vSwitch,NX-OSRelease10.5(2)F用于网络原型设计和学习研究的虚拟化数据中心交换机请访问原文链接：https://sysin.org/blog/cisco-nexus-9000v/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgReleaseDateNX-OSSystemSoftwareReleaseDateCiscoNX-OSR</div> </li> <li><a href="/article/1886607017708154880.htm" title="Python随笔 scorecardpy笔记" target="_blank">Python随笔 scorecardpy笔记</a> <span class="text-muted">Cairne493</span> <a class="tag" taget="_blank" href="/search/Python%E5%AD%A6%E4%B9%A0/1.htm">Python学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>目录scorecardpy笔记简介运行示例详细分析各函数sc.germancredit()sc.var_fillter(...)sc.split_df(...)woebin(...)woebin_ply(...)sc.perf_eva(...)sc.scorecard(...)sc.scorecard_ply(...)sc.perf_psi()问题解决matplotlib.pyplot未安装[^3</div> </li> <li><a href="/article/1886602984775806976.htm" title="Oracle PL/SQL 编程入门：第二十二章存储代码" target="_blank">Oracle PL/SQL 编程入门：第二十二章存储代码</a> <span class="text-muted">caifox菜狐狸</span> <a class="tag" taget="_blank" href="/search/Oracle/1.htm">Oracle</a><a class="tag" taget="_blank" href="/search/PL%2FSQL/1.htm">PL/SQL</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%85%A5%E9%97%A8/1.htm">编程入门</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><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/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/pl/1.htm">pl</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Stores/1.htm">Stores</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8/1.htm">数据字典</a> <div>欢迎来到OraclePL/SQL编程入门的第二十二章！在这一章中，我们将探讨如何从数据字典获取存储代码信息、如何重载模块（包括IN和OUT参数的使用）以及相关的注意事项。通过学习这些内容，你将能够更好地管理和维护你的PL/SQL代码库，并编写更加灵活和高效的存储过程和函数。准备好迎接新的挑战了吗？让我们开始吧！第一节：从数据字典获取存储代码信息1.1USER_OBJECTS视图USER_OBJEC</div> </li> <li><a href="/article/1886601469944197120.htm" title="陆面过程中辐射的定义-总辐射辐照度、向下短波辐射、向下长波辐射" target="_blank">陆面过程中辐射的定义-总辐射辐照度、向下短波辐射、向下长波辐射</a> <span class="text-muted">永康李</span> <a class="tag" taget="_blank" href="/search/CESM/1.htm">CESM</a><a class="tag" taget="_blank" href="/search/MODIS/1.htm">MODIS</a><a class="tag" taget="_blank" href="/search/%E9%81%A5%E6%84%9F/1.htm">遥感</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录一、这个帖子的内容可能不正确，其实我也没找到正确的答案，然后就自己搜，然后根据自己的认知写的。我这里写这个笔记的目的就是把我使用的辐射记录下来，以防后面自己不知道自己是怎样下的定义；而不是让别人作为参考。如果后续有错误，或者我认知到我是错的，将会更新。同时也希望懂的人给我提建议，我愿意接受。二、概述三、向下短波辐射四、向下长短波辐射五、最后，如果有错，真心希望有人给我提意见。一、这个帖子的</div> </li> <li><a href="/article/1886600208763121664.htm" title="【机器学习】自定义数据集，使用scikit-learn 中K均值包进行聚类" target="_blank">【机器学习】自定义数据集，使用scikit-learn 中K均值包进行聚类</a> <span class="text-muted">加德霍克</span> <a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/scikit-learn/1.htm">scikit-learn</a><a class="tag" taget="_blank" href="/search/%E5%9D%87%E5%80%BC%E7%AE%97%E6%B3%95/1.htm">均值算法</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BD%9C%E4%B8%9A/1.htm">作业</a> <div>一、K均值算法简介K均值算法的目标是将数据集划分为K个簇，使得每个数据点属于离它最近的簇中心（centroid）所代表的簇。K均值聚类算法步骤①初始化：随机选择原始数据的K个数据点作为初始质心（聚类中心）。②分配：将每个数据点划分到距离最近的质心所对应的簇中，即计算每个数据点到每个质心的距离，选择距离最近的质心作为该数据点所属的簇。③更新：重新计算每个簇的质心，即将该簇中所有数据点的坐标取平均值，</div> </li> <li><a href="/article/1886596179089747968.htm" title="AI学习指南HuggingFace篇-高级优化技巧" target="_blank">AI学习指南HuggingFace篇-高级优化技巧</a> <span class="text-muted">俞兆鹏</span> <a class="tag" taget="_blank" href="/search/AI%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">AI学习指南</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>一、引言在深度学习和自然语言处理（NLP）中，模型训练的效率和性能至关重要。HuggingFace提供了多种高级优化技巧，帮助开发者提升模型训练的效率和效果。本文将介绍混合精度训练、分布式训练等高级优化技巧，并探讨如何通过这些方法提升模型训练效率。二、混合精度训练（一）混合精度训练的原理混合精度训练利用自动混合精度（AMP）技术，高效管理FP16和FP32之间的转换。通过在前向传播中使用FP16加</div> </li> <li><a href="/article/31.htm" title="312个免费高速HTTP代理IP（能隐藏自己真实IP地址）" target="_blank">312个免费高速HTTP代理IP（能隐藏自己真实IP地址）</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E9%80%9F/1.htm">高速</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9/1.htm">免费</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/HTTP%E4%BB%A3%E7%90%86/1.htm">HTTP代理</a> <div> 124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20</div> </li> <li><a href="/article/158.htm" title="pull解析和json编码" target="_blank">pull解析和json编码</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/pull%E8%A7%A3%E6%9E%90/1.htm">pull解析</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}] pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu> <name>java</div> </li> <li><a href="/article/285.htm" title="[能源与矿产]石油与地球生态系统" target="_blank">[能源与矿产]石油与地球生态系统</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a> <div> 按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的.... 那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好</div> </li> <li><a href="/article/412.htm" title="类与对象浅谈" target="_blank">类与对象浅谈</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%9F%BA%E7%A1%80/1.htm">基础</a> <div> 类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是</div> </li> <li><a href="/article/539.htm" title="新站开始被收录后，我们应该做什么？" target="_blank">新站开始被收录后，我们应该做什么？</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/seo/1.htm">seo</a> <div>新站开始被收录后，我们应该做什么？百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百</div> </li> <li><a href="/article/666.htm" title="oracle 连接碰到的问题" target="_blank">oracle 连接碰到的问题</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案作者：草根IT网来源：未知人气：813标签：导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod</div> </li> <li><a href="/article/793.htm" title="Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）" target="_blank">Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）</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/%E7%BB%A7%E6%89%BF/1.htm">继承</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC/1.htm">监听</a> <div> 都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea</div> </li> <li><a href="/article/920.htm" title="linux常用的命令" target="_blank">linux常用的命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间语法：date [OPTION]... [+FORMAT] </div> </li> <li><a href="/article/1047.htm" title="eclipse内存优化" target="_blank">eclipse内存优化</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</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> <div>一基本说明在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人</div> </li> <li><a href="/article/1174.htm" title="关键字的使用探讨" target="_blank">关键字的使用探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%85%B3%E9%94%AE%E5%AD%97/1.htm">关键字</a> <div>//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的只能在包中访问*//*final 类方法变量 final 类不能被继承 final 方法不能被子类覆盖，但可以继承 final 变量只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()</div> </li> <li><a href="/article/1301.htm" title="JS中定义对象的几种方式" target="_blank">JS中定义对象的几种方式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div> 1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object(); </div> </li> <li><a href="/article/1428.htm" title="表驱动法实例" target="_blank">表驱动法实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E9%A9%B1%E5%8A%A8%E6%B3%95/1.htm">表驱动法</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T</div> </li> <li><a href="/article/1555.htm" title="LInux启停重启常用服务器的脚本" target="_blank">LInux启停重启常用服务器的脚本</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改 #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo</div> </li> <li><a href="/article/1682.htm" title="【HBase六】REST操作HBase" target="_blank">【HBase六】REST操作HBase</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作 1. 启动和停止HBase REST 服务 1.1 启动REST服务前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start 后台启动 hbase-daemon.sh start rest 启动时指定</div> </li> <li><a href="/article/1809.htm" title="大话zabbix 3.0设计假设" target="_blank">大话zabbix 3.0设计假设</a> <span class="text-muted">ronin47</span> <div>What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个： :: Performance improvements::Trigger related da</div> </li> <li><a href="/article/1936.htm" title="http错误码大全" target="_blank">http错误码大全</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/http%E5%8D%8F%E8%AE%AE/1.htm">http协议</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div>响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求 </div> </li> <li><a href="/article/2063.htm" title="J2EE设计模式-Intercepting Filter" target="_blank">J2EE设计模式-Intercepting Filter</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/%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> <div>Intercepting Filter类似于职责链模式有两种实现其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;</div> </li> <li><a href="/article/2190.htm" title="修改jboss端口" target="_blank">修改jboss端口</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>修改jboss端口 %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml 中找到  </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>