【学术投稿-第五届消费电子与计算机工程国际学术会议】HTML核心元素详解：超链接、列表、表格与实用技巧

ops/2025/2/9 5:58:39/
htmledit_views">

基本信息

大会官网：www.iccece.org

线下召开时间：2025年2月28-3月2日

目录

 

前言

一、超链接：连接万物的桥梁

1. 基础语法

2. 高级应用

 3.代码案例​编辑

4. 注意事项

二、列表：结构化内容的利器

1. 有序列表（Ordered List）

2. 无序列表（Unordered List）

3. 自定义列表（Definition List）

4. 注意事项

5.代码案例 

三、表格：数据展示的骨架

1. 基础结构

2. 关键属性

3. 注意事项

4.代码案例

四、综合案例：导航菜单与数据表

总结

前言

HTML作为网页开发的基石，其核心元素直接影响着网页的结构与交互体验。本文将从超链接、列表和表格三部分展开讲解，结合实际案例与注意事项，助你轻松掌握这些基础但关键的技术点。

一、超链接：连接万物的桥梁

超链接（<a>标签）是网页导航的核心，通过它可实现页面跳转、锚点定位甚至触发邮件发送等功能。

1. 基础语法
html"><a href="目标地址" target="打开方式" title="提示文字">链接文字或图片</a>
  • href：指定链接目标，可以是URL、文件路径或锚点（如#section1）。
  • target：控制打开方式，常用值包括：
    • _self（默认，当前窗口打开）
    • _blank（新窗口打开）。
  • title：鼠标悬停时显示提示文字，增强可访问性。
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接</title>
</head>
<body><a href="https://www.baidu.com">百度</a><!--默认本页打开--><a href="https://www.baidu.com" target="_blank" title="baidu ">百度</a> <!-- 新标签页打开--><a href="https://www.baidu.com" target="_self">百度</a> <!--本页打开-->
</body>
</html>

 

2. 高级应用
  • 锚点跳转：通过name或id属性定义锚点，实现页面内定位。
html">  <a name="chapter1"></a> <!-- 定义锚点 -->  <a href="#chapter1">跳转到第一章</a>
  • 特殊协议链接：
    • 邮件链接：<a href="mailto:contact@example.com ">发邮件</a>
    • 电话链接：<a href="tel:+123456789">拨打电话</a>。

协议连接唤起应用不做代码展示。

 3.代码案例
4. 注意事项
  • 避免滥用target="_blank"，可能影响用户体验与SEO。
  • 链接文本需有意义，如避免“点击这里”等模糊描述。
  • 确保路径正确，区分绝对路径（/images/logo.png）与相对路径（../docs/file.pdf）。

二、列表：结构化内容的利器

列表用于展示并列或层级关系的内容，分为有序列表、无序列表和自定义列表。

1. 有序列表（Ordered List）
html"><ol type="1" start="5">  <li>第一步</li>  <li>第二步</li>  
</ol>
  • type：编号类型，可选1（数字）、A（大写字母）、i（小写罗马数字）等。
  • start：起始编号，如从5开始计数。
2. 无序列表（Unordered List）
html"><ul type="circle">  <li>苹果</li>  <li>香蕉</li>  
</ul>
  • type：项目符号样式，如disc（实心圆）、circle（空心圆）、square（方块）。
3. 自定义列表（Definition List）

适用于术语解释：

html"><dl>  <dt>HTML</dt>  <dd>超文本标记语言</dd>  <dt>CSS</dt>  <dd>层叠样式表</dd>  
</dl>
  • <dt>定义术语，<dd>为描述。
4. 注意事项
  • 避免混合使用列表类型，保持样式统一。
  • 嵌套列表时注意缩进，提升代码可读性。
