∮d(y)√i²
∮d(y)√i²

HTML的总结

目录

1、html简介

2、HTML的标签

2、1 head 标签

 2、2 body 标签

3、标签的总结

3、1 文本格式标签

3、2 段落标签

 

3、3 图片标签

3、4 路径

   

3、5 列表标签

3、5.1 有序列表

 ​编辑

 3、5.2 无序列表

3、5.3 定义列表

3、6 表格标签

 

3、6.1 表格和边框属性

3、6.2 表格的表头

3、6.3 表格中的空单元格

4、表单

4、1 input标签

4、2 textarea标签

4、3 select和option

4、4 按钮

4、5 表单案例

 

 

 

 

 

 

 

 

 

 

 

1、html简介

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

2、HTML的标签

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

2、1 head 标签

标签 描述
定义了文档的信息
</td> <td>定义了文档的标题</td> </tr> <tr> <td><base></td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td><link></td> <td>定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td><meta></td> <td>定义了HTML文档中的元数据</td> </tr> <tr> <td><script></td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td><style></td> <td>定义了HTML文档的样式文件</td> </tr> </tbody> </table> <p></p> <h2 id="%C2%A02%E3%80%812%20body%20%E6%A0%87%E7%AD%BE"> 2、2 body 标签</h2> <p>  body 元素<strong>包含文档的所有内容</strong>（比如文本、超链接、图像、表格和列表等等。 ）body是用在网页中的一种HTML标签，标签是用在网页中的一种 HTML 标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。</p> <h1 id="3%E3%80%81%E6%A0%87%E7%AD%BE%E7%9A%84%E6%80%BB%E7%BB%93">3、标签的总结</h1> <h2 id="3%E3%80%811%20%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E6%A0%87%E7%AD%BE">3、1 文本格式标签</h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>标签</td> <td>说明</td> </tr> <tr> <td><strong>  <b></td> <td>加粗</td> </tr> <tr> <td><em>  <i></td> <td>斜体</td> </tr> <tr> <td><ins>  <u></td> <td>下划线</td> </tr> <tr> <td><sup> <sub></td> <td>上标和下标</td> </tr> <tr> <td><del></td> <td>删除线</td> </tr> </tbody> </table> <p></p> <h2 id="3%E3%80%812%20%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE">3、2 段落标签</h2> <h2 id="%C2%A0"> </h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>标签</td> <td style="width:204px;">说明</td> </tr> <tr> <td>h1-h6</td> <td style="width:204px;"> <p>标题</p> </td> </tr> <tr> <td><p></td> <td style="width:204px;">段落</td> </tr> <tr> <td><br> </td> <td style="width:204px;">换行</td> </tr> <tr> <td><hr></td> <td style="width:204px;">水平线</td> </tr> <tr> <td><div></td> <td>块元素</td> </tr> <tr> <td><span></td> <td>行内元素</td> </tr> </tbody> </table> <p>  </p> <p> </p> <h2 id="3%E3%80%813%20%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE">3、3 图片标签</h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>src</td> <td>图像的文件地址</td> </tr> <tr> <td>alt</td> <td>图片显示不出来时的提示文字</td> </tr> <tr> <td>title</td> <td>鼠标移到图片上的提示文字</td> </tr> </tbody> </table> <h2 id="3%E3%80%814%20%E8%B7%AF%E5%BE%84">3、4 路径</h2> <h3 id="%C2%A0%20%C2%A0">   </h3> <p>相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。</p> <p>绝对路径，指的是文件的完整路径。</p> <p> </p> <h2 id="3%E3%80%815%20%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE">3、5 列表标签</h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>标签</td> <td> <p>解释</p> </td> </tr> <tr> <td>ol</td> <td>有序列表</td> </tr> <tr> <td>ul</td> <td>无序列表</td> </tr> <tr> <td>dl</td> <td>定义列表</td> </tr> </tbody> </table> <h3 id="3%E3%80%815.1%20%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8">3、5.1 有序列表</h3> <pre><code class="language-html"><ol> <li>Coffee</li> <li>Milk</li> </ol></code></pre> <p> 效果</p> <h3 id="%C2%A0%E2%80%8B%E7%BC%96%E8%BE%91"> <a href="http://img.e-com-net.com/image/info8/0820db85aa12433fb1f14bceabc3606a.jpg" target="_blank"><img alt="HTML的总结_第1张图片" height="115" src="http://img.e-com-net.com/image/info8/0820db85aa12433fb1f14bceabc3606a.jpg" width="297" style="border:1px solid black;"></a></h3> <h3 id="%C2%A03%E3%80%815.2%20%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"> 3、5.2 无序列表</h3> <pre><code class="language-html"><ul> <li>Coffee</li> <li>Milk</li> </ul></code></pre> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/8d3fbadff7514a0298c21271d7f3bb4f.jpg" target="_blank"><img alt="" height="83" src="http://img.e-com-net.com/image/info8/8d3fbadff7514a0298c21271d7f3bb4f.jpg" width="178"></a> </p> <p> 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p> <h3 id="3%E3%80%815.3%20%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8">3、5.3 定义列表</h3> <pre><code class="language-html"><dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl></code></pre> <p>效果：</p> <p><a href="http://img.e-com-net.com/image/info8/39f386d92be04f27968e47ade68bc76c.jpg" target="_blank"><img alt="HTML的总结_第2张图片" height="143" src="http://img.e-com-net.com/image/info8/39f386d92be04f27968e47ade68bc76c.jpg" width="258" style="border:1px solid black;"></a> </p> <p> </p> <h2 id="3%E3%80%816%20%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE">3、6 表格标签</h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>标签</td> <td>解释</td> </tr> <tr> <td>table</td> <td>表格</td> </tr> <tr> <td>tr</td> <td>行</td> </tr> <tr> <td>td</td> <td>单元格</td> </tr> </tbody> </table> <h2> </h2> <h3 id="3%E3%80%816.1%C2%A0%E8%A1%A8%E6%A0%BC%E5%92%8C%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7">3、6.1 表格和边框属性</h3> <pre><code class="language-html"><table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table></code></pre> <h3 id="3%E3%80%816.2%C2%A0%E8%A1%A8%E6%A0%BC%E7%9A%84%E8%A1%A8%E5%A4%B4">3、6.2 表格的表头</h3> <p>表格的表头使用 <th> 标签进行定义。</p> <p>大多数浏览器会把表头显示为粗体居中的文本。</p> <pre><code class="language-html"><table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table></code></pre> <p>效果：</p> <p> <a href="http://img.e-com-net.com/image/info8/b3cda1f6b72b4e2dbced555c5dedae64.jpg" target="_blank"><img alt="HTML的总结_第3张图片" height="134" src="http://img.e-com-net.com/image/info8/b3cda1f6b72b4e2dbced555c5dedae64.jpg" width="413" style="border:1px solid black;"></a></p> <h3 id="3%E3%80%816.3%C2%A0%E8%A1%A8%E6%A0%BC%E4%B8%AD%E7%9A%84%E7%A9%BA%E5%8D%95%E5%85%83%E6%A0%BC">3、6.3 表格中的空单元格</h3> <p>在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。 </p> <h1 id="4%E3%80%81%E8%A1%A8%E5%8D%95">4、表单</h1> <table border="1" style="width:500px;"> <tbody> <tr> <td>id</td> <td>元素的唯一表示，不重复</td> </tr> <tr> <td>name</td> <td>很重要–提交数据到服务器之后，服务器获取数据通过该名称</td> </tr> <tr> <td>value</td> <td>服务器获取数据通过name获取到的就是value</td> </tr> <tr> <td>type</td> <td>表示表单项元素的呈现形式</td> </tr> <tr> <td>class</td> <td>表示样式名称</td> </tr> <tr> <td>readonly</td> <td>表示只读</td> </tr> </tbody> </table> <h2 id="4%E3%80%811%20input%E6%A0%87%E7%AD%BE">4、1 input标签</h2> <p><em><input></em> 元素是最重要的<em>表单元素</em>。</p> <p><input> 元素有很多形态，根据不同的 <em>type</em> 属性</p> <table border="1" style="width:500px;"> <tbody> <tr> <td>类型</td> <td>解释</td> </tr> <tr> <td>text</td> <td>定义常规文本输入。</td> </tr> <tr> <td>radio</td> <td>定义单选按钮输入（选择多个选择之一）</td> </tr> <tr> <td>submit</td> <td>定义提交按钮（提交表单）</td> </tr> </tbody> </table> <h2 id="4%E3%80%812%C2%A0textarea%E6%A0%87%E7%AD%BE">4、2 textarea标签</h2> <p><textarea rows="行数" cols="列数">多行文本框内容</textarea> </p> <h2 id="4%E3%80%813%C2%A0select%E5%92%8Coption">4、3 <strong>select和option</strong></h2> <p> 下拉列表由<select>标签和<option>标签配合使用。</p> <pre><code class="language-html"><select> <option>山东</option> <option>北京</option> <option>天津</option> <option selected="selected">重庆</option> </select></code></pre> <p>效果：</p> <p><a href="http://img.e-com-net.com/image/info8/f2e6a52991d1472aab8291315c91450f.jpg" target="_blank"><img alt="" height="86" src="http://img.e-com-net.com/image/info8/f2e6a52991d1472aab8291315c91450f.jpg" width="230"></a> </p> <h2 id="4%E3%80%814%20%E6%8C%89%E9%92%AE">4、4 按钮</h2> <table border="1" style="width:500px;"> <tbody> <tr> <td>reset</td> <td> <p>重置按钮</p> </td> </tr> <tr> <td>submit</td> <td>提交按钮</td> </tr> <tr> <td>image</td> <td>图像按钮</td> </tr> <tr> <td>file</td> <td>上传文件</td> </tr> <tr> <td>hadden</td> <td>隐藏域</td> </tr> <tr> <td>email</td> <td>邮件</td> </tr> <tr> <td>data</td> <td>时间段</td> </tr> <tr> <td>color</td> <td>颜色</td> </tr> </tbody> </table> <h2 id="4%E3%80%815%20%E8%A1%A8%E5%8D%95%E6%A1%88%E4%BE%8B">4、5 表单案例</h2> <p>此表单包含两个复选框和一个确认按钮。 </p> <pre><code class="language-html"><html> <body> <form name="input" action="/html/html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p> </body> </html></code></pre> <p>效果：</p> <p><a href="http://img.e-com-net.com/image/info8/0b79133bf85b49ec94abe69a94359895.jpg" target="_blank"><img alt="HTML的总结_第4张图片" height="276" src="http://img.e-com-net.com/image/info8/0b79133bf85b49ec94abe69a94359895.jpg" width="548" style="border:1px solid black;"></a> </p> <p> </p> <p>表单综合实验：</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>表单标签

注册界面


用户名：
密  码:
请输入您的性别：男 女
请选择您的爱好：足球 篮球 LOL 韩剧 王者荣耀
邮箱：
用户头像：
您的家庭住址：
请您留下您的建议或者意见： 注册时间：
颜色：

 

效果：

 HTML的总结_第5张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

  • 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 的部分方法 某公司摸鱼前端 htmluni-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前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：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） 有一只柴犬 爬虫系列爬虫javapython
    目录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 htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。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网页设计 htmlcss旅游
    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-mvcspringmvc
    通过如下配置：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
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts