什么是HTML
HTML全称Hyper Text Markup Language,即一种用于创建网页的标准标记语言。它使用一系列标签来定义文本、图像、链接等元素,并允许将它们嵌入到网页中。
什么是HTML标签
HTML标签说白了就是一种样式,告诉浏览器该怎么显示文本或图像,用<>这种尖括号方式。
HTML标签
<b>标签
粗体效果。
<b>这是一个b标签</b>
效果:
<i>标签
斜体效果。
<i>这是一个i标签</i>
效果:
<p>标签
段落标签,一个p标签表示一段不换行。
<p>这是一个p标签</p>
效果:
<h>标签
h标签 表示标题 一般字号会根据h后面跟着的数字的增大而减小
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
效果:
<a>标签
创建一个链接,链接里面可以是本系统的其他网页,也可以是其他域名的网页,也可以是其他标签。
<a href="https://www.example.com">这是一个链接</a>
注意:一定要有href关键字。
<img>标签
在网页插入一张图片。
<img src="../HelloWorld/1693920290886.png" alt="demo">
src
:这个属性指定了图片的路径。
alt
:这个属性提供了图片的替代文本。当图片无法显示时,浏览器会显示这个替代文本。
列表标签
<ul>标签
创建无序列表。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
li(列表项):使用标签表示列表中的单个项目。
效果:
<ol>标签
创建有序列表。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
效果:
<dl>标签
创建定义列表。
<dl>
<dt>苹果</dt>
<dd>一种水果</dd>
<dt>香蕉</dt>
<dd>另一种水果</dd>
</dl>
效果:
HTML标签属性
HTML标签的属性用于为标签添加额外的信息,是附加在HTML元素上的键值对,用于提供额外的信息或功能。这些属性通常以名称和值的形式出现。
class
:指定元素的类名,用于样式表选择器。
id
:指定元素的标识符,用于唯一标识一个元素。
style
:指定元素的内联样式。
src
:指定图像的源文件路径。
href
:指定链接的目标URL。
target
:指定链接的打开方式(例如在新窗口中打开)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.myClass {
color: blue;
font-size: 20px;
}
#myId {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<!-- class实例 -->
<div class="myClass">Hello World!</div>
<!-- id实例 -->
<div id="myId">Hello Again!</div>
<!-- style实例 -->
<div style="color: yellow;">Hello Again And Again!</div>
<!-- src实例 -->
<img src="image.jpg" alt="Image">
<!-- href实例 -->
<a href="https://www.baidu.com">百度</a>
<!-- target实例 -->
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>
rowspan=" 合并行数"
colspan=" 合并列数"
<table border="1" style="text-align: center;"
cellspacing="0" cellpadding=5 align="center">
<!-- 一行 -->
<!-- 加载顺序 head - body -foot -->
<thead>
<tr>
<!-- th会自动居中 加粗字体 -->
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>学号</th>
<th>性别</th>
<th>宿舍</th>
<th>籍贯</th>
<th>兴趣1</th>
<th>兴趣2</th>
<th>兴趣3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="10">
<h3>合计人数8人</h3>
</td>
</tr>
</tfoot>
<!-- 都会在表格的最上面显示 -->
<caption><h1>班级学生信息统计</h1></caption>
<tbody>
<tr>
<!-- 行合并 rowspan="合并的行数" -->
<td rowspan="5">工业应用软件开发</td>
<td>李四</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N616</td>
<td>安徽</td>
<td colspan="3">篮球</td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N616</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>赵六</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td>篮球</td>
<!-- colsapn 合并列 -->
<td colspan="2">唱跳</td>
</tr>
<tr>
<td>孙七</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>王八</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td colspan="2">篮球</td>
<td>唱跳</td>
</tr>
<tr>
<!-- 行合并 rowspan="合并的行数" -->
<td rowspan="5">智能软件开发班</td>
<td>李四</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N616</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N616</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>赵六</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>孙七</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
<tr>
<td>王八</td>
<td>21</td>
<td>20201014</td>
<td>女</td>
<td>A19N618</td>
<td>安徽</td>
<td>篮球</td>
<td>唱跳</td>
<td>Rap</td>
</tr>
</tbody>
</table>