HTML基础

标题标签

1
2
3
4
5
6
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

段落标签

1
<p>我是一段文字</p>

换行标签

1
<br>

水平线标签

1
<hr>

超链接标签

1
<a href="https://blog.fmboy.com" target="_blank">超链接</a>

target属性 目标网站的打开方式

值 功能
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留）

图片标签

1
2
3
4
5
<!-- 基本语法 -->
<img src="图片路径" alt="图片描述">

<!-- 例如 -->
<img src="cat.jpg" alt="一只猫">
属性 作用 示例
src 指定图片路径 src="cat.jpg"
alt 图片无法显示时的替代文字 alt="猫的图片"
width 设置图片宽度 width="300"
height 设置图片高度 height="200"
title 鼠标悬停时显示提示文字 title="这是一只猫"

HTML表格单元格

一、表格的基本结构

HTML表格主要由以下标签组成

标签 名称 作用
<table> 表格 创建一个表格
<tr> 表格行 创建一行
<th> 表头单元格 创建表头
<td> 数据单元格 创建普通数据
<caption> 表格标题 设置表格标题

基础结构

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
</table>

二、<td>数据单元格

<td>是 Table Data 的缩写，表示表格数据单元格

1
2
3
4
5
<tr>
  <td>张三</td>
  <td>20</td>
  <td>男</td>
</tr>

三、<th>表头单元格

th是 Table Header 的缩写，表示表头单元格

1
2
3
4
5
<tr>
  <th>姓名</th>
  <th>年龄</th>
  <th>性别</th>
</tr>

四、<td>和<th>的区别

标签 含义 默认效果 使用场景
<td> 数据单元格 普通文字 表格中的数据
<th> 表头单元格 加粗、居中 表格标题/表头 
1
2
3
4
5
6
7
8
9
10
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
</table>

五、<colspan>横向合并 | <rowspan>纵向合并

属性 方向
colspan 横向合并 →
rowspan 纵向合并 ↓ 
1
2
3
4
5
<!-- 横向合并 -->
<td colspan="2">学生信息</td>

<!-- 纵向合并 -->
<td rowspan="2">张三</td>

六、单元格常用属性总结

属性 作用
colspan 横向合并单元格
rowspan 纵向合并单元格
width 设置单元格宽度
height 设置单元格高度
align 设置水平对齐方式
valign 设置垂直对齐方式