博客围绕HTML最基础的标签展开，介绍了标签及注释，进行了标签案例演示，包括标题、水平线、字体等多种标签的效果图与代码，还提到了实体字符，指出在HTML中很多字符无法直接写入，如换行和空格会被转换。
HTML最基础的标签
一、标签及注释
| 标签 | 注释 | 常用属性 |
|---|---|---|
| h1~h6 | 标题标签 | align：标题对齐的方式 取值：center居中、right 右对齐、left 左对齐 |
| hr | 水平线 | width: 宽度、size: 粗细、 color: 颜色 |
| font | 字体 | color：颜色 、size：大小(1-6) 、face：字体 |
| p | 自然段 | title：如果鼠标移动到段落上，会出现提示文字 |
| b | 字体加粗 | |
| i | 字体倾斜 | |
| br | 换行标签 | |
| a | 超链接标签 | title：如果鼠标移动上面提示信息、target：跳转链接方式、href：要跳转的URL |
| ol-li | 有序列表 | type：1 默认使用数字序列 、a,A 使用字母序列、i,I 罗马数字 |
| ul-li | 无序列表 | type： disc(默认) ● 、circle ○ 、square ■ |
| img | 图片标签 | src：图片的URL、width：设置图片的宽度、height：设置图片的高度、alt：图片加载失败显示的文字、title：鼠标移上去的提示信息 |
| div | 块标签 | |
| span | 行内标签 | |
| table | 表格容器 | width：表格宽度、border：表格外边框粗细、align：对齐方式、cellspacing：设置单元格之间的间隔、cellpadding：设置单元格边框与文字之间距离 |
| th | 表格首行 | |
| tr | 表格行 | align：对齐方式 |
| td | 表格列 | align：对齐方式、rowspan：跨几行、colspan：跨几列 |
| caption | 表格标题 |
二、标签案例演示
1.标题标签效果图
标题标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--h1标签-->
<h1>我是h1标签</h1>
<!--h2标签-->
<h2>我是h2标签</h2>
<!--h3标签-->
<h3>我是h3标签</h3>
<!--h4标签-->
<h4>我是h4标签</h4>
<!--h5标签-->
<h5>我是h5标签</h5>
<!--h6标签-->
<h6>我是h6标签</h6>
</body>
</html>
2.水平线效果图
水平线代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hr水平线</title>
</head>
<body>
<!-- hr水平线 -->
<hr width="500" size="5px" color="red">
</body>
</html>
3.字体标签效果图
字体标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体标签</title>
</head>
<body>
<!-- 字体标签 -->
<font size="1" color="blue" face="楷体">我是字符串</font><br/>
<font size="2" color="blue" face="楷体">我是字符串</font><br/>
<font size="3" color="blue" face="楷体">我是字符串</font><br/>
<font size="4" color="blue" face="楷体">我是字符串</font><br/>
<font size="5" color="blue" face="楷体">我是字符串</font><br/>
<font size="6" color="blue" face="楷体">我是字符串</font><br/>
<font size="7" color="blue" face="楷体">我是字符串</font><br/>
</body>
</html>
4.段落标签效果图
段落标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<!-- 段落标签 -->
<p>超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>
<p>超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>
<p>超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>
</body>
</html>
5.字体加粗标签效果图
字体加粗标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体加粗</title>
</head>
<body>
<font>普通字体</font>
<b>加粗的字体</b>
</body>
</html>
6.字体倾斜标签效果图
字体倾斜标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体倾斜</title>
</head>
<body>
<font>普通字体</font>
<i>加粗的字体</i>
</body>
</html>
7.换行标签效果图
换行标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换行标签</title>
</head>
<body>
<font>普通字体</font><br/>
<font>普通字体</font><br/>
<font>普通字体</font><br/>
<font>普通字体</font><br/>
</body>
</html>
8.链接标签效果图
链接标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="www.baidu.com" target="_blank" title="百度">点击跳转至百度</a>
</body>
</html>
9.有序列表效果图
有序列表代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol type="1">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ol>
<br/>
<ol type="a">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ol>
<br/>
<ol type="A">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ol>
<br/>
<ol type="i">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ol>
<br/>
<ol type="I">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ol>
</body>
</html>
10.无序列表效果图
无序列表代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul type="disc">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
<br/>
<ul type="circle">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
<br/>
<ul type="square">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
</body>
</html>
11.图片标签效果图
图片标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标标签</title>
</head>
<body>
<img src="./img/jiangxuan_2.jpg" alt="此图片加载失败" title="image" width="150px">
</body>
</html>
12.div块标签效果图和span行内标签效果图
div块标签效果图和span行内标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div&span</title>
</head>
<style>
div,span{
background-color: orange;
}
</style>
<body>
<div>我是div标签</div>
<br/>
<span>我是span标签</span>
</body>
</html>
13.表格标签效果图
表格标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table width="300px" border="1px" align="center" cellspacing="0px" cellpadding="0px">
<caption>HTML学院</caption>
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>班级</th>
</tr>
<tr>
<td>1</td>
<td>吴彦祖</td>
<td>二班</td>
</tr>
<tr>
<td>2</td>
<td>彭于晏</td>
<td>一班</td>
</tr>
<tr>
<td colspan="3" align="center">我跨了三列</td>
</tr>
</table>
</html>
三、实体字符
在html中有很多字符是无法直接写入的。比如换行以及空格，无论多少个都会被转换成一个空格占位。
扫一扫
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
