HTML基础

2018年03月18日

导读

HTML是指超文本标记语言 (Hyper Text Markup Language),属于一种标记语言,是制作网页的基本语言。

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>

插入一段文字并左对齐显示

<p align="left">具体文字内容</p>

默认值是左对齐,所以段落左对齐可以不加上align="left"

2. 字体样式

字体大小为50px

<span style="font-size:50px;">具体文字内容</span>

字体颜色是红色

<span style="color:#FF0000;">具体文字内容</span>

颜色代码是6位十六进制RGB颜色

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. 表格 (点击进入表格快速学习器)

普通表格

<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>

表头 表头 表头
1 2 3
4 5 6
7 8 9

横向合并单元格表格

<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>

表头 表头 表头
1 3
4 5 6
7 8 9

纵向合并单元格表格

<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>

表头 表头 表头
1 2 3
5 6
7 8 9

关键词:HTML语言

作者:Zack Wong

HTML基础

HTML基础

2018年03月18日

HTML是指超文本标记语言 (Hyper Text Markup Language),属于一种标记语言,是制作网页的基本语言。

当前内容

网页发展的历史

2012年12月31日

回顾了网页发展的历史,从1990年出现标记性语言html到现在的html5提供更丰富的嵌入式媒体体验,都印记着我们人类辛劳和智慧的结晶。

阅读全文

绝对路径与相对路径的理解

2011年12月09日

本文用图文并茂的方法介绍HTML中的相对路径和绝对路径,让用户更容易理解和掌握绝对路径和相对路径的写法。

阅读全文