【HTML总复习】一文带你查漏补缺，暖你一整天

文章目录

导读
- 网页
- 什么是HTML
- Web标准
1.基本标签
- 1.1 HTML标签
- 1.2 头部标签< head >
- 1.3 身体标签< body >
- 1.4 类型声明标签
- 1.5 部分标签内部属性
2.常用标签
- 2.1 标题标签
- 2.2 段落与换行标签
- 2.3 文本格式化标签
- 2.4 “盒子”标签
- 2.5 图像标签和路径
- - 2.5.1 图像标签
  - 2.5.2 路径
- 2.6 超链接标签
- - 2.6.1 标签

3.注释和特殊字符

3.1注释
3.2 特殊字符表

4.表格

4.1 基本语法
4.2 表格属性
4.3 表格结构标签
4.4 合并单元格
- 4.4.1 跨行合并
- 4.4.2 跨列合并

5.列表标签

5.1 无序列表
- 5.1.1 语法
- 5.1.2 type属性
5.2 有序列表
- 5.2.1 语法
- 5.2.2 type属性
5.3 定义列表
- 5.3.1 语法

6.表单标签

6.1 组成
6.2 表单域
6.3 表单控件（表单元素）
- 6.3.1 表单元素
- 6.3.2 表单元素</li> </ul> </li> </ul> </li> </ul> </div> <p></p> <a href="http://img.e-com-net.com/image/info8/0ce140c6732c4fbfbc0bf45ca4ed362d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ce140c6732c4fbfbc0bf45ca4ed362d.jpg" width="500" height="500" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第1张图片" style="border:1px solid black;"></a> <h1>导读</h1> <h2>网页</h2> <p><font color="red">网站</font>是指在因特网中根据一定的规则，使用<strong>HTML</strong>等制作的用于展示特定内容相关的<mark>网页集合</mark></p> <p><font color="red">网页</font>是网站中的一页，通常就是<font color="red">HTML格式的文件</font></p> <h2>什么是HTML</h2> <p>一种描述网页的<font color="red">超文本语言</font></p> <p>它并非编程语言，是一套标记标签</p> <p>而所谓<font color="red">超文本</font>有两种含义</p> <ol> <li><strong>超越了文本限制：</strong> 可以加入图片、声音、动漫等内容</li> <li><strong>含超级链接：</strong> 可以从一个文件跳转到另一个文件，也就是网站中网页的替换呈现</li> </ol> <h2>Web标准</h2> <p>（<strong>面试考点</strong>）</p> <p>由W3C组织和其他标准化组织制定的一系列标准集合<br> 制定标准就像是制定规则，增大了设备、浏览器、搜索引擎的等兼容性</p> <table> <thead> <tr> <th>标准</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>结构</td> <td>结构用于对网页元素进行整理和分类</td> </tr> <tr> <td>表现</td> <td>设置网页元素的版式、颜色、大小等外观样式（CSS）</td> </tr> <tr> <td>行为</td> <td>网页模型的定义以及交互的编写（JavaScript）</td> </tr> </tbody> </table> <p>以上三类规定分离，即<font color="red">html文件写结构、css文件写表现、JavaScript文件写行为</font></p> <h1>1.基本标签</h1> <h2>1.1 HTML标签</h2> <p>称之为根标签，是最大的标签，文件从< html >开始到< /html >结束</p> <h2>1.2 头部标签< head ></h2> <p>定义一些往往不可见的内容</p> <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span>内部标签<span class="token operator">|</span> 说明 <span class="token operator"><</span>title<span class="token operator">></span> 定义网页标题 <span class="token operator"><</span>meta<span class="token operator">></span> 定义网页基本内容（搜索引擎的关键字） <span class="token operator"><</span>style<span class="token operator">></span> 定义CSS样式 <span class="token operator"><</span>link<span class="token operator">></span> 链接外部CSS文件或脚本文件 <span class="token operator"><</span>script<span class="token operator">></span> 定义脚本语言 <span class="token operator"><</span>base<span class="token operator">></span> 定义页面所有链接的基础定位（少用） </code></pre> <p>前期除title标签外，其他只需认识就行</p> <h2>1.3 身体标签< body ></h2> <p>定义的就是网页展示出来的内容</p> <h2>1.4 类型声明标签</h2> <p><font color="red">< !DOCTYPE html ></font><br> 告诉浏览器采取HTML5版本<br> <strong>开头声明</strong></p> <h2>1.5 部分标签内部属性</h2> <ul> <li><strong><html lang= “en” ></strong> 本页面采用英文显示<br> <mark>en是英文显示、zh-CN是中文显示</mark></li> <li><strong><meta charset= “UTF-8” /></strong> 采用UTF-8来保存文字，不写会出现乱码的情况<br> charset是字符集的意思，而<font color="blue">UTF-8</font>基本包含所有的字符</li> </ul> <h1>2.常用标签</h1> <h2>2.1 标题标签</h2> <ul> <li>双标签从<h1>到<h6>重要性以此递减</li> <li>表达格式：<code><h1> 一级标签 </h1></code></li> <li><strong>注意：</strong> 一个标题独占一行且文字会变粗变大</li> </ul> <h2>2.2 段落与换行标签</h2> <ul> <li><strong>段落标签：</strong><br> <code><p> 某段落 </p></code><br> <mark>段落文本会根据浏览器窗口的大小自动换行</mark><br> <mark>段落之间存在空行间隙</mark></li> <li><strong>换行标签：</strong><br> <code><br /></code><br> <mark>强制换行</mark><br> <mark>与段落不同，换行不会出现间距</mark></li> </ul> <p>有时会看到<code><hr/></code>标签，这是显示水平线的标签</p> <hr> <h2>2.3 文本格式化标签</h2> <ul> <li> <p><strong>加粗：</strong><br> <code><strong> 加粗文字 </strong></code><br> strong也可用<mark>b</mark>替代</p> </li> <li> <p><strong>倾斜：</strong><br> <code><em> 倾斜文字 </em></code><br> em也可用<mark>i</mark>替代</p> </li> <li> <p><strong>删除线：</strong><br> <code><del> 删除线文字 </del></code><br> del也可用<mark>s</mark>替代</p> </li> <li> <p><strong>下划线：</strong><br> <code><ins> 下划线文字 <ins></code><br> ins也可以<mark>u</mark>替代</p> </li> <li> <p><strong>上标：</strong><br> <code><sup> 上标文字</sup></code></p> </li> <li> <p><strong>下标：</strong><br> <code><sub> 下标文字 </sub></code></p> </li> </ul> <h2>2.4 “盒子”标签</h2> <ul> <li> <p><strong><div>标签</strong><br> division，表示分割分区，一行只能放一个大盒子<div><br> <code><div> </div></code></p> </li> <li> <p><strong><span>标签</strong><br> span，表示跨度、跨距，一行可以放多个小盒子<span><br> <code><span> </span></code></p> </li> </ul> <h2>2.5 图像标签和路径</h2> <h3>2.5.1 图像标签</h3> <p><code><img src="图像URL" /></code><br> <img>标签用于定义HTML页面中的图像<br> src 是其里面的<font color="red"> 必须属性 </font><br> 指定图像文件的路径和文件名</p> <p><mark>img标签的其他属性：</mark></p> <table> <thead> <tr> <th>属性</th> <th>属性值（输入类型）</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>alt</td> <td>文本</td> <td>替换文本，当文本不能显示时，在其后面显示的文字</td> </tr> <tr> <td>title</td> <td>文本</td> <td>提示文本，鼠标放在图像上显示的文字</td> </tr> <tr> <td>width</td> <td>像素</td> <td>图像宽度</td> </tr> <tr> <td>height</td> <td>像素</td> <td>图像高度</td> </tr> <tr> <td>border</td> <td>像素</td> <td>图像边框粗细</td> </tr> </tbody> </table> <p><font color="blue"> 属性之间不分先后、以空格隔开 </font></p> <h3>2.5.2 路径</h3> <ul> <li><strong>相对路径</strong><br> 以引用文件所在位置为参考基础<br> 如某一图片名nb.gif</li> </ul> <table> <thead> <tr> <th>分类</th> <th>符号</th> <th>表达</th> </tr> </thead> <tbody> <tr> <td>同一级</td> <td></td> <td><img src=“nb.gif” /></td> </tr> <tr> <td>下一级</td> <td>/</td> <td><img src =“images/nb.gif” /></td> </tr> <tr> <td>上一级</td> <td>…/</td> <td><img src=“…/nb.gif” /></td> </tr> </tbody> </table> <ul> <li><strong>绝对路径</strong><br> 指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径<br> 例如：<br> <code>D:\web\img\baidu.gif</code><br> 或完整的网络地址<br> <code>http://www.baidu.com</code><br> <mark>前者实际开发中基本不用，不能在每个电脑兼容</mark><br> <mark>后者由于网络地址具有唯一性，可以实现兼容情况</mark></li> </ul> <h2>2.6 超链接标签</h2> <h3>2.6.1 <a>标签</h3> <ul> <li> <p><code><a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a></code><br> anchor 表示为锚<br> <strong>herf：</strong> 制定链接的URL地址（必须属性）</p> <p><strong>target：</strong> 打开链接页面方式<br> （1）_self为默认值，在当前窗口打开<br> （2）_blank ，在新窗口打开</p> </li> </ul> <h3>2.6.2 链接分类</h3> <ol> <li>外部链接，如网络链接</li> <li>内部链接：网站内页面之间的相互链接，如<br> <code><a href="index.html">首页 </a></code></li> <li>空链接：当还没有确定的链接目标，可以先指向空<br> <code><a href="#" 目录 </a></code></li> <li>下载链接：如指向rar压缩包，便会下载该包</li> <li>网页元素链接，在网页中，文本、图像、表格等等都可添加超链接，如给图片添加超链接：<br> <code><a href ="https//www.baidu.com > <img src="index.html" /></a></code></li> <li>锚点链接：点击链接跳转到本页面的某个位置<br> 需两步：<br> （1）在链接标签的href属性中，设置为"#名字"的形式，如<code><a href="#power" 力量</a></code><br> （2）在目标位置标签，添加id属性= 名字，如：<br> <code><h2 id= "power" ></code><br> 此时点击文本中的<font color="blue">力量</font>，便可跳转到目的位置</li> </ol> <h2>2.7 音频标签</h2> <p><code><audio></audio></code>标签，插入音频链接<br> <strong>属性：</strong><br> <a href="http://img.e-com-net.com/image/info8/2601a45a194244f8a405489de1d167c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2601a45a194244f8a405489de1d167c2.jpg" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第2张图片" width="626" height="311" style="border:1px solid black;"></a><br> <strong>语法：</strong></p> <pre><code class="prism language-css"><audio src=<span class="token string">"音频地址"</span> controls autoplay loop> </audio> </code></pre> <p><mark>注意：</mark><br> <font color="red">音频链接目前支持三种格式：MP3、WAV、Ogg</font></p> <h2>2.8 视频链接</h2> <p><code><video></video></code>标签，插入视频链接<br> <strong>属性：</strong><br> <a href="http://img.e-com-net.com/image/info8/6f53ed0a05d14f52b9e5d1113c1d80ef.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f53ed0a05d14f52b9e5d1113c1d80ef.jpg" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第3张图片" width="650" height="233" style="border:1px solid black;"></a><br> <strong>语法：</strong></p> <pre><code class="prism language-css"><video src=<span class="token string">"视频地址"</span> controls autoplay loop </video> </code></pre> <p><mark>注意：</mark><br> <font color="red"> 视频静音下，谷歌浏览器才给自动播放</font></p> <h2>2.9 有语义的结构标签</h2> <p>H5新版本推出的语义化标签，<mark>主要用于手机端网页的制作</mark></p> <p><a href="http://img.e-com-net.com/image/info8/0614c35ff88e491193182b8bd1555ea5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0614c35ff88e491193182b8bd1555ea5.jpg" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第4张图片" width="650" height="324" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/ea8d2b4995824c31a6991f286d0c8d47.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea8d2b4995824c31a6991f286d0c8d47.jpg" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第5张图片" width="443" height="424" style="border:1px solid black;"></a></p> <h1>3.注释和特殊字符</h1> <h2>3.1注释</h2> <p><code><! -- 注释语句 --></code>,一些编辑器，可以直接ctrl+/</p> <h2>3.2 特殊字符表</h2> <p><mark>收藏一下，忘了可以直接在目录点过来查哦</mark><br> <a href="http://img.e-com-net.com/image/info8/1a765998a1a54ec0bce280bccd922ae3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a765998a1a54ec0bce280bccd922ae3.jpg" width="650" height="290" alt="【HTML总复习】一文带你查漏补缺，暖你一整天_第6张图片" style="border:1px solid black;"></a><br> 常用的主要是空格、大于号和小于号,其他的查个几次就记住了</p> <h1>4.表格</h1> <h2>4.1 基本语法</h2> <blockquote> <p><table><br> <tr> <td></td> <td></td> <td></td> </tr><br> <tr> <td></td> <td></td> <td></td> </tr><br> …<br> </table></p> </blockquote> <p>以下进行解释：</p> <ol> <li><code><table></table></code>是用于定义表格的标签，需要将整个表格包含</li> <li><code><tr></tr></code>定义行，<code><td></td></code>定义单元格，因此一个表格中有几列，则tr标签嵌套几个td标签</li> <li>td标签内放内容</li> <li>还有一个表头标签（table head的缩写），是标题加成效果，因此一般是将第一行的包含，突出重要性</li> </ol> <h2>4.2 表格属性</h2> <p><mark>ps:</mark><br> 这部分属性实际开发并不常用，后面通过CSS设置</p> <p><strong>学习目的</strong>主要是这里用到的单词后面CSS也会用到<br> 同时直观感受表格的外观形态</p> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left\center\right</td> <td>表格的对齐方式</td> </tr> <tr> <td>border</td> <td>1或“”</td> <td>是否拥有边框，默认为“”“，表示无边框</td> </tr> <tr> <td>cellpadding</td> <td>像素值</td> <td>单元边沿与其内容之间的空白，默认为1像素</td> </tr> <tr> <td>cellspacing</td> <td>像素值</td> <td>单元格之间的空白，默认2像素</td> </tr> <tr> <td>width</td> <td>像素值或百分比</td> <td>规定表格的宽度</td> </tr> </tbody> </table> <h2>4.3 表格结构标签</h2> <p><code><thead></code>标签，表示表格的头部，包含第一行<br> <code><tbody></code>标签，表示表格的主体，包含第二行及以下的<br> <code><caption></code>标签，表示表格的标题</p> <p><font color="red">以上三个是使表格结构更加清晰的工具，可以不用</font></p> <h2>4.4 合并单元格</h2> <h3>4.4.1 跨行合并</h3> <p>在最上面单元格的标签中加入——<code>rowspan="单元格合并个数"</code>，再将下面被合并的单元格<code><td></code>标签删去</p> <h3>4.4.2 跨列合并</h3> <p>在最左边的单元格的标签中加入——<code>colspan="单元格合并个数"</code>，再将右边被合并的单元格<code><td></code>标签删去</p> <h1>5.列表标签</h1> <h2>5.1 无序列表</h2> <h3>5.1.1 语法</h3> <pre><code class="prism language-css"><ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </code></pre> <h3>5.1.2 type属性</h3> <ol> <li><code><ul></code>标签中只能嵌套<code><li></code></li> <li>属性</li> </ol> <table> <thead> <tr> <th>type属性值</th> <th>列表项的序号类型</th> </tr> </thead> <tbody> <tr> <td>disc</td> <td>默认值，实心圆</td> </tr> <tr> <td>circle</td> <td>空心圆</td> </tr> <tr> <td>square</td> <td>实心正方形</td> </tr> </tbody> </table> <h2>5.2 有序列表</h2> <h3>5.2.1 语法</h3> <pre><code class="prism language-css"><ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> </code></pre> <p><font color="red"> <ol>中只可嵌套<li></font></p> <h3>5.2.2 type属性</h3> <table> <thead> <tr> <th>type属性值</th> <th>列表项的序号类型</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>数字</td> </tr> <tr> <td>a</td> <td>a,b,c…</td> </tr> <tr> <td>A</td> <td>A,B,C…</td> </tr> <tr> <td>i</td> <td>小写罗马数字i,ii,iii…</td> </tr> <tr> <td>I</td> <td>大写罗马数字I,II,III…</td> </tr> </tbody> </table> <p><mark>学习CSS后，列表列表项符号由list-style-type定义，到时候会摒弃type属性</mark></p> <h2>5.3 定义列表</h2> <h3>5.3.1 语法</h3> <pre><code class="prism language-css"><dl> <dt> 定义名词 </dt> <dd> 定义描述 </dd> ... </dl> </code></pre> <p>效果呈现如下：</p> <dl> 定义名词 <dd> 定义描述 </dd> </dl> <p><code>通常是一个<dt>标签对应多个<dd>标签</code></p> <h1>6.表单标签</h1> <p>使用表单——收集用户信息</p> <h2>6.1 组成</h2> <p>表单=表单域+表单控件（元素）+提示信息</p> <h2>6.2 表单域</h2> <p>包含表单元素的区域</p> <p><code><form></code>标签——定义表单域<br> <mark><code><form></code>会把其范围内的表单元素提交给服务器</mark></p> <p>常用属性：</p> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>action</td> <td>url地址</td> <td>用于指定接收并处理表单数据的服务器程序的url地址</td> </tr> <tr> <td>method</td> <td>get/post</td> <td>设置表单的提交方式</td> </tr> <tr> <td>name</td> <td>名称</td> <td>用于指定表单的名称，以区别同一个页面的多个表单域</td> </tr> </tbody> </table> <h2>6.3 表单控件（表单元素）</h2> <h3>6.3.1 <input>表单元素</h3> <ol> <li>input是输入的意思，因此在表单元素中，<code><input></code>标签用于收集用户信息</li> <li>单标签</li> <li>属性：type属性（输入字段的形式）<br> <code><input type="属性值" /></code></li> </ol> <table> <thead> <tr> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>button</td> <td>定义可点击按钮（多数情况下通过<mark>JavaScript启动脚本</mark>）</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义输入字段和“浏览”按钮，，供文件上传</td> </tr> <tr> <td>hidden</td> <td>定义隐藏的输入字段</td> </tr> <tr> <td>image</td> <td>定义图像形式的提交按钮</td> </tr> <tr> <td>password</td> <td>定义密码字段，该字段中的字符被掩码</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>reset</td> <td>定义重置按钮，<mark>重置按钮会清除表单中所有数据</mark></td> </tr> <tr> <td>submit</td> <td>定义提交按钮，<mark>提交按钮会把表单数据发送到服务器中</mark></td> </tr> <tr> <td>text</td> <td>定义单行输入字段，用户可在其中输入文本，默认宽度为20字符</td> </tr> </tbody> </table> <ol start="4"> <li>其他常用属性：</li> </ol> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>由用户自定义</td> <td>定义input元素的名称</td> </tr> <tr> <td>value</td> <td>由用户自定义</td> <td>规定input元素的值</td> </tr> <tr> <td>checked</td> <td>checked</td> <td>规定此input元素<strong>首次加载时应当被选中</strong></td> </tr> <tr> <td>maxlength</td> <td>正整数</td> <td>规定输入字段中的字符的最大长度</td> </tr> </tbody> </table> <ul> <li>单选按钮和复选框需要相同的name值</li> <li>checked属性主要针对单选按钮和复选框，主要作用是一打开页面，就默认选中某个表单元素</li> <li>maxlength,规定输入的最大字符数</li> </ul> <ol start="5"> <li><code><label></code>标签<br> 绑定一个表单元素，当点击<code><label></code>标签内文本时，自动将焦点转到或者选择对应的表单元素，<strong>来增加用户体验</strong><br> <strong>语法：</strong></li> </ol> <pre><code class="prism language-css"><label for=<span class="token string">"sex"</span>">男 </label> <input type=<span class="token string">"radio"</span> name=<span class="token string">"sex"</span> id=<span class="token string">"sex"</span>/> </code></pre> <p><font color="red">for属性与相关元素的id属性相同</font></p> <h3>6.3.2 <select>表单元素</h3> <p>功能：当有多个选项供用户选择，且想节约空间时，可以用<code><select></code>标签<strong>定义下拉列表</strong></p> <p><strong>语法：</strong></p> <pre><code class="prism language-css"><select> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> </code></pre> <ol> <li><code><select></code>标签中至少包含一对<code><option></code></li> <li><code>在<option> 中定义 selected =“ selected "</code> 时，当前项即为默认选中项。</li> </ol> <h3>6.3.3 <textarea>表单元素</h3> <p>功能：用于定义多行文本输入的控件<br> 常见于留言板、评论等等</p> <p><strong>语法：</strong></p> <pre><code class="prism language-css"><textarea rows=<span class="token string">"3"</span> cols=<span class="token string">"20"</span>> 文本内容
  - cols="每行中的字符数"，rows="显示的行数"
  - ==实际开发不常用，基本依靠CSS
  各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步

