墨鸦_Cormorant

HTML 入门指南

简述

参考：HTML 教程- (HTML5 标准)

HTML 语言的介绍、特点

HTML：超级文本标记语言（HyperText Markup Language）

“超文本” 就是指页面内可以包含图片、链接等非文字内容。
“标记” 就是使用标签的方法将需要的内容包括起来。例如：www.itcast.cn

HTML 用于编写网页。平时上网通过浏览器看到的大部分页面都是由 html 编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的 html 代码。

网页内容包含：HTML 代码、CSS 代码、JavaScript 代码等内容。

HTML 代码：用于展示需要显示的数据。
CSS 代码：使显示的数据更加好看。
JavaScript 代码：使整个页面显示的数据具有动画效果。

HTML 标签|元素

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思

但是严格来讲，一个 HTML 元素包含了开始标签与结束标签
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 语言特点

HTML 文件不需要编译，直接使用浏览器阅读即可
HTML 文件的扩展名是 *.html 或 *.htm
HTML 结构都是由标签组成
- 标签名预先定义好的，只需要了解其功能即可
- 标签名不区分大小写
  
  例如：标签体
- 通常情况下标签由开始标签和结束标签组成
  
  例如：标签体
- 如果没有结束标签，建议以 / 结尾。例如：
HTML 结构包括两部分：head（头）和（body）体
html 和 xml 的区别
- html:
  - 给用户展示数据（显示文字，显示图片…）
  - 标签都是预定义好的，都是固定的，例如 a，img，hr…
  - 使用浏览器打开 html 文档，会自动解析
- xml:
  - 用来存储数据
  - 标签可以随意编写起名
  - 使用 dom4j 解析 xml 文档的内容

HTML 页面实例解析

：声明为 HTML5 文档。声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。
：元素是 HTML 页面的根元素，理论上一个页面只需要一个，由头和体组成。
：头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示

