墨鸦_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/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> universe_01 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> 小馋喵知识杂货铺 <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> weixin_39607620 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> 峰谷皆平 <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> TIM老师 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191208873652224.htm" title="vue element 封装表单" target="_blank">vue element 封装表单</a> 影子信息 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> 浪子神剑 <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> 疯狂学习GIS <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> 武昌库里写JAVA <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950178477592342528.htm" title="前端数据库：IndexedDB从基础到高级使用指南" target="_blank">前端数据库：IndexedDB从基础到高级使用指南</a> <div>文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.</div> </li> <li><a href="/article/1950169524384886784.htm" title="【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）" target="_blank">【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）</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><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <div>作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：3251736703@qq.com各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950164483057971200.htm" title="14.tornado操作之应用Websocket协议实现聊天室功能" target="_blank">14.tornado操作之应用Websocket协议实现聊天室功能</a> 孤寒者 <a class="tag" taget="_blank" href="/search/Tornado%E6%A1%86%E6%9E%B6%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98/1.htm">Tornado框架从入门到实战</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/tornado/1.htm">tornado</a><a class="tag" taget="_blank" href="/search/%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0/1.htm">聊天室功能实现</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> web前端学习指南 <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950143305194991616.htm" title="小架构step系列25：错误码" target="_blank">小架构step系列25：错误码</a> 秋千码途 <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有</div> </li> <li><a href="/article/1950140903616212992.htm" title="Java朴实无华按天计划从入门到实战（强化速战版-66天）" target="_blank">Java朴实无华按天计划从入门到实战（强化速战版-66天）</a> 岫珩 <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%AE%89%E6%8E%92/1.htm">时间安排</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%A1%E5%88%92/1.htm">学习计划</a> <div>致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1</div> </li> <li><a href="/article/1950132204336115712.htm" title="《跨域资源共享CORS的深层逻辑与前端实践精要》" target="_blank">《跨域资源共享CORS的深层逻辑与前端实践精要》</a> <div>不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了</div> </li> <li><a href="/article/1950131321980383232.htm" title="深入了解 Kubernetes（k8s）：从概念到实践" target="_blank">深入了解 Kubernetes（k8s）：从概念到实践</a> <div>目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> 简单的码农 <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</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> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> 显哥无敌 <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> Nanayai <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950119224630374400.htm" title="大厂都在用的前端缓存策略，你掌握了吗？" target="_blank">大厂都在用的前端缓存策略，你掌握了吗？</a> AI架构全栈开发实战笔记 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</a> 波吉爱睡觉 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950115062781898752.htm" title="26. 什么是雪碧图，作用和原理了解吗" target="_blank">26. 什么是雪碧图，作用和原理了解吗</a> yqcoder <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不</div> </li> <li><a href="/article/1950112039502409728.htm" title="H5UI微信小程序前端框架实战指南" target="_blank">H5UI微信小程序前端框架实战指南</a> ai <div>本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下</div> </li> <li><a href="/article/1950108839089074176.htm" title="Windows下Oracle安装图解" target="_blank">Windows下Oracle安装图解</a> 叫我老村长 <div>Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g</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>