5.代码案例 
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body><!-- 无序列表 --><ul><h2>我想旅游的城市</h2><li>北京</li><li>上海</li><li>广州</li><li>深圳</li><li>西安</li></ul><!-- 有序列表 --><ol><h2>把大象关进冰箱要几步？</h2><li>打开冰箱</li><li>把大象放进冰箱</li><li>关闭冰箱</li></li></ol><!-- 定义列表 --> <h2>编程语言介绍</h2><dl><dt>python</dt><dd>python是一个解释型语言</dd><dt>java</dt><dd>java是一个编译型语言</dd><dt>c++</dt><dd>c++是一个编译型语言</dd></dl></body>
</html>

 

 

三、表格：数据展示的骨架

表格（<table>）用于结构化展示数据，支持合并单元格、添加标题等复杂操作。

1. 基础结构
html"><table border="1" cellpadding="5" cellspacing="0">  <caption>学生信息表</caption>  <tr>  <th>姓名</th>  <th colspan="2">联系方式</th>  </tr>  <tr>  <td>张三</td>  <td>电话：123456</td>  <td>邮箱：zhang@example.com</td>  </tr>  
</table>
  • 合并单元格：
    • colspan：横向合并列。
    • rowspan：纵向合并行。
  • 语义化标签：
    • <thead>、<tbody>、<tfoot>划分表格区域。
    • <th>表示表头，默认加粗居中。
2. 关键属性
  • border：边框宽度（默认0，需显式设置）。
  • cellpadding：单元格内容与边框间距。
  • cellspacing：单元格间距离。
3. 注意事项
  • 避免过度嵌套表格，影响页面加载速度。
  • 优先使用CSS控制样式（如背景色、对齐方式），而非bgcolor等过时属性。
  • 为复杂表格添加<caption>或aria-label，提升可访问性。
4.代码案例
html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body><!--table的height是整个表格的大小高度，cellspacing是相邻单元格之间的间距，cellpadding是单元格与边框之间的间距，border是边框的宽度，width是表格的宽度，height是表格的高度，align是表格内容的对齐方式，vlign是表格内容的垂直对齐方式，caption是表格标题，thead是表格头，tbody是表格体，tfoot是表格脚注，tr是行，th是表头单元格--><table border="1" width="500" height="300" cellspacing="0" cellpadding="0"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头 --><thead><tr align="center" vlign="bottom"><!--行--><th>姓名</th><th>性别</th><th>年龄</th><th>班级</th></tr></thead><!-- 表格体 --><tbody height="100" width="100" align="center"><tr><td>张三</td><td>男</td><td>18</td><td>1班</td></tr><tr><td>李四</td><td>女</td><td>19</td><td>2班</td></tr><tr><td>王五</td><td>男</td><td>20</td><td>3班</td></tr></tbody><!-- tbody标签是表体标签，用于定义表格的主体，用于放置表格中的数据 --><!--表格脚注--><tfoot><tr><td></td><td></td><td></td><td>总计:3人</td></tr></tfoot></table>
</body>
</html>

 

简易课程表制作 

html">
</html><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课程表</title>
</head>
<body><table border="1" width="500" height="300" cellspacing="0" cellpadding="0"><caption>课程表</caption><thead><tr><th rowspan="2">项目</th><th colspan="3">星期一</th><th colspan="3">星期二</th></tr><tr><th>上午</th><th>下午</th><th>晚上</th><th>上午</th><th>下午</th><th>晚上</th></tr></thead><tbody align="center"><tr><td>课程</td><td>语文</td><td>英语</td><td rowspan="2">自习</td><td>化学</td><td>生物</td><td rowspan="2" >自习</td></tr><tr><td>课程</td><td>地理</td><td>政治</td><td>体育</td><td>音乐</td></tr></tbody></table>
</body>
</html>

 

四、综合案例：导航菜单与数据表

导航菜单（结合列表与超链接）：

html"><ul>  <li><a href="#home" target="_self">首页</a></li>  <li><a href="#news" target="_blank">新闻</a></li>  
</ul>

响应式表格：

html"><table>  <thead>  <tr><th>产品</th><th>价格</th></tr>  </thead>  <tbody>  <tr><td>手机</td><td>¥1999</td></tr>  </tbody>  
</table>

总结