你可能感兴趣的:(前端笔记,html,css,前端)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录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
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
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
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件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
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【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
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
mysql 分区查询优化 annan211 java 分区优化 mysql
分区查询优化引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。可以通过查看explain执行计划，是否携带 partitions
MYSQL存储过程中使用游标 chicony Mysql存储过程
DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08-- BEGINdecla
mysql 和 sqlite 区别 Array_06 sqlite
转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
pinyin4j使用 oloz pinyin4j
首先需要pinyin4j的jar包支持；jar包已上传至附件内方法一:把汉字转换为拼音；例如：编程转换后则为biancheng /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
微博发送私信随意而生微博
在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据，让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
jsp 香水浓 jsp
JSP初始化容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。当JSP网页完成初始化后
在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx 现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在下面的onItemLongClick 方法中参数 arg2 是选中的序号，但是我不知道如何继续处理下去 1 2 3
jdk-6u26-linux-x64.bin 安装 baalwolf linux
1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
MongoDB经典面试题集锦 BigBird2012 mongodb
1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。在考虑数据库的成熟
JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScript Promise
Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
[Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
隐式转换存在的必要性，在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下： val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
Android JSON数据的解析与封装小Demo ronin47
转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; impor
[设计]字体创意设计方法谈 brotherlamp UI ui自学 ui视频 ui教程 ui资料
从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java 算法面试题
import java.util.LinkedList; /* 单调队列滑动窗口单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
struts2处理一个form多个submit chiangfai struts2
web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
shell查找上个月，陷阱及野路子 chenchao051 shell
date -d "-1 month" +%F 以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。野路子解决：假设当天日期大于15号
mysql导出数据中文乱码问题 daizj mysql 中文乱码导数据
解决mysql导入导出数据乱码问题方法：１、进入mysql，通过如下命令查看数据库编码方式： mysql> show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHP smarty sae
对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为： 01 $path
《教父》系列台词 dcj3sjt126com
Your love is also your weak point. 你的所爱同时也是你的弱点。 If anything in this life is certain, if history has taught us anything, it is that you can kill anyone. 不顾家的人永远不可能成为一个真正的男人。 &
mongodb安装与使用 dyy_gusi mongo
一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库, linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置 tar -vxf mongodb-linux-x86_64-ubun
Git排除目录 geeksun git
在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1. 针对单一工程排除文件这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下以下假设你的脚本文件名为 test。 2) 设置脚本文件的权限 $ sudo chmod 755
第八章流量复制/AB测试/协程 jinnianshilongnian nginx lua coroutine
流量复制在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
电商系统商品表设计 lkl
DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
修改phpMyAdmin导入SQL文件的大小限制 pda158 sql mysql
　用phpMyAdmin导入mysql数据库时，我的10M的数据库不能导入，提示mysql数据库最大只能导入2M。　　 phpMyAdmin数据库导入出错：　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
Tomcat性能调优方案 Sobfist apache jvm tomcat 应用服务器
一、操作系统调优对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。【适用场景】任何项目。二、Java虚拟机调优应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
SQLServer学习笔记 vipbooks 数据结构 xml
1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他