墨鸦_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/1904155673868955648.htm" title="关于 vue2 vue3 响应式数据，及如何清空、重置对象" target="_blank">关于 vue2 vue3 响应式数据，及如何清空、重置对象</a> xixixin_ <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/vue.js/1.htm">vue.js</a> <div>在一个项目中，后台用的vue3，前端用的是uniappvue2，项目几乎是并行开发，然后在一个vue2数据清空的方法里直接写了一个this.form={}的代码，结果页面出现残留数据让我进一步了解了vue2响应式系统，以及vue3的proxy特性vue2响应式vue2的响应式系统是基于getter和setter工作的。在数据对象初始化的时候，vue会通过object.defineProperty将</div> </li> <li><a href="/article/1904145521602260992.htm" title="SvelteKit 最新中文文档教程（9）—— 部署静态站点与单页应用" target="_blank">SvelteKit 最新中文文档教程（9）—— 部署静态站点与单页应用</a> <div>前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我</div> </li> <li><a href="/article/1904145205175578624.htm" title="html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】HTML+CSS+JavaScript (1)" target="_blank">html大学生网站开发实践作业：传统文化网页设计题材【绒花6页】HTML+CSS+JavaScript (1)</a> @码出未来-web网页设计 <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/javascript/1.htm">javascript</a> <div>精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码</div> </li> <li><a href="/article/1904141544844226560.htm" title="前端框架入门：Vue 基础" target="_blank">前端框架入门：Vue 基础</a> 风亦辰739 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91%E5%85%A8%E6%A0%88%E6%8C%87%E5%8D%97/1.htm">前后端开发全栈指南</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue.js是一款流行的前端框架，专注于构建用户界面。它采用响应式数据绑定和组件化开发，易于上手且功能强大。Vue3版本引入了CompositionAPI，提升了开发效率。一、Vue.js基础1.Vue介绍Vue是一个渐进式JavaScript框架，可用于：构建单页应用（SPA）。组件化开发，提高代码复用性。结合Vuex（状态管理）和VueRouter（路由）开发大型应用。2.Vue模板语法Vue</div> </li> <li><a href="/article/1904128679642984448.htm" title="【html5期末大作业】基于HTML仿QQ音乐官网网站" target="_blank">【html5期末大作业】基于HTML仿QQ音乐官网网站</a> IT-司马青衫 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码</div> </li> <li><a href="/article/1904124387813027840.htm" title="微信小程序和uni-app的区别" target="_blank">微信小程序和uni-app的区别</a> cccv工程师 <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/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/notepad%2B%2B/1.htm">notepad++</a> <div>开发语言和框架：Uni-app：Uni-app使用Vue.js框架进行开发，利用Vue的语法和生命周期函数，开发者可以使用熟悉的前端技术栈。微信小程序：微信小程序使用自己的框架，基于WXML（类似于HTML）和WXSS（样式语言）进行开发，需要学习微信小程序独有的语法和组件。平台支持：Uni-app：Uni-app是一个跨平台开发框架，可以将一套代码编译成多个平台的应用，包括微信小程序、H5、Ap</div> </li> <li><a href="/article/1904123504991727616.htm" title="前端高级 CSS 用法实战指南" target="_blank">前端高级 CSS 用法实战指南</a> Real Man★ <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>前端高级CSS用法实战指南CSS的高级用法能显著提升开发效率、优化页面性能并实现复杂的视觉效果。以下是现代CSS的核心高级技巧和实战案例，涵盖布局、动画、优化等方向：一、现代布局系统CSSGrid复杂布局场景：实现不规则网格（如杂志排版、仪表盘）。示例：定义网格模板与区域命名：css.container{display:grid;grid-template-columns:200px1fr300p</div> </li> <li><a href="/article/1904104836870238208.htm" title="基于Python+Django的可视化学习系统设计与实现（毕业设计源码+技术文档+系统部署）" target="_blank">基于Python+Django的可视化学习系统设计与实现（毕业设计源码+技术文档+系统部署）</a> 逐梦设计 <a class="tag" taget="_blank" href="/search/Python%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B/1.htm">Python毕业设计实战案例</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%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/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a> <div>博主简介作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验，被多个学校常年聘为校外企业导师，指导学生毕业设计并参与学生毕业答辩指导，有较为丰富的相关经验。期待与各位高校教师、企业讲师以及同行交流合作主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、</div> </li> <li><a href="/article/1904104710571356160.htm" title="【前端构建】使用Docker打包多个前端项目到一个Nginx镜像，并给conf文件动态传递参数" target="_blank">【前端构建】使用Docker打包多个前端项目到一个Nginx镜像，并给conf文件动态传递参数</a> Zacks_xdc <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录背景正文DockerFileNginx配置模板接收变量并替换Shell脚本将Nginx配置模板替换成配置文件使用构建镜像运行容器总结背景公司给一些客户要部署三个前端项目。最初，每个前端项目都以独立的镜像形式交付并部署。然而，随着客户数量的增加，每个客户都提出了一些自定义需求，后端也进行了对应改造。这导致了部署过程变得复杂且繁琐</div> </li> <li><a href="/article/1904094627313545216.htm" title="前端简单数据存储：跳过后端数据库的一种高效策略，应对一些不需要后端访问数据库的简单操作：静态 Markdown 文件存储" target="_blank">前端简单数据存储：跳过后端数据库的一种高效策略，应对一些不需要后端访问数据库的简单操作：静态 Markdown 文件存储</a> 【D＇accumulation】 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>问题提出：在一些应用场景中，有些数据并不重要，也不需要频繁地进行动态增删改查，比如品牌历史、产品介绍等说明性内容。为此，我选择在前端直接存储这些静态数据，跳过后端数据库调用。本文将分享如何利用Vue工程中直接存放Markdown文件与内嵌数据，将数据管理与业务逻辑解耦，从而实现快速开发、便于维护和灵活更新的目的。静态Markdown文件存储方法案例：原理：将Markdown文件（如brandHis</div> </li> <li><a href="/article/1904087440449138688.htm" title="【开源宝藏】30天学会CSS - DAY6 第六课流光文字动画" target="_blank">【开源宝藏】30天学会CSS - DAY6 第六课流光文字动画</a> hikktn <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AE%9D%E8%97%8F/1.htm">开源宝藏</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>第0步：项目结构lighting-text/├─index.html└─style.cssindex.html：包含列表，其中每个放一个字母或符号。style.css：设置背景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。第1步：编写HTML结构在index.html中，核心就是一个无序列表，每个对应一个字母/符号：CSSAnimationDESAFIO♡CSS代码要点每个都是一个</div> </li> <li><a href="/article/1904059329728802816.htm" title="前端vscode中好用的scss插件推荐" target="_blank">前端vscode中好用的scss插件推荐</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/scss/1.htm">scss</a> <div>一、LiveSassCompilerLiveSassCompiler是VisualStudioCode(VSCode)中非常流行的一个插件，用于将Sass/SCSS文件实时编译为标准的CSS文件。Sass（SyntacticallyAwesomeStyleSheets）是一种CSS预处理器，提供了变量、嵌套、混合（Mixins）、继承等强大功能，而LiveSassCompiler插件可以帮助开发者</div> </li> <li><a href="/article/1904056675216715776.htm" title="mongodb与爬虫的关系" target="_blank">mongodb与爬虫的关系</a> getapi <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>MongoDB与爬虫之间的关系主要体现在数据存储和管理的层面。爬虫（WebCrawler或Spider）是一种自动化工具，用于从互联网上抓取网页内容或特定数据。而MongoDB是一个NoSQL数据库，常被用来存储和管理爬虫抓取到的数据。以下是它们之间关系的具体分析：1.爬虫的数据存储需求爬虫在运行过程中会抓取大量的非结构化或半结构化数据（例如HTML页面、JSON数据、图片链接等）。这些数据通常具</div> </li> <li><a href="/article/1904050998373052416.htm" title="SpringSecurity——如何获取当前登录用户的信息" target="_blank">SpringSecurity——如何获取当前登录用户的信息</a> 代码代码快快显灵 <a class="tag" taget="_blank" href="/search/springsecurity/1.htm">springsecurity</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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/SpringSecurity/1.htm">SpringSecurity</a> <div>目录1.直接注入Principal2.直接注入Authentication3.注入UsernamePasswordAuthenticationToken4.通过SecurityContextHolder获取5.使用自定义工具方法总结如何获取更多的用户信息自定义用户实体类如何忽略某些字段（不返回前端）以及规范日期格式登录成功后的处理：在SpringSecurity中，当前登录用户的信息实际上都存储在</div> </li> <li><a href="/article/1904036753245794304.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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>样式的引入h3{color:hotpink;font-size:24px;}p{color:crimson;}欢迎老师来教室听课关联样式谁离标签最近谁的优先级最高-->满园春色关不住一枝红杏出墙来黄河之水天上来</div> </li> <li><a href="/article/1904031965221285888.htm" title="前端页面列表白线问题解决方案" target="_blank">前端页面列表白线问题解决方案</a> 松岛的枫叶 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>/*完全消除行间边框*/.el-table{--el-table-border-color:transparent!important;}.el-tabletd.el-table__cell{border-bottom:none!important;}.el-tableth.el-table__cell.is-leaf{border-bottom:none!important;}.el-table</div> </li> <li><a href="/article/1904026786082123776.htm" title="前端面试常见的计算机网络内容梳理" target="_blank">前端面试常见的计算机网络内容梳理</a> GISer_Jinger <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>前端面试常见的计算机网络内容梳理，我得从搜索结果里找相关的信息。先看看各个网页的内容。网页1和网页2主要讲OSI模型、TCP/IP模型，ARP、DNS、TCP/UDP区别这些基础概念，这些都是常考的点。网页3提到了TCP三次握手、HTTP缓存、跨域方法，还有CDN原理，这些都是前端面试的重点。网页4详细讨论了HTTP请求方法、状态码、请求头和响应头，这些内容也很关键。网页5提到了HTTPS加密原理</div> </li> <li><a href="/article/1904012913543278592.htm" title="开源前端埋点监控插件Web-Tracing" target="_blank">开源前端埋点监控插件Web-Tracing</a> 研创通之逍遥峰 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%B7%A5%E5%85%B7/1.htm">开源工具</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web-Tracing是一款专为前端项目设计的前端监控插件，它基于JavaScript设计，兼容跨平台使用，并提供了全方位的监控功能。开源地址：https://gitee.com/junluoyu/web-tracing-analysis以下是关于Web-Tracing的详细介绍：一、主要功能Web-Tracing涵盖了多个领域的监控手段，包括但不限于：埋点：通过事件监听，实现对用户交互行为的精准</div> </li> <li><a href="/article/1904009504719171584.htm" title="前端实现埋点&监控" target="_blank">前端实现埋点&监控</a> Cipher_Y <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端实现埋点&监控实现埋点功能的意义主要体现在以下几个方面：数据采集：埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，它针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。通过埋点，可以收集到用户在应用中的所有行为数据，例如页面浏览、按钮点击、表单提交等。数据分析：采集的数据可以帮助业务人员分析网站或者App的使用情况、用户行为习惯等，是后续建立用户画像、用户行为路径等数据产</div> </li> <li><a href="/article/1904008622371827712.htm" title="分片文件异步合并上传" target="_blank">分片文件异步合并上传</a> 零三零等哈来 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>对于大文件，为了避免上传导致网络带宽不够用，还有避免内存溢出，我们采用分片异步上传。controller层，在前端对文件进行分片，先计算文件md5码，方便后续文件秒传，然后再计算可以分成多少个分片，得到分片总数以及当前分片下标。@RequestMapping("/uploadFile")@SentinelResource(value="uploadFile",blockHandler="uploa</div> </li> <li><a href="/article/1904003329663496192.htm" title="CSS 创建" target="_blank">CSS 创建</a> 智慧浩海 <a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</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文档。如何插入样式表插入样式表的方法有三种:外部样式表(Externalstylesheet)内部样式表(Internalstylesheet)内联样式(Inlinestyle)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（</div> </li> <li><a href="/article/1904000055065505792.htm" title="Pytest基础使用" target="_blank">Pytest基础使用</a> 北条苒茗殇 <a class="tag" taget="_blank" href="/search/pytest/1.htm">pytest</a> <div>概述Pytest是Python里的一个强大的测试框架，灵活易用，可以进行功能，自动化测试使用，可以与Requests，Selenium等进行结合使用，同时可以生成Html的报告。一、Pytest的基本使用在未指定Pytest的配置文件时，会对以下文件进行执行：test_*.py，如：test_1.py*_test.py，如：1_test.py会对以下的类和函数进行执行：类：以Test_开头的类，如</div> </li> <li><a href="/article/1903997785917681664.htm" title="webAPP开发三：实现数据的交互显示" target="_blank">webAPP开发三：实现数据的交互显示</a> lvzekun-IT <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">前端基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a> <div>开发中遇到的错误:代码逻辑错误，将初始化函数放在了初始化对象之前，造成了“.html()”无法识别，表示未定义、http://read.t.imooc.io/参考代码下载地址。开发截图：代码结构：html{width:100%;height:100%;overflow-x:hidden;}body{text-align:left;width:100%;background:#e9dfc7;}.m-</div> </li> <li><a href="/article/1903980495725719552.htm" title="蓝桥杯web备赛----html篇" target="_blank">蓝桥杯web备赛----html篇</a> 菥菥爱嘻嘻 <a class="tag" taget="_blank" href="/search/%E8%93%9D%E6%A1%A5%E6%9D%AF%E5%A4%87%E8%B5%9B/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/%E8%93%9D%E6%A1%A5%E6%9D%AF/1.htm">蓝桥杯</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1、html写在前面，html相对简单，主要会考基础标签、html5新特性、html5本地存储、但是目前我还没有做到本地存储的题目1.1基础标签(1)、链接标签a:访问Examplehref:链接target：定义链接的打开方式。_blank:在新窗口或新标签页中打开链接。_self:在当前窗口或标签页中打开链接（默认）。_parent:在父框架中打开链接。_top:在整个窗口中打开链接，取消任何</div> </li> <li><a href="/article/1903974945537454080.htm" title="【前端】实操tips集合" target="_blank">【前端】实操tips集合</a> JAMJAM_NoName <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/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/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>1.关闭vue中组件名字的多词校验(1)package.json文件中修改eslint配置"eslintConfig":{"rules":{"vue/multi-word-component-names":"off"}},（2）.eslintrc.js或者.eslintrc配置文件中进行配置module.exports={rules:{'vue/multi-word-component-names</div> </li> <li><a href="/article/1903972546252959744.htm" title="WEBGL 2D游戏引擎研发系列第二章 <显示图片>" target="_blank">WEBGL 2D游戏引擎研发系列第二章 <显示图片></a> 小鬼编程 <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a><a class="tag" taget="_blank" href="/search/webgl/1.htm">webgl</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91/1.htm">html5游戏开发</a><a class="tag" taget="_blank" href="/search/%E6%89%A9%E5%B1%95/1.htm">扩展</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/2d/1.htm">2d</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%80%E5%8F%91/1.htm">游戏开发</a> <div>WEBGL2D游戏引擎研发系列第二章~\(≥▽≤)/~HTML5游戏开发者社区（群号：326492427）转载请注明出处:http://html5gamedev.org/目录HTML52D游戏引擎研发系列第一章HTML52D游戏引擎研发系列第二章HTML52D游戏引擎研发系列第三章HTML52D游戏引擎研发系列第四章HTML52D游戏引擎研发系列第五章HTML52D游戏引擎研发系列第六章HTML5</div> </li> <li><a href="/article/1903970021751713792.htm" title="前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）" target="_blank">前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）</a> 大泡泡糖 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">学习记录</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/webstorm/1.htm">webstorm</a> <div>前端技术学习记录：react+dvajs+antdesign实现暴走计算器的页面重构（二）前言定义Modelconnect起来更新state拥抱变化主题切换更换页面获取当前设备类型编写武学选择前言www定义Model完成UI后，现在开始处理数据和逻辑。dva通过model的概念把一个领域的模型管理起来，包含同步更新state的reducers，处理异步逻辑的effects，订阅数据源的subscr</div> </li> <li><a href="/article/1903952496859082752.htm" title="HTML5！进击2025web蓝桥杯复习之路" target="_blank">HTML5！进击2025web蓝桥杯复习之路</a> Deepsleep. <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>#HTML5全面解析##目录1.[HTML5简介](#1-html5-简介)2.[基本标签](#2-基本标签)3.[新特性](#3-新特性)4.[本地存储](#4-本地存储)5.[总结](#5-总结)---##1.HTML5简介HTML5是HTML的第五个主要版本，2014年由W3C正式发布。主要特性包括：-语义化标签-多媒体支持-图形绘制（Canvas/SVG）-本地存储能力-WebWorker</div> </li> <li><a href="/article/1903952495978278912.htm" title="uniapp" target="_blank">uniapp</a> Deepsleep. <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，可以编译到iOS、Android、H5、以及各种小程序等多个平台。以下是uni-app页面生命周期的详细介绍，包括一些简单的示例：初始化阶段onLoad(options)触发时机：页面加载时触发，且只触发一次。参数：options是一个包含页面路径参数的对象。示例：从上一个页面传递参数到当前页面。onLoad(options){conso</div> </li> <li><a href="/article/1903950224280317952.htm" title="最常用的Linux指令手册" target="_blank">最常用的Linux指令手册</a> 忍界英雄 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>最常用的Linux指令手册一、远程连接1.连接远程服务器sshuser@192.168.1.100二、文件与目录操作2.查看目录内容ls：查看目录内容、ls-l：显示详细信息、ls-al/home：包含隐藏文件3.显示当前路径pwd4.切换目录cd/var/www/html5.创建文件touchfile1.txtfile2.txt、touchlinode{1..10}.txt:创建文件6.写入文件</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>