HTML5—基本标签

文章目录

          • 1. 标题标签
          • 2. 段落标签
          • 3. 空格标签
          • 4. 换行标签
          • 5. 分割线标签
          • 6. 加粗标签
          • 7. 斜体标签
          • 8. 链接标签
          • 9. 图片标签
          • 10. 文本输入框
          • 11. 按钮
          • 12. 列表
            • 12-1. 无序列表
            • 12-2. 有序列表
            • 12-3. 自定义列表
          • 13. 表格

1. 标题标签

标题是通过

-

标签来定义的

实例:


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

效果:
HTML5—基本标签_第1张图片

2. 段落标签

段落是通过标签

来定义的

实例:


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

效果:
HTML5—基本标签_第2张图片

3. 空格标签

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

实例:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		hello    word
	body>
html>

效果:

hello    word
4. 换行标签

换行是通过标签
来定义的

实例:

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

效果:

hello

word
5. 分割线标签

分割线是通过标签


来定义的

实例:

<body>
	hello
	<hr>
	word
body>

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

6. 加粗标签

加粗可以通过标签或者来定义的

实例:

<body>
	<b>hellob>
	<strong>wordstrong>
body>

效果:

hello word

7. 斜体标签

斜体可以通过标签或者来定义的

实例:

<body>
	<i>helloi>
	<em>wordem>
body>

效果:

hello word

8. 链接标签

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

实例:

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

说明:

  1. target="_blank":在新窗口打开
  2. text-decoration: none 取出链接下划线
9. 图片标签

可以通过标签来定义

实例:

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

效果:
HTML5—基本标签_第3张图片
说明:

  1. 图片可以设置宽高
  2. alt:当图片显示出错时,alt的内容就是显示内容
  3. title:当鼠标放在图片上,会显示title内容
10. 文本输入框

实例:

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

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

11. 按钮

实例:

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

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

12. 列表

列表分为三种:无序列表(ul),有序列表(ol),自定义列表(dl)

12-1. 无序列表

实例:

<body>
	<ul>
		<li>111li>
		<li>222li>
		<li>333li>
	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. 表格

表格由

标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。格式如下:

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

注:

  1. th:标题行,加粗,水平垂直居中
  2. 一个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">Headerth>
		<th colspan="2">Headerth>
	tr>
	<tr height="50px">
		<td width="200px">Datatd>
		<td>Datatd>
	tr>
	<tr bgcolor="blue">
		<td>Datatd>
		<td align="center">Datatd>
		<td align="right">Datatd>
	tr>
table>

效果如下:
HTML5—基本标签_第4张图片
当然还可以如下写:

<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>18td>
				<td>td>
			tr>
		tbody>
		
		<tfoot>
			<tr>
				<th>姓名th>
				<th>年龄th>
				<th>性别th>
			tr>
		tfoot>
	table>
body>

效果如下:
HTML5—基本标签_第5张图片

你可能感兴趣的:(HTML,HTML,前端)