酷飞飞

day27 学习HTML-01天

1 HTML入门

1.1 初识HTML

1.1.1 概述

网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。

网页的构成
- HTML：通常用来定义网页内容的含义和基本结构。
- CSS：通常用来描述网页的表现与展示效果。
- JavaScript：通常用来执行网页的功能与行为。

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。

所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。

所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如,等。

HTML发展简史【了解】
- HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML5 —— 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5的支持。

扩展资料：

w3c是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。

1.1.2 HTML的组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

1）标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。例如：

<h1>今天是个好日子h1>

在HTML中，

标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

显示效果如下：

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。例如：

<h1 align="center">今天是个好日子!!!h1>

在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示居中。

显示效果如下：

1.2 入门案例

1.2.1 初始页面

1）创建一个标准的初始化页面

右键点击创建新页面

自定义文件名字，比如index

点击ok，页面创建成功。

2）页面说明

: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，是最短的有效的文档声明。
文字作为了解资料

很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：
```
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。
：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。
：头部标签 这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于元素的内容。目前主要了解两个标签：
1. ：设置字符集 这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。
2. </code>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。</li> </ol> </li> <li> <code><body></code>：身体标签 包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。 </li> </ol> <h3>1.2.2 案例实现</h3> <ol> <li> 在初始化页面的<code><body></code>标签中，加入一对<code></code> 标签。<code></code>标签表示文本的一个段落，具有整段文本之间相分离的效果。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> </body> </html> </code></pre> </li> <li> 在一对<code></code> 标签中，编写文本内容。 <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> <p>这是第一个页面</p> </body> </html> </code></pre> </li> <li> 打开浏览器查看，效果如下： </li> </ol> <a href="http://img.e-com-net.com/image/info8/55902e1f64c342dd9431c5c31292919b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/55902e1f64c342dd9431c5c31292919b.jpg" alt="day27 学习HTML-01天_第9张图片" width="650" height="238" style="border:1px solid black;"></a> <h2>1.3 总结</h2> <ul> <li> HTML是一种标记语言，用来组织页面，使用元素和属性。 </li> <li> 这个元素的主要部分有： </li> </ul> <ol> <li>元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。</li> <li>开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。</li> <li>结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。</li> <li>内容（Content）：元素的内容，本例中就是所输入的文本本身。</li> <li>属性（Attribute）：标签的附加信息。</li> </ol> <ul> <li>在学习HTML时，要抓住两个方面：</li> </ul> <ol> <li>掌握标签所代表的含义。</li> <li>掌握在标签中加入的属性的含义。</li> </ol> <h1>2 基本语法</h1> <h2>2.1 关于注释</h2> 如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。 为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来，比如： <pre><code class="prism language-html"><p>我在注释外！</p>  </code></pre> <h2>2.2 关于标签</h2> <h3>2.2.1 空元素</h3> 不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例子如下： <pre><code class="prism language-html">第一行文档<br/> 第二行文档<br/> </code></pre> <h3>2.2.2 嵌套元素</h3> 你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调<code>第一个</code>，可以将<code></code>标签包围第一个，这样<code>b标签</code>就是嵌套在了<code>p标签</code>中： <pre><code class="prism language-html"><p>这是<b>第一个</b>页面</p> </code></pre> <h3>2.2.3 块级和行内</h3> <h4>1）概念</h4> 在HTML中有两种重要元素类别，块级元素和内联元素。 <ul> <li> 块级元素： 独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<code></code> ，<code><hr></code>，<code><li></code> ，<code><div></code>等。 </li> <li> 行内元素 行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<code></code>，<code><a></code>，<code></code>，<code></code> 等。 <blockquote> 注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。 </blockquote> </li> </ul> <h4>2）div和span</h4> <ul> <li> <code><div></code> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。 </li> <li> <code></code> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。 <blockquote> 注意：div和span在页面布局中有重要作用。 </blockquote> </li> </ul> <h2>2.3 关于属性</h2> <blockquote> 【重点讲解】 属性作为HTML的重要部分，这里强调属性的格式和作用。 </blockquote> 标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以<code>name = value</code>的格式展现。 <ul> <li> 属性名：同一个标签中，属性名不得重复。 </li> <li> 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。 </li> <li> 引号：双引号是最常用的，不过使用单引号也没有问题。 </li> <li> 常用属性： <table> <thead> <tr> <th>属性名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>class</td> <td>定义元素类名，用来选择和访问特定的元素</td> </tr> <tr> <td>id</td> <td>定义元素唯一标识符，在整个文档中必须是唯一的</td> </tr> <tr> <td>name</td> <td>定义元素名称，可以用于提交服务器的表单字段</td> </tr> <tr> <td>value</td> <td>定义在元素内显示的默认值</td> </tr> <tr> <td>style</td> <td>定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）</td> </tr> </tbody> </table></li> </ul> <h2>2.4 特殊字符</h2> <blockquote> 了解讲解： 内容简单，迅速带过。 </blockquote> 在HTML中，字符 <code><</code>, <code>></code>,<code>"</code>,<code>'</code> 和 <code>&</code> 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢 <table> <thead> <tr> <th>原义字符</th> <th>等价字符引用</th> </tr> </thead> <tbody> <tr> <td><</td> <td><code><</code></td> </tr> <tr> <td>></td> <td><code>></code></td> </tr> <tr> <td>"</td> <td><code>"</code></td> </tr> <tr> <td>’</td> <td><code>'</code></td> </tr> <tr> <td>&</td> <td><code>&</code></td> </tr> <tr> <td>空格</td> <td><code> </code></td> </tr> </tbody> </table> <h2>2.5 总结</h2> HTML的基本语法比较简单，在使用的过程中注意写法即可。 <h1>3 HTML案例-新闻文本</h1> <blockquote> 重点讲解： <ol> <li>div布局的基本方式</li> <li>文本标签的基本使用</li> </ol> </blockquote> 文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。 <h2>3.1 案例效果</h2> 显示新闻文本。 <a href="http://img.e-com-net.com/image/info8/14993d3cab364242b990a1856f003d72.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/14993d3cab364242b990a1856f003d72.jpg" alt="day27 学习HTML-01天_第10张图片" width="650" height="284" style="border:1px solid black;"></a> <h2>3.2 案例分析</h2> <h3>3.2.1 div样式布局</h3> 文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。 在head标签中，通过style标签加入样式。 基本格式： <pre><code class="prism language-css">格式: <style> 标签名{ 属性名:属性值; } </style> </code></pre> 多个属性名格式： <pre><code class="prism language-html"><style> 标签名{ 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3; } </style> </code></pre> 代码实现： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> div{ /*显示边框 1px是一个像素点 solid是实现 red红色*/ border: 1px solid red; /*width是宽度占屏的60%*/ width: 60%; /*高度500像素点*/ height: 500px; /*边框外边据 auto是自适应*/ margin: auto; } </style> </head> <body> <div >这是第一个div</div> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/af4db08dac1941c8a2f836cd3357770d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/af4db08dac1941c8a2f836cd3357770d.jpg" alt="day27 学习HTML-01天_第11张图片" width="650" height="268" style="border:1px solid black;"></a> div的多样式： 一个属性名可以含有多个值，同时设置多样式。 格式: <pre><code class="prism language-html"><style> 标签名{ 属性名:属性值1 属性值2 属性值3; } </style> </code></pre> <blockquote> 【提示】 为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。 </blockquote> <h3>3.2.2 文本标签</h3> 使用文本内容标签设置文字基本样式。 <table> <thead> <tr> <th>标签名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>p</td> <td>表示文本的一个段落</td> </tr> <tr> <td>h</td> <td>表示文档标题，<code><h1>–<h6></code> ，呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低</td> </tr> <tr> <td>hr</td> <td>表示段落级元素之间的主题转换，一般显示为水平线</td> </tr> <tr> <td>li</td> <td>表示列表里的条目。</td> </tr> <tr> <td>ul</td> <td>表示一个无序列表，可含多个元素，无编号显示。</td> </tr> <tr> <td>ol</td> <td>表示一个有序列表，通常渲染为有带编号的列表</td> </tr> <tr> <td>em</td> <td>表示文本着重，一般用斜体显示</td> </tr> <tr> <td>strong</td> <td>表示文本重要，一般用粗体显示</td> </tr> <tr> <td>font</td> <td>表示字体，可以设置样式（已过时）</td> </tr> <tr> <td>i</td> <td>表示斜体</td> </tr> <tr> <td>b</td> <td>表示加粗文本</td> </tr> </tbody> </table> 代码实现： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签演示</title> </head> <body>  <p>测试1</p> <p>测试2</p>  <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>  <hr size="4" color="red"/>  <ul type="circle"> <li>javaEE</li> <li>HTML</li> </ul>  <ol type="1" start="10"> <li>第一</li> <li>第二</li> </ol>  <i>我倾斜了</i> <em>我倾斜了</em> <br/>  <strong>加粗文本</strong> <b>加粗文本</b> <br/>  <font size="5" color="yellow">这是一段文字</font> </body> </html> </code></pre> 重点演示li的不换行效果： <pre><code class="prism language-css">li{ display: inline; // 内联样式,有宽度,无高度} li{ display: inline-block; // 内联样式,有宽度,有高度} </code></pre> <h2>3.3 使用标签</h2> <ol> <li>简单布局，使用div标签。</li> <li>文本样式，使用基本文本标签。</li> </ol> <h2>3.4 实现步骤</h2> <ol> <li>创建初始页面。</li> <li>使用div标签划分区域（标题，作者，副标题，正文），设置div样式。</li> <li>编辑正文。 <ol> <li>使用h1标签加入标题。</li> <li>使用em标签加入作者信息。</li> <li>使用hr标签加入分割线。</li> <li>使用h3标签加入副标题。</li> <li>使用p标签加入正文。</li> <li>使用ol标签，li标签加入列表信息。</li> <li>使用strong标签，加入文字强调效果。</li> </ol> </li> </ol> <h1>4 HTML案例-头条页面</h1> <h2>4.1 案例效果</h2> <a href="http://img.e-com-net.com/image/info8/c5c87624879147bfb1e55d9d00b8d70b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5c87624879147bfb1e55d9d00b8d70b.jpg" alt="day27 学习HTML-01天_第12张图片" width="650" height="942" style="border:1px solid black;"></a> <h2>4.2 案例分析</h2> <h3>4.2.1 div布局的进阶</h3> <a href="http://img.e-com-net.com/image/info8/5783c512299b48fb800c2ffc590a98e0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5783c512299b48fb800c2ffc590a98e0.jpg" alt="day27 学习HTML-01天_第13张图片" width="650" height="231" style="border:1px solid black;"></a> 想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。 <h4>1）div的class值</h4> 首先编写三个div，设置边框样式 <pre><code class="prism language-html"><style> div{ border: 1px solid blue;} </style> <div >left</div> <div >center</div> <div>right</div> </code></pre> <a href="http://img.e-com-net.com/image/info8/1373b2f783e440ba9e1cda5bf6296b12.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1373b2f783e440ba9e1cda5bf6296b12.jpg" alt="day27 学习HTML-01天_第14张图片" width="650" height="128" style="border:1px solid black;"></a> 发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？ 使用class的值，格式： <pre><code class="prism language-html"> .class值{ 属性名:属性值; } <标签名 class="class值"> 提示: class是自定义的值 </code></pre> 所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。 <h4>2）浮动布局和清除</h4> 主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入<code>浮动</code> 属性。 <ul> <li> 概念 float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。 格式： <pre><code class="prism language-css"> float：none；不浮动 float：left；左浮动 float：right；右浮动  clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。 </code></pre> </li> </ul> <ol> <li>加入三部分div</li> </ol> <pre><code class="prism language-html"><div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </code></pre> <a href="http://img.e-com-net.com/image/info8/30bb087cabb84ec599374cfddfe8d164.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/30bb087cabb84ec599374cfddfe8d164.png" alt="day27 学习HTML-01天_第15张图片" width="712" height="174" style="border:1px solid black;"></a> <ol start="2"> <li>浮动布局</li> </ol> <pre><code class="prism language-css"> .left{ width: 20%; float: left; } .center{ width: 59%; float: left; } .right{ width: 20%; float: left; } </code></pre> 至此完成左中右三部分的布局。 <ol start="3"> <li>加入<code>footer</code> 部分</li> </ol> <pre><code class="prism language-html"> .footer{ border: 5px solid blue; } <div class="footer">footer</div> </code></pre> <a href="http://img.e-com-net.com/image/info8/5bc041ce8a504d8e8cdba3653e68d2fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5bc041ce8a504d8e8cdba3653e68d2fa.jpg" alt="在这里插入图片描述" width="650" height="82"></a> 发现蓝色<code>footer</code>的div，延续正常文档流布局，摆放在<code>navbar</code>的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性<code>clear</code>。 <pre><code class="prism language-html"> .footer{ border: 5px solid blue; clear: both; } <div class="footer">footer</div> </code></pre> <ol start="4"> <li>设置<code>center</code></li> </ol> 增加<code>center</code> 高度，完成基本的布局效果。 <pre><code class="prism language-css">.center{ width: 59%; float: left; height: 600px; } </code></pre> <a href="http://img.e-com-net.com/image/info8/2ddc0c53462f4db189d6c8a97abd24ae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ddc0c53462f4db189d6c8a97abd24ae.jpg" alt="day27 学习HTML-01天_第16张图片" width="650" height="333" style="border:1px solid black;"></a> <h3>4.2.2 设置背景</h3> <ul> <li> 设置背景的格式： <pre><code class="prism language-css">背景色: background-color: black; 背景图: background-image: url("../img/bg.png"); </code></pre> </li> </ul> 请设置如下布局，效果如下 <a href="http://img.e-com-net.com/image/info8/01ce4b0c5965472a9cf8b3014597b86a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/01ce4b0c5965472a9cf8b3014597b86a.jpg" alt="day27 学习HTML-01天_第17张图片" width="650" height="287" style="border:1px solid black;"></a> 代码实现 <pre><code class="prism language-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> /*给div标签添加边框*/ div{ border: 1px solid red; } /*左侧图片的div样式*/ .left{ width: 20%; float: left; height: 500px; } /*中间正文的div样式*/ .center{ width: 59%; float: left; height: 500px; } /*右侧广告图片的div样式*/ .right{ width: 20%; float: left; height: 500px; } /*底部超链接的div样式*/ .footer{ /*清除浮动效果*/ clear: both; /*文本对齐方式*/ text-align: center; /*背景颜色*/ background: blue; } </style> </head> <body>  <div>top</div>  <div>navibar</div>  <div class="left">left</div>  <div class="center">center</div>  <div class="right">right</div>  <div class="footer">footer</div> </body> </html> </code></pre> <h3>4.2.3 图片标签</h3> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>img</td> <td>可以显示一张图片(本地或网络)</td> <td>src属性，这是一个必需的属性，表示图片的地址。</td> </tr> </tbody> </table> 其他属性： <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>鼠标悬停（hover）时显示文本。</td> <td></td> </tr> <tr> <td>alt</td> <td>图形不显示时的替换文本。</td> <td></td> </tr> <tr> <td>height</td> <td>图像的高度。</td> <td></td> </tr> <tr> <td>width</td> <td>图像的宽度。</td> <td></td> </tr> </tbody> </table> <h3>4.2.4 超链接</h3> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>a</td> <td>表示超链接。</td> <td>href属性，表示超链接指向的URL地址。</td> </tr> </tbody> </table> <table> <thead> <tr> <th>属性名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>target</td> <td>页面的打开方式(_self当前页 _blank新标签页)。</td> </tr> </tbody> </table> 去掉下划线 根据某些样式的布局需求，去除下划线更为美观。 <pre><code class="prism language-css">a { /*去掉下划线*/ text-decoration:none; // none 表示不显示 color black;//设置超链接的字体颜色 } </code></pre> <pre><code class="prism language-html">/*鼠标悬浮的样式控制*/ a:hover{ color red; } </code></pre> <h2>4.3 使用标签</h2> <ol> <li>使用div标签，设置布局，背景和浮动等。</li> <li>基本文本标签</li> <li>图片标签</li> <li>超链接标签</li> </ol> <h2>4.4 实现步骤</h2> <ol> <li>创建初始页面，拷贝图片等素材。</li> <li>整体布局。</li> <li>实现顶部条（图片）。</li> <li>实现导航条（图片）。</li> <li>实现左侧分享区域（图片）。</li> <li>实现中间正文区域（文本+图片）。</li> <li>实现右侧广告区域（图片）。</li> <li>实现底部页脚（链接）。</li> </ol> <h3>4.5.2 实现顶部条</h3> HTML代码 <pre><code class="prism language-html"><div class="top_bar"> <img src="../img/j1.png"> </div> </code></pre> 样式代码 <pre><code class="prism language-css"> img{ width: 100%; } </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/67df1ea0cd25405589489066f8ff31c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/67df1ea0cd25405589489066f8ff31c2.jpg" alt="day27 学习HTML-01天_第18张图片" width="650" height="197" style="border:1px solid black;"></a> <h3>4.5.3 实现导航条</h3> HTML代码 <pre><code class="prism language-html"><div class="nav_bar"> <img src="../img/j2.png" width="100%"> </div>  <hr size="1"/> </code></pre> 样式代码 <pre><code class="prism language-css"> hr { color: lightgrey; size: 1px; } </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/0b9ea7a3b8dd419d998fde172a571ce7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0b9ea7a3b8dd419d998fde172a571ce7.jpg" alt="day27 学习HTML-01天_第19张图片" width="650" height="134" style="border:1px solid black;"></a> ###4.5.4 实现左部分享 HTML代码 <pre><code class="prism language-html"><div class="left"> <img src="../img/j3.png" /> </div> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/d1aef3b625b94bb7a4e3132d0d5db710.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d1aef3b625b94bb7a4e3132d0d5db710.jpg" alt="day27 学习HTML-01天_第20张图片" width="650" height="296" style="border:1px solid black;"></a> <h3>4.5.5 实现中部正文</h3> HTML代码 <pre><code class="prism language-html"><div class="center"> <div > <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1> </div> <div> <font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11</em></font> <br/> <hr/> </div> <div> <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3> </div> <div> <p> 这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。 </p> <p> 支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别: <ol type="1"> <li> 蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。 </li> <li> 微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大 </li> <li> 蚂蚁巴士：这个在微信蚂蚁巴士公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆 </li> </ol> <img src="../img/1.jpg" /> </p> <p> 说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。 </p> <p> <strong>一、芝麻分600以上福利之信用购。</strong> 网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯 </p> <p> <strong>二、芝麻分600以上福利之信用免押。</strong>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。 </p> <img src="../img/2.jpg" /> <p> <strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？ </p> <p> 随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？ </p> </div> </div> </code></pre> 样式代码 <pre><code class="prism language-css"> .center { width: 60%; /*最后去除边框宽度恢复为60%*/ float: left; } </code></pre> <h3>4.5.6 实现右侧广告</h3> HTML代码 <pre><code class="prism language-html"> <div class="right"> <div class="right_ad"> <img src="../img/ad1.jpg" > </div> <div class="right_ad"> <img src="../img/ad2.jpg" > </div> <div class="right_ad"> <img src="../img/ad3.jpg" > </div> <div class="right_ad"> <img src="../img/ad1.jpg" > </div> <div class="right_ad"> <img src="../img/ad2.jpg" > </div> <div class="right_ad"> <img src="../img/ad3.jpg" > </div> </div> </code></pre> <h3>4.5.7 实现底部页脚</h3> HTML代码 <pre><code class="prism language-html"><div class="footer"> <a href="#">关于黑马 </a> <a href="#">帮助中心 </a> <a href="#">开放平台 </a> <a href="#">诚聘英才 </a> <a href="#">联系我们 </a> <a href="#">法律声明 </a> <a href="#">隐私政策 </a> <a href="#">知识产权 </a> <a href="#">廉正举报 </a> </div> </code></pre> 样式代码 <pre><code class="prism language-css"> .footer { clear: both; background-color: cornflowerblue; text-align: center; } a{ text-decoration: none; color: white; } </code></pre> <img src="http://img.e-com-net.com/image/info8/d2953fdd2c70493da3f2ec491dae473b.jpg" alt="在这里插入图片描述" width="650" height="16"> <h1>5 HTML案例-登录页面</h1> <h2>5.1 案例效果</h2> <a href="http://img.e-com-net.com/image/info8/e52d15d54a4d451c87f8de715dc1f25b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e52d15d54a4d451c87f8de715dc1f25b.jpg" alt="day27 学习HTML-01天_第21张图片" width="650" height="387" style="border:1px solid black;"></a> <h2>5.2 案例分析</h2> <h3>5.2.1 表单标签</h3> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>form</td> <td>表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器</td> <td></td> </tr> </tbody> </table> 举例： <pre><code class="prism language-html"><form > //表单元素 </form> </code></pre> 表单的属性 <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>处理此表单信息的Web服务器的URL地址</td> <td></td> </tr> <tr> <td>method</td> <td>提交此表单信息到Web服务器的方式</td> <td>可能的值有get和post，默认为get</td> </tr> <tr> <td>autocomplete</td> <td>自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用</td> <td>HTML5</td> </tr> </tbody> </table> 举例： <pre><code class="prism language-html"> <form action="/web/login" method="get"> </form>  <form action="/web/reg" method="post"> </form> </code></pre> GET与POST说明： <code>post</code>：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。 <code>get</code>：指的是 HTTP GET 方法；表单数据会附加在 <code>action</code> 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。 GET方式举例： <a href="http://img.e-com-net.com/image/info8/1b2053e0517044f6ab2cafb8e2aa0d6c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1b2053e0517044f6ab2cafb8e2aa0d6c.png" alt="在这里插入图片描述" width="623" height="38"></a> GET与POST对比： <table> <thead> <tr> <th></th> <th>地址栏可见</th> <th>数据安全</th> <th>数据大小</th> </tr> </thead> <tbody> <tr> <td>GET</td> <td>可见</td> <td>不安全</td> <td>有限制（取决于浏览器）</td> </tr> <tr> <td>POST</td> <td>不可见</td> <td>相对安全</td> <td>无限制</td> </tr> </tbody> </table> <h3>5.2.2 表单元素入门</h3> 表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。 <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>lable</td> <td>表单元素的说明，配合表单元素使用</td> <td>for属性值为相关表单元素的id属性值</td> </tr> <tr> <td>input</td> <td>表单中输入控件，多种输入类型，用于接受来自用户数据</td> <td>type属性值决定输入类型</td> </tr> <tr> <td>button</td> <td>页面中可点击的按钮，可以配合表单进行提交</td> <td>type属性值决定按钮类型</td> </tr> </tbody> </table> <h4>1）简单的文本输入框</h4> <ul> <li> label标签：表单的说明。 <ul> <li>for属性值：匹配input标签的id属性值</li> </ul> </li> <li> input标签：输入控件。 <ul> <li>type属性：表示输入类型，text值为普通文本框</li> <li>id属性：表示标签唯一标识</li> <li>name属性：表示标签名称</li> <li>value属性：表示标签数据值</li> <li>placehoider：表示默认提示信息</li> <li>required：表示是否必须有数据</li> </ul> </li> </ul> 代码实现： <pre><code class="prism language-html"><form action="" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" value="tom"> </form> </code></pre> 效果如图： <a href="http://img.e-com-net.com/image/info8/96600dd66f2542638fdc005b1b984364.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96600dd66f2542638fdc005b1b984364.jpg" alt="在这里插入图片描述" width="650" height="99"></a> <h4>2）提交用户名的表单</h4> <ul> <li>button标签：表示按钮。 <ul> <li>type属性：表示按钮类型，submit值为提交按钮。</li> <li>reset值为重置按钮。</li> <li>button为普通按钮。</li> </ul> </li> </ul> <pre><code class="prism language-html"><form action="" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username" value="tom"> <button type="submit" >login</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/e34471bd66154adab00d67a05cc2758f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e34471bd66154adab00d67a05cc2758f.jpg" alt="day27 学习HTML-01天_第22张图片" width="650" height="165" style="border:1px solid black;"></a> <h3>5.2.3 关于属性值</h3> <h4>1）NAME和VALUE属性</h4> <table> <thead> <tr> <th>属性名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>name</td> <td><code><input></code>的名字，在提交整个表单数据时，可以用于区分属于不同<code><input></code>的值</td> </tr> <tr> <td>value</td> <td>这个<code><input></code>元素当前的值，允许用户通过页面输入</td> </tr> </tbody> </table> 使用方式： 以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用<code>&</code>进行分隔。 举例： <a href="http://img.e-com-net.com/image/info8/c1c15fca243e4c58bf3d17671b8b4195.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1c15fca243e4c58bf3d17671b8b4195.jpg" alt="day27 学习HTML-01天_第23张图片" width="650" height="284" style="border:1px solid black;"></a> <h4>2）TYPE属性</h4> <ul> <li> input标签的type属性 <blockquote> 【建议】 这是今天的重点讲解内容，type的值决定输入的类型 </blockquote> <ul> <li>基本的文本属性</li> </ul> <table> <thead> <tr> <th>属性值</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>单行文本字段</td> <td></td> </tr> <tr> <td>password</td> <td>单行文本字段，值被遮盖</td> <td></td> </tr> <tr> <td>email</td> <td>用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验</td> <td>HTML5</td> </tr> </tbody> </table>举例： <pre><code class="prism language-html"> <form action="#" method="get"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <br/> <label for="password">Password:</label> <input type="password" id="password" name="password"><br/> <label for="email">Email: </label> <input type="email" id="email" name="email"><br/> <button type="submit"> login</button> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/e33a744763cb42c79fd4f399d8f245da.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e33a744763cb42c79fd4f399d8f245da.png" alt="day27 学习HTML-01天_第24张图片" width="525" height="193" style="border:1px solid black;"></a> <ul> <li> 单选多选属性 <table> <thead> <tr> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>radio</td> <td>单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。</td> </tr> <tr> <td>checkbox</td> <td>复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器</td> </tr> </tbody> </table>举例： <pre><code class="prism language-html"><form action="#" method="get"> <label for="gender">性别:</label> <input type="radio" id="gender" name="gender" value="boy"/>男 <input type="radio" name="gender" value="girl" checked="checked"/>女 <hr/> <label for="hobby">爱好: </label> <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育 <input type="checkbox" name="hobby" value="tech"/> 科技 <input type="checkbox" name="hobby" value="fun" /> 娱乐 <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频 </form> </code></pre> </li> </ul> </li> </ul> <a href="http://img.e-com-net.com/image/info8/d6a9e5ecc2814ff097de0cc6e65bde2b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d6a9e5ecc2814ff097de0cc6e65bde2b.png" alt="day27 学习HTML-01天_第25张图片" width="456" height="112" style="border:1px solid black;"></a> <ul> <li> 按钮属性 <table> <thead> <tr> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>无行为按钮，用于结合JavaScript实现自定义动态效果</td> </tr> <tr> <td>submit</td> <td>提交按钮，用于提交表单数据。</td> </tr> <tr> <td>reset</td> <td>重置按钮，用于将表单中内容恢复为默认值。</td> </tr> <tr> <td>image</td> <td>图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。</td> </tr> </tbody> </table></li> <li> HTML5新增的type值 <table> <thead> <tr> <th>属性值</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>date</td> <td>HTML5 用于输入日期的控件</td> <td>年，月，日，不包括时间</td> </tr> <tr> <td>time</td> <td>HTML5 用于输入时间的控件</td> <td>不含时区</td> </tr> <tr> <td>datetime-local</td> <td>HTML5 用于输入日期时间的控件</td> <td>不包含时区</td> </tr> <tr> <td>number</td> <td>HTML5 用于输入浮点数的控件</td> <td></td> </tr> <tr> <td>range</td> <td>HTML5 用于输入不精确值控件</td> <td>max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值</td> </tr> <tr> <td>search</td> <td>HTML5 用于输入搜索字符串的单行文本字段</td> <td>可以点击<code>x</code>清除内容</td> </tr> <tr> <td>tel</td> <td>HTML5 用于输入电话号码的控件</td> <td></td> </tr> <tr> <td>url</td> <td>HTML5 用于编辑URL的字段</td> <td>可以校验URL地址格式</td> </tr> </tbody> </table></li> </ul> <table> <thead> <tr> <th>属性值</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>file</td> <td>此控件可以让用户选择文件，用于文件上传。</td> <td>使用 accept 属性可以定义控件可以选择的文件类型。</td> </tr> <tr> <td>hidden</td> <td>此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值</td> <td></td> </tr> </tbody> </table> <ul> <li> button标签的type属性 <table> <thead> <tr> <th>属性值</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>submit</td> <td>此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。</td> <td>同 <code><input type="submit"/></code></td> </tr> <tr> <td>reset</td> <td>此按钮重置所有组件为初始值。</td> <td>同<code><input type="reset"</code>/></td> </tr> <tr> <td>button</td> <td>此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。</td> <td>同<code><input type="button"/></code></td> </tr> </tbody> </table></li> </ul> <h4>3）HTML5新增属性</h4> <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>placeholder</td> <td>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。</td> <td>仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。</td> </tr> <tr> <td>required</td> <td>这个属性指定用户在提交表单之前必须为该元素填充值</td> <td>1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用</td> </tr> <tr> <td>autocomplete</td> <td>自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。</td> <td>1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全</td> </tr> </tbody> </table> <h3>5.2.4 更多表单元素</h3> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>select</td> <td>表单的控件，下拉选项菜单</td> <td>与option配合实用</td> </tr> <tr> <td>optgroup</td> <td>option的分组标签</td> <td>与option配合实用</td> </tr> <tr> <td>option</td> <td>select的子标签，表示一个选项</td> <td></td> </tr> <tr> <td>textarea</td> <td>表示多行纯文本编辑控件</td> <td>rows表示行高度， cols表示列宽度</td> </tr> <tr> <td>fieldset</td> <td>用来对表单中的控制元素进行分组(也包括 label 元素)</td> <td></td> </tr> <tr> <td>legend</td> <td>用于表示它的fieldset内容的标题。</td> <td>fieldset 的子元素</td> </tr> </tbody> </table> select举例： <pre><code class="prism language-html"> <label for="pet-select">Choose a pet:</label> <select name="pets" id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select>  </code></pre> <a href="http://img.e-com-net.com/image/info8/ddecb3d83c54477bab21138a22d6706f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ddecb3d83c54477bab21138a22d6706f.jpg" alt="day27 学习HTML-01天_第26张图片" width="650" height="163" style="border:1px solid black;"></a> textarea举例： <pre><code class="prism language-html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea> </code></pre> <a href="http://img.e-com-net.com/image/info8/43781f21e8d745dc80fb55269f2653d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/43781f21e8d745dc80fb55269f2653d3.jpg" alt="在这里插入图片描述" width="650" height="100"></a> fieldset举例： <pre><code class="prism language-html"> <form action="#" method="post"> <fieldset> <legend>是否同意</legend> <input type="radio" id="radio_y" name="agree" value="y"> <label for="radio_y">同意</label> <input type="radio" id="radio_n" name="agree" value="n"> <label for="radio_n">不同意</label> </fieldset> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/69d43a3504b34f789ca7db79a8e18070.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/69d43a3504b34f789ca7db79a8e18070.jpg" alt="day27 学习HTML-01天_第27张图片" width="650" height="104" style="border:1px solid black;"></a> <h2>5.3 使用标签</h2> <ol> <li>简单布局，使用div标签</li> <li>基本文本标签</li> <li>表单标签</li> <li>图片标签</li> </ol> <h2>5.4 实现步骤</h2> <ol> <li>设置背景图。</li> <li>基本上下两部分布局。</li> <li>实现上部（图片）</li> <li>实现下部（表单）</li> <li>实现页面跳转，从案例2跳转到案例3。</li> </ol> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> /*为body添加背景图片*/ body{ background: url("../img/bg.png"); } /*中间样式：背景色-白色、宽度400像素、文本水平居中、外边距自动*/ .center{ background-color: white; width: 400px; text-align: center; margin: auto; } </style> </head> <body>  <div> <img src="../img/logo.png"/> </div>  <div class="center"> <div>注册详情</div> <hr/>  <form action="#" method="get" autocomplete="off"> <div> <label for="username">姓名：</label> <input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/> </div> <div> <label for="email">邮箱：</label> <input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/> </div> <div> <label for="tel">手机：</label> <input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/> </div> <hr/> <div> <label for="gender">性别：</label> <input type="radio" id="gender" name="gender" value="man"/>男 <input type="radio" name="gender" value="woman"/>女 </div> <div> <label for="hobby">爱好：</label> <input type="checkbox" id="hobby" name="hobby" value="music"/>音乐 <input type="checkbox" name="hobby" value="movie"/>电影 <input type="checkbox" name="hobby" value="game"/>游戏 </div> <div> <label for="birthday">出生日期：</label> <input type="date" id="birthday" name="birthday" value=""/> </div> <div> <label for="city">所在城市：</label> <select id="city" name="city"> <option>请选择您所在城市</option> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </optgroup> <optgroup label="省会市"> <option>西安</option> <option>杭州</option> <option>郑州</option> <option>武汉</option> </optgroup> </select> </div> <hr/> <div> <label for="desc">个性签名：</label> <textarea id="desc" name="desc" rows="5" cols="40" placeholder="请写下您的与众不同..."></textarea> </div> <hr/> <button type="submit">注册</button> <button type="reset">重置</button> </form> </div> </body> </html> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1565865710461194240"></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">你可能感兴趣的:(html,学习,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1897847718634647552.htm" title="智慧树刷课神器：自动化学习新体验" target="_blank">智慧树刷课神器：自动化学习新体验</a> 詹坦直Lucinda <div>智慧树刷课神器：自动化学习新体验zhihuishu智慧树刷课插件，自动播放下一集、1.5倍速度、无声项目地址:https://gitcode.com/gh_mirrors/zh/zhihuishu在开源社区的一隅，我们发现了一款专为学生打造的高效学习辅助工具——“智慧树刷课插件”。这款由JavaScript为主要编程语言构建的开源项目，旨在简化在线课程的学习过程，特别是针对广大学生头疼的智慧树网课</div> </li> <li><a href="/article/1897847339561840640.htm" title="文科生小白零基础的 Python 自学逆袭之路" target="_blank">文科生小白零基础的 Python 自学逆袭之路</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%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%B9%B4%E4%BA%BA/1.htm">中年人</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/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><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a> <div>文科生小白的Python自学逆袭之路作为一名文科生新手小白，我深知自学Python的艰难。曾经，我也对代码世界充满恐惧，觉得那是理科生的专属领域。但如今，我不仅成功入门Python，还能用它解决一些实际问题。下面，我就和大家分享一下我的自学经历，希望能给同样想学习Python的文科生一些启发。被课程“劝退”的开端当我决定自学Python时，首先想到的就是去市面上找课程。各种宣传都在说这些课程多么适</div> </li> <li><a href="/article/1897845187149885440.htm" title="jQuery 入门到精通" target="_blank">jQuery 入门到精通</a> abments <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>jQuery入门到精通：详尽指南目录jQuery简介jQuery基础安装jQueryjQuery选择器DOM操作事件处理jQuery进阶动画效果AJAX插件项目实践简单的待办事项列表获取和显示API数据高级技巧性能优化调试技巧资源和总结1.jQuery简介jQuery是一个快速、小巧且功能丰富的JavaScript库，它使HTML文档的遍历和操作、事件处理、动画以及AJAX交互更简单。jQuery</div> </li> <li><a href="/article/1897844934455652352.htm" title="Pycharm2018 中文版安装教程" target="_blank">Pycharm2018 中文版安装教程</a> ZCY5202015 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E8%BD%AF%E4%BB%B6/1.htm">开发工具软件</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>Pycharm2018中文版安装教程软件简介：PyCharm是一款IDE集成开发环境，主要功能包括代码调试、语法高亮、智能提示、单元测试、版本控制等，新版2018版添加了对Python3.7支持，增加了多行TODO注释、时间跟踪、以及改进searcheverywhere功能等，可以让用户快速的开发程序。（本教程仅供学习交流使用）安装前须知：1.解压和安装前先关闭360、电脑管家等所有杀毒软件，防止</div> </li> <li><a href="/article/1897844174925918208.htm" title="【新人系列】Golang 入门（三）：条件循环" target="_blank">【新人系列】Golang 入门（三）：条件循环</a> Pandaconda 的测开之路 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E4%BA%BA%E7%B3%BB%E5%88%97/1.htm">新人系列</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/go/1.htm">go</a><a class="tag" taget="_blank" href="/search/%E6%9D%A1%E4%BB%B6%E5%BE%AA%E7%8E%AF/1.htm">条件循环</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12898955.html专栏定位：为0基础刚入门Golang的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Golang的学习。在这个Golang的新人系列专栏下，将会</div> </li> <li><a href="/article/1897844165232881664.htm" title="正点原子imx6ull-mini-Linux驱动之Linux I2C 驱动实验（21）" target="_blank">正点原子imx6ull-mini-Linux驱动之Linux I2C 驱动实验（21）</a> NEWEVA__zzera22 <a class="tag" taget="_blank" href="/search/imx6ull/1.htm">imx6ull</a><a class="tag" taget="_blank" href="/search/linux%E9%A9%B1%E5%8A%A8%E7%BC%96%E5%86%99/1.htm">linux驱动编写</a><a class="tag" taget="_blank" href="/search/2024%E5%B9%B4/1.htm">2024年</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>I2C是很常用的一个串行通信接口，用于连接各种外设、传感器等器件，在裸机篇已经对I.MX6U的I2C接口做了详细的讲解。本章我们来学习一下如何在Linux下开发I2C接口器件驱动，重点是学习Linux下的I2C驱动框架，按照指定的框架去编写I2C设备驱动。本章同样以I.MX6U-ALPHA开发板上的AP3216C这个三合一环境光传感器为例，通过AP3216C讲解一下如何编写Linux下的I2C设备</div> </li> <li><a href="/article/1897843391295713280.htm" title="蚂蚁集团可转正实习算法岗内推-自然语言" target="_blank">蚂蚁集团可转正实习算法岗内推-自然语言</a> 飞300 <a class="tag" taget="_blank" href="/search/%E4%B8%9A%E7%95%8C%E8%B5%84%E8%AE%AF/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> <div>具备极佳的工程实现能力，精通C/C++、Java、Pvthon、Perl等至少一门语言:对目前主流的深度学习平台:tensorflow、pytorch、mxnet等，至少对其中一个有上手经验;熟悉深度学习以及常见机器学习算法的原理与算法，能熟练运用聚类、分类、回归、排序等模型解决有挑战性的问题，有大数据处理的实战经验;有强烈求知欲，对人工智能领域相关技术有热情，内推链接：https://u.ali</div> </li> <li><a href="/article/1897843380013035520.htm" title="深圳传音控股AI算法岗内推" target="_blank">深圳传音控股AI算法岗内推</a> 飞300 <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/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%9A%E7%95%8C%E8%B5%84%E8%AE%AF/1.htm">业界资讯</a> <div>1扎实的数学基础，熟练掌握机器学习相关的数学知识。2熟悉常用的机器学习算法，掌握常用的深度学习模型与编程实践。3熟悉Pytorch或TensorFlow等深度学习框架，有一定项目经验。4良好的沟通协调能力，执着的专业精神。5参与部门AI创新项目，包括自动化测试平台、BPM流程管理等项目开发登录链接：transsion.zhiye.com/campus/jobs填写我的推荐码：EVHPB3投递，简历</div> </li> <li><a href="/article/1897841994324045824.htm" title="使用Electron构建桌面应用程序：一个全面指南" target="_blank">使用Electron构建桌面应用程序：一个全面指南</a> AxCybersecurity <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><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> <div>Electron是一个强大的框架，它使开发人员能够使用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。本文将介绍如何使用Electron来构建一个简单的桌面应用程序，并提供相应的源代码示例。什么是Electron？Electron是一个开源的框架，由GitHub开发，用于构建跨平台的桌面应用程序。它基于Chromium和Node.js，允许开发人员使用Web技术构建</div> </li> <li><a href="/article/1897840734602588160.htm" title="【北上广深杭大厂AI算法面试题】深度学习篇...MobileNet 系列网络发展与高效性分析（附代码）（二）" target="_blank">【北上广深杭大厂AI算法面试题】深度学习篇...MobileNet 系列网络发展与高效性分析（附代码）（二）</a> 努力毕业的小土博^_^ <a class="tag" taget="_blank" href="/search/AI%E7%AE%97%E6%B3%95%E9%A2%98%E5%BA%93/1.htm">AI算法题库</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%AE%97%E6%B3%95/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%8D%B7%E7%A7%AF%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">卷积神经网络</a> <div>【北上广深杭大厂AI算法面试题】深度学习篇…MobileNet系列网络发展与高效性分析（附代码）（二）【北上广深杭大厂AI算法面试题】深度学习篇…MobileNet系列网络发展与高效性分析（附代码）（二）文章目录【北上广深杭大厂AI算法面试题】深度学习篇...MobileNet系列网络发展与高效性分析（附代码）（二）MobileNet系列网络发展与高效性分析（附代码）4.MobileNetV2（2</div> </li> <li><a href="/article/1897839848409067520.htm" title="小白必看！2025 网络安全保姆级学习路线来啦~" target="_blank">小白必看！2025 网络安全保姆级学习路线来啦~</a> 白帽黑客-晨哥 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><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%AE%89%E5%85%A8/1.htm">安全</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/php/1.htm">php</a> <div>关键词：网络安全入门、渗透测试学习、零基础学安全、网络安全学习路首先咱们聊聊，学习网络安全方向通常会有哪些问题1.初学者常见问题1.1如何开始学习网络安全？问题：网络安全领域广泛，初学者往往不知道从哪里入手。解答：从基础知识开始：学习计算机网络、操作系统、编程语言（如Python、Bash）。了解网络安全的基本概念，如加密、认证、漏洞、攻击类型等。使用在线资源（如Cybrary、OWASP）或书籍</div> </li> <li><a href="/article/1897839092373188608.htm" title="华为OD-不限经验，急招，机考资料，面试攻略，不过改推，捞人" target="_blank">华为OD-不限经验，急招，机考资料，面试攻略，不过改推，捞人</a> 2301_79125642 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>超星(学习通)-Java后端一面网易互娱40min（感觉是G了）一篇不太像面经的面经2023总结，前端大二上进小红书秋招面经第一波海康红外图像算法实习（微影）面经测试工程师社招-测试面试题大厂在职傻屌。TPlink图像算法工程师一二三面经深圳海康红外图像算法实习（微影）面经TPLink提前批面经（已OC）传统车辆转规控算法岗秋招记录腾讯TEG测试与质量管理全记录瑞幸Java开发校招一面腾讯金融科技</div> </li> <li><a href="/article/1897836818162839552.htm" title="希音(Shein)前端开发面试题集锦和参考答案" target="_blank">希音(Shein)前端开发面试题集锦和参考答案</a> 大模型大数据攻城狮 <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%94%BB%E5%87%BB/1.htm">前端攻击</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/csrf/1.htm">csrf</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a> <div>用Node写过什么工具或npm包在实际开发中，使用Node编写过多种实用工具和npm包。自动化构建工具开发了一个简单的自动化构建工具，用于处理前端项目的资源压缩和合并。在前端项目中，为了优化性能，需要对CSS和JavaScript文件进行压缩，减少文件体积，同时将多个小文件合并成一个大文件，减少HTTP请求。这个工具使用Node的fs模块进行文件的读写操作，通过terser库对JavaScript</div> </li> <li><a href="/article/1897835179389546496.htm" title="Docker中GPU的使用指南" target="_blank">Docker中GPU的使用指南</a> 俞兆鹏 <a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F%E5%AE%9E%E8%B7%B5/1.htm">云原生实践</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>在当今的计算领域，GPU（图形处理单元）已经成为了加速各种计算密集型任务的关键硬件，特别是在深度学习、科学模拟和高性能计算等领域。Docker作为流行的容器化平台，允许开发者将应用程序及其依赖打包成一个可移植的容器，在不同的环境中运行。当需要在Docker容器中利用GPU的计算能力时，我们需要进行一些特定的配置和设置。本文将详细介绍如何在Docker中使用GPU，从环境准备到实际应用，帮助你充分利</div> </li> <li><a href="/article/1897835175459483648.htm" title="大模型最新面试题系列：训练篇之模型监控与调试" target="_blank">大模型最新面试题系列：训练篇之模型监控与调试</a> 人肉推土机 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E6%9C%80%E6%96%B0%E9%9D%A2%E8%AF%95%E9%A2%98%E9%9B%86%E9%94%A6%E5%A4%A7%E5%85%A8/1.htm">大模型最新面试题集锦大全</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/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/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a> <div>1.训练过程中需要监控哪些关键指标？如何设置报警阈值？关键指标损失函数值：包括训练损失和验证损失，反映模型在训练和验证数据上的拟合程度。准确率：分类任务中的预测正确样本占总样本的比例，评估模型的预测能力。召回率和F1值：在二分类或多分类任务中，用于更全面地评估模型性能，特别是在正负样本不均衡的情况下。学习率：监控学习率的变化，确保其处于合适的范围，避免学习率过大导致模型不稳定或过小导致训练收敛过慢</div> </li> <li><a href="/article/1897833032509878272.htm" title="【华为OD机试真题E卷】54、统一限载货物数最小值 | 机试真题+思路参考+代码解析（C++、Java、Py）" target="_blank">【华为OD机试真题E卷】54、统一限载货物数最小值 | 机试真题+思路参考+代码解析（C++、Java、Py）</a> KFickle <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Py%EF%BC%89/1.htm">Py）</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAOD%E6%9C%BA%E8%AF%95%E7%9C%9F%E9%A2%98/1.htm">华为OD机试真题</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E4%B8%80%E9%99%90%E8%BD%BD%E8%B4%A7%E7%89%A9%E6%95%B0%E6%9C%80%E5%B0%8F%E5%80%BC/1.htm">统一限载货物数最小值</a> <div>文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题D、E卷，每题都使用C++，Java，Python语言进行解答，每个题目的思路分析都非常详细，持续更新，支持在线OJ刷题，订阅后评论获取权限，有代码问题随时解答，代码仅供学习参考一、题目题目描述火车站附近</div> </li> <li><a href="/article/1897832397982986240.htm" title="地球科学数据学习笔记---流向与风向、浪向" target="_blank">地球科学数据学习笔记---流向与风向、浪向</a> fried-ghost <a class="tag" taget="_blank" href="/search/%E5%9C%B0%E7%90%83%E7%A7%91%E5%AD%A6%E6%95%B0%E6%8D%AE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">地球科学数据学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>一、流向（current）流向一般指流体前进的方向、去向，一般以正北方向为正，例如流体从南流向北，则流向为0°，其示意图如下二、风向与浪向风向与浪向一般都指来向，与流向相反，例如风从南吹向北，则为南风，风向为180°。气象数据中一般会将风速数据存成u、v两个分量（雷达数据除外），u分量表示纬向风，v分量表示经向风。u为正，表示西风，风向为270°；v为正，表示南风，风向为180°。示意图如下所示，</div> </li> <li><a href="/article/1897831761895813120.htm" title="基于NLP的客户意见分析：从数据到洞察" target="_blank">基于NLP的客户意见分析：从数据到洞察</a> Echo_Wish <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>友友们好！我的新专栏《Python进阶》正式启动啦！这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会找到：●深入解析：每一篇文章都将深入剖析Python的高级概念和应用，包括但不限于数据分析、机器学习、Web开发等。●实战案例：通过丰富的实战案例，带你一步步实现</div> </li> <li><a href="/article/1897829862916288512.htm" title="深入理解Kettle：ETL工具的学习与实践" target="_blank">深入理解Kettle：ETL工具的学习与实践</a> 未知方程无解 <div>本文还有配套的精品资源，点击获取简介：Kettle（Spoon）是Pentaho公司开发的开源ETL工具，用于数据整合和数据仓库建设。本学习笔记着重于Kettle的核心——转换引擎，详细探讨其数据处理的各个步骤，包括数据的输入、转换、输出以及工作原理，提供了一系列的学习资源和实践操作指南，旨在帮助学习者深入理解并掌握Kettle的转换引擎，从而提升数据处理能力。1.Kettle（Spoon）简介与</div> </li> <li><a href="/article/1897829609773264896.htm" title="c语言共用体变量赋值,（C语言）共用体union的用法举例" target="_blank">c语言共用体变量赋值,（C语言）共用体union的用法举例</a> 王麑 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80%E5%85%B1%E7%94%A8%E4%BD%93%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC/1.htm">c语言共用体变量赋值</a> <div>以前在学校学习C语言的时候一直搞不懂那个共用体union有什么用的。工作之后才发现它的一些妙用，现举例如下：1.为了方便看懂代码。比如说想写一个3*3的矩阵，可以这样写：[注：下面用红色部分标记的地方是后来添加上去的，谢谢yrqing718的提醒！]structMatrix{union{struct{float_f11,_f12,_f13,_f21,_f22,_f23,_f31,_f32,_f33</div> </li> <li><a href="/article/1897823174586855424.htm" title="Bert模型学习笔记" target="_blank">Bert模型学习笔记</a> 文三路张同学 <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/bert/1.htm">bert</a><a class="tag" taget="_blank" href="/search/%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> <div>Bert模型学习笔记Fromhttps://www.bilibili.com/video/BV1Ey4y1874yemmm讲实话这个视频太简单了，不建议看。可以看看李沐的视频：https://www.bilibili.com/video/BV1PL411M7eQ这篇文章主要是四个部分：bert的整体架构如何做预训练mlm+nsp如何微调bert(没看)代码解析(没看)Bert架构基础架构是Tran</div> </li> <li><a href="/article/1897820775801483264.htm" title="AdaBoost算法" target="_blank">AdaBoost算法</a> Mr终游 <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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%86%B3%E7%AD%96%E6%A0%91/1.htm">决策树</a> <div>目录一、核心原理：二、算法步骤三、关键优势：四.局限与解决五、代码示例（鸢尾花数据集）AdaBoost（AdaptiveBoosting）是一种经典的集成学习算法，通过组合多个弱分类器（如决策树）来构建强分类器。其核心思想是通过迭代优化残差（错误）和动态调整样本权重，逐步提升模型性能。以下是对AdaBoost的简明总结和关键要点：一、核心原理：提升法：通过顺序训练多个弱分类器，每轮专注修正前一个模</div> </li> <li><a href="/article/1897819512804274176.htm" title="HarmonyOS：如何实现自定义的Tabs,TabContent内部实现如何动态配置" target="_blank">HarmonyOS：如何实现自定义的Tabs,TabContent内部实现如何动态配置</a> zzialx <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E4%B8%93%E6%A0%8F/1.htm">鸿蒙专栏</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>前言：最近做开发任务的时候，想把Tabs自定义了，并且动态配置TabContent里面的内容，不是写死一样的，这个问题困扰了很长时间，试过**@BuilderParam**（类似于vue的插槽）传组件方式的，但是**@BuilderParam只能传一个，我想要传递的是一个数组，找了很多Api最后找到了WrappedBuilder[]**这种方式。废话不多说，直接上代码，因为大部分的学习者都是先看代</div> </li> <li><a href="/article/1897816991889158144.htm" title="Bert学习笔记" target="_blank">Bert学习笔记</a> 缓释多巴胺。 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86/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><a class="tag" taget="_blank" href="/search/bert/1.htm">bert</a> <div>一、Bert架构BERT使用了双向的TransformerGPT使用从左到右的单向信息ELMo把单独训练的从左到右及从右到左的LSTM模型进行合并二、Bert预训练任务2.1遮蔽语言模型MLM任务：随机屏蔽（masking）部分输入token，然后只预测那些被屏蔽的token。问题：预训练任务与微调任务不一致原因：在finetuning期间从未看到[MASK]token，预训练和finetunin</div> </li> <li><a href="/article/1897814590717227008.htm" title="R语言机器学习系列-随机森林回归代码解读" target="_blank">R语言机器学习系列-随机森林回归代码解读</a> Mrrunsen <a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80%E5%A4%A7%E5%AD%A6%E4%BD%9C%E4%B8%9A/1.htm">R语言大学作业</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/%E5%9B%9E%E5%BD%92/1.htm">回归</a><a class="tag" taget="_blank" href="/search/r%E8%AF%AD%E8%A8%80/1.htm">r语言</a> <div>回归问题指的是因变量或者被预测变量是连续性变量的情形，比如预测身高体重的具体数值是多少的情形。整个代码大致可以分为包、数据、模型、预测评估4个部分，接下来逐一解读。1、包部分，也就是加载各类包，包括随机森林包randomForest，数据相关包tidyverse、skimr、DataExplorer，模型评估包caret。2、数据部分，主要是读取数据，处理缺失值，转换变量类型。3、模型部分。为了对</div> </li> <li><a href="/article/1897805374942146560.htm" title="【学习笔记5】Linux下cuda、cudnn、pytorch版本对应关系" target="_blank">【学习笔记5】Linux下cuda、cudnn、pytorch版本对应关系</a> longii11 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>一、cuda和cudnnNVIDIACUDAToolkit（CUDA）为创建高性能GPU加速应用程序提供了一个开发环境。借助CUDA工具包，您可以在GPU加速的嵌入式系统、桌面工作站、企业数据中心、基于云的平台和HPC超级计算机上开发、优化和部署您的应用程序。该工具包包括GPU加速库、调试和优化工具、C/C++编译器以及用于部署应用程序的运行时库。全球的深度学习研究人员和框架开发人员都依赖cuDN</div> </li> <li><a href="/article/1897799060249702400.htm" title="前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？" target="_blank">前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？</a> m0_74823705 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>目录哪些方法会触发React重新渲染？重新渲染render会做些什么？setState()案例需求总结forceUpdate()案例需求总结props改变案例需求总结context改变案例需求总结哪些方法会触发React重新渲染？重新渲染render会做些什么？在React中，以下方法会触发重新渲染：setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染</div> </li> <li><a href="/article/1897797796854034432.htm" title="归纳webpack" target="_blank">归纳webpack</a> 捻tua馔... <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>常用配置项constHtmlWebpackPlugin=require('html-webpack-plugin');//通常用于生成HTMLconstMiniCssExtractPlugin=require('mini-css-extract-plugin');//用于分离CSSconstcssMinimizerWebpackPlugin=require("css-minimizer-webpa</div> </li> <li><a href="/article/1897794898040516608.htm" title="React基础教程（06）：条件渲染" target="_blank">React基础教程（06）：条件渲染</a> 叁拾舞 <a class="tag" taget="_blank" href="/search/React%E6%95%99%E7%A8%8B/1.htm">React教程</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1条件渲染使用条件渲染，结合TodoList案例，进行完善，实现以下功能：当列表中的数据为空的时候，现实提示信息暂无待办事项当列表中存在数据的时候，提示信息消失这里介绍三种实现方式。注意这里的Empty是前端框架Antd的组件，如果安装了antd直接使用即可，如果没有安装可以用div代替也是可以的。这里为了更直观，所以使用了前端框架antd的Empty组件。1、三元操作符{/*方式一*/}{thi</div> </li> <li><a href="/article/1897793256813555712.htm" title="# React源码解析之Reconciler运行循环与scheduler调度" target="_blank"># React源码解析之Reconciler运行循环与scheduler调度</a> Bug程序员枯港 <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>React源码之看完吊打面试官系列经历一个月的学习整理，站在前人的肩膀上，对React有了一些浅薄的理解，希望记录自己的学习过程的同时也可以给大家带来一点小帮助。如果此系列文章对您有些帮助，还望在座各位义夫义母不吝点赞关注支持，也希望各位大佬拍砖探讨本系列行文思路如下,本篇属于React中的React的管理员(reconciler与scheduler)[X]React启动过程[X]React的两大</div> </li> <li><a href="/article/50.htm" title="java封装继承多态等" target="_blank">java封装继承多态等</a> 麦田的设计者 <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/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/encapsulatopn/1.htm">encapsulatopn</a> <div> 最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。 1、final关键字译为：最终的 &</div> </li> <li><a href="/article/177.htm" title="F5与集群的区别" target="_blank">F5与集群的区别</a> bijian1013 <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div> http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。 F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似</div> </li> <li><a href="/article/304.htm" title="LeetCode[Math] - #7 Reverse Integer" target="_blank">LeetCode[Math] - #7 Reverse Integer</a> Cwind <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>原题链接：#7 Reverse Integer 要求：按位反转输入的数字例1：输入 x = 123, 返回 321 例2：输入 x = -123, 返回 -321 难度：简单分析：对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但</div> </li> <li><a href="/article/431.htm" title="BufferedOutputStream" target="_blank">BufferedOutputStream</a> 周凡杨 <div> 首先说一下这个大批量，是指有上千万的数据量。例子：有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！ select t.msisd</div> </li> <li><a href="/article/558.htm" title="linux下模拟按键输入和鼠标" target="_blank">linux下模拟按键输入和鼠标</a> 被触发 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in</div> </li> <li><a href="/article/685.htm" title="ContentProvider初体验" target="_blank">ContentProvider初体验</a> 肆无忌惮_ <a class="tag" taget="_blank" href="/search/ContentProvider/1.htm">ContentProvider</a> <div>ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte</div> </li> <li><a href="/article/812.htm" title="关于Spring MVC项目（maven）中通过fileupload上传文件" target="_blank">关于Spring MVC项目（maven）中通过fileupload上传文件</a> 843977358 <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9%E5%A4%B4%E5%83%8F/1.htm">修改头像</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/upload/1.htm">upload</a> <div>Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。 1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定）  </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>