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> # 插入一段文字并左对齐显示,默认值是左对齐,所以段落左对齐可以不加上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>
表头 表头 表头
1 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 2 3
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>

HTML基础 - 当前页面

2018年03月18日

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