基本信息
大会官网：www.iccece.org
线下召开时间：2025年2月28-3月2日
目录
[1. 基础语法](#1. 基础语法)
[2. 高级应用](#2. 高级应用)
[4. 注意事项](#4. 注意事项)
[1. 有序列表（Ordered List）](#1. 有序列表（Ordered List）)
[2. 无序列表（Unordered List）](#2. 无序列表（Unordered List）)
[3. 自定义列表（Definition List）](#3. 自定义列表（Definition List）)
[4. 注意事项](#4. 注意事项)
[1. 基础结构](#1. 基础结构)
[2. 关键属性](#2. 关键属性)
[3. 注意事项](#3. 注意事项)
前言
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超链接、列表和表格的核心用法，是构建高效、可维护网页的基础。牢记以下原则：
- 语义化：用合适的标签表达内容含义。
- 可访问性 ：为链接添加
title、为表格添加标题。 - 代码简洁：避免冗余属性，优先使用CSS控制样式。