HTML5—基本标签

最新推荐文章于 2024-05-05 18:17:26 发布

TaoismHuang

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量648

点赞数 1

分类专栏： HTML 文章标签： HTML 前端

本文链接：https://blog.csdn.net/TaoismHuang/article/details/96107547

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1. 标题标签

标题是通过<h1> - <h6> 标签来定义的

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>第一个标题</h1>
		<h2>第二个标题</h2>
		<h3>第三个标题</h3>
		<h4>第四个标题</h4>
		<h5>第五个标题</h5>
		<h6>第六个标题</h6>
	</body>
</html>

效果：
在这里插入图片描述

2. 段落标签

段落是通过标签<p> 来定义的

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>第一段段落</p>
		<p>第二段段落</p>
		<p>第三段段落</p>
	</body>
</html>

效果：
在这里插入图片描述

3. 空格标签

在HTML中，多个空格或者换行会被解析成一个空格，所以我们可以使用 来表示

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		hello&nbsp;&nbsp;&nbsp;&nbsp;word
	</body>
</html>

效果：

hello    word

4. 换行标签

换行是通过标签<br> 来定义的

实例：

<body>
	hello<br><br>word
</body>

效果：

hello

word

5. 分割线标签

分割线是通过标签<hr> 来定义的

实例：

<body>
	hello
	<hr>
	word
</body>

效果：
在这里插入图片描述

6. 加粗标签

加粗可以通过标签<b>或者<strong>来定义的

实例：

<body>
	<b>hello</b>
	<strong>word</strong>
</body>

效果：

hello word

7. 斜体标签

斜体可以通过标签<i>或者<em>来定义的

实例：

<body>
	<i>hello</i>
	<em>word</em>
</body>

效果：

hello word

8. 链接标签

链接可以通过标签<a>来定义的

实例：

<body>
	<a href="#">空链接</a>
	<a href="https://www.baidu.com" target="_blank" style="text-decoration: none;">百度一下</a>
</body>

说明：

target="_blank"：在新窗口打开
text-decoration: none 取出链接下划线

9. 图片标签

可以通过标签<img>来定义

实例：

<body>
	<img src="Tulips.jpg" width="200" height="100" alt="图片出错信息" title="这是一张颜色名称图片">
</body>

效果：
在这里插入图片描述
说明：

图片可以设置宽高
alt：当图片显示出错时，alt的内容就是显示内容
title：当鼠标放在图片上，会显示title内容

10. 文本输入框

实例：

<body>
	<input >
	<input type="text">
</body>

效果：
在这里插入图片描述

11. 按钮

实例：

<body>
	<input type="button" value="按钮1">
	<button>按钮2</button>
</body>

效果：
在这里插入图片描述

12. 列表

列表分为三种：无序列表（ul），有序列表（ol），自定义列表（dl）

12-1. 无序列表

实例：

<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>

效果：
在这里插入图片描述

12-2. 有序列表

实例：

<body>
	<ol type="I" start="5">
		<li>学习</li>
		<li>学习</li>
		<li>写代码</li>
	</ol>
</body>

效果：
在这里插入图片描述
type：规定列表中的列表项目的项目符号的类型

1 数字顺序的有序列表（默认值）（1，2，3，4）
a 字母顺序的有序列表，小写（a，b， c，d）
A 字母顺序的有序列表，大写（A，B，C，D)
i 罗马数字，小写（i，ii，iii，iv）
I 罗马数字，大写（I，II，III，IV）

start 属性规定有序列表的开始点

12-3. 自定义列表

实例：

<body>
	<dl>
		<dt>权利的游戏</dt>
		<dd>第1集</dd>
		<dd>第2集</dd>
		<dd>第3集</dd>

		<dt>葫芦娃救爷爷</dt>
		<dd>第1集</dd>
		<dd>第2集</dd>
		<dd>第3集</dd>
	</dl>
</body>

效果：

权利的游戏
第1集
第2集
第3集
葫芦娃救爷爷
第1集
第2集
第3集

注意：自定义列表，一般需要结合css使用

13. 表格

表格由 <table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。格式如下：

<table>
	<tr>
		<th></th>
		<td></td>
		<td></td>
	</tr>
</table>

注：

th：标题行，加粗，水平垂直居中
一个tr表示一行，一个td表示一列(一个单元格)

常用参数：

参数	含义
width	表格的宽度
height	表格的高度
border	表格边框粗细
bordercolor	表格边框颜色
bgcolor	表格的背景色
cellspacing	单元格与单元格之间的间距
cellpadding	单元格与内容之间的空隙
align	对齐方式（left / right / center）
colspan	合并列
rowspan	合并行

实例：

<table width="400px" height="100px" border="1" bordercolor="red" cellspacing="0" cellpadding="0">
	<tr>
		<th rowspan="2">Header</th>
		<th colspan="2">Header</th>
	</tr>
	<tr height="50px">
		<td width="200px">Data</td>
		<td>Data</td>
	</tr>
	<tr bgcolor="blue">
		<td>Data</td>
		<td align="center">Data</td>
		<td align="right">Data</td>
	</tr>
</table>

效果如下：
在这里插入图片描述
当然还可以如下写：

<body>
	<table border="1" width="300" height="150" cellspacing="0">
		<!-- 表头 -->
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<!-- 表 内容 -->
		<tbody>
			<tr align="center">
				<td><b>慕容雪痕</b></td>
				<td>18</td>
				<td>女</td>
			</tr>
		</tbody>
		<!-- 表尾 -->
		<tfoot>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</tfoot>
	</table>
</body>

效果如下：
在这里插入图片描述

TaoismHuang

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5—基本标签

文章目录标题标签段落标签空格标签换行标签分割线标签加粗标签斜体标签链接标签标题标签标题是通过<h1> - <h6> 标签来定义的实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </h...
复制链接

扫一扫