Code6E

HTML笔记

- 网站与网页
- Web标准
- 第一个前端程序
- - 两步完成一个网页程序
- HTML5简介与基础骨架
- - HTML5介绍
  - HTML5的DOCTYPE声明
  - HTML5基本骨架
  - - html标签
    - head标签
    - body标签
    - title标签
    - meta标签
- 标签之标题
- - 标题介绍与应用
- 标签之段落、换行、水平线
- - 标签之段落
  - 换行
  - 水平线
- `
  `与``
- 目录文件夹和根目录
- 标签之图片
- - 网站中最多的元素
- 图片路径详解
- - 绝对路径
  - 相对路径
  - 网络路径
- 标签之超文本链接
- - 超链接描述
  - 超链接属性
  - 超链接表现
- 标签之文本
- - 常用文本标签
  - 特殊字符
- 列表标签之有序列表
- - 有序列表
  - type属性
  - 有序列表嵌套
- 列表标签之无序列表
- - 无序列表实现
  - type属性
  - 无序列表嵌套
  - 常见应用场景
  - 导航效果
- 标签之表格
- - 表格展示效果
  - 表格属性
- 表格单元格合并
- - 单元格合并属性
- Form表单
- 表单元素
- - input属性
  - - 文本框
    - 密码框
    - 单选
    - 多选
    - 按钮
    - 提交按钮
    - 用日历选择日期
    - 多行输入
    - label标签
  - 下拉列表——select标签
- 块元素与行内元素（内联元素）
- HTML5新增标签
- - 新增媒体标签
  - - `
    - `
    - `` 标签
    - ``标签
    - ``标签
  - 新增语义和结构标签
  - 其他新增
  - - Canvas
    - SVG
    - 拖放
    - 地理定位
    - 新的input类型
    - - Input 类型: color
      - Input 类型: date
    - Input 类型: datetime-local
    - Input 类型: email
    - Input 类型: month
    - Input 类型: number
    - Input 类型: range
    - Input 类型: time
    - Input 类型: url
    - Input 类型: week

网站与网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

Web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

Web 标准的构成（面试题常考）：主要包括结构（Structure） 、**表现（Presentation）和行为（Behavior）**三个方面

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解就是结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

第一个前端程序

两步完成一个网页程序

第一步：使用记事本，编写代码
文件名Welcome.html

<html>
	<head>
		<title>我的网页title>
	head>
	<body>
		Hello，我的第一个网页
	body>
html>

注意事项

文件后缀名以.html结尾

在编写代码的过程中，<>必须是英文状态下编写

第二步：以浏览器方式打开
右键打开方式，以浏览器方式打开即可

HTML5简介与基础骨架

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：

标签有两种表现形式：

双标签，例如：
单标签，例如：

HTML5的DOCTYPE声明

DOCTYPE是document type (文档类型) 的缩写。是H5的声明位于文档的最前面，处于标签之前。
他是网页必备的组成部分，避免浏览器的怪异模式。

<!DOCTYPE html>

HTML5基本骨架

html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

DOCTYPE html>
<html>
html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

VSCode中生成h1~h6快捷键：h$*6

DOCTYPE html>
<html>
    <head>
    head>
html>

body标签

body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容

DOCTYPE html>
<html>
    <head>
    head>
    <body>
        我会显示在浏览器中
    body>
html>