文档的元（meta）数据，如
- ，定义网页编码格式为 utf-8
- </code> ：元素描述了文档的标题</li> </ul> </li> <li> <code><body></code> ：体标签，是整个网页的主体，元素包含了可见的页面内容 </li> <li> <code><h1></code> ：元素定义一个大标题 </li> <li> <code></code> ：元素定义一个段落 </li> </ul> **注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。 <h3>Idea 创建 html 项目（图示）</h3> 使用“记事本”开发效率低，可以使用 IDEA 提供模板代码直接开发 hmtl <a href="http://img.e-com-net.com/image/info8/9256ce6d0fa94b83bfb5f9e5577acc9d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9256ce6d0fa94b83bfb5f9e5577acc9d.jpg" alt="HTML 入门指南_第2张图片" width="650" height="422" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/d4133b310b2d4de6b177ad6025622a7b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4133b310b2d4de6b177ad6025622a7b.jpg" alt="HTML 入门指南_第3张图片" width="650" height="620" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/f5bf1312a3824f258ddb76e41045114e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f5bf1312a3824f258ddb76e41045114e.jpg" alt="HTML 入门指南_第4张图片" width="650" height="545" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/54c5deac7c244cc190d680eefa9e4925.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/54c5deac7c244cc190d680eefa9e4925.jpg" alt="HTML 入门指南_第5张图片" width="650" height="335" style="border:1px solid black;"></a> <h3>浏览器内核</h3> 浏览器内核：浏览器的解析引擎 当使用浏览器打开 html 文件的时候，浏览器会使用内置的解析引擎（内核），对 html 页面中的标签进行解析，把 html 页面中的标签解析为能看懂的内容 浏览器分类： <ul> <li>IE 内核的浏览器（QQ，360，遨游，世纪之窗等壳子浏览器）：不建议使用，IE9 及以下版本不支持 html5</li> <li>火狐内核的浏览器：建议使用</li> <li>谷歌（苹果）内核浏览器：建议使用</li> </ul> <h2>HTML 常用基础标签</h2> <h3>标签列表（含详解）</h3> 传送门 <h3>基础标签</h3> <ul> <li> <code><!DOCTYPE></code> ：定义文档类型 </li> <li> <code><html></code> ：定义一个 HTML 文档 </li> <li> <code><title></code> ：为文档定义一个标题 </li> <li> <code><body></code> ：定义文档的主体 </li> <li> <code><h1></code> to <code><h6></code> ：定义 HTML 标题，标题中的文字会自动的加粗 行间元素：会独自占用 html 中的一行 <code><h1>标题文字</h1></code> 最大 <code><h6>标题文字</h6></code> 最小 </li> <li> <code></code> ：定义一个段落 </li> <li> <code> </code> ：定义简单的折行 </li> <li> <code><hr></code> ：定义水平线，可以把页面分成上下两部分 </li> <li> <code></code> ：定义一个注释 注释特点： <ul> <li>浏览器查看时，不显示。右键查看源码可以看到。</li> <li>注释标签不能嵌套。</li> <li>注释特殊用法，为不同的浏览器提供不同的解决方案（了解）</li> </ul> </li> </ul> <h3>格式标签</h3> 格式化标签的作用：用于对文字进行格式化 常用标签： <ul> <li> <code></code> ：定义粗体文本 </li> <li> <code></code>：定义斜体文本 </li> <li> <code></code> ：定义下划线文本 </li> <li> <code> </code>：HTML5 不再支持， HTML 4.01 已废弃。定义文本的字体、尺寸和颜色 注意： </li> <li> 在 html 中同级的标签是可以相互嵌套使用的 例如：<code></code> </li> </ul> <h3>图片标签</h3> 图片标签作用：用于在页面中显示一个图片 常用标签： <ul> <li> <code><img/></code> ：定义图像，自闭和标签 常用属性： <ul> <li>src：设置图片的路径(建议使用相对路径)</li> <li>title：设置图片的标题，鼠标移动到图片上，会显示标题</li> <li>alt：图片丢失，显示文字</li> <li>height：设置图片的高度，单位是像素px</li> <li>width：设置图片的宽度，单位是像素px</li> </ul> 示例： <pre><code class="prism language-html"><img src="img/2.jpg" height="200px" width="150px" title="我是一个美女"/> </code></pre> </li> </ul> <h3>列表标签</h3> 列表标签作用：用于在页面中显示一个列表 常用标签： <ul> <li> <code><ol></code> ：定义一个有序列表 格式： <pre><code class="prism language-html"><ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... <li>列表项</li> </ol> </code></pre> 属性： <ul> <li>type：用于设置列表显示的文字(1，I，A，a…)，缺省默认是阿拉伯数字</li> </ul> </li> <li> <code><ul></code> ：定义一个无序列表 格式： <pre><code class="prism language-html"><ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... <li>列表项</li> </ul> </code></pre> 属性： <ul> <li> type：用于设置列表显示的形状 属性值： disc实心圆（不写默认）、 square方块、circle空心圆 </li> </ul> </li> <li> <code><li></code> ：定义一个列表标签中的列表项 注意： <ul> <li>单独书写 ol 和 ul 标签没有意义，必须和列表项 li 标签一起使用</li> <li>每个 li 标签都会占用 html 中的一行(行级元素)</li> </ul> </li> </ul> <h3>超链接标签</h3> 超链接标签作用：用于页面的跳转，可以由一个页面跳转到另外一个页面 常用标签： <ul> <li> <code><a></code> ：定义一个链接 使用示例： <pre><code class="prism language-html"><a>文字|图片</a> <a href="http://www.itheima.com" target="_blank"> <img src="img/logo2.png"> </a> </code></pre> 属性： <ul> <li> href：设置跳转的路径 属性值： <ul> <li>可以是其他的页面（.html，.jsp）</li> <li>可以是页面的 url 地址（http://www.baidu.com）</li> </ul> </li> <li> target：设置跳转的方式 属性值： <ul> <li>_self：默认属性，在当前页面打开新的链接</li> <li>_blank：在新的页面打开新的链接</li> </ul> </li> </ul> </li> </ul> <h3>表格标签</h3> HTML 表格由 <code><table></code> 标签以及一个或多个 <code><tr></code>、<code><th></code> 或 <code><td></code> 标签组成。 <ul> <li> <code><table></code> ：定义一个表格。父标签，相当于整个表格的容器。 常用属性： <ul> <li>border ：表格边框的宽度。单位像素 px</li> <li>width ：表格的宽度。单位像素 px</li> <li>cellpadding ：单元边沿与其内容之间的空白。单位像素 px</li> <li>cellspacing ：单元格之间的空白。单位像素 px</li> <li>bgcolor ：表格的背景颜色。</li> </ul> </li> <li> <code><tr></code> ：定义表格中的行 </li> <li> <code><td></code> ：定义表格中的单元（一个列） 常用属性： <ul> <li>colspan ：单元格可横跨的列数</li> <li>rowspan ：单元格可横跨的行数</li> <li>align ：单元格内容的水平对齐方式，取值：left 左、right 右、center 居中</li> <li>nowrap ：单元格中的内容是否折行（自动换行）</li> </ul> </li> <li> <code><th></code> ：定义表格中的表头单元格。单元格内的内容默认居中、加粗。 </li> </ul> <h3>实体字符（转义字符）</h3> 常用： <ul> <li><code> </code> ：半个英语字母英文空格</li> <li><code> </code> ：一个汉字中文空格</li> <li><code><</code> ：小于号</li> <li><code>></code> ：大于号</li> <li><code>&</code> ：& 符号</li> <li><code>×</code> ：× 叉号</li> <li><code>¥</code> ：￥人民币符号</li> <li><code>$</code> ：美元符号</li> </ul> <h3>样式/节标签（style、dev、span）</h3> 作用：用于页面的布局，可以把页面分成一块一块的 页面的流行的布局方式：div 标签和 span 标签 + CSS div 标签和 span 标签一般都是和 CSS（层叠样式表）一起使用，否则没有意义 常用标签： <ul> <li><code><style></code> ：定义文档的样式信息（CSS）</li> <li><code><div></code> ：行级（间）标签，会霸占 html 中的一行</li> <li><code></code> ：行内标签，只会占用一行中的一部分（占用的大小和里边的内容多少有关）</li> </ul> <h3>按钮标签</h3> html 有两种按钮： <ul> <li> button 按钮 button 按钮的按钮文字（按钮名称）就是 <code><button></code> 和 <code></button></code> 间的内容 <pre><code class="prism language-html"><button>按钮文字</button> </code></pre> </li> <li> input 按钮 input 按钮的按钮文字是由 value 属性控制的，是 value 属性的属性值 <pre><code class="prism language-html"><input type="button value="按钮一" /> </code></pre> </li> </ul> <h3>form 表单标签</h3> <h4>form 表单常用标签</h4> <ul> <li> <code><form></code> ：定义一个 HTML 表单，用于用户输入 单独书写没有意义，需要配合子标签一起使用 常用属性： <ul> <li>action：设置表单提交的路径，路径一般都是 java 中的某一个类（没有服务器，写 #）</li> <li>method：设置表单的提交方式（get，post），不写 method 默认都是 get 方法</li> </ul> 示例：<code><form action="#" method="get"></code> </li> <li> <code><input></code> ：form 标签的子标签，定义一个输入控件。 用于获得用户输入信息，type 属性值不同，搜集方式不同。 type 属性： <ul> <li> text：普通文本（一行） </li> <li> password：密码输入框，里边的密码以黑色的小圆点显示 </li> <li> radio：单选框 注： <ul> <li> 搭配属性 name：给标签设置一个名字 </li> <li> 同名的 radio 标签互斥，只能选择一个 </li> <li> 表单标签的属性 checked：可以给单选框|多选框设置一个默认选中的值 示例：<code><input type="radio" name="sex" checked="checked"></code> </li> </ul> </li> <li> checkbox：多选框 </li> <li> file：上传文件 </li> <li> image：上传图片使用 配合属性： <ul> <li>src：设置要上传图片的路径</li> <li>height：设置图片的高度，单位像素</li> <li>width：设置图片的宽度，单位像素</li> </ul> 示例：<code><input type="image" src="img/2.jpg" height="200px" width="170px"></code> </li> <li> hidden：隐藏域，存储数据使用，不会在浏览器页面显示 配合属性 value：给标签添加默认值 示例：<code> <input type="hidden" value="18"></code> </li> <li> button：普通按钮，配合 js 使用 配合属性 value：给标签添加默认值 示例：<code> <input type="button" value="一个按钮"></code> </li> <li> reset：重置按钮，把表单恢复到默认状态（清空表单） </li> <li> submit：提交按钮 根据 form 标签的属性 action 路径，把表单的数据，提交到服务器 </li> </ul> </li> <li> <code><select></code> ：form 标签的子标签，定义选择列表（下拉列表） 可以让用户在多个值中选择一个 注意：需要配合子标签 option（下拉选的列表项）一起使用 select 标签的常用属性： <ul> <li> name 属性：发送给服务器的名称 </li> <li> multiple 属性：不写默认单选，取值为“multiple”表示多选。 示例：<code><select name="city" multiple="multiple"></code> 一般不用多选 </li> <li> size 属性：多选时，可见选项的数目。 </li> </ul> <code><option></code> ：select 标签的子标签，定义选择列表中的选项，即下拉列表中的一个选项（一个条目） option 标签的属性： <ul> <li>selected 属性：勾选当前列表项</li> <li>value 属性：发送给服务器的选项值</li> </ul> </li> <li> <code><textarea></code> ：form 标签的子标签，定义多行的文本输入控件，可以让用户输入多行文本 常用属性： <ul> <li>rows：设置文本域默认显示的行数</li> </ul> </li> <li> cols：设置文本域默认显示的列数 注：多行文本域使用的不是特别多，已经被文本编辑器给取代了 </li> </ul> <h4>form 表单的通用属性</h4> <ul> <li> name 属性：元素名 如果需要表单数据提交到服务器，必须提供 name 属性值，服务器通过属性值获得提交的数据。 </li> <li> value 属性：设置 input 标签的默认值。submit 和 reset 为按钮显示为按钮名称 注意：除了文本输入域（text，password，textarea）外的其他标签需要设置 value 属性值 </li> <li> checked 属性：单选框或复选框被选中 </li> <li> readonly 属性：是否只读 </li> <li> disabled 属性：是否可用 </li> <li> placeholder 属性：html5 的新特性，给标签添加一个默认值。输入数据隐藏默认值，删除数据会显示默认值 </li> </ul> <h4>form 表单的提交方式</h4> form 标签的 method 属性，可以设置表单的提交方式 <ul> <li> get（不写 method 属性，默认）：当点击提交按钮的时候，会把表单中的数据追加到浏览器的地址栏中提交到服务器 格式：<code>xxx.html?k=v&k=v</code> <ul> <li> 会在 .html 的后边添加一个 ?，? 后边就是表单中提交的数据 </li> <li> 数据是以键值对的方式提交的，多个键值对之间使用 & 符号连接 </li> <li> 健值对：k=v <ul> <li> k：标签的 name 属性值 name=“username”，则 k => username name=“password”，则 k=> password </li> <li> v：标签的 value 属性值，文本输入框则输入框中输入的内容 value=“男”，则 v ==> 男 注意：除了文本输入框，其他的标签若要在提交时发送到服务器，必须有 value 属性值 </li> </ul> </li> </ul> 示例： <ul> <li>标签：<code><form action="#" method="get"></code></li> <li>提交后地址栏：<code>...form表单的提交方式.html?username=rose&password=4321&sex=on&hobby=喝酒&city=杭州#</code></li> </ul> 弊端： <ul> <li>把数据追加到浏览器的地址栏中，会暴漏敏感信息（密码）</li> <li>浏览器的地址栏的长度是有限制的，提交的数据大小有限制，不能提交大的文件（最多能提交几 kb 的数据）</li> </ul> </li> <li> post：会把提交的数据隐藏在请求服务器的请求体中（java web） 好处： <ul> <li>安全，用于无法直接看到提交的数据</li> <li>可以提交大的文件</li> </ul> </li> </ul> <h4>入门案例</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单标签的属性</title> </head> <body> <form action="#" method="get"> 请输入用户名:<input type="text" name="username" value="张三"/><br/> 请输入用户名:<input type="text" name="username" value="张三" readonly="readonly"/><br/> 请输入用户名:<input type="text" name="username" value="张三" disabled="disabled"/><br/> <hr/> 用户名:<input type="text" name="username" placeholder="请输入姓名"/><br/> 密码:<input type="password" name="password" placeholder="请输入密码"/><br/> 请选择您的出生日期:<input type="date" name="date"><br/> 请选择您的性别: 男<input type="radio" name="sex" checked="checked" value="男"> 女<input type="radio" name="sex" value="女"><br/>  请选择您的爱好: 抽烟<input type="checkbox" name="hobby" value="抽烟"> 喝酒<input type="checkbox" name="hobby" value="喝酒"> 烫头<input type="checkbox" checked="checked" name="hobby" value="烫头"><br/> <select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option>广州</option> <option>深圳</option> <option selected="selected">杭州</option> </select> <select name="city" multiple="multiple"> <option value="bj">北京</option> <option value="sh">上海</option> <option>广州</option> <option>深圳</option> <option selected="selected">杭州</option> </select> <select name="city" multiple="multiple" size="2"> <option value="bj">北京</option> <option value="sh">上海</option> <option>广州</option> <option>深圳</option> <option selected="selected">杭州</option> </select> </form> </body> </html> </code></pre> <h3>全局属性</h3> 详见：传送门 常见全局属性： <ul> <li>class ：规定元素的类名（classname）</li> <li>id ：规定元素的唯一 id</li> <li>title ：规定元素的额外信息（可在工具提示中显示）</li> <li>draggable ：指定某个元素是否可以拖动</li> </ul> <h2>HTML 事件属性</h2> HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。 <h3>表单事件</h3> 表单事件在 HTML 表单中触发（适用于所有 HTML 元素，但该 HTML 元素需在 form 表单内）： <table> <thead> <tr> <th align="left">属性</th> <th align="left">值</th> <th align="left">描述</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td align="left">onblur</td> <td align="left">script</td> <td align="left">当元素失去焦点时运行脚本</td> <td></td> </tr> <tr> <td align="left">onchange</td> <td align="left">script</td> <td align="left">当元素改变时运行脚本</td> <td></td> </tr> <tr> <td align="left">oncontextmenu</td> <td align="left">script</td> <td align="left">当触发上下文菜单时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">onfocus</td> <td align="left">script</td> <td align="left">当元素获得焦点时运行脚本</td> <td></td> </tr> <tr> <td align="left">onformchange</td> <td align="left">script</td> <td align="left">当表单改变时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">onforminput</td> <td align="left">script</td> <td align="left">当表单获得用户输入时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">oninput</td> <td align="left">script</td> <td align="left">当元素获得用户输入时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">oninvalid</td> <td align="left">script</td> <td align="left">当元素无效时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">onreset</td> <td align="left">script</td> <td align="left">当表单重置时运行脚本。HTML 5 不支持。</td> <td></td> </tr> <tr> <td align="left">onselect</td> <td align="left">script</td> <td align="left">当选取元素时运行脚本</td> <td></td> </tr> <tr> <td align="left">onsubmit</td> <td align="left">script</td> <td align="left">当提交表单时运行脚本</td> <td></td> </tr> </tbody> </table> <h3>键盘事件</h3> <table> <thead> <tr> <th align="left">属性</th> <th align="left">值</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">onkeydown</td> <td align="left">script</td> <td align="left">当按下按键时运行脚本</td> </tr> <tr> <td align="left">onkeypress</td> <td align="left">script</td> <td align="left">当按下并松开按键时运行脚本</td> </tr> <tr> <td align="left">onkeyup</td> <td align="left">script</td> <td align="left">当松开按键时运行脚本</td> </tr> </tbody> </table> <h3>鼠标事件</h3> 通过鼠标触发事件，类似用户的行为 <table> <thead> <tr> <th align="left">属性</th> <th></th> <th align="left">值</th> <th align="left">描述</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td align="left">onclick</td> <td></td> <td align="left">script</td> <td align="left">当单击鼠标时运行脚本</td> <td></td> </tr> <tr> <td align="left">ondblclick</td> <td></td> <td align="left">script</td> <td align="left">当双击鼠标时运行脚本</td> <td></td> </tr> <tr> <td align="left">ondrag</td> <td></td> <td align="left">script</td> <td align="left">当拖动元素时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondragend</td> <td></td> <td align="left">script</td> <td align="left">当拖动操作结束时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondragenter</td> <td></td> <td align="left">script</td> <td align="left">当元素被拖动至有效的拖放目标时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondragleave</td> <td></td> <td align="left">script</td> <td align="left">当元素离开有效拖放目标时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondragover</td> <td></td> <td align="left">script</td> <td align="left">当元素被拖动至有效拖放目标上方时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondragstart</td> <td></td> <td align="left">script</td> <td align="left">当拖动操作开始时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">ondrop</td> <td></td> <td align="left">script</td> <td align="left">当被拖动元素正在被拖放时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">onmousedown</td> <td></td> <td align="left">script</td> <td align="left">当按下鼠标按钮时运行脚本</td> <td></td> </tr> <tr> <td align="left">onmousemove</td> <td></td> <td align="left">script</td> <td align="left">当鼠标指针移动时运行脚本</td> <td></td> </tr> <tr> <td align="left">onmouseout</td> <td></td> <td align="left">script</td> <td align="left">当鼠标指针移出元素时运行脚本</td> <td></td> </tr> <tr> <td align="left">onmouseover</td> <td></td> <td align="left">script</td> <td align="left">当鼠标指针移至元素之上时运行脚本</td> <td></td> </tr> <tr> <td align="left">onmouseup</td> <td></td> <td align="left">script</td> <td align="left">当松开鼠标按钮时运行脚本</td> <td></td> </tr> <tr> <td align="left">onmousewheel</td> <td></td> <td align="left">script</td> <td align="left">当转动鼠标滚轮时运行脚本</td> <td>New</td> </tr> <tr> <td align="left">onscroll</td> <td></td> <td align="left">script</td> <td align="left">当滚动元素的滚动条时运行脚本</td> <td>New</td> </tr> </tbody> </table> <h3>其他事件</h3> 详见：传送门 <ul> <li> 窗口事件属性 由窗口触发该事件（适用于 <code><body></code> 标签） </li> <li> 多媒体事件 通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于 HTML 媒体元素比如 <code><audio></code>，<code><embed></code>，<code><img></code>，<code><object></code> 和 <code><video></code> </li> </ul> <h2>字符集</h2> <h3>字符集的介绍及基本使用</h3> <ul> <li> HTML charset 属性 如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。网页中的字符集使用 <code><meta></code> 标签来指定： <pre><code class="prism language-html"><meta charset="UTF-8"> </code></pre> 注： <ul> <li> H5 默认的字符集编码：UTF-8，之前的大部分默认的字符编码为：ISO-8859-1 </li> <li> 万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。 由于很多国家使用的字符并不属于 ASCII，大多数浏览器默认的字符集是 ISO-8859-1，再后来默认为 UTF-8 完整的 ASCII 参考手册 完整的 ISO-8859-1 参考手册 </li> </ul> </li> <li> ISO 字符集 ISO 字符集是国际标准组织（ISO）针对不同的字母表/语言定义的标准字符集。 世界各地使用的不同字符集详见传送门 </li> <li> Unicode 标准 由于 ISO 字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。 Unicode 标准涵盖了世界上的所有字符、标点和符号。 不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。 Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16 <table> <thead> <tr> <th align="left">字符集</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td align="left">UTF-8</td> <td align="left">UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。</td> </tr> <tr> <td align="left">UTF-16</td> <td align="left">16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。</td> </tr> </tbody> </table>注： <ul> <li>最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符</li> <li>所有 HTML 4 浏览器都已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16</li> </ul> </li> <li> UTF-8 字符 很多 UTF-8 字符无法在键盘上输入，但可以使用数字（称为实体编号）来表示：A 为 65，B 为 66，C 为 67 注意：实体编号需要以 &# 开头并以分号 ; 结尾，这样才能正确显示一个字符。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>显示结果： A B C</p> <p>显示结果： A B C</p> </body> </html> </code></pre> </li> </ul> <h3>Emoji</h3> <ul> <li> Emoji 是来自 UTF-8 字符集的字符： 表情符号（英语：emoji，日语：絵文字／えもじ emoji），是使用在网页和聊天中的形意符号，最初是日本在无线通信中所使用的视觉情感符号（图画文字）。表情意指面部表情，图标则是图形标志的意思，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。 Emoji 看起来像一张图片或图标，其实不是。 Emoji 实际上是 UTF-8 (Unicode) 字符集上的字符。UTF-8 几乎涵盖了世界上所有的字符和符号。 </li> <li> Emoji 是字符，但无法在键盘上输入，可以使用数字（称为实体编号）来使用它： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Emoji 标签符号</h1> <p>可以通过 font-size 属性，像设置字体大小一样，设置表情的大小。</p> <p style="font-size:48px"> 😀 😄 😍 💗 </p> </body> </html> </code></pre> </li> <li> Emoji 表情符号 下表列出来一些 Emoji 表情符号： <table> <thead> <tr> <th align="left">Emoji</th> <th align="left">值</th> </tr> </thead> <tbody> <tr> <td align="left"></td> <td align="left"><code>🗻</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>🗼</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>🗽</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>🗾</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>🗿</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😀</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😁</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😂</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😃</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😄</code></td> </tr> <tr> <td align="left"></td> <td align="left"><code>😅</code></td> </tr> </tbody> </table></li> </ul> <h2>URL 编码</h2> <ul> <li> URL 编码会将字符转换为可通过因特网传输的格式。 </li> <li> URL 只能使用 ASCII 字符集来通过因特网进行发送。 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。 URL 不能包含空格。URL 编码通常使用 + 来替换空格。 </li> <li> ASCII 字符 URL 编码参考手册：传送门 </li> </ul> </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1759546034624753664"></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/1940489139090681856.htm" title="＜电子幽灵＞前端第一件：HTML基础笔记下" target="_blank">＜电子幽灵＞前端第一件：HTML基础笔记下</a> 靈镌sama <a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%B9%BD%E7%81%B5%E9%9A%8F%E6%89%8B%E8%AE%B0/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>HTML基础笔记（下）介绍费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。＜电子幽灵＞前端第一件：HTML基础笔记上中，最基础的一部分HTML标签和已经以</div> </li> <li><a href="/article/1940488256630091776.htm" title="基于 Three.js 与 WebGL 的商场全景 VR 导航系统源码级解析" target="_blank">基于 Three.js 与 WebGL 的商场全景 VR 导航系统源码级解析</a> 维小帮定位导航 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vr/1.htm">vr</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E4%BC%98%E5%8C%96/1.htm">场景优化</a><a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E6%85%A7%E5%95%86%E5%9C%BA/1.htm">智慧商场</a> <div>本文面向Web前端开发者、WebGL/Three.js爱好者、对VR/AR应用开发感兴趣的技术人员、智慧商场解决方案开发者。详细介绍如何利用WebGL(Three.js框架)构建高性能的商场全景VR环境，并实现精准的室内定位与3D路径规划导航功能。如需获取商场全景VR导航系统解决方案请前往文章最下方获取，如有项目合作及技术交流欢迎私信作者。一、商场全景VR导航的核心技术概述商场全景VR导航融合了全</div> </li> <li><a href="/article/1940485359297163264.htm" title="基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程" target="_blank">基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程</a> 速易达网络 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>以下是基于Vue+RuoYi架构设计的商城Web/小程序实训课程方案，结合企业级开发需求与教学实践，涵盖全栈技术栈与实战模块：一、课程概述目标：通过Vue前端+RuoYi后端（SpringBoot）开发企业级电商系统，实现多终端（Web/H5/小程序）适配，覆盖从架构设计到部署上线的全流程。周期：8周（建议每日3小时）适合人群：具备基础Java/Vue知识的开发者，熟悉HTML/CSS/JavaS</div> </li> <li><a href="/article/1940485106791673856.htm" title="微信小程序实现websocket及单人聊天功能" target="_blank">微信小程序实现websocket及单人聊天功能</a> 蝶妹妹 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>一、什么是websocket：WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议二、websocket的原理：websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的</div> </li> <li><a href="/article/1940479302260813824.htm" title="tauri v2 开源项目学习（二）" target="_blank">tauri v2 开源项目学习（二）</a> <div>前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式tarui2插件，可以查看：https://github.com/tauri-apps/plugins-workspace1.EcoPastehttps://gitee.com/ayangweb/E</div> </li> <li><a href="/article/1940479301208043520.htm" title="tauri v2 开源项目学习（一）" target="_blank">tauri v2 开源项目学习（一）</a> <div>前言:tauri2编程，前端部分和electron差不多，框架部分差别大，资料少，官网乱，AI又骗我所以在gitee上，寻找tauriv2开源项目，通过记录框架部分与rust部分的写法，对照确定编程方式提示：不要在VSCode里自动运行Cargo，在powershell里运行Cargobuild，不会卡住1.tauri-desktophttps://gitee.com/MapleKing/taur</div> </li> <li><a href="/article/1940477916278222848.htm" title="前端与UI如何联手，让数字孪生走进现实生活？" target="_blank">前端与UI如何联手，让数字孪生走进现实生活？</a> 贝格前端工场 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>数字孪生（DigitalTwin）作为工业互联网的核心技术，正在通过前端技术与用户界面设计的深度协同，从实验室走向大规模应用场景。这种虚实映射系统要求前端框架突破传统二维界面限制，与UI设计思维共同构建三维可视化、实时交互的新型人机界面。本文将从技术融合、系统挑战、交互创新、场景实践和团队协作五个维度，解析数字孪生落地的关键路径。一、技术融合：可视化框架与UI设计工具链的协同进化现代数字孪生系统需</div> </li> <li><a href="/article/1940475137061089280.htm" title="22-4 SQL注入攻击 - post 基于报错的注入" target="_blank">22-4 SQL注入攻击 - post 基于报错的注入</a> 技术探索 <a class="tag" taget="_blank" href="/search/Web%E5%AE%89%E5%85%A8%E6%94%BB%E9%98%B2%E5%85%A8%E8%A7%A3%E6%9E%90/1.htm">Web安全攻防全解析</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>1、post基于错误单引号注入回显分析注入点位置已经发生变化。在浏览器中，无法直接查看和修改注入点。不过，可以通过使用相应的插件来完成修改任务。修改方法：(一般是网站前端做了限制，我们才需要用到bp绕开限制)要修改Less11注入点的请求，可以使用BurpSuite工具来捕获请求包，并使用其中的"Repeater"功能来进行修改。具体操作步骤如下：首先打开BurpSuite并设置代理，然后在浏览器</div> </li> <li><a href="/article/1940471602143621120.htm" title="SpringBoot返回文件让前端下载的几种方式" target="_blank">SpringBoot返回文件让前端下载的几种方式</a> 一朵梨花压海棠go <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>01背景在后端开发中，通常会有文件下载的需求，常用的解决方案有两种：不通过后端应用，直接使用nginx直接转发文件地址下载（适用于一些公开的文件，因为这里不需要授权）通过后端进行下载，同时进行一些业务处理本篇主要以方法2进行介绍，方法2的原理步骤如下：读取文件，得到文件的字节流将字节流写入到响应输出流中02一次性读取到内存，通过响应输出流输出到前端@GetMapping("/file/downlo</div> </li> <li><a href="/article/1940470841821163520.htm" title="GUI框架：谈谈框架" target="_blank">GUI框架：谈谈框架</a> baozi3026 <a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/command/1.htm">command</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a><a class="tag" taget="_blank" href="/search/button/1.htm">button</a><a class="tag" taget="_blank" href="/search/class/1.htm">class</a><a class="tag" taget="_blank" href="/search/string/1.htm">string</a> <div>转帖请注明出处http://www.cppblog.com/cexer/archive/2009/11/15/100988.html1开篇废话我喜欢用C++写GUI框架，因为那种成就感是实实在在地能看到的。从毕业到现在写了好多个了，都是实验性质的。什么拳脚飞刀毒暗器，激光核能反物质，不论是旁门左道的阴暗伎俩，还是名门正派的高明手段，只要是C++里有的技术都试过了。这当中接触过很多底层或是高级的技术</div> </li> <li><a href="/article/1940456342019960832.htm" title="基于HTML的悬窗可拖动记事本" target="_blank">基于HTML的悬窗可拖动记事本</a> 孤水寒月 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>基于HTML的悬窗可拖动记事本这款记事本全部使用HTML+CSS+JS实现，可以在浏览器中实现悬浮可拖动的记事本，所有内容存储在浏览器中，清除缓存后将会丢失记事本内容效果展示实现代码Note+×保存删除//拖动逻辑constdraggableWindow=document.getElementById('draggableWindowNote');constdragHeader=doc</div> </li> <li><a href="/article/1940452939948683264.htm" title="Vue 3 中 h 方法详解" target="_blank">Vue 3 中 h 方法详解</a> yqcoder <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>在Vue3中，h方法是一个用于创建虚拟DOM节点的函数，它是创建渲染函数的核心工具。一、引入h方法import{h}from"vue";constMyComponent={render(){returnh("div","Hello,Vue3!");},};二、语法h(type,props?,children?)1.type必填参数，表示要创建的节点类型。字符串：表示HTML标签名，如'div'、'</div> </li> <li><a href="/article/1940452182633541632.htm" title="VC Spyglass：工具简介" target="_blank">VC Spyglass：工具简介</a> 日晨难再 <a class="tag" taget="_blank" href="/search/Synopsys/1.htm">Synopsys</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/VC/1.htm">VC</a><a class="tag" taget="_blank" href="/search/Spyglass/1.htm">Spyglass</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97IC/1.htm">数字IC</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a> <div>相关阅读VCSpyglasshttps://blog.csdn.net/weixin_45791458/category_12828932.html?spm=1001.2014.3001.5482传统上，基于仿真的动态验证技术一直是功能验证的核心方式。随着现代SoC设计日益复杂，静态验证技术的引入变得愈发重要。Synopsys的VCSpyglass解决方案提供了下一代综合性的静态验证平台，包括：V</div> </li> <li><a href="/article/1940449412002148352.htm" title="使用vue-template-loader将模板编译成渲染函数的Webpack配置技巧" target="_blank">使用vue-template-loader将模板编译成渲染函数的Webpack配置技巧</a> 前端布洛芬 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E7%99%BD%E8%AF%9D%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1/1.htm">大白话前端八股</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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/1.htm">前端</a> <div>大白话使用vue-template-loader将模板编译成渲染函数的Webpack配置技巧引言：被模板编译逼疯的周三下午你是否也经历过这样的场景：deadline前的周三下午，咖啡因已经失效，屏幕上却跳出Templatecompilationfailed的红色报错。Vue单文件组件（SFC）的.vue格式用腻了，想试试把模板抽成单独的.html文件，结果webpack配置直接给你脸色看。作为每天</div> </li> <li><a href="/article/1940437940157083648.htm" title="window.accountCenterFeedback详细解析" target="_blank">window.accountCenterFeedback详细解析</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a> <div>window.accountCenterFeedback表示访问浏览器全局对象window上的一个属性，通常用于管理账户中心（AccountCenter）的反馈功能。以下是详细解析：1.这是什么？定义：window.accountCenterFeedback是挂载在浏览器全局作用域（window）上的一个对象或方法，通常由前端代码或第三方SDK注入，用于控制账户中心的用户反馈功能（如弹窗、问卷、帮</div> </li> <li><a href="/article/1940429869984837632.htm" title="PHP后台代码解决跨域问题" target="_blank">PHP后台代码解决跨域问题</a> Happiness&Rich <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F/1.htm">跨域</a> <div>在前端里面，解决跨域的时候总显得那么的恶心，什么jsonp啊，ajax啊，CORS啊什么的，总觉得是在钻空子进行跨域，其实在PHP文件里面只需要加一段代码就可以跨域了，前端你该怎么写还是怎么写，post，get随便用：header("Access-Control-Allow-Origin:*");header('Access-Control-Allow-Methods:POST');header(</div> </li> <li><a href="/article/1940429111986024448.htm" title="在 Vue 中使用 jQuery-UI 的踩坑记" target="_blank">在 Vue 中使用 jQuery-UI 的踩坑记</a> qmzhna_ <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>在使用leaflet开发的时候，有一个需求要在图层的popup上编辑信息，需要一个AutoComplete的组件。但是popup支持的是htmltemplate，只能通过js拼接HTML标签实现。不得已引入了jquery-ui中的AutoComplete组件来完成，在vue中使用jquery-ui过程中踩了不少坑。安装和引入jQuery和jQueryUI首先，我们需要在项目中安装jQuery和jQ</div> </li> <li><a href="/article/1940427340739833856.htm" title="前端代码规范及最佳实践" target="_blank">前端代码规范及最佳实践</a> forlong401 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a> <div>http://coderlmn.github.io/code-standards/概述本文档包含了Isobar公司的创意技术部（前端工程）开发web应用的规范。现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。编写本文档的主要驱动力是两方面：1)代码一致性以及2)最佳实践。通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保</div> </li> <li><a href="/article/1940426204578377728.htm" title="前端领域：jQuery UI组件的使用指南_副本" target="_blank">前端领域：jQuery UI组件的使用指南_副本</a> 大厂前端小白菜 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端领域：jQueryUI组件的使用指南关键词：jQueryUI、前端组件、交互效果、用户界面、使用指南摘要：本文旨在为前端开发者提供一份全面的jQueryUI组件使用指南。首先介绍了jQueryUI的背景，包括其目的、适用读者、文档结构和相关术语。接着详细阐述了jQueryUI的核心概念与联系，通过文本示意图和Mermaid流程图展示其架构。然后深入讲解了核心算法原理，并给出具体操作步骤和Pyt</div> </li> <li><a href="/article/1940421287197339648.htm" title="【Django开发】前后端分离django美多商城项目第3篇：用户注册业务实现,用户注册前端逻辑【附代码文档】" target="_blank">【Django开发】前后端分离django美多商城项目第3篇：用户注册业务实现,用户注册前端逻辑【附代码文档】</a> <div>教程总体简介：欢迎来到美多商城！项目需求分析1.项目主要页面介绍2.归纳项目主要模块3.知识要点项目架构设计1.项目开发模式2.项目运行机制项目介绍创建工程1.准备项目代码仓库3.创建美多商城工程配置开发环境1.新建配置文件2.指定开发环境配置文件配置Jinja2模板引擎1.安装Jinja2扩展包配置MySQL数据库3.安装PyMySQL扩展包配置Redis数据库1.安装django-redis扩</div> </li> <li><a href="/article/1940416751212752896.htm" title="Qt 图像显示" target="_blank">Qt 图像显示</a> 没学上了 <a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>根据Qt前端开发-CSDN博客前文可以知道Qt部署界面的思路和复杂嵌套的核心，接下来为了实现在前端点击按钮触发信号显示图像的功能我们需要做几点工作首先触发信号，显示界面；触发信号我们用按钮来实现；其次显示界面，上一章我们右侧留有空白可以用作显示，我们先建立Qlabel用作显示图像，将他嵌套进右侧留白的Widge中，代码如下之后通过按钮来触发相关事件connect(Photo,&QPushButto</div> </li> <li><a href="/article/1940409313172451328.htm" title="Vue-16-前端框架Vue之应用基础集中式状态管理pinia(一)" target="_blank">Vue-16-前端框架Vue之应用基础集中式状态管理pinia(一)</a> 皮皮冰燃 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录1Pinia2示例效果2.1App.vue(根组件)2.2Count.vue2.3LoveTalk.vue(使用axios)3搭建pinia环境3.1main.ts3.2开发者工具4存储和读取数据4.1Count.ts4.2Count.vue4.3loveTalk.ts4.4LoveTalk.vue5修改数据的三种方式5.1第一种和第二种修改方式5.1.1Count.ts5.1.2Coun</div> </li> <li><a href="/article/1940405403305177088.htm" title="鸿蒙（影音娱乐类）APP开发——在线短视频流畅切换" target="_blank">鸿蒙（影音娱乐类）APP开发——在线短视频流畅切换</a> CTrup <a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%A8%B1%E4%B9%90/1.htm">娱乐</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6%E5%8C%96/1.htm">组件化</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a> <div>往期推文全新看点鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……简介为了帮助开发者解决在应用中在线短视频快速</div> </li> <li><a href="/article/1940376779571130368.htm" title="CST微波工作室学习笔记2 主要特点" target="_blank">CST微波工作室学习笔记2 主要特点</a> raininforest <a class="tag" taget="_blank" href="/search/CST%E5%AD%A6%E4%B9%A0/1.htm">CST学习</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a> <div>概要基于Windows98/Me、WindowsNT4、Windows2000和WindowsXP的图形用户界面快速并能有效使用内存的有限积分（FI）算法由于理想边界拟合技术和薄片技术的采用，性能更加卓越结构建模基于先进ACIS内核的参量化实体建模前端，并附带优异的结构可视化功能。内含多种建模技术，可快速进行结构变换。可通过SAT（如AutoCAD）、IGES、STEP、ProE、CATIA4、C</div> </li> <li><a href="/article/1940358377259462656.htm" title="基于springboot+mysql+jpa+html实现商品销售信息系统" target="_blank">基于springboot+mysql+jpa+html实现商品销售信息系统</a> 五星资源 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>基于springboot+mysql+jpa+html实现商品销售信息系统一、系统介绍1、系统主要功能：2.涉及技术框架：3.本项目所用环境：二、功能展示三、其它系统四、获取源码一、系统介绍1、系统主要功能：订单管理模块商品管理模块品牌管理模块分类管理模块客户管理模块供应商管理模块2.涉及技术框架：web框架：SpringBoot数据库框架：SpingDataJPA数据库：MySql项目构建工具：</div> </li> <li><a href="/article/1940356610761224192.htm" title="前端领域 Vite 与 Webpack 的深度对比" target="_blank">前端领域 Vite 与 Webpack 的深度对比</a> 前端视界 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端领域Vite与Webpack的深度对比关键词：Vite、Webpack、前端构建工具、模块打包、开发体验、性能优化、ESModules摘要：本文深入对比前端领域两大构建工具Vite和Webpack的核心原理、架构设计和使用场景。通过分析它们的底层机制、开发体验、构建流程和性能表现，帮助开发者理解如何在不同项目需求下做出合理选择。文章包含详细的技术原理图解、实际项目对比示例和未来发展趋势分析。背</div> </li> <li><a href="/article/1940340471142346752.htm" title="纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)" target="_blank">纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)</a> 与鱼有约 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)简介本项目为一个纯前端实现的本地文件管理器网页（index.html），可在Chrome/Edge浏览器中直接打开，具备类似VSCode的本地文件夹操作体验。无需后端，所有功能均在浏览器端实现。主要功能选择本地文件夹用户点击左上角文件夹按钮，授权后可浏览和操作本地文件夹内容。文件树展示以树形结构展示所选文件夹下的所有文件和子文件夹</div> </li> <li><a href="/article/1940329998741204992.htm" title="WHAT - TTF 和 OTF 字体格式" target="_blank">WHAT - TTF 和 OTF 字体格式</a> @PHARAOH <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%AD%97%E4%BD%93/1.htm">字体</a> <div>文章目录基础定义核心区别轮廓技术（绘制字体的“骨架”）功能扩展兼容性文件大小如何选择？一个小贴士更多关于前端开发中字体介绍请阅读：WHAT-前端开发中的字体基础定义格式全称简介TTFTrueTypeFont由苹果和微软在1980年代联合开发的字体格式。OTFOpenTypeFontAdobe和微软开发的更现代的字体格式，基于TTF或PostScript。核心区别轮廓技术（绘制字体的“骨架”）TTF</div> </li> <li><a href="/article/1940329364134621184.htm" title="Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播）" target="_blank">Vue3 - 详解播放m3u8视频流+HLS拉流推流完整方案，vue3如何播放m3u8格式文件实时视频播放教程（流媒体播放、直播视频流、实时摄像头监控视频流对接、后端服务器切片分片传输视频流边下边播）</a> 王二红 <a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/1.htm">开发问题汇总</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/m3u8/1.htm">m3u8</a><a class="tag" taget="_blank" href="/search/hls/1.htm">hls</a><a class="tag" taget="_blank" href="/search/vue3%E6%92%AD%E6%94%BEm3u8%E8%A7%86%E9%A2%91%E6%B5%81%E6%95%99%E7%A8%8B/1.htm">vue3播放m3u8视频流教程</a><a class="tag" taget="_blank" href="/search/vue%E6%92%AD%E6%94%BEm3u8%E6%96%87%E4%BB%B6/1.htm">vue播放m3u8文件</a><a class="tag" taget="_blank" href="/search/vue3%E7%9B%B4%E6%92%AD%E8%A7%86%E9%A2%91%E6%B5%81%E6%92%AD%E6%94%BE/1.htm">vue3直播视频流播放</a><a class="tag" taget="_blank" href="/search/%E6%91%84%E5%83%8F%E5%A4%B4%E5%AE%9E%E6%97%B6%E7%9B%91%E6%8E%A7%E7%94%BB%E9%9D%A2%E8%A7%86%E9%A2%91%E6%B5%81/1.htm">摄像头实时监控画面视频流</a> <div>前言如果您需要Vue2版本，请访问这篇文章。在vue3（PC端+移动端H5）项目开发中，实现m3u8+hls视频流播放、实时流媒体播放高性能无延迟方案及源码，vue3播放3mu8文件/直播视频流，实时流媒体播放需求、做直播实时传输播放、摄像头监控画面视频流、服务器后端视频切片分段返给前端+边下边播等需求，解决前端网页播放视频流卡顿加载慢、无法载入黑屏、播放不流畅、CORS跨域、安卓苹果浏览器兼容等</div> </li> <li><a href="/article/1940320034685513728.htm" title="Github 2024-11-01 开源项目月报 Top19" target="_blank">Github 2024-11-01 开源项目月报 Top19</a> 老孙正经胡说 <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/Github%E8%B6%8B%E5%8A%BF%E5%88%86%E6%9E%90/1.htm">Github趋势分析</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a> <div>根据GithubTrendings的统计，本月(2024-11-01统计)共有19个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目9TypeScript项目3JavaScript项目3Svelte项目1JupyterNotebook项目1Ruby项目1HTML项目1Rust项目1Java项目1C++项目1Go项目1Python中的算法实现集合创建周期：2831天</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>