墨鸦_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/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <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/%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/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <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/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835398064727224320.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/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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</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/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <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和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <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/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <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>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> 九旬大爷的梦 <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</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%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</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>