本文主要介绍了HTML标签的基础知识，包括标签的定义、分类、属性和文本内容。详细讲解了标题标签<h>、段落标签<p>等常见类型，并提供了格式化标签、字符实体、超链接、多媒体、列表和表格标签的查询资源。
一、标签介绍
-
标签——Tag
- 标签（标记）是HTML语言的基本部分
- 根标签是 HTML，包含两个子标签 head 和 body
- 标签一般分为 单标签 和 双标签
- 标签是分层次的；多数标签是成对出现的，包括开始标签和结束标签
- 标签不区分大小写
-
属性和属性值——Attribute
- 属性是写在开始标签中的，附属于标签，对标签的特征进行设置
- 属性的值可以用双引号也可以用单引号，不区分
- 属性和属性值不区分大小写，属性之间也无先后次序
——例<hr/ width="50%" align="right" size="5" color="red">
-
文本——Text
- 标签的内容可以是子标签或者普通文本
- 标签内的内容都可以统称为文本（包括空格和换行）
-
元素——Element
- 元素结构：<开始标签> 中间内容 </结束标签>
<p align="center"> HTML 文档包括头部和主体部分组成 </p> - 一个完整的标签我们可以称之为网页上的一个元素
- 元素结构：<开始标签> 中间内容 </结束标签>
二、标签分类
——⭐标题标签< h >
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- <h1~6>——1到6级标签 -->
<h1>耳东Dr沙雕一世</h1>
<h2>耳东Dr沙雕一世</h2>
<h3>耳东Dr沙雕一世</h3>
<h4>耳东Dr沙雕一世</h4>
<h5>耳东Dr沙雕一世</h5>
<h6>耳东Dr沙雕一世</h6>
</body>
</html>
——⭐段落标签< p >
<html>
<head>
<meta charset="utf-8">
<title>段落标签</title>
</head>
<body>
<!--
<p> 段落标签：被段落标签包裹的文字就是独立的一个段落，段落与段落之间是自动换行的
<br/> 换行标签：放在哪里就在哪里换行
-->
<p><h3>段落标签</h3>被段落标签包裹的文字就是独立的一个段落<br>
段落与段落之间是自动换行的</p>
<p><h3>换行标签</h3>放在哪里<br>就在哪里<br>换行</p>
</body>
</html>
——⭐格式化标签
<html>
<head>
<meta charset="utf-8">
<title>格式化标签</title>
</head>
<body>
<p>我们不一样，我是本尊</p>
<p>我们<b>不一样</b>，我是加粗</p>
<p>我们<strong>不一样</strong>，我是加粗</p>
<p>我们<big>不一样</big>，我是变大</p>
<p>我们<small>不一样</small>，我是变小</p>
<p>我们<i>不一样</i>，我是变斜</p>
<p>我们<em>不一样</em>，我是变斜</p>
<p>我们<sub>不一样</sub>，我是下标</p>
<p>我们<sup>不一样</sup>，我是上标</p>
<p>我们<del>不一样</del>，我是删除线</p>
<!-- 格式化标签可以嵌套使用，使用多种格式化效果 -->
</body>
</html>
——⭐字符实体标签
——⭐超链接标签< a >
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!--
<a> 超链接标签 ：可以给文字、图片、音乐、其他标签添加超链接功能
href 属性：设置链接的地址，可以是网络或者本地路径
target 属性：设置链接打开的方式
_blank:新建页面打开
_self:当前页面打开
-->
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="02段落标签.html" target="_blank">我的网页</a>
<hr/ color="chartreuse">
<!-- 使用超链接完成锚点设置 -->
<!-- href中的 # 定义当前网页锚点 -->
<!-- 生成多个<br>快捷键: br*个数>>>按tab键 -->
<a name="top" href="#middle">顶部</a>
br*100
<a name="middle" href="#bottom">中部</a>
br*00
<a name="bottom" href="#top">底部</a>
</body>
</html>
——⭐多媒体标签
<html>
<head>
<meta charset="utf-8">
<title>多媒体标签</title>
</head>
<body>
<!--
<img> 图片标签
src属性：source资源路径，可以是本地或者网络资源
title属性：图片标题，鼠标悬停于图片上显现出来的文字
alt属性：图片加载失败时，提示的文字
witer属性：调节图片的宽度
height属性：调节图片的高度
-->
<a href="https://www.baidu.com" target="_blank">
<img src="img/baidu.png" width="400px" heigth="200px" title="百度" alt="百度logo">
</a><br />
<a href="https://music.163.com" target="_blank">
<img width="200px" height="400px" alt="网易云音乐logo" title="网易云音乐" src="https://pic1.zhimg.com/v2-eda61f6bcb5d21be148880386c72dc2a_r.jpg" >
</a><br />
<hr />
<!--
<audio> 音频标签
src属性：source资源路径
controls属性：功能控件
autoplay属性：自动播放
loop属性：循环播放
-->
<audio controls="controls" autoplay="autoplay" loop="loop"><!-- audio src="xxxxxx.mp3" -->
<source src="img/Audiomachine%20-%20All%20That%20We%20Are.mp3">
<source src="img/Sophis%20-%20躲雨.mp3">
</audio>
<!--
<video> 视频标签
跟音频标签属性一样
-->
<video width="40%" controls="controls" autoplay="autoplay" loop="loop">
<source src="img/13_技术面试中，不该问的4个问题.mp4">
</video>
</body>
</html>
——⭐列表标签
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
<ol> 有序列表标签：order list >>> ol
<li> 列表项标签：list item >>> li
-->
<h3>课程</h3>
<ol type="1">
<li>前端基础</li>
<li>后端基础</li>
<li>后端中阶</li>
<li>后端高阶</li>
<li>深入</li>
</ol>
<hr >
<!--
<ul> 无序列表标签：unorder list >>> ul
<li> 列表项标签：list item >>> li
-->
<h3>课程</h3>
<ul type="disc">
<li>前端基础</li>
<li>后端基础</li>
<li>后端中阶</li>
<li>后端高阶</li>
<li>深入</li>
</ul>
<hr >
<!--
列表嵌套
-->
<h3>课程</h3>
<ul type="disc">
<li>前端基础
<ol type="1">
<li>HTML基础</li>
<li>js基础</li>
<li>css基础</li>
<li>总结</li>
</ol>
</li>
<li>后端基础</li>
<li>后端中阶</li>
<li>后端高阶</li>
<li>深入</li>
</ul>
<hr >
<!--
<dl> 定义列表标签：definition list >>> dl
<dt>一般定义图片标签
<dd>一般定义文字标签
-->
<dl style="border: 2px solid darkgrey ;width: 318px;">
<dt>
<a target="_blank" href="https://detail.tmall.com/item.htm?spm=a230r.1.14.1.6518d4384Umbe4&id=615109113637&ns=1&abbucket=4">
<img src="img/淘宝.png" title="链接" alt="野兽派">
</a>
</dt>
<dd style=" margin: 8px ;">
<font color="red" size="4"> <big> ¥ <b>109.00</b> </big> </font>
<img src="img/baoyou%20(2).png" >
<font color="grey" size="2"> 2.0万+人付款 </font>
<a style="text-decoration:none;" target="_blank" href="https://detail.tmall.com/item.htm?spm=a230r.1.14.1.6518d4384Umbe4&id=615109113637&ns=1&abbucket=4">
<p style="color:dimgrey ;font-size: small;">THEBEAST野兽派家居香氛礼盒<font color="red">香薰</font>蜡烛卧室散香器生日礼物结婚礼物</p>
</a>
</dd>
</dl>
</body>
</html>
——⭐表格标签
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--
<table> 表格标签：代表整张表格——快捷键 table>tr*行数>td*列数 + tab键
border属性：设置表格边框线粗细
cellspacing属性：格子外侧到边框的距离
cellpadding属性：格子填充物到边框的距离
<thead> :表头
<tbody> :表体（默认添加）
<tfoot> :表尾
<tr> :代表一行
<td> :代表一行内的每个表格
<th> :自带加粗居中效果的 td（一般用在表头）
colspan属性： 横向（表格）跨列
rowspan属性： 纵向（表格）跨行
-->
<table border="1px" cellspacing="0px" cellpadding="0px" width="50%" align="center">
<thead bgcolor="cadetblue" align="center">
<tr>
<th colspan="3">学习成绩单</th>
</tr>
<tr>
<td>姓名</td>
<td>学科</td>
<td>分数</td>
</tr>
</thead>
<tbody bgcolor="aquamarine" align="center">
<tr>
<td rowspan="2">张三</td>
<td colspan="2" rowspan="4">
<table border="1px" cellspacing="0px" width="100%">
<tbody align="center">
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2">李四</td>
</tr>
<tr>
</tr>
</tbody>
<tfoot bgcolor="darkseagreen" align="center">
<tr>
<td >总分数</td>
<td colspan="2">398</td>
</tr>
</tfoot>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
