HTML是指超文本标记语言 (Hyper Text Markup Language),属于一种标记语言 (markup language),是制作网页的基本语言。
一个最简单的HTML网页代码如下:
<html>
<body>
<p>你好!世界</p>
</body>
</html>
上面只是最简单的HTML网页,但是常规的HTML网页一般分为头部和主体两部分,代码如下:
<!doctype html><!--声明是一个HTML文件-->
<html>
<!--头部开始-->
<head>
<meta charset="utf-8"><!--规定HTML文档的字符编码为utf-8-->
<title>网页标题</title>
</head>
<!--头部结束-->
<!--主体开始-->
<body>
<p>你好!世界</p>
</body>
<!--主体结束-->
</html>
从上面不难发现,HTML标签90%都是双标签,如开头是<html>结尾就是</html>,都是成对对的存在,但是也有10%左右是单标签,如换行标签<br>。
下面列举一些HTML常用的标签
1. 段落
# 插入一段文字
<p>具体文字内容</p>
# 插入一段文字并居中显示
<p align="center">具体文字内容</p>
# 插入一段文字并右对齐显示
<p align="right">具体文字内容</p>
# 插入一段文字并左对齐显示,默认值是左对齐,所以段落左对齐可以不加上align="left"
<p align="left">具体文字内容</p>
2. 字体样式
# 字体大小为50px
<span style="font-size:50px;">具体文字内容</span>
# 字体颜色是红色,颜色代码是6位十六进制RGB颜色
<span style="color:#FF0000;">具体文字内容</span>
# 50px大小的红色字体
<span style="font-size:50px;color:#FF0000;">具体文字内容</span>
# 文字居中的50px大小的红色字体
<p style="font-size:50px;color:#FF0000;text-align:center;">具体文字内容</p>
# 字体加粗
<b>具体文字内容</b>
3. 图片
# 插入一张图片
<img src="图片地址">
# 插入一张图片并居中显示
<p align="center"><img src="图片地址"></p>
4. 超链接
# 默认窗口打开超链接
<a href="超链接地址">锚文本</a>
# 新建窗口打开超链接
<a href="超链接地址" target="_blank">锚文本</a>
# 手机点击直接拨打代码上的电话号码
<a href="tel:电话号码">电话号码</a>
# 点击启动邮件客户端发送邮件给代码上的邮箱地址
<a href="mailto:邮箱地址">邮箱地址</a>
5. 表格 (点击进入表格快速学习器)
| 表头 |
表头 |
表头 |
| 1 |
2 |
3 |
| 4 |
5 |
6 |
| 7 |
8 |
9 |
# 普通表格
<table>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</th>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
# 横向合并单元格表格
<table>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td colspan="2">1</td>
<td>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
# 纵向合并单元格表格
<table>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</th>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>