掌握HTML超链接、列表和表格的核心用法，是构建高效、可维护网页的基础。牢记以下原则：

  1. 语义化：用合适的标签表达内容含义。
  2. 可访问性：为链接添加title、为表格添加标题。
  3. 代码简洁：避免冗余属性，优先使用CSS控制样式。

http://www.ppmy.cn/ops/156903.html

相关文章

边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营

边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营

迈向智能化煤矿管理新时代 工业物联网和边缘计算技术的迅猛发展&#xff0c;煤矿安全生产与高效运营正迎来全新变革。传统煤矿监控模式由于现场环境复杂、数据采集和传输延时较高&#xff0c;已难以满足当下高标准的安全管理要求。为此&#xff0c;借助边缘计算网关的实时数据…
阅读更多...
ubuntu中 使用C++ FFmpeg拉取RTSP视频流

ubuntu中 使用C++ FFmpeg拉取RTSP视频流

在C中使用FFmpeg拉取RTSP视频流涉及多个步骤&#xff0c;包括初始化FFmpeg库、打开RTSP流、读取帧数据等。以下是一个简单的示例代码&#xff0c;展示如何使用FFmpeg库拉取RTSP视频流并解码视频帧。 1. 安装FFmpeg库 首先&#xff0c;确保你已经安装了FFmpeg库。你可以通过以…
阅读更多...
全面的生成式语言模型学习路线

全面的生成式语言模型学习路线

设计了一套全面的生成式语言模型学习路线&#xff0c;包含基础储备、核心知识学习、实践应用和进阶提升四个阶段&#xff0c;你可以根据自身情况进行调整。 第一阶段&#xff1a;基础储备&#xff08;1 - 2个月&#xff09; 数学基础 线性代数 学习向量、矩阵的基本运算&…
阅读更多...
腾讯社招流程记录

腾讯社招流程记录

bg&#xff1a;24届985硕士&#xff0c;四个多月被裁&#xff0c;后端开发 12.20上午投递&#xff0c;腾讯csig云计算后台 12.20下午约面 12.24晚上一面 1h45min 12.26中午约二面 12.26晚上二面 1h10min 目前状态还在面试流程中 ---------------------- 三面还没约&#xff0…
阅读更多...
缓存的今生今世

缓存的今生今世

缓存是什么 了解缓存&#xff0c;首先要了解内存概念&#xff0c;毕竟缓存离不开内存。 内存又称内部存储器和主存储器(RAM)&#xff0c;内存条由内存芯片、电路板、金手指等部分组成。它与CPU之间的连通是通过总线完成&#xff0c;是CPU与外存的连通桥梁。计算机里所有的运算…
阅读更多...
Qt之设置QToolBar上的按钮样式

Qt之设置QToolBar上的按钮样式

通常给QAction设置icon后，菜单栏的菜单项和工具栏（QToolBar）上对应的按钮会同时显示该icon。工具栏还可以使用setToolButtonStyle函数设置按钮样式，其参数为枚举值： enum ToolButtonStyle {ToolButtonIconOnly,ToolButtonTextOnly,ToolButtonTextBesideIcon,ToolButtonTe…
阅读更多...
【C语言】指针详细解读3

【C语言】指针详细解读3

1. 数组名的理解 我们使用指针一般访问数组内容时&#xff0c;我们可能会这样写&#xff1a; int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 这⾥我们使⽤ &arr[0] 的⽅式拿到了数组第⼀个元素的地址&#xff0c;但是其实数组名本来就是地址&#xff0c;⽽…
阅读更多...
Java JDK17 API 离线文档下载

Java JDK17 API 离线文档下载

Java JDK17 API 离线文档下载 JavaJDK17API离线文档下载 本仓库提供了一个方便的资源文件下载&#xff0c;即 **Java JDK17 API 离线文档**。该文档是Java开发者在离线环境下查阅JDK17 API的必备工具。无论你是Java初学者还是经验丰富的开发者&#xff0c;这份离线文档都能帮助…
阅读更多...
最新文章

Copyright @ 2022~2023