<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度热搜</title> </head> <style> .hot-search li:hover { cursor: pointer; } .hot-search li { margin-bottom: 10px; } </style> <body> <div> <h1>百度热搜</h1> <ul class="hot-search"> <li>欧洲仍是新冠大流行中心</li> <li>北京提倡餐饮酒吧业施行预约制度</li> <li>兰州大风浮尘遮天蔽日</li> <li>山东杰瑞集团高管被立案调查</li> <li>中兴通讯回应硫明</li> <li>破坏文物者终身不得登长城</li> </ul> </div> <script type="text/javascript"> (function () { var lis = document.querySelectorAll('.hot-search li'); for (var i = 0; i < lis.length; i++) { (function (index) { lis[index].addEventListener('click', function () { for (var j = 0; j < lis.length; j++) { lis[j].classList.remove('active'); } this.classList.add('active'); alert(index); }); })(i); } })(); </script> </body> </html>弄个黑框框着百度热搜这个整体。

时间: 2024-02-16 15:27:54 浏览: 57

HTML中的<meta>标签的使用详解

5星 · 资源好评率100%

HTML中的`<meta>`标签是网页元数据的重要组成部分，它提供了关于HTML文档的额外信息，这些信息不直接显示在页面上，但对浏览器、搜索引擎和其他Web服务至关重要。本文将深入探讨`<meta>`标签的使用及其重要性。 `<meta>`标签通常位于`<head>`部分，它的作用是提供页面的元信息，如字符编码、作者信息、页面描述、关键词等。下面是一段`<meta>`标签的示例： ```html <head> <title>mate</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="author" content="Erwin Aligam - styleshout.com" /> <meta name="description" content="Site Description Here" /> <meta name="keywords" content="keywords, here" /> <meta name="robots" content="index, follow, noarchive" /> <meta name="googlebot" content="noarchive" /> </head> ``` 1. **属性的使用** - `http-equiv` 属性类似于HTTP头部，用于向浏览器发送信息，如设置页面的字符集或触发页面刷新。常见的`http-equiv`值包括： - `content-type`：定义文档类型和字符集，如`application/xhtml+xml; charset=UTF-8`。 - `expires`：设置页面过期时间，促使浏览器缓存页面。 - `refresh`：指定页面在多少秒后自动重定向到另一个URL。 - `name` 属性用于描述页面的元信息，比如： - `author`：指定页面的作者。 - `description`：提供页面的简短描述，用于搜索引擎摘要。 - `keywords`：包含与页面内容相关的关键词，用于搜索引擎优化（SEO）。 - `generator`：声明生成页面的软件或工具。 2. **name属性的应用** - `keywords` 和 `description` 是对搜索引擎特别重要的属性。关键词`keywords`的内容应限制在36个字符内，包括逗号分隔的关键字。描述`description`的内容则限制在76个字符内，这是为了确保在搜索结果中显示完整。合理地使用这两个属性可以帮助提高页面在搜索引擎结果中的排名。 - 使用`robots`和`googlebot`属性可以控制搜索引擎如何处理页面。例如，`robots`内容为`index, follow, noarchive`表示允许搜索引擎索引页面、跟踪链接，但不缓存页面。而`googlebot`属性专门针对Google爬虫，同样可以指示是否缓存页面。总结来说，`<meta>`标签在HTML中扮演着不可或缺的角色，它提供了一种有效的方式来传达页面的元信息，不仅有助于提高用户体验，还对搜索引擎优化起着关键作用。正确使用`<meta>`标签是创建高质量、可访问的网页的重要步骤。在实际应用中，开发者应根据具体需求选择合适的`http-equiv`和`name`属性，以及相应的`content`值，确保网页信息的准确性和有效性。同时，定期检查并更新`<meta>`标签，以适应不断变化的SEO策略和浏览器标准，也是保持网站竞争力的关键。

您可以在 `<style>` 标签中添加以下 CSS 代码来实现这个效果： ```css body { margin: 0; padding: 0; } .hot-search { border: 1px solid #000; padding: 10px; list-style: none; } ``` 然后将 `<ul>` 标签的 `class` 属性改为 `hot-search`，即可完成整体黑框框效果。

阅读全文

相关推荐

-doctype-html-html-lang-en-dir-ltr-head-meta-name:

html5使用canvas实现跟随光标跳动的火焰效果

-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat:GitHub隐私声明-GitHub Docs <title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> <link rel =“ alternate icon” type =“ imagepng” href =“ a

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

空链接 href=＂#＂与href=＂javascript-void(0)＂的区别.docx

freemarker入门实例(解决乱码eclipse/java/编码方式UTF-8)

html-meta-tags

HTML5 UTF-8 中文乱码的解决方法

html-title图标(代码)

vue中v-text / v-html使用实例代码详解

Laravel开发-meta-tags

Laravel开发-pagetitle

HEAD-master_html5_Go_metafile_

pagina-html

latihan-html

first-html

Potrero-Digital --- Curso-Frontend --- Ejercicios-HTML：HTML格式的Ejercicios realizadas

html-test-web

html-me-something

最新推荐

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？

掌握JavaScript加密技术：客户端加密核心要点

关系数据表示学习

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器原创