title标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
</code> 标签是 <code><head></code> 标签中唯一必须要求包含的东西，就是说写head一定要写title</li> <li><code><title></code>的增加有利于SEO优化</li> </ol> <blockquote> SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求 </blockquote> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <title>第一个页面</title> </head> <body> 我会显示在浏览器中 </body> </html> </code></pre> <h5>meta标签</h5> meta标签用来描述一个HTML网页文档的属性，关键词等，例如：<code>charset="utf-8"</code>是说当前使用的是<code>utf-8</code>编码格式，在开发中我们经常会看到<code>utf-8</code>，或是<code>gbk</code>，这些都是编码格式，通常使用<code>utf-8</code>。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>itbaizhan</title> </head> <body> </body> </html> </code></pre> 小试牛刀 1. 以下组成HTML5基础骨架标签正确的是: A <code><html>、<body>、<head>、<div>、<meta></code> B <code><html>、<body>、<DOCTYPE>、<title>、<meta></code> C <code><html>、<body>、<head>、<title>、<meta></code> D <code><html>、<body>、<!DOCTYPE html>、<title>、<meta></code> 答案：C <h3>标签之标题</h3> <h4>标题介绍与应用</h4> 标题（Heading）是通过 <code><h1> - <h6> </code>标签进行定义的。 <code><h1></code>定义最大的标题 <code><h6></code>定义最小的标题 <pre><code class="prism language-html"><h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </code></pre> <blockquote> 生成h1~h6快捷键：h$*6 </blockquote> 正确使用标题 请确保将 HTML 标题标签只用于标题。 不要仅仅是为了生成粗体或大号的文本而使用标题。 正确使用标题有益于SEO 应该将<code>< h1></code> 用作主标题（最重要的），其后是 <code><h2></code>（次重要的），再其次是 <code><h3></code>，以此类推 标题标签位置摆放 在标签中添加属性：<code>align="left | center | right"</code> 默认居左 <h3>标签之段落、换行、水平线</h3> <a href="http://img.e-com-net.com/image/info8/4e134b43ecf8471da70dafe12fac7692.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e134b43ecf8471da70dafe12fac7692.jpg" alt="HTML笔记_第5张图片" width="650" height="273" style="border:1px solid black;"></a> <h4>标签之段落</h4> 段落是通过<code></code>标签定义的 <pre><code class="prism language-html"><p>这是一个段落 </p> <p>这是另一个段落</p> </code></pre> 运行效果 这是一个段落 这是另一个段落 <h4>换行</h4> 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <code> </code> <code> </code> 元素是一个空的 HTML 元素。 <pre><code class="prism language-html"><p>这个<br>段落<br>演示了分行的效果</p> </code></pre> <a href="http://img.e-com-net.com/image/info8/5d35d17774484a34b784e00f6b7bf778.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d35d17774484a34b784e00f6b7bf778.png" alt="HTML笔记_第6张图片" width="372" height="158" style="border:1px solid black;"></a> 注意：段落间的空隙会比换行大。换行的文字行间是紧贴着的，不同段落的行间会有些空隙 <h4>水平线</h4> <code><hr/></code>标签在 HTML 页面中创建水平线 <pre><code class="prism language-html"><hr color="" width="" size="" align=""/> </code></pre> 属性： <ol> <li>color：设置水平线的颜色</li> <li>width：设置水平线的宽度（水平方向）</li> <li>size：设置水平线的粗细</li> <li>align：设置水平线的对齐方式（默认居中），可取值left|right 实时效果反馈 1. 要实现一个文本换行，可以使用以下那个标签：</li> </ol> A <code></code>标签 B <code><hr></code>标签 C <code> </code>标签 D <code><img></code>标签 2. 承载段落文本信息使用以下那个标签: A <code></code>标签 B <code><hr></code>标签 C <code> </code>标签 D <code><img></code>标签 答案 1=>C 2=>A <h3><code><div></code>与<code></code></h3> <code><div></code> 和 <code></code> 是没有语义的，它们就是一个盒子，用来装内容的 div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。 特点： <ol> <li><code><div></code> 标签用来布局，一行只能放一个<code><div></code>。大盒子</li> <li><code></code> 标签用来布局，一行可以有多个 <code></code>。小盒子</li> </ol> <h3>目录文件夹和根目录</h3> 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。 根目录：打开目录文件夹的第一层就是根目录 <h3>标签之图片</h3> <h4>网站中最多的元素</h4> 网站中最多的元素毋庸置疑，一定是图片 <code><img></code> 标签定义 HTML 页面中的图像 <pre><code class="prism language-html"><img src="" alt="" title="" width="" height=""> </code></pre> <blockquote> 注意事项 <code><img></code>是单标签，不需要进行闭合操作 属性： </blockquote> <ol> <li>src：路径（图片地址与名字）</li> <li>alt：规定图像的替代文本</li> <li>width：规定图像的宽度</li> <li>height：规定图像的高度(注意高度和宽度同时定义时可能会造成图片的拉伸或压缩，所以一般只定义其中一个属性)</li> <li>title：鼠标悬停在图片上给予提示 实时效果反馈 1. <code><img></code>标签中alt属性的作用：</li> </ol> A 规定图像的替代文本 B 鼠标悬停在图片上给予提示 C 路径（图片地址与名字） D 规定图像的宽度和高度 2. 以下那个不是<code><img></code>标签的属性： A src B alt C title D href 答案 1=>A 2=>D <h3>图片路径详解</h3> <a href="http://img.e-com-net.com/image/info8/099b51e4a9314624995b4df732ce71ec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/099b51e4a9314624995b4df732ce71ec.jpg" alt="HTML笔记_第7张图片" width="650" height="269" style="border:1px solid black;"></a> <h4>绝对路径</h4> 绝对路径：是指目录下的绝对位置，通常是从盘符开始的路径或完整的网络地址 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif” <h4>相对路径</h4> 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。 比如如下图片相对于 HTML 页面的位置 <a href="http://img.e-com-net.com/image/info8/04314ad146ed4b25bdb871e5af89b65d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/04314ad146ed4b25bdb871e5af89b65d.jpg" alt="HTML笔记_第8张图片" width="650" height="136" style="border:1px solid black;"></a> <ol> <li> 子级关系: <code>/</code> </li> <li> 父级关系: <code>../</code> </li> <li> 同级关系: <code>./</code>（可以省略） </li> </ol> <h4>网络路径</h4> 具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png 实时效果反馈 1. 以下那个是相对路径： A <code>E:\itbaizhanCode\1.jpg</code> B <code>http://iwenwiki.com/api/newworld/images/n1.png</code> C <code>../images/1.jpg</code> D <code>C:\itbaizhanCode\2.jpg</code> 2. 以下关于相对路径描述正确的是： A 相对路径是电脑的盘符存储与访问的具体地址 B 相对路径是两者相对关系，两者在同⼀路径下可以直接访问 C 相对路径是具体的⽹络地址 D 相对路径是不存在的 答案 1=>C 2=>B <h3>标签之超文本链接</h3> <a href="http://img.e-com-net.com/image/info8/8f0da103816b4dd7aa01ed47a8cb45cd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8f0da103816b4dd7aa01ed47a8cb45cd.jpg" alt="HTML笔记_第9张图片" width="650" height="270" style="border:1px solid black;"></a> <h4>超链接描述</h4> HTML使用标签 <code><a></a></code>来设置超文本链接 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像<code><a href="url"> <img src="xxx" alt="xxx" title="xxx"> </a></code>，您可以点击这些内容来跳转到新的文档 <pre><code class="prism language-html"><a href="url">链接载体</a> </code></pre> <h4>超链接属性</h4> <code>href</code>属性来描述链接的地址，注意该地址要是完整的地址 <code>target</code>指定目标窗口的弹出方式，默认值为<code>_self</code>，表示在本标签页打开。<code>_blank</code>表示在新标签页打开 默认情况下，链接将以以下形式出现在浏览器中： <ol> <li> 一个未访问过的链接显示为蓝色字体并带有下划线。 </li> <li> 访问过的链接显示为紫色并带有下划线。 </li> <li> 点击链接时，链接显示为红色并带有下划线。 </li> </ol> 链接分类： <ol> <li>外部链接: 例如 < a href="http:// www.baidu.com "> 百度。</li> <li>内部链接:网站内部页面之间的相互链接. 直接链接内部页面之间的相对路径即可，不需要写完整的url，例如 <code>< a href="index.html"> 首页 </a ></code>或<code><a href="./html/test.html" target="_blank">公司简介</a></code></li> <li>空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页。</li> <li>下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。</li> <li>网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.</li> <li>锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置：<code><a href="#页面元素id"> 第2集 </a></code></li> </ol> <blockquote> 特别提示 后期我们会通过CSS样式修改掉这些效果 </blockquote> <h4>超链接表现</h4> 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手 实时效果反馈 1. 超链接的作用是 A 跳转到新的文档 B 显示图片的标签 C 显示段落的标签 D 显示标题的标签 2. 超链接中<code>href</code>属性的作用 A 设置超链接的宽度和高度 B 设置超链接的跳转地址 C 设置超链接的显示颜色 D 设置超链接的文本内容 答案 1 =>A 2=>B <h3>标签之文本</h3> <a href="http://img.e-com-net.com/image/info8/7c54118068294cda8483986546efc942.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7c54118068294cda8483986546efc942.jpg" alt="HTML笔记_第10张图片" width="650" height="275" style="border:1px solid black;"></a> <h4>常用文本标签</h4> <table> <thead> <tr> <th align="center">标签</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center"><code></code></td> <td align="center">定义着重文字</td> </tr> <tr> <td align="center"><code></code></td> <td align="center">定义粗体文本</td> </tr> <tr> <td align="center"><code></code></td> <td align="center">定义斜体字</td> </tr> <tr> <td align="center"><code></code></td> <td align="center">定义加重语气（表示的重要性比着重文字高）</td> </tr> <tr> <td align="center"><code><del></code></td> <td align="center">定义删除字</td> </tr> <tr> <td align="center"><code></code></td> <td align="center">元素没有特定的含义</td> </tr> </tbody> </table> <blockquote> 特别提示 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇 </blockquote> 实时效果反馈 1. 定义加重语气的标签是哪一个： A <code>em</code> B <code></code> C <code><del></code> D <code></code> 2. 定义着重文字的标签是哪一个： A <code>em</code> B <code></code> C <code><del></code> D <code></code> 答案 1=>D 2=>A <h4>特殊字符</h4> 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代 <a href="http://img.e-com-net.com/image/info8/b9d3a38bb1b1431f98e748728efd08d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b9d3a38bb1b1431f98e748728efd08d9.jpg" alt="HTML笔记_第11张图片" width="650" height="290" style="border:1px solid black;"></a> 重点记住空格、大于号、小于号这三个，其他不必硬记下来，忘了再查阅即可 <h3>列表标签之有序列表</h3> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WAaEnlD-1675427827349)(uploading…)]<a href="http://img.e-com-net.com/image/info8/0a987eaa2a8a46dda5184606b5365681.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0a987eaa2a8a46dda5184606b5365681.jpg" alt="HTML笔记_第12张图片" width="650" height="309" style="border:1px solid black;"></a> <h4>有序列表</h4> 有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<code> <ol></code>(ordered list)标签。每个列表项始于 <code><li> </code>(list)标签。 <pre><code class="prism language-html"><ol> <li>大熊</li> <li>小熊</li> </ol> </code></pre> <a href="http://img.e-com-net.com/image/info8/3e1274ef37a54163864659c3551e37aa.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3e1274ef37a54163864659c3551e37aa.png" alt="HTML笔记_第13张图片" width="218" height="137" style="border:1px solid black;"></a> <h4>type属性</h4> <code><ol></code>的属性type 拥有的选项 <ol> <li>1 表示列表项目用数字标号（1,2,3…）</li> <li>a 表示列表项目用小写字母标号（a,b,c…）</li> <li>A 表示列表项目用大写字母标号（A,B,C…）</li> <li>i 表示列表项目用小写罗马数字标号（i,ii,iii…）</li> <li>I 表示列表项目用大写罗马数字标号（I,II,III…）</li> </ol> <h4>有序列表嵌套</h4> 列表是可以进行嵌套的 <pre><code class="prism language-html"><ol> <li>尚学堂</li> <li> <ol> <li>阿里</li> <li>京东</li> </ol> </li> <li>百战程序员</li> </ol> </code></pre> 实时效果反馈 1. 有序列表展示效果以下那个描述是正确的： A 展示一个段落效果 B 展示一个无序的列表效果 C 展示一个有序的列表效果 D 展示一个加粗的文本效果 2. 有序列表的标签组合正确的是： A <code><ul> + <li></code> B <code><ol> + <li></code> C <code><h1> + <li></code> D <code><img> + <li></code> 答案 1=>C 2=>B <h3>列表标签之无序列表</h3> <a href="http://img.e-com-net.com/image/info8/17d774103d774f14b836be9ee7dcee89.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/17d774103d774f14b836be9ee7dcee89.jpg" alt="HTML笔记_第14张图片" width="650" height="355" style="border:1px solid black;"></a> <h4>无序列表实现</h4> 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记 无序列表始于 <code><ul></code> 标签。每个列表项始于<code> <li></code> 标签。 <pre><code class="prism language-html"><ul> <li>熊大</li> <li>熊二</li> </ul> </code></pre> <h4>type属性</h4> <code><ul></code>的属性type 拥有的选项 <ul> <li> disc 默认实心圆 </li> <li> circle 空心圆 </li> <li> square 小方块 </li> <li> none 不显示 </li> </ul> <h4>无序列表嵌套</h4> 列表是可以进行嵌套的 <pre><code class="prism language-html"><ul> <li>张三</li> <li> <ul> <li>李四</li> <li>王五</li> </ul> </li> <li>麻子</li> </ul> </code></pre> <h4>常见应用场景</h4> <ol> <li>无序的列表效果</li> <li>导航效果</li> </ol> <h4>导航效果</h4> <pre><code class="prism language-html"><ul> <li>Xiaomi手机</li> <li>Redmi 红米</li> <li>电视</li> <li>笔记本</li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/f564d356879b4e73b8a90e298a70710a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f564d356879b4e73b8a90e298a70710a.jpg" alt="HTML笔记_第15张图片" width="650" height="195" style="border:1px solid black;"></a> <blockquote> 快捷键 快速生成ul+li的布局：ul>li3（数字根据自己的需要的li数量修改） 同理，也有ol>lin（n为想要生成列表项的个数） '>'表示后者是前者的子元素 </blockquote> 实时效果反馈 1. 无序列表的type属性以下描述错误的是： A disc 默认实心圆 B circle 空心圆 C square 小方块 D triangle 三角形 2. 无序列表的标签组合正确的是： A <code><ul> + <li></code> B <code><ol> + <li></code> C <code><h1> + <li></code> D <code><img> + <li></code> 答案 1=>D 2=>A <h3>标签之表格</h3> <h4>表格展示效果</h4> 表格在数据展示方面非常简单，并且表现优秀 <a href="http://img.e-com-net.com/image/info8/b88c200bbae24160bfa0f173be8da6de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b88c200bbae24160bfa0f173be8da6de.jpg" alt="HTML笔记_第16张图片" width="519" height="243" style="border:1px solid black;"></a> 表格组成与特点 行、列、单元格 单元格特点：同行等高、同列等宽。 <hr> 表格标签 表格：<code><table></code> 行：<code><tr></code>，行数取决于<code><tr></code>个数 单元格(列)：<code><td></code>，列数取决于<code><td></code>个数 <pre><code class="prism language-html"><table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </code></pre> <blockquote> 快捷键 快速生成表格结构：table>trn>tdm{单元格} //n为行数，m为列数，{}表示单元格内容 </blockquote> <h4>表格属性</h4> <ol> <li>width：设置表格的宽度，单位px可以省略，因为默认单位是px</li> <li>height：设置表格的高度，单位px可以省略，因为默认单位是px <a href="http://img.e-com-net.com/image/info8/3d50e89ed6e24035851c672d6eecfe2b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d50e89ed6e24035851c672d6eecfe2b.jpg" alt="HTML笔记_第17张图片" width="650" height="193" style="border:1px solid black;"></a> 实时效果反馈</li> </ol> 1. 以下那个是表格组成标签组合： A table + tr + td B table + tr + dl C ul + tr + td D ul + table + tr 2. 以下代码，空格处要填写的标签： <pre><code class="prism language-html"><table> ___ <td>大姐</td> <td>二姐</td> ___ </table> </code></pre> A <code><th></code> <code></th></code> B <code><tbody></code> <code></tbody></code> C <code><td></code> <code></td></code> D <code><tr></code> <code></tr></code> 答案 1=>A 2=>D <h3>表格单元格合并</h3> <a href="http://img.e-com-net.com/image/info8/4cfa98fe59854d02a088661041452cee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4cfa98fe59854d02a088661041452cee.jpg" alt="HTML笔记_第18张图片" width="650" height="267" style="border:1px solid black;"></a> 合并单元格步骤： <ol> <li>先确定是跨行还是跨列合并。</li> <li>找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<code><td colspan=“2”></td></code>。</li> <li>删除多余的单元格。</li> </ol> <h4>单元格合并属性</h4> <a href="http://img.e-com-net.com/image/info8/8df8c9c795a5464f8b14ab58ca6dd8cc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8df8c9c795a5464f8b14ab58ca6dd8cc.png" alt="HTML笔记_第19张图片" width="342" height="121" style="border:1px solid black;"></a> <ul> <li>水平合并：<code>colspan</code>,colspan属性写在左侧单元格<code><td></code>标签中，保留最左侧单元格，删除右侧单元格。</li> <li>垂直合并：<code>rowspan</code>,rowspan属性写在上面单元格<code><td></code>标签中，保留上面的的单元格，删除下侧的单元格</li> </ul> <pre><code class="prism language-html"><table border="1" width="500px" height="200px"> <tr> <td colspan="3">单元格1单元格2单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td rowspan="2">单元格6-11</td> <td>单元格7</td> <td rowspan="3">单元格81318</td> <td colspan="2" rowspan="2">单元格9101415</td> </tr> <tr> <td>单元格12</td> </tr> <tr> <td>单元格16</td> <td>单元格17</td> <td>单元格19</td> <td>单元格20</td> </tr> </table> </code></pre> 总结 <a href="http://img.e-com-net.com/image/info8/cdd790089f2c45b4ad35b84011b383bc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cdd790089f2c45b4ad35b84011b383bc.jpg" alt="HTML笔记_第20张图片" width="650" height="363" style="border:1px solid black;"></a> 实时效果反馈 1. 下列那个是单元格垂直合并的属性： A border B align C colspan D rowspan 答案 1=>D <h3>Form表单</h3> <a href="http://img.e-com-net.com/image/info8/53cc9bf606d04953a757969360277345.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53cc9bf606d04953a757969360277345.jpg" alt="HTML笔记_第21张图片" width="650" height="273" style="border:1px solid black;"></a> 表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。有用户输入的地方就有表单，所有的用户输入内容的地方都用表单来写，如登录注册、搜索框 <a href="http://img.e-com-net.com/image/info8/4d5fd2d5f2494b2d93dafe98b4f24f80.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4d5fd2d5f2494b2d93dafe98b4f24f80.jpg" alt="HTML笔记_第22张图片" width="400" height="489" style="border:1px solid black;"></a> 表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件 <pre><code class="prism language-html"><form action="url" method="get|post" name="myform"></form> </code></pre> <blockquote> 属性说明 action服务器地址 name表单名称 method中Get和Post的区别 <ol> <li>数据提交方式，get把提交的数据url可以看到，post看不到</li> <li>get一般用于提交少量数据，post用来提交大量数据</li> </ol> </blockquote> <h3>表单元素</h3> 表单元素主要有：input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素 一个完整的表单包含三个基本组成部分：表单标签<code><form></code>、表单域（要输入的区域）、表单按钮 <ol> <li>表单标签</li> <li>表单域</li> <li>表单按钮</li> </ol> <pre><code class="prism language-html"><form> <input type="text"> <input type="submit"> </form> </code></pre> 实时效果反馈 1.以下哪个元素不是表单元素： A 表单标签 B 表单域 C 表单按钮 D 图片 答案 1=>D <h4>input属性</h4> <ol> <li>type，该值决定了input标签的类型。常见的取值有text（单行文本输入）、radio（单选）、textarea、botton（按钮）、checkbox（复选框）、password（输入的内容不可见，通常以·或*表示）、reset（清除表单内容）、submit（提交表单）、file（上传文件）、date（选择日期）</li> <li>value：对于文本框来说，value值为其默认值。对于单选或多选来说，表单提交的时候会把选中项的value值提交。对于按钮来说，value值会显示到按钮上</li> <li>name</li> </ol> <h5>文本框</h5> 单行输入文本框通过<code><input type="text"></code> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。通常浏览器限制最大输入字符数时20个 <pre><code class="prism language-html"><form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3KUxA6TZ-1675427827375)(imgs\image-20211124145315178.png)] <h5>密码框</h5> 密码字段通过标签<code><input type="password"></code> 来定义 <pre><code class="prism language-html"><form> Password: <input type="password" name="pwd"> </form> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LiT6IkXn-1675427827376)(imgs\image-20211124145447289.png)] <blockquote> 温馨提示 密码字段字符不会明文显示，而是以星号或圆点替代 </blockquote> <h5>单选</h5> 通过标签<code><input type="radio"></code> 来定义 <ul> <li>同一组的单选按钮name值应当相同</li> <li>选择单选选项后其标签的value值会传送给服务器</li> </ul> <pre><code class="prism language-html"> <form> 性别<input type="radio" value="男" name="sex" checked>男 <input type="radio" value="女" name="sex">女<br> </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/44ea8a56d4d54d8aba42b211a9dcf016.png" alt="image" width="150" height="31"> <h5>多选</h5> 通过标签<code><input type="checkbox"></code> 来定义 <h5>按钮</h5> 通过标签<code><input type="button"></code> 来定义。点击按钮后不会提交表单，常配合JS完成某项动作 <h5>提交按钮</h5> 当用户单击提交按钮后，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理 <pre><code class="prism language-html"><form name="input" action="url" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> </code></pre> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vc0R8fYd-1675427827377)(imgs\image-20211124150330131.png)] <h5>用日历选择日期</h5> 通过标签<code><input type="date"></code> 来定义 <a href="http://img.e-com-net.com/image/info8/136e4302c37a4a82aa1e4baeab563772.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/136e4302c37a4a82aa1e4baeab563772.gif" alt="HTML笔记_第23张图片" width="600" height="444" style="border:1px solid black;"></a> <h5>多行输入</h5> 多行输入用<code><textarea></textarea></code>表示 可以自行调节大小，cols和rows只是设置多行输入文本框的初始大小 <pre><code class="prism language-html"><textarea name="多行输入" cols="30" rows="10">多行输入</textarea> </code></pre> <a href="http://img.e-com-net.com/image/info8/fa9a03da4f26464ca1f236070eaa73f9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fa9a03da4f26464ca1f236070eaa73f9.png" alt="HTML笔记_第24张图片" width="310" height="206" style="border:1px solid black;"></a> <h5>label标签</h5> label标签常配合表单中的元素使用。<code><label></code>标签用于绑定一个表单元素, 当点击<code><label></code>标签内的文本时，浏览器就会自动聚焦输入框或选择对应的表单按钮元素,用来扩大触发或联动控制，这样可以用户体验 通过设置<code><label></code> 标签的 for 属性等于对应元素的 id 属性来产生关联 <pre><code class="prism language-html"> <form action="xxx.php" method="get"> <label for="username">用户名</label><input type="text" value="Please enter your username." id="username"> 性别<input type="radio" value="男" name="sex" id="male"> <label for="male">男</label> <input type="radio" value="女" name="sex" id="female"> <label for="female">女</label> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/f5880e715f6b4c38aa177adda0d36418.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/f5880e715f6b4c38aa177adda0d36418.gif" alt="image" width="446" height="46"></a> 实时效果反馈 1.设置输入框为密码框，type属性应该填写内容： A text B password C radio D name 答案 1=>B <h4>下拉列表——select标签</h4> 使用场景: 如果有多个选项让用户选择，但又想要节约页面空间 语法 <pre><code class="prism language-html"><select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> </code></pre> <ol> <li><code><select></code>中至少包含一对<code><option></code> 。</li> <li>在<code><option></code> 中设置属性selected时，当前项即为默认选中项。</li> </ol> <pre><code class="prism language-html"> <form> <select name="" id=""> <option>江西</option> <option>山东</option> <option selected>湖南</option> </select> </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/d9908684bb0749268e0f7949e0ac4db3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d9908684bb0749268e0f7949e0ac4db3.png" alt="image" width="118" height="34"></a> <h3>块元素与行内元素（内联元素）</h3> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAYAOBuW-1675427827382)(imgs\image-20211126104646087.png)] HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcvW9wUg-1675427827382)(imgs\Content_categories_venn.png)] 详细参考地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories 虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用 内联元素和块级元素的区别 <table> <thead> <tr> <th align="center">块级元素</th> <th align="center">内联元素</th> </tr> </thead> <tbody> <tr> <td align="center">块元素会在页面中独占一行（自上向下垂直排列）</td> <td align="center">行内或内联元素不会独占页面中的一行，只占自身的大小，呈左右排列</td> </tr> <tr> <td align="center">可以设置width，height属性</td> <td align="center">行内元素设置width，height属性无效</td> </tr> <tr> <td align="center">⼀般块级元素可以包含行内元素和其他块级元素</td> <td align="center">⼀般内联元素包含内联元素不包含块级元素</td> </tr> </tbody> </table> 常见块级元素（独占一行，可识别宽高） <blockquote> div、form、h1~h6、hr、p、table、ul、等 </blockquote> 常见内联元素(只占自身大小，不可识别宽高) <blockquote> a、b、em、i、span、strong等 </blockquote> 行内块级元素（特点：不换行、能够识别宽高） <blockquote> button、img、input等 </blockquote> <ul> <li>块级元素</li> <li>内联/行内元素(不换行) <ul> <li>内联元素(只占自身大小，不可识别宽高)</li> <li>行内块级元素（特点：不换行、能够识别宽高）</li> </ul> </li> </ul> 实时效果反馈 1.下列关于元素分类描述错误的是： A 块元素会在页面中独占一行,行内元素不会独占页面中的一行，只占自身的大小 B 块元素可以设置width，height属性,行内元素设置width，height属性无效 C ⼀般块级元素可以包含行内元素和其他块级元素,⼀般内联元素包含内联元素不包含块级元素 D 块元素可以设置大小,不会独占一行,行内元素无法无法设置大小,但是会独占一行 答案 1=>D <h3>HTML5新增标签</h3> 全局属性：所有HTML元素共有的属性。全局属性可以作用于所有元素，即使可能对某些元素不起作用。可以在所有的HTML元素上指定全局属性 <h4>新增媒体标签</h4> <h5><code><audio></code> 标签</h5> <code><audio></code> 标签定义声音，比如音乐或其他音频流。 目前，<code><audio></code> 元素支持的3种文件格式：MP3、Wav、Ogg。 提示：可以在 <code><audio></code> 和 <code></audio></code> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <code><audio></code> 标签的浏览器中。 <a href="http://img.e-com-net.com/image/info8/1ce6b9ae5e2a4476b67e7cc2e005649e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ce6b9ae5e2a4476b67e7cc2e005649e.jpg" alt="HTML笔记_第25张图片" width="650" height="309" style="border:1px solid black;"></a> <h5><code><video></code>标签</h5> <code><video></code>标签定义视频，比如电影片段或其他视频流。 目前，<code><video></code> 元素支持三种视频格式：MP4、WebM、Ogg。 <a href="http://img.e-com-net.com/image/info8/7619bc441aef4567ace582e4277d690f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7619bc441aef4567ace582e4277d690f.jpg" alt="HTML笔记_第26张图片" width="650" height="146" style="border:1px solid black;"></a> 提示：可以在 <code><video></code> 和 <code></video></code> 标签之间放置文本内容，这样不支持 <code><video></code> 元素的浏览器就可以显示出该标签的信息。 <a href="http://img.e-com-net.com/image/info8/4d01bb3f74b7497c820706c700771c63.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4d01bb3f74b7497c820706c700771c63.jpg" alt="HTML笔记_第27张图片" width="650" height="395" style="border:1px solid black;"></a> <h5><code><source></code> 标签</h5> <code><source></code> 标签为媒体元素（比如 <code><video></code> 和 <code><audio></code>）定义媒体资源。 <code><source></code> 标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 <a href="http://img.e-com-net.com/image/info8/8b6cf1c42fdb4211830cf69450200fb3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b6cf1c42fdb4211830cf69450200fb3.jpg" alt="HTML笔记_第28张图片" width="650" height="252" style="border:1px solid black;"></a> <h5><code><track></code>标签</h5> <code><track></code> 标签为媒体元素（比如 <code><audio></code> and <code><video></code>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件）。 这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。 <a href="http://img.e-com-net.com/image/info8/ac6d1cf057fb43e6b110ec52880a998d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ac6d1cf057fb43e6b110ec52880a998d.jpg" alt="HTML笔记_第29张图片" width="650" height="332" style="border:1px solid black;"></a> <h5><code><datalist></code>标签</h5> <code><datalist></code> 为 <code><input></code>输入框提供了可能的选项，用户可以选择这些选项实现自动填充，也可以随意输入非候选项 <code><datalist></code> 标签被用来在为 <code><input></code> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，可以作为用户的输入数据。 请使用 <code><input></code> 元素的 list 属性来绑定 <code><datalist></code> 元素。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p> </body> </html> </code></pre> <h4>新增语义和结构标签</h4> <a href="http://img.e-com-net.com/image/info8/2b471cf6a3884cf8a343a65229c3ab7d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b471cf6a3884cf8a343a65229c3ab7d.jpg" alt="HTML笔记_第30张图片" width="650" height="273" style="border:1px solid black;"></a> <code>HTML5</code>是<code>HTML</code>最新的修订版本，2014年10月由万维网联盟<code>（W3C）</code>完成标准制定 在<code>HTML5</code>出现之前，我们一般采用<code>DIV+CSS</code>布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，<code>HTML5</code>新增了很多新的语义化标签 <ol> <li><code><header></header></code> 头部</li> <li><code><nav></nav></code> 导航</li> <li><code><section></section></code>定义文档中的节,比如章节、页眉、页脚</li> <li><code><aside></aside></code> 侧边栏</li> <li><code><footer></footer></code> 脚部</li> <li><code><article></article></code> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等</li> </ol> 实时效果反馈 1.下列哪个不属于HTML5的新增标签 A <code><header></header></code> B <code><div></div></code> C <code><footer></footer></code> D <code><nav></nav></code> 答案 1=>B <h4>其他新增</h4> <h5>Canvas</h5> <code><canvas></code> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 HTML5 <code><canvas></code> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <code><canvas></code> 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c93b13be467f4e4ab235fe9f00af2a15.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c93b13be467f4e4ab235fe9f00af2a15.png" alt="HTML笔记_第31张图片" width="271" height="149" style="border:1px solid black;"></a> <h5>SVG</h5> SVG 定义为可缩放矢量图形。 HTML5 支持内联 SVG。 HTML <code><svg></code> 元素是 SVG 图形的容器。 SVG 有多种绘制路径、框、圆、文本和图形图像的方法 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/> </svg> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/1e4efc6adbda4f9d842c29f18c57c319.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1e4efc6adbda4f9d842c29f18c57c319.png" alt="HTML笔记_第32张图片" width="289" height="261" style="border:1px solid black;"></a> SVG 与 Canvas两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 <a href="http://img.e-com-net.com/image/info8/c4c3a529b1a4492387fe1b3cca313989.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c4c3a529b1a4492387fe1b3cca313989.jpg" alt="HTML笔记_第33张图片" width="650" height="222" style="border:1px solid black;"></a> <h5>拖放</h5> <h5>地理定位</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p> <button onclick="getLocation()">点我</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + " 经度: " + position.coords.longitude; } </script> </body> </html> </code></pre> 运行结果 经度：23 维度：123 点我 <h5>新的input类型</h5> HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。新的类型有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week <h6>Input 类型: color</h6> color 类型用在input字段主要用于选取颜色，如下所示： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html> </code></pre> 选择你喜欢的颜色: <h6>Input 类型: date</h6> date 类型允许你从一个日期选择器选择一个日期。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html> </code></pre> 生日: <h5>Input 类型: datetime-local</h5> datetime-local 类型允许你选择一个日期和时间 (无时区). <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和时间): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html> </code></pre> 生日 (日期和时间): <h5>Input 类型: email</h5> email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="email" 。</p> </body> </html> </code></pre> E-mail: <h5>Input 类型: month</h5> month 类型允许你选择一个年月。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html> </code></pre> 生日 ( 月和年 ): <h5>Input 类型: number</h5> number 类型用于应该包含数值的输入域。可以限定数字的范围 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5" style="width:40px" step="2" value="1"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早 IE 版本不支持 type="number" 。</p> </body> </html> </code></pre> 数量 ( 1 到 5 之间): <a href="http://img.e-com-net.com/image/info8/111f56f0ae504c7ca241d066122bfbd8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/111f56f0ae504c7ca241d066122bfbd8.jpg" alt="HTML笔记_第34张图片" width="650" height="356" style="border:1px solid black;"></a> <h5>Input 类型: range</h5> range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p> </body> </html> </code></pre> Points: max - 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔 value - 规定默认值 <h5>Input 类型: time</h5> time 类型允许你选择一个时间 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 选择时间: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html> </code></pre> 选择时间: <h5>Input 类型: url</h5> url 类型用于应该包含 URL 地址的输入域。 在提交表单时，会自动验证 url 域的值。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 添加你的主页: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p> </body> </html> </code></pre> 添加你的主页: <h5>Input 类型: week</h5> week 类型允许你选择周和年。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action="demo-form.php"> 选择周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html> </code></pre> 选择周: </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1745421225389211648"></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,html,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1939784868821004288.htm" title="招标专家随机抽选——抽取结果打印模板设计—未来之窗智能编程——仙盟创梦IDE" target="_blank">招标专家随机抽选——抽取结果打印模板设计—未来之窗智能编程——仙盟创梦IDE</a> 未来之窗软件服务 <a class="tag" taget="_blank" href="/search/%E6%8B%9B%E6%A0%87%E4%B8%93%E5%AE%B6/1.htm">招标专家</a><a class="tag" taget="_blank" href="/search/%E4%BB%99%E7%9B%9F%E5%88%9B%E6%A2%A6IDE/1.htm">仙盟创梦IDE</a><a class="tag" taget="_blank" href="/search/%E4%B8%9C%E6%96%B9%E4%BB%99%E7%9B%9F/1.htm">东方仙盟</a> <div>打印代码function未来之窗_人工智能_打印指定区域(魔都id){varmode="iframe";varclose=false;varextraCss=`.cyberwinqrimg{display:inline-block!important;}`;varkeepAttr=[];keepAttr.push($("#"+魔都id).html());varheadElements=',';va</div> </li> <li><a href="/article/1939781970565328896.htm" title="一种文档与代码双轨处理的RAG架构方案" target="_blank">一种文档与代码双轨处理的RAG架构方案</a> 木鱼时刻 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%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/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>1.目标如何构建一个能同时高效处理文档和代码的RAG系统？本文提出的融合架构，旨在解决这一核心挑战。2.整体架构概览该系统的顶层设计思想是专业分工，统一调度。它将复杂的知识处理流程拆解为清晰的模块，各模块各司其职，最终由一个核心服务进行统一编排。+-------------------+|前端||(DifyWeb界面)|+-------------------+|+----------------</div> </li> <li><a href="/article/1939780710994866176.htm" title="嵌入式AI项目综合应用分享" target="_blank">嵌入式AI项目综合应用分享</a> 嵌入式开发星球 <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>01EdgeOnePagesMCP你使用Cursor生成的HTML静态页面，如何发布出去让其它人也能访问到？腾讯开源的EdgeOnePagesMCP能帮上你的忙，它能将HTML内容、文件夹和zip文件部署到EdgeOnePages，丢给一个可公开访问的URL链接。你看，使用这个MCP服务，可以直接把AI写的2048小游戏部署它起来。变成一个mcp.edgeone.app/share/url形式的链</div> </li> <li><a href="/article/1939776174465019904.htm" title="iOS开发-进阶:音频播放、录音、视频播放、拍照、视频录制" target="_blank">iOS开发-进阶:音频播放、录音、视频播放、拍照、视频录制</a> nikoLiLol <div>转自:http://www.cnblogs.com/kenshincui/p/4186022.html#audioRecord文章太长了,如果我这里写的质量不好,请参考原文;概览随着移动互联网的发展，如今的手机早已不是打电话、发短信那么简单了，播放音乐、视频、录音、拍照等都是很常用的功能。在iOS中对于多媒体的支持是非常强大的，无论是音视频播放、录制，还是对麦克风、摄像头的操作都提供了多套API。</div> </li> <li><a href="/article/1939756133497499648.htm" title="HtmlEx：HTML高级开发与实战指南" target="_blank">HtmlEx：HTML高级开发与实战指南</a> 浮华ya <div>本文还有配套的精品资源，点击获取简介：HTML是创建网页的基础，而"HtmlEx"项目旨在提升开发者的HTML技能。内容包括HTML5新特性，CSS和JavaScript的深入集成，表单元素的使用和验证，多媒体支持，Web组件，SEO优化，无障碍性实践，HTML模板语言使用，以及与后端框架的集成。通过实践讲解，让开发者在网页开发中更加得心应手。1.HTML基本结构与元素1.1HTML文档结构解析H</div> </li> <li><a href="/article/1939752348960223232.htm" title="ECMAScript 2019（ES2019）：数组与对象操作的精细化升级" target="_blank">ECMAScript 2019（ES2019）：数组与对象操作的精细化升级</a> DT—— <a class="tag" taget="_blank" href="/search/ECMAScript/1.htm">ECMAScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%86%E5%8F%B2%E8%BF%9B%E7%A8%8B/1.htm">历史进程</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>1.版本背景与发布发布时间：2019年6月，由ECMAInternational正式发布，标准编号为ECMA-26210thEdition。历史意义：作为ES6之后的第四次年度更新，ES2019聚焦于数组、对象和字符串操作的精细化改进，提升开发效率和代码可读性。时代背景：随着前端框架的成熟和Node.js的普及，开发者对数组扁平化、对象转换等高频操作的需求激增，ES2019的发布回应了这些痛点。2</div> </li> <li><a href="/article/1939750837395976192.htm" title="大话前端：Vue和React的生命周期" target="_blank">大话前端：Vue和React的生命周期</a> <div>Vue和React的生命周期可以比作一棵树的生命周期，从种子到成熟树木的整个过程。种子阶段（初始化）:Vue:这是创建Vue实例的过程，类似于树木的种子埋入土壤，开始萌芽。在这个阶段，Vue会初始化事件和生命周期，然后进入模板编译阶段。React:类似地，React组件的初始化阶段就像是种子的萌芽。这里涉及到组件的构造函数、getDefaultProps和getInitialState方法，它们为</div> </li> <li><a href="/article/1939727265927589888.htm" title="一款wordperss AI免费插件自动内容生成+前端AI交互+文章批量采集" target="_blank">一款wordperss AI免费插件自动内容生成+前端AI交互+文章批量采集</a> Linkreate <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/wordpressAI%E6%8F%92%E4%BB%B6/1.htm">wordpressAI插件</a><a class="tag" taget="_blank" href="/search/wordpress%E5%85%8D%E8%B4%B9%E6%8F%92%E4%BB%B6/1.htm">wordpress免费插件</a><a class="tag" taget="_blank" href="/search/wordpress%E8%87%AA%E5%8A%A8%E5%8F%91%E6%96%87/1.htm">wordpress自动发文</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8F%91%E6%96%87%E6%BA%90%E7%A0%81/1.htm">自动发文源码</a> <div>一款LinkreatewordperssAI自动内容生成+前端AI会话窗口交互+文章批量采集免费插件1.SEO优化文章生成关键词驱动的内容生成：用户可以输入关键词或长尾关键词，插件会根据这些关键词生成高质量的SEO优化文章。文章结构清晰，语言自然流畅，符合SEO标准，能够有效提升网站内容的搜索引擎排名。自定义文章长度和要求：用户可以根据需要指定文章的长度（字数）以及对文章的额外要求，例如内容风格、</div> </li> <li><a href="/article/1939718317669412864.htm" title="HTML之常用基础标签" target="_blank">HTML之常用基础标签</a> AA-代码批发V哥 <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML之常用基础标签一、HTML文档基本结构标签1.``标签2.``标签3.``标签二、文本相关基础标签1.标题标签（``-``）2.段落标签（``）3.换行标签（``）4.强调标签（``和``）5.代码标签（``、``等）三、链接相关基础标签1.超链接标签（``）2.图像标签（``）四、列表相关基础标签1.无序列表（``和``）2.有序列表（``和``）3.自定义列表（``、``和``）五、表</div> </li> <li><a href="/article/1939715335536046080.htm" title="中小团队零成本搭建PHP任务管理系统：4大核心工具实测推荐" target="_blank">中小团队零成本搭建PHP任务管理系统：4大核心工具实测推荐</a> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>引言在现代软件开发和团队协作中，高效的任务管理系统是提升生产力的核心要素。PHP作为全球最受欢迎的服务器端编程语言之一，凭借其成熟的生态系统、丰富的框架选择和强大的社区支持，成为构建任务管理系统的理想选择。一个优秀的PHP任务管理系统不仅能够实现任务的全生命周期管理，还能通过智能化的功能提升团队协作效率，降低项目管理成本。构建这样一个系统需要考虑多个层面：从底层的数据库设计到前端的用户体验，从安全</div> </li> <li><a href="/article/1939714909663195136.htm" title="Python实现语音识别功能，只需3个步骤！" target="_blank">Python实现语音识别功能，只需3个步骤！</a> <div>调用科大讯飞语音听写，使用Python实现语音识别，将实时语音转换为文字。首先在官网下载了关于语音听写的SDK，然后在文件夹内新建了两个.py文件，分别是get_audio.py和iat_demo.py，并且新建了一个存放录音的文件夹audios，文件夹内存放录音文件input.wav，我的整个文件目录如下：asr_SDK(文件名)├─Readme.html├─audios│└─input.wav</div> </li> <li><a href="/article/1939698009562476544.htm" title="Python 可迭代的对象、迭代器和生成器(标准库中的生成器函数)" target="_blank">Python 可迭代的对象、迭代器和生成器(标准库中的生成器函数)</a> 钢铁男儿 <a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8BPython/1.htm">流程Python</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>标准库中的生成器函数标准库提供了很多生成器，有用于逐行迭代纯文本文件的对象，还有出色的os.walk函数（https://docs.python.org/3/library/os.html#os.walk）。这个函数在遍历目录树的过程中产出文件名，因此递归搜索文件系统像for循环那样简单。os.walk生成器函数的作用令人赞叹，不过本节专注于通用的函数：参数为任意的可迭代对象，返回值是生成器，用于</div> </li> <li><a href="/article/1939697253291716608.htm" title="Android Gantt View 安卓实现项目甘特图" target="_blank">Android Gantt View 安卓实现项目甘特图</a> netkiller-BG7NYT <a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%9C%AD/1.htm">手札</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%94%98%E7%89%B9%E5%9B%BE/1.htm">甘特图</a> <div>需要做一个项目管理工具，其中使用到了甘特图。发现全网甘特图解决方案比较少，于是自动动手丰衣足食。前面我用Python和Node.js前端都做过，这次仅仅是移植到Android上面。其实甘特图非常简单，开发也不难，如果我专职去做，能做出一个非常棒产品。我写这个只是消遣，玩玩，闲的蛋痛，所以不怎么上心，就搞成下面这德行吧。仅仅供大家学习，参考。那天心情好了，完善一下。屏幕布局文件<androidx.c</div> </li> <li><a href="/article/1939696118396940288.htm" title="[dhtmlx]group task 失效问题解决" target="_blank">[dhtmlx]group task 失效问题解决</a> oscar999 <a class="tag" taget="_blank" href="/search/130-Web%E8%AF%AD%E8%A8%80/1.htm">130-Web语言</a> <div>1.问题描述使用了Gantt的Group功能，但是在进行系统调优，开启smart_rendering的设置后却出现如下状况：“Groupby时，总有部分task未group”问题细部描述与解决如下：2.Group功能与效果dhtmlxgantt提供了对task根据属性进行分组的功能。效果类似:实现方式的话，首先导入dhtmlxgantt_grouping.js；接下来在代码中处理如下：</div> </li> <li><a href="/article/1939689564201349120.htm" title="Spring boot 注解实现幂等性" target="_blank">Spring boot 注解实现幂等性</a> 夏壹分享 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%8A%80%E6%9C%AF%E4%BD%93%E7%B3%BB/1.htm">微服务技术体系</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>1.添加SpringAOP依赖在pom.xml中添加如下依赖：2.创建自定义幂等性注解创建一个新的Java注解类，通过@interface关键字来定义，并可以添加元注解以及属性。/***《像乌鸦一样思考》让孩子学会观察和独立思考！*https://www.sanzhiwa.top/6718.html*/@Retention(RetentionPolicy.RUNTIME)//程序运行时有效@Tar</div> </li> <li><a href="/article/1939686538862456832.htm" title="CSS 伪类详解" target="_blank">CSS 伪类详解</a> lsx202406 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>CSS伪类详解引言在网页设计中，CSS（层叠样式表）是用于描述HTML或XML文档样式的语言。CSS伪类是CSS选择器的一部分，用于指定元素的特定状态。伪类可以让我们为不同的元素状态设置不同的样式，从而实现更加丰富和动态的网页效果。伪类的概述伪类是一种特殊的CSS选择器，它可以用来选择具有特定状态的元素。这些状态可以是用户的交互行为，如鼠标悬停、链接未访问等，也可以是元素的特定位置，如第一个子元素</div> </li> <li><a href="/article/1939682372236668928.htm" title="每天一个前端小知识 Day 16 - 前端性能优化全流程指南" target="_blank">每天一个前端小知识 Day 16 - 前端性能优化全流程指南</a> 蓝婷儿 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>前端性能优化全流程指南（从加载到交互）目标概览：前端性能优化四大核心维度阶段优化目标加载阶段首屏速度、资源压缩、请求优化渲染阶段减少回流重绘、避免布局抖动交互阶段保持高帧率、避免卡顿持久运行阶段内存泄露处理、缓存命中策略一、加载性能优化（首屏速度为王）✅核心策略：资源体积优化JS/CSS/图片压缩（如gzip,brotli）Tree-shaking（去除无用代码）图片压缩（webp优先）合理拆包（</div> </li> <li><a href="/article/1939641532214734848.htm" title="JS 与 CSS 的交互式开发：打造灵动的网页体验" target="_blank">JS 与 CSS 的交互式开发：打造灵动的网页体验</a> 维他奶糖61 <a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</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%89%8D%E7%AB%AF/1.htm">前端</a> <div>在当今的网页开发领域，静态的网页早已无法满足用户日益增长的交互需求。JavaScript（JS）和层叠样式表（CSS）作为前端开发的两大支柱，它们的强强联合能够创造出令人惊叹的交互式网页效果。从简单的按钮点击变色，到复杂的动画过渡和动态页面布局变换，JS与CSS的交互式开发赋予了网页生命与活力。接下来，就让我们深入探索这一奇妙的领域。理解JS与CSS的分工与协作在开始交互式开发之前，我们需要明确J</div> </li> <li><a href="/article/1939641533296865280.htm" title="Python 图片爬虫实战：从代码解析到应用技巧" target="_blank">Python 图片爬虫实战：从代码解析到应用技巧</a> 维他奶糖61 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在数字时代，图片资源丰富多样，通过爬虫技术批量获取心仪的图片成为不少人的需求。本文将以爬取彼岸桌面壁纸网4K美女壁纸为例，深入解析Python图片爬虫代码，分享实用技巧，带你轻松掌握图片爬虫技术。一、爬虫实现思路爬虫的核心是模拟浏览器访问网页，解析页面内容，提取所需信息。本次爬虫的流程如下：构建目标网页URL列表，循环访问各页面；发送HTTP请求获取页面内容，解析HTML文档；定位图片元素，提取图</div> </li> <li><a href="/article/1939627404326662144.htm" title="HTML前端的自动化构建工具使用" target="_blank">HTML前端的自动化构建工具使用</a> 前端视界 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>HTML前端的自动化构建工具使用：从手工作坊到智能工厂的蜕变关键词：前端构建工具、自动化流程、Gulp、Webpack、前端工程化摘要：本文将带你从前端开发的“手工作坊时代”出发，一步步理解为什么需要自动化构建工具，揭秘核心概念和工作原理，并通过实战案例教你用Gulp和Webpack搭建高效的前端工作流。无论你是刚入门的前端新手，还是想优化现有项目的开发者，都能在这里找到从“手动劳动”到“智能生产</div> </li> <li><a href="/article/1939623752572661760.htm" title="用Pytorch训练手写签名模型并进行签名识别" target="_blank">用Pytorch训练手写签名模型并进行签名识别</a> TBM矩阵 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/AI%E4%BD%93%E7%B3%BB%E5%AD%A6%E4%B9%A0/1.htm">AI体系学习</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</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/python/1.htm">python</a> <div>整体思路收集至少两个人的手写签名图片，每个人至少20张使用Pytorch进行模型训练使用Flask搭建Web服务使用Html/JavaScript实现前端调用进行签名识别项目结构signature-systemdatatrainuser001001.png...user002001.png...templatesindex.htmlapp.pymodel.pytrain.py建模：model.py</div> </li> <li><a href="/article/1939622490494005248.htm" title="Node.js特训专栏-实战进阶：7.Express模板引擎选型与使用" target="_blank">Node.js特训专栏-实战进阶：7.Express模板引擎选型与使用</a> 爱分享的程序员 <a class="tag" taget="_blank" href="/search/Node.js/1.htm">Node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>欢迎来到Node.js实战专栏！在这里，每一行代码都是解锁高性能应用的钥匙，让我们一起开启Node.js的奇妙开发之旅！Node.js特训专栏主页专栏内容规划详情Express模板引擎选型与使用全解析：打造动态Web页面的利器在基于Express构建Web应用时，模板引擎是生成动态页面的核心组件。它允许开发者将数据与HTML结构分离，通过简单的语法将后端数据动态填充到页面中。市面上存在多种模板引擎</div> </li> <li><a href="/article/1939620346080587776.htm" title="FlatBuffers（概念、原理及优势、在TS中的使用）" target="_blank">FlatBuffers（概念、原理及优势、在TS中的使用）</a> 前端杂货铺 <a class="tag" taget="_blank" href="/search/TodoList/1.htm">TodoList</a><a class="tag" taget="_blank" href="/search/100%E4%B8%AA%E5%B0%8F%E7%9F%A5%E8%AF%86/1.htm">100个小知识</a><a class="tag" taget="_blank" href="/search/FlatBuffers/1.htm">FlatBuffers</a><a class="tag" taget="_blank" href="/search/JSON/1.htm">JSON</a><a class="tag" taget="_blank" href="/search/%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">序列化</a><a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">反序列化</a> <div>个人简介个人主页：前端杂货铺‍♂️学习方向：主攻前端方向，正逐渐往全干发展个人状态：研发工程师，现效力于中国工业软件事业人生格言：积跬步至千里，积小流成江海推荐学习：前端面试宝典100个小功能Vue2Vue3Vue2/3项目实战Node.js实战Three.js个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧文章目录介绍在Vue中使用FlatBuffersFlatBuff</div> </li> <li><a href="/article/1939613789125144576.htm" title="Node.js 后端开发：与前端的完美结合" target="_blank">Node.js 后端开发：与前端的完美结合</a> <div>Node.js后端开发：与前端的完美结合关键词：Node.js、后端开发、前后端分离、RESTfulAPI、Express、性能优化、全栈开发摘要：本文深入探讨Node.js在后端开发中的优势及其与前端的完美结合方式。我们将从Node.js的核心特性出发，分析其适合后端开发的原因，详细介绍如何构建高性能的RESTfulAPI服务，探讨前后端分离架构的最佳实践，并通过实际项目案例展示Node.js如</div> </li> <li><a href="/article/1939600179430748160.htm" title="前端React和Vue框架的区别" target="_blank">前端React和Vue框架的区别</a> <div>React和Vue作为前端Web开发的两大主流框架，虽然都用于构建用户界面，但在设计理念、语法风格、生态系统等方面存在显著差异。以下从多个维度对比两者的核心区别，帮助你在技术选型时做出更合适的决策。一、设计理念与架构1.数据流控制React：强制单向数据流（One-WayDataFlow），状态变化只能通过父组件→子组件传递，如需反向通信（如子组件修改父组件状态），需通过回调函数实现。复杂应用中需</div> </li> <li><a href="/article/1939593626833186816.htm" title="前端基础知识JavaScript系列 - 25（Javascript本地存储）" target="_blank">前端基础知识JavaScript系列 - 25（Javascript本地存储）</a> 前端小白从0开始 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、方式javaScript本地缓存的方法我们主要讲述以下四种：cookiesessionStoragelocalStorageindexedDBcookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题作为一段一般不超过4KB的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制cooki</div> </li> <li><a href="/article/1939579119985553408.htm" title="前端vue2 报错不是一个函数怎么解决？" target="_blank">前端vue2 报错不是一个函数怎么解决？</a> 突然暴富的我 || 比较富的我 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>检查函数定义确保报错的函数确实在对应的组件或模块中正确定义。函数需要在methods对象中声明，或在混合（mixins）、插件中正确引入。例如：methods:{myFunction(){//函数逻辑}}检查函数调用方式确认函数调用时没有拼写错误，且调用方式正确。在模板中调用需使用@click="myFunction"，在脚本中调用需使用this.myFunction()。注意避免直接调用未绑定的</div> </li> <li><a href="/article/1939574708588572672.htm" title="小程序领域开发语言的基础教程" target="_blank">小程序领域开发语言的基础教程</a> 小程序开发2020 <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/ai/1.htm">ai</a> <div>小程序领域开发语言的基础教程：从0到1轻松入门关键词：小程序开发、WXML、WXSS、JavaScript、双线程模型、生命周期、组件化摘要：本文是针对小程序开发语言的零基础入门指南，通过生活类比、代码示例和实战案例，详细讲解小程序核心开发语言（WXML/WXSS/JavaScript）的原理、协作方式及实际应用。无论你是前端新手还是想转行小程序开发的小白，都能通过本文掌握小程序开发的“三板斧”，</div> </li> <li><a href="/article/1939574582352605184.htm" title="利用H5为小程序领域增添新活力" target="_blank">利用H5为小程序领域增添新活力</a> 小程序开发2020 <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E5%AE%9D%E5%85%B8/1.htm">小程序开发宝典</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>利用H5为小程序领域增添新活力关键词：H5技术、小程序开发、跨平台架构、WebView通信、动态内容渲染、性能优化、全栈开发摘要：本文深入探讨如何通过HTML5（H5）技术提升小程序开发效率与用户体验。从技术架构对比到核心通信机制，结合具体代码案例解析H5与小程序的深度融合方案。通过WebView嵌入、JSSDK扩展、动态模板渲染等技术手段，实现跨平台代码复用、复杂交互组件开发和实时内容更新。同时</div> </li> <li><a href="/article/1939573826388029440.htm" title="HTML5的新特性" target="_blank">HTML5的新特性</a> 码哥DFS <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.视频video支持MP4、ogg、webm格式src:url视频播放地址autoplay:autoplay视频就绪自动播放，谷歌浏览器需要添加muted来解决自动播放问题controls：controls向用户显示播放插件loop：loop循环播放poster:imgural加载等待的画面图片muted:muted静音播放2.音频audio支持MP3、Wav、Ogg格式autoplay:aut</div> </li> <li><a href="/article/107.htm" title="web报表工具FineReport常见的数据集报错错误代码和解释" target="_blank">web报表工具FineReport常见的数据集报错错误代码和解释</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7/1.htm">可视化工具</a> <div>在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。 NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码</div> </li> <li><a href="/article/234.htm" title="Java的WeakReference与WeakHashMap" target="_blank">Java的WeakReference与WeakHashMap</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%B1%E5%BC%95%E7%94%A8/1.htm">弱引用</a> <div>首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea</div> </li> <li><a href="/article/361.htm" title="Linux——（hostname）主机名与ip的映射" target="_blank">Linux——（hostname）主机名与ip的映射</a> eksliang <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hostname/1.htm">hostname</a> <div>一、什么是主机名无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的；主机名是用于什么的呢？答：在一个局域网中，每台机器都有一个主</div> </li> <li><a href="/article/488.htm" title="oracle 常用技巧" target="_blank">oracle 常用技巧</a> 18289753290 <div>oracle常用技巧 ①复制表结构和数据 create table temp_clientloginUser as select distinct userid from tbusrtloginlog ②仅复制数据如果表结构一样 insert into mytable select * &nb</div> </li> <li><a href="/article/615.htm" title="使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException" target="_blank">使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou</div> </li> <li><a href="/article/742.htm" title="IT系统分析师如何学习大数据" target="_blank">IT系统分析师如何学习大数据</a> 蓝儿唯美 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能</div> </li> <li><a href="/article/869.htm" title="spring学习——简介" target="_blank">spring学习——简介</a> a-john <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，</div> </li> <li><a href="/article/996.htm" title="自定义颜色的xml文件" target="_blank">自定义颜色的xml文件</a> aijuans <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div><?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &</div> </li> <li><a href="/article/1123.htm" title="运营到底是做什么的？" target="_blank">运营到底是做什么的？</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E8%BF%90%E8%90%A5%E5%88%B0%E5%BA%95%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F/1.htm">运营到底是做什么的？</a> <div>文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用</div> </li> <li><a href="/article/1250.htm" title="js面向对象类和对象" target="_blank">js面向对象类和对象</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1/1.htm">函数创建类和对象</a> <div>接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下 ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似下面介绍一些js的类和对象的创建的技术一:类和对</div> </li> <li><a href="/article/1377.htm" title="web.xml之资源管理对象配置 resource-env-ref" target="_blank">web.xml之资源管理对象配置 resource-env-ref</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类</div> </li> <li><a href="/article/1504.htm" title="Create a composite component with a custom namespace" target="_blank">Create a composite component with a custom namespace</a> sunjing <div>https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace When you developed a composite component the namespace you would be seeing would </div> </li> <li><a href="/article/1631.htm" title="【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter" target="_blank">【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter</a> bit1129 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> 一、复本集为什么要加入Arbiter这个角色回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a </div> </li> <li><a href="/article/1758.htm" title="Javascript开发笔记" target="_blank">Javascript开发笔记</a> 白糖_ <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> 获取iframe内的元素通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if</div> </li> <li><a href="/article/1885.htm" title="Web浏览器Chrome打开一段时间后，运行alert无效" target="_blank">Web浏览器Chrome打开一段时间后，运行alert无效</a> bozch <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/chorme/1.htm">chorme</a><a class="tag" taget="_blank" href="/search/alert/1.htm">alert</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%95%88/1.htm">无效</a> <div>今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。试了试其他浏览器，发现都是没有问题的。开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了就关闭浏览器重启。结果就好了，这也太怪异了。难道是cho</div> </li> <li><a href="/article/2012.htm" title="编程之美-高效地安排会议图着色问题贪心算法" target="_blank">编程之美-高效地安排会议图着色问题贪心算法</a> bylijinnan <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美高效地安排会议图着色问题贪心算法 * 假设要用很多个教室对一组</div> </li> <li><a href="/article/2139.htm" title="机器学习相关概念和开发工具" target="_blank">机器学习相关概念和开发工具</a> chenbowen00 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>基本概念：机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。开发工具 M</div> </li> <li><a href="/article/2266.htm" title="[宇宙经济学]关于在太空建立永久定居点的可能性" target="_blank">[宇宙经济学]关于在太空建立永久定居点的可能性</a> comsci <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a> <div> 大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........ 所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点</div> </li> <li><a href="/article/2393.htm" title="oracle 11g database control 证书错误" target="_blank">oracle 11g database control 证书错误</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6%E9%94%99%E8%AF%AF/1.htm">证书错误</a><a class="tag" taget="_blank" href="/search/oracle+11G+%E5%AE%89%E8%A3%85/1.htm">oracle 11G 安装</a> <div>oracle 11g database control 证书错误 win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面解决办法：是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：</div> </li> <li><a href="/article/2520.htm" title="Java I/O之用FilenameFilter实现根据文件扩展名删除文件" target="_blank">Java I/O之用FilenameFilter实现根据文件扩展名删除文件</a> 游其是你 <a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a> <div>在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </div> </li> <li><a href="/article/2647.htm" title="C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例" target="_blank">C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a> <div># include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",</div> </li> <li><a href="/article/2774.htm" title="PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引" target="_blank">PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/primary/1.htm">primary</a> <div>PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。就是唯一且不能为空。INDEX 索引，普通的UNIQUE 唯一索引。不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号 INT会员姓名 </div> </li> <li><a href="/article/2901.htm" title="java集合辅助类 Collections、Arrays" target="_blank">java集合辅助类 Collections、Arrays</a> shuizhaosi888 <a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a><a class="tag" taget="_blank" href="/search/Arrays/1.htm">Arrays</a><a class="tag" taget="_blank" href="/search/HashCode/1.htm">HashCode</a> <div> Arrays、Collections 1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); } a）Arrays.asL</div> </li> <li><a href="/article/3028.htm" title="Spring Security（10）——退出登录logout" target="_blank">Spring Security（10）——退出登录logout</a> 234390216 <a class="tag" taget="_blank" href="/search/logout/1.htm">logout</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95/1.htm">退出登录</a><a class="tag" taget="_blank" href="/search/logout-url/1.htm">logout-url</a><a class="tag" taget="_blank" href="/search/LogoutFilter/1.htm">LogoutFilter</a> <div> 要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu</div> </li> <li><a href="/article/3155.htm" title="透过源码学前端之 Backbone 三 Model" target="_blank">透过源码学前端之 Backbone 三 Model</a> 逐行分析JS源代码 <a class="tag" taget="_blank" href="/search/backbone/1.htm">backbone</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">源码分析</a><a class="tag" taget="_blank" href="/search/js%E5%AD%A6%E4%B9%A0/1.htm">js学习</a> <div>Backbone 分析第三部分 Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里，但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件，如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。 </div> </li> <li><a href="/article/3282.htm" title="SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter" target="_blank">SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter</a> 乒乓狂魔 <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate</div> </li> <li><a href="/article/3409.htm" title="分布式基础知识和算法理论" target="_blank">分布式基础知识和算法理论</a> bluky999 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%87%B4%E6%80%A7%E5%93%88%E5%B8%8C/1.htm">一致性哈希</a><a class="tag" taget="_blank" href="/search/paxos/1.htm">paxos</a> <div> 分布式基础知识和算法理论 BY NODEXY@2014.8.12 本文永久链接：http://nodex.iteye.com/blog/2103218 在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同</div> </li> <li><a href="/article/3536.htm" title="Android Studio的.gitignore以及gitignore无效的解决" target="_blank">Android Studio的.gitignore以及gitignore无效的解决</a> bell0901 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/gitignore/1.htm">gitignore</a> <div>　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store </div> </li> <li><a href="/article/3663.htm" title="成为高级程序员的10个步骤" target="_blank">成为高级程序员的10个步骤</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进历经更大的挑战。随着你的成长，各种影响力也会提高。 </div> </li> <li><a href="/article/3790.htm" title="mongdb在linux下的安装" target="_blank">mongdb在linux下的安装</a> xtuhcy <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、查询linux版本号： lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </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>