HTML

最新推荐文章于 2022-11-07 10:29:46 发布

木子葭

最新推荐文章于 2022-11-07 10:29:46 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42725815/article/details/86764317

本文深入讲解HTML标签的使用，包括文本、超链接、图片、列表、表格和表单标签的详细说明及示例，帮助读者掌握HTML网页设计的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML标签与表格

HTML(Hyper Text Markup Language,超文本标记语言)是用来描述网页的一种语言。
主要结构为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
				<!--<body>里面的内容就是网页将要显示的内容-->
</body>
</html>

一文本标签

常见的标签

1.标题标签: h1 - h6 (成对出现)
2. 段落标签: p (成对出现)
3. 加粗标签: b, strong (成对出现)
4. 斜体标签: i (成对出现)
5. 下划线标签: u (成对出现)
6. 删除标签: s (成对出现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>除夕快乐</h1>
<h2>除夕快乐</h2>
<h3>除夕快乐</h3>
<h4>除夕快乐</h4>
<h5>除夕快乐</h5>
<h6>除夕快乐</h6>
<p style="color:red">原价:<s>100</s></p>
<p style="color:green;font-size:x-large">现价:70</p>
<p>
    杯子在多数时候，盛装的仅仅是半杯水
</p>
<p>

    杯子在多数时候，盛装的仅仅是半杯水，
遇见的那个人依然似乎无法填补内心的空洞，
时间一点一点地过去，水也一点一点地蒸发掉，
你开始觉得他越来越无法满足你的全部幻想全部期待，
对望的时候，彼此的眼里充满了空洞犹疑。
杯子里面的水终于全部消失
    </p>
<p>
    <u>分离是如此容易的一件事，</u>就连曾经淡淡的水痕都刹那间无影无踪<i>生活似乎回到了最初的样子，
    天依旧蓝得透心，城市依旧匆忙得落寞。</i>
</p>


</body>
</html>

在这里插入图片描述

了解的标签

7. 换行标签: br (非成对出现)
8. 水平分隔符标签: hr (非成对出现)
9. 预格式化文本标签(保留文本的原有格式): pre
10. 上标和下标: sup， sub
11. 块引用标签: blockquote
12. 普通的文本(行内标签): span
13. 普通文本的标签(块标签):div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: green">标题1</h1>

<p>hello</p>
<hr>
<p>world</p>
hello <br> world
<h1 style="color: blueviolet">标题2</h1>
<pre>
《卜算子·咏梅》
宋：陆游
驿外断桥边，寂寞开无主。
已是黄昏独自愁，更著风和雨。
无意苦争春，一任群芳妒。零落成泥碾作尘，只有香如故。
</pre>
<span>hello</span> <span>world</span>
<div>hello</div><div>world</div>
<blockquote style="color: blueviolet">
    击壤歌
先秦：佚名
日出而作，日入而息。
凿井而饮，耕田而食。
帝力于我何有哉！
</blockquote>

x<sup>2</sup>+2x+3 = 5
<br/>
这个方程的解： x<sub>1</sub>=3 x<sub>2</sub>=5
</body>
</html>

在这里插入图片描述

二超链接标签

1. a标签跳转到指定的url地址

<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>

在这里插入图片描述
2. 跳转到当前页面的指定位置（锚点）
点击链接之后跳转至相应位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签-->

<!--1. 跳转到指定的url地址-->
<!--<a href="http://www.baidu.com"> 百度</a>-->
<!--<a href="http://www.baidu.com" target="_parent"> 百度</a>-->
<!--&lt;!&ndash;新建一个浏览器窗口并打开&ndash;&gt;-->
<!--<a href="http://www.baidu.com" target="_blank"> 百度</a>-->

<!--2. 跳转到当前页面的指定位置（锚点）-->

<a href="#C1">第1个标题 </a>
<a href="#C2">第2个标题 </a>
<a href="#C3">第3个标题 </a>
<a href="#C4">第4个标题 </a>

<h1><a name="C1">第一个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。
回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时
也更强调 AI 与每一垂直行业的深度融合，
而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，
在应用场景中步步为营、累积了不少客户资源。
当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，
但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。
优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。
基于此AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。
好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围
征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准
技术性、创新性、前瞻性
案例分享者特别奖励
1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 优快云 社区吸纳优秀的技术人才；
2.选出 20+ 最佳应用案例纳入由 优快云 发布的《2018-2019 中国人工智能产业路线图》，以及由 优快云 颁发的“2018 中国人工智能最佳应用案例奖”；
3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 优快云 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；
4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。

<h1><a name="C2">第2个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。
回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时
也更强调 AI 与每一垂直行业的深度融合，
而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，
在应用场景中步步为营、累积了不少客户资源。
当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，
但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。
优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。
基于此AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。
好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围
征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准
技术性、创新性、前瞻性
案例分享者特别奖励
1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 优快云 社区吸纳优秀的技术人才；
2.选出 20+ 最佳应用案例纳入由 优快云 发布的《2018-2019 中国人工智能产业路线图》，以及由 优快云 颁发的“2018 中国人工智能最佳应用案例奖”；
3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 优快云 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；
4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。

<h1><a name="C3">第3个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。
回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时
也更强调 AI 与每一垂直行业的深度融合，
而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，
在应用场景中步步为营、累积了不少客户资源。
当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，
但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。
优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。
基于此AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。
好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围
征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准
技术性、创新性、前瞻性
案例分享者特别奖励
1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 优快云 社区吸纳优秀的技术人才；
2.选出 20+ 最佳应用案例纳入由 优快云 发布的《2018-2019 中国人工智能产业路线图》，以及由 优快云 颁发的“2018 中国人工智能最佳应用案例奖”；
3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 优快云 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；
4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。

<h1><a name="C4">第4个标题</a></h1>
2018 年，AI 行业持续走向技术落地和深入商业化的一年。
回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时
也更强调 AI 与每一垂直行业的深度融合，
而 AI 创业公司除了频繁刷新行业高额融资外，也立足于自身优势，
在应用场景中步步为营、累积了不少客户资源。
当然，在热烈的欢呼声中，AI 泡沫论调依然在不时回响，
但毋庸置疑的是，那些真正利用 AI 技术来创造出商业价值的企业自然会沉淀下来。
优秀的商业落地产品/技术方案是判断一个企业商业价值的重要依据。
基于此AI科技大本营（ID:rgznai100）希望找到在汽车、金融、教育、医疗、安防、零售、家居、文娱、工业等 9 大行业的最佳 AI 应用案例 TOP 20，记录 AI 时代影响人类发展的变革性产品/解决方案。同时我们有理由相信，挖掘出的那些优秀先行者还会给不同 AI 行业领域带来启迪，进而推动整个 AI 行业的发展进程。
好产品/技术方案值得记录，而不是被时代泡沫淹没。
征集内容详情：
案例范围
征集 AI 技术在汽车、金融、零售、医疗、教育、安防、家居、文娱、工业等 9 大行业的应用案例（具体内容示例见下文）。
最佳案例评选标准
技术性、创新性、前瞻性
案例分享者特别奖励
1.50+ 以上媒体平台的联合宣传，各行业上榜的最佳应用案例还可能获得 AI科技大本营（ID:rgznai100）的专访报道，在极大提升企业技术品牌影响力的同时，有助于企业从 优快云 社区吸纳优秀的技术人才；
2.选出 20+ 最佳应用案例纳入由 优快云 发布的《2018-2019 中国人工智能产业路线图》，以及由 优快云 颁发的“2018 中国人工智能最佳应用案例奖”；
3.入选 2018 最佳人工智能应用案例 TOP 20 的企业，将优先推荐加入由 优快云 和 AICAMP 举办的 AI 开发者大会智能应用分论坛做应用案例技术分享，并享有全程会议通道；
4.参与 2018 最佳人工智能应用案例 TOP 20 的企业将优先邀请 AI科技大本营线公开课的讲座或在线下技术沙龙上做分享。


</body>
</html>

在这里插入图片描述

三图片标签

1. 插入图像并设置大小
src:指定图片的位置，可以是url地址，也可以是本地的图片
alt: 如果图片不能正常加载，则显示alt里面的文字

<img src="https://img-ads.youkuaiyun.com/2019/201901171129137249.png" alt="这是csdn的logo图片">
<img src="img01.jpg" alt="img01.jpg">
<img src="img01.jpg" alt="img01.jpg" width="460px" height="96px">

在这里插入图片描述
2. 设置图像的对齐方式(html中已弃用，通过css样式实现功能)
align=“top” 置于顶部
align=“middle” 置于中部
align=“bottom” 置于底部

攻克Linux编程: <img  align="top" src="img01.png" alt="img01.png" width="460px" height="96px">
<br/>
攻克Linux编程: <img align="middle" src="img01.png" alt="img01.png" width="460px" height="96px">
<br/>
攻克Linux编程: <img align="bottom" src="img01.png" alt="img01.png" width="460px" height="96px">

在这里插入图片描述
3.将图像浮动到文本的左侧和右侧

<br/>
<br/>
<br/>
<br/>
<br/>
攻克Linux编程 <img align="left" src="img01.png" alt="img01.png" width="460px" height="96px">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
攻克Linux编程: <img align="right" src="img01.png" alt="img01.png" width="460px" height="96px">

在这里插入图片描述
4. 图像链接 a标签和img标签

<br/>
<br/>
<br/>
<br/>
<br/>

<a href="http://www.baidu.com"> 百度欢迎你</a>
<a href="http://www.youkuaiyun.com"> <img src="img01.png"></a>

在这里插入图片描述

四序列化标签

1.无序标签之ul和li

<!--list-style-type: none  -&ndash;&gt; 去掉圆点-->
<!--display: inline-block  -&ndash;&gt; 变为行内元素，并且可以设置高度和宽度-->
<!--width:        -&ndash;&gt; 可以使用300px表示，也可以用百分比来表示,20%-->
<!--横向标签-->
<ul style="list-style-type: none">
    <li style="display: inline-block; width: 20%; background: azure;">
        <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
    </li>
    <li style="display: inline-block; width: 20%; background: azure;">CSS</li>
    <li style="display: inline-block; width:20%; background: azure;">JS</li>
    <li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>

在这里插入图片描述

<!--竖向标签-->
<ul style="list-style-type: none">
    <li style="display: block; width: 20%; background: azure;">HTML</li>
    <li style="display: block; width: 20%; background: azure;">CSS</li>
    <li style="display: block; width:20%; background: azure;">JS</li>
    <li style="display: block; width: 20%; background: azure;">python</li>
</ul>

在这里插入图片描述
2.有序标签之ol和li

<!--type -&ndash;&gt;可以指定有序列表符号的类型-->
<!--text-decoration: none;  -&ndash;&gt;去掉原有标签的文本装饰-->
<!--color: black： -&ndash;&gt;设置字体颜色为黑色-->

<ol type="A">
    <li>
        <a href="http://www.baidu.com" style="text-decoration: none; color: black">
            html </a>
    </li>
    <li><a href="#"> CSS </a></li>
    <li><a href="#"> JS </a></li>
    <li><a> Python </a></li>
</ol>

在这里插入图片描述
3. 嵌套标签之dl, dt和dd

<dl>
    <dt style="color:red">HTML</dt>
    <dd>li</dd>
    <dd>span</dd>
    <dd>div</dd>
    <dd>hr</dd>
    <dd>sub</dd>
    <dt>CSS</dt>
    <dd>text-decoration</dd>
    <dd>color</dd>

</dl>

在这里插入图片描述

五表格

1.表格的建立
table : 表格标签
caption：表格的标题
tr : 行
td : 列
th:自动加粗，居中
cellpadding=“3” -----设置表格的内边距
cellspacing=“5” ----设置表格的外边距

<table style="width: 80%;" border="1px" cellpadding="5px" cellspacing="0px">
    <caption>表格的标题</caption>
    <tr style="text-align: center">
        <!--第一行是表格的表头， 让自动加粗-->
        <th>主机名</th>
        <th>IP地址</th>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.250</td>
    </tr>

    <tr style="text-align: center">
        <td>server1</td>
        <td>172.25.254.250</td>
    </tr>
    <tr style="text-align: center">
        <td>server1</td>
        <td>172.25.254.250</td>
    </tr>
    <tr style="text-align: center">
        <td>server1</td>
        <td>172.25.254.250</td>
    </tr>
   <tr style="text-align: center">
        <td>server1</td>
        <td>172.25.254.250</td>
    </tr>

</table>

在这里插入图片描述

<table style="width: 80%; text-align: center;" cellpadding="3" border="1px"

       cellspacing="5">
    <caption>课程表</caption>
    <tr>
        <!--tr:一行内容-->
        <!--td: 一列内容-->
        <th>周一</th>
        <th>周2</th>
        <th>周3</th>
        <th>周4</th>
        <th>周5</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>

    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
</table>

在这里插入图片描述

2. 合并单元格
rowspan=“5” 行占5行
colspan=“4” 列占4列

<table style="width: 60%;text-align: center;" cellspacing="2" cellpadding="3" border="1px">
    <tr>
        <td rowspan="5" style="background-color: green">学生</td>

        <td colspan="4" style="background-color: aqua;color: red">学生信息表</td>

    </tr>
    <tr style="background-color: salmon">
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>成绩</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>90</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>2</td>
        <td>张三</td>
        <td>女</td>
        <td>94</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>3</td>
        <td>王麻子</td>
        <td>男</td>
        <td>91</td>
    </tr>
</table>

在这里插入图片描述

六表单标签

form表单标签

<h2>个人信息</h2>
<form method="get">
    <!--文本域-->
    <span>用户名:</span><input type="text"><br/>
    <!--密码域-->
    <span>密码:</span><input type="password"><br/>
    <!--文本域-->
    <span>个人简介:</span><textarea></textarea><br/>
    <!--提交文件-->
    <span>个人简历:</span><input type="file"><br/>
    <!--日期-->
    <span>出生日期:</span><input type="date">
    <!--提交按钮-->
    <input type="submit" value="登陆">
    <input type="reset" value="重置">

</form>

<h2>详细信息</h2>
<!--单选按钮-->
<span>性别:</span>
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/>

<!--多选按钮-->
<span>你喜欢的书籍:</span>
<ul>
    <li><input type="checkbox" name="java"><span>java</span></li>
    <li><input type="checkbox" name="python"><span>python1</span></li>
    <li><input type="checkbox"><span>Linux</span></li>
    <li><input type="checkbox"><span>C++</span></li>
</ul>

<!--下拉列表-->
<select>
    <option>--选择省份--</option>
    <option>陕西</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
</select>

<!--围绕数据的标签-->
<fieldset>
    <legend>个人简介</legend>
    <h1>用户登陆</h1>
    <hr/>
    用户名: <input type="text"><br/>
    <input type="submit" value="登陆">
</fieldset>

在这里插入图片描述

标签的应用

<h1 align="center">个人信息</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"
       style=" margin: 0 auto; background: snow">
    <tr>
        <td style="background: #c0ffff">姓名</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>性别</td>
        <td>
            <select style="width: 95%">
                <option>男</option>
                <option>女</option>
            </select>

        </td>
    </tr>
    <tr>
        <td>手机号码</td>
        <td><input style="width: 95%; " type="tel"></td>
        <td>电子邮箱</td>
        <td><input style="width: 95%; " type="email"></td>
    </tr>
    <tr>
        <td>教育程度</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>工作职位</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>工作城市</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>期望工资</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td colspan="3"><input type="text" style="width: 98%"></td>

    </tr>
    <tr>
        <td>特长</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td>地址</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td colspan="4"><br/></td>

    </tr>
    <tr>
        <td colspan="4" align="right">
            <input type="submit" value="添加">
            <input type="reset" value="关闭">
        </td>

    </tr>
</table>

在这里插入图片描述