当前位置： 首页 > article >正文

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

article 2025/2/9 8:02:13

基本信息

大会官网：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. 基础语法
<a href="目标地址" target="打开方式" title="提示文字">链接文字或图片</a>
  • href：指定链接目标，可以是URL、文件路径或锚点（如#section1）。
  • target：控制打开方式，常用值包括：
    • _self（默认，当前窗口打开）
    • _blank（新窗口打开）。
  • title：鼠标悬停时显示提示文字，增强可访问性。
<!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属性定义锚点，实现页面内定位。
  <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）
<ol type="1" start="5">  
  <li>第一步</li>  
  <li>第二步</li>  
</ol>
  • type：编号类型，可选1（数字）、A（大写字母）、i（小写罗马数字）等。
  • start：起始编号，如从5开始计数。
2. 无序列表（Unordered List）
<ul type="circle">  
  <li>苹果</li>  
  <li>香蕉</li>  
</ul>
  • type：项目符号样式，如disc（实心圆）、circle（空心圆）、square（方块）。
3. 自定义列表（Definition List）

适用于术语解释：

<dl>  
  <dt>HTML</dt>  
  <dd>超文本标记语言</dd>  
  <dt>CSS</dt>  
  <dd>层叠样式表</dd>  
</dl>
  • <dt>定义术语，<dd>为描述。
4. 注意事项
  • 避免混合使用列表类型，保持样式统一。
  • 嵌套列表时注意缩进，提升代码可读性。
5.代码案例 
<!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. 基础结构
<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.代码案例
<!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><!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>

 

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

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

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

响应式表格：

<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.kler.cn/a/537574.html

相关文章：

  • 如何删除本地大模型
  • 数据库系统架构与DBMS功能探微：现代信息时代数据管理的关键
  • 【Apache Paimon】-- 15 -- 利用 paimon-flink-action 同步 postgresql 表数据
  • kakailio官网推荐的安装流程ubuntu 22.04
  • 探索从传统检索增强生成（RAG）到缓存增强生成（CAG）的转变
  • 20240206 adb 连不上手机解决办法
  • 【10.7】队列-解预算内的最多机器人数目
  • 一键操作，完美解决办公问题！
  • layui组件库的年份选择器怎么设置区间超过区间不可点击
  • 基于Docker搭建ES集群,并设置冷热数据节点
  • 【Flink实战】Flink -C实现类路径配置与实现UDF Jar
  • linux上scp能不能取代rsync
  • 学习笔记十九：K8S生成pod过程
  • 国自然面上项目｜多模态MRI影像组学模型对乳腺癌新辅助治疗疗效的早期预判研究｜基金申请·25-02-08
  • Windows逆向工程入门之汇编开发框架解析
  • Axios 拦截器实现的原理
  • C++ 23 的栈踪迹库（stacktrace）
  • 深度洞察与精确匹配：基于HAI部署DeepSeekR1的公考岗位推荐与智能分析
  • XY2-100的Verilog实现
  • 阿里云宝塔在线安装步骤
  • DeepSeek底层揭秘——记忆网络与持续学习机制
  • 用户位置与IP属地：二者之间的关联与差异
  • 日志2025.2.8
  • 深度剖析 Redisson 分布式锁：原理、实现与应用实践
  • k8s部署go-fastdfs
  • OSPF基础（3）：区域划分