网页设计标签查询，可借助浏览器开发者工具或相关网站进行。
网页设计标签查询
一、常见 HTML 标签及其功能
| 标签名 | 功能描述 | 示例代码 | 显示效果 |
| 根标签，定义文档的根元素，所有其他 HTML 元素都包含在其中 | | 无特定显示效果，但整个网页基于此构建 |
| 包含文档的元数据，如标题、字符集、样式表和脚本链接等，不直接显示在页面内容中 | | 浏览器标签栏显示“网页标题” |
</code></td><td> 定义文档的标题，显示在浏览器标签栏或窗口标题栏</td><td><code><title>示例页面 | 浏览器标签栏为“示例页面” |
| 包含文档的主体内容，所有可见的页面内容都在这个标签内 | 这是正文内容。 | 页面上显示“这是正文内容。” |
| 标题标签， | | “一级标题”以较大字体显示，默认加粗 |
| 段落标签，用于定义文本段落 | 这是一个段落。 | “这是一个段落。”换行显示，前后有默认间距 |
| 超链接标签，用于创建指向其他文档或页面的链接 | 点击这里 | “点击这里”变为可点击链接，点击后跳转到指定网址 |
![]() | 图像标签，用于在网页中嵌入图像 |  | 显示图片，若图片无法加载则显示“描述文字” |
| 无序列表标签，用于创建无序列表（通常使用圆点或方块作为列表项前缀） | | 生成带有序号（数字）的列表，如“1. 列表项 1”、“2. 列表项 2” |
| 有序列表标签，用于创建有序列表（默认从 1 开始编号） | - 列表项 1
- 列表项 2
| 生成带有序号（数字）的列表，如“1. 列表项 1”、“2. 列表项 2” |
| 列表项标签，用于定义列表中的项目，可放在
| | 分别显示“项目一”、“项目二”作为列表项 |
| 分区标签，用于对页面内容进行逻辑分组和布局控制，可通过 CSS 设置样式 | | 将多个元素组合在一个区域，通过 CSS 可控制该区域的样式，如设置边框、背景色等 |
| 跨度标签，用于对文本进行小范围的样式控制或逻辑分组，本身无换行效果 | 红色文本 | “红色文本”显示为红色，与周围文本在同一行 |
| 表格标签，用于创建表格结构 | | 生成一个带有边框的表格，包含两列单元格 | | 表格行标签，用于定义表格中的一行 | | | 定义表格中的一行，其中包含一个单元格 | | 表格单元格标签，用于定义表格中的一个单元格 | | | 显示表格单元格内容 | | |
二、CSS 常用选择器及用法 | 选择器类型 | 语法格式 | 功能描述 | 示例代码 | 应用效果 | | 元素选择器 | element | 选择指定类型的 HTML 元素并应用样式 | p { color: blue; } | 所有 | | 类选择器 | .classname | 选择具有特定类属性的元素并应用样式 | .highlight { backgroundcolor: yellow; } | 所有类名为“highlight”的元素背景颜色变为黄色 | | ID 选择器 | #idname | 选择具有特定 ID 属性的元素并应用样式（ID 在页面中唯一） | #header { fontsize: 24px; } | ID 为“header”的元素字体大小变为 24px | | 属性选择器 | [attribute] | 选择具有指定属性的元素 | [type="text"] { border: 1px solid red; } | 所有 type 属性值为“text”的输入框边框变为红色 | | 伪类选择器 | :pseudoclass | 根据元素的特定状态选择元素并应用样式（如鼠标悬停、已访问链接等） | a:hover { color: green; } | 当鼠标悬停在链接上时，链接文本颜色变为绿色 | | 后代选择器 | ancestor descendant | 选择作为指定祖先元素后代的元素并应用样式 | div p { margin: 0; } | 所有在 | | 子元素选择器 | parent > child | 选择作为指定父元素直接子元素的元素并应用样式 | ul > li { liststyletype: square; } | | | 相邻兄弟选择器 | element1 + element2 | 选择紧接在指定元素之后的兄弟元素并应用样式 | h1 + p { margintop: 0; } | 紧接在 |
三、JavaScript 常用操作相关标签与属性 | 元素或属性 | 功能描述 | 示例代码 | 效果呈现 | document.getElementById(id) | 根据元素的 ID 获取元素对象，用于后续操作该元素 | var header = document.getElementById("header"); header.style.color = "red"; | ID 为“header”的元素文本颜色变为红色 | document.getElementsByClassName(className) | 根据元素的类名获取元素集合（类似数组），可遍历操作集合中的元素 | var items = document.getElementsByClassName("item"); for (var i = 0; i< items.length; i++) { items[i].style.backgroundColor = "gray"; } | 所有类名为“item”的元素背景颜色变为灰色 | document.querySelector(selector) | 根据 CSS 选择器获取第一个匹配的元素对象 | var firstP = document.querySelector("p"); firstP.innerHTML = "新的段落内容。"; | 页面中第一个 | document.querySelectorAll(selector) | 根据 CSS 选择器获取所有匹配的元素集合（类似数组），可遍历操作集合中的元素 | var links = document.querySelectorAll("a"); links.forEach(function(link) { link.target = "_blank"; }); | 页面中所有链接在新标签页中打开（添加 target="_blank"属性） | onclick 属性 | 用于设置元素在鼠标单击时的触发函数 | | 点击按钮时弹出提示框“按钮被点击” | onmouseover 属性 | 用于设置元素在鼠标悬停时的触发函数 | 悬停我 | 鼠标悬停在 div 上时，其背景颜色变为浅蓝色 | onload 事件（window 对象） | 在整个页面加载完成后触发的事件处理函数，常用于初始化页面操作或检查页面是否完全加载 | window.onload = function() { alert('页面加载完成'); } | 页面加载完成后弹出提示框“页面加载完成” | onunload 事件（window 对象） | 在页面卸载（如关闭标签页或浏览器窗口）时触发的事件处理函数，可用于清理资源或发送数据等操作 | window.onunload = function() { console.log('页面卸载'); } | 页面卸载时在控制台输出“页面卸载” |
四、问题解答 问题：如何在网页中创建一个导航栏，包含多个链接，并设置鼠标悬停时链接变色的效果？ 解答：使用<nav>标签来定义导航栏的结构。
首页
关于我们
产品
服务
联系我们 使用 CSS 来设置导航栏的样式和鼠标悬停变色效果，可以在<head>部分的<style>标签内编写样式代码：
nav a {
textdecoration: none;
color: black;
padding: 10px;
display: inlineblock;
}
nav a:hover {
color: red;
}这样，当鼠标悬停在导航栏的链接上时，链接的颜色就会变为红色。
标签: 网页设计 标签查询 前端技术
|