**HTML基础教程**
**什么是HTML?**
HTML（HyperText Markup Language）是一种用来描述网页结构的语言。它告诉浏览器如何显示网页中的文本、图像、表格等元素。
**HTML的基本组成部分**
1. **标签**: HTML使用尖括号`<`和`>`包围的关键字来表示一个元素。例如，`
`代表一个段落。
2. **属性**: 属性是用于描述元素的额外信息。它们通常以键值对的形式出现，例如 `class="center"` 或 `src="image.jpg"`.
3. **内容**: 内容是元素中包含的文本或其他元素。
**HTML基本标签**
1. **``**: HTML文档的根元素。
2. **`
`**: 头部区域，包含元信息，如标题、样式表等。
3. **`
`**: 网页的标题。<br />4. **`<body>`**: 文档体，包含网页内容。<br /><br />**HTML结构示例**<br /><pre class="brush:html;">html<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页!</h1>
<p>这是我的第一篇文章。</p>
</body>
</html>
</pre><br />**HTML元素**<br /><br />1. **`<h1>`-`<h6>`**: 头部元素，表示不同级别的标题。<br />2. **`<p>`**: 段落元素，用于显示文本。<br />3. **`<img>`**: 图像元素，用于插入图像。<br />4. **`<a>`**: 超链接元素，用于创建超链接。<br /><br />**HTML属性**<br /><br />1. **`class`**: 用于定义样式类。<br />2. **`id`**: 用于定义唯一的标识符。<br />3. **`src`**: 用于指定图像或其他资源的位置。<br />4. **`href`**: 用于指定超链接的目标。<br /><br />**HTML示例**<br /><pre class="brush:html;">html<!-- 使用class属性 -->
<p class="center">这是一个居中显示的段落。</p>
<!-- 使用id属性 -->
<img id="logo" src="image.jpg">
<!-- 使用src属性 -->
<a href=" /></pre><br />**HTML表格**<br /><br />1. **`<table>`**: 表格元素。<br />2. **`<tr>`**: 行元素。<br />3. **`<td>`**: 单元格元素。<br /><br />**HTML示例**<br /><pre class="brush:html;">html<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</pre><br />**HTML列表**<br /><br />1. **`<ul>`**: 无序列表元素。<br />2. **`<ol>`**: 有序列表元素。<br />3. **`<li>`**: 列表项元素。<br /><br />**HTML示例**<br /><pre class="brush:csharp;">html<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
</pre><br />**HTML表单**<br /><br />1. **`<form>`**: 表单元素。<br />2. **`<input>`**: 输入框元素。<br />3. **`<textarea>`**: 文本域元素。<br /><br />**HTML示例**<br /><pre class="brush:html;">html<form action=" method="post">
<label>姓名:</label>
<input type="text" name="name">
<label>年龄:</label>
<input type="number" name="age">
<textarea name="message"></textarea>
<input type="submit" value="提交">
</form>
</pre><br />**HTML事件**<br /><br />1. **`onclick`**: 单击事件。<br />2. **`onmouseover`**: 鼠标悬停事件。<br />3. **`onmouseout`**: 鼠标移出事件。<br /><br />**HTML示例**<br /><pre class="brush:html;">html<button onclick="alert('Hello World!')">点击我</button>
<div onmouseover="document.getElementById('hover').style.display = 'block'">
<div id="hover" style="display: none;">鼠标悬停了!</div>
</div>
<div onmouseout="document.getElementById('hover').style.display = 'none'">
<div id="hover" style="display: block;">鼠标移出!</div>
</div>
</pre><br />**HTML总结**<br /><br />本教程介绍了 HTML 的基本组成部分、基本标签、元素、属性、内容等概念。通过示例代码，展示了如何使用这些概念来创建一个简单的网页。 </p>
<div>
<a style="float:left;height:24px;width:400px;overflow:hidden;" title="【KingFusion】用趋势曲线组件实现实时曲线的步骤" href="https://www.shili8.cn/article/detail_20002681495.html">上一条：【KingFusion】用趋势曲线组件实现实时曲线的步骤</a>
<br />
<br />
<a style="float: left; height: 24px; width: 400px; overflow: hidden;" title="【C++】面试基础搬运" href="https://www.shili8.cn/article/detail_20002681516.html">下一条：【C++】面试基础搬运</a>
</div>
</div>
</div>
<div class="clear"></div>
<div class="panel panel-default" style="padding:10px;">
相关标签：<a href="http://www.shili8.cn/article/getlist/tags_html.html" class="label label-primary tags_item">html</a><a href="http://www.shili8.cn/article/getlist/tags_%e5%9f%ba%e7%a1%80.html" class="label label-primary tags_item">基础</a>
</div>
<div class="clear"></div>
<div id="detail_downinfo" class="panel panel-default detail_downinfo">
<div class="panel-heading">
其他信息
</div>
<div class="panel-body">
<div class="downinfo_otherlist">
<div></div>
<div class="row">
<div class="col-md-12">
<div class="param_otherlist">
<p class="otherlist_head" style="font-size:14px;color:#808080;">其他资源</p>
<ul class="otherlist_content">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="news_right">
<div class="panel panel-primary">
<div class="panel-heading">最新文章</div>
<div class="panel-body">
<div class="list-group">
<a href="/article/detail_20002684343.html" class="list-group-item">高楼电脑端+黑金手机端个人引导页HTML源码</a>
<a href="/article/detail_20002684342.html" class="list-group-item">linux内核调试工具记录</a>
<a href="/article/detail_20002684341.html" class="list-group-item">ffplay播放器剖析(1)----数据结构剖析</a>
<a href="/article/detail_20002684340.html" class="list-group-item">C++ string类的模拟（详细代码实现）</a>
<a href="/article/detail_20002684339.html" class="list-group-item">算法学习day24</a>
<a href="/article/detail_20002684338.html" class="list-group-item">数据库概述</a>
<a href="/article/detail_20002684337.html" class="list-group-item">WebRTC源码分析 - receiver and decoder</a>
<a href="/article/detail_20002684336.html" class="list-group-item">【泛型方法】定义与使用</a>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">热门标签</div>
<div class="panel-body">
<div class="list-group">
<a href="https://www.shili8.cn/article/getlist/tags_Python.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Python</a>
<a href="https://www.shili8.cn/article/getlist/tags_Linux.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Linux</a>
<a href="https://www.shili8.cn/article/getlist/tags_Docker.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Docker</a>
<a href="https://www.shili8.cn/article/getlist/tags_Kubernetes.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Kubernetes</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e4%ba%91%e8%ae%a1%e7%ae%97.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">云计算</a>
<a href="https://www.shili8.cn/article/getlist/tags_Android.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Android</a>
<a href="https://www.shili8.cn/article/getlist/tags_Java.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Java</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e5%be%ae%e6%9c%8d%e5%8a%a1.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">微服务</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e5%88%86%e5%b8%83%e5%bc%8f.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">分布式</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e9%9b%86%e7%be%a4.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">集群</a>
<a href="https://www.shili8.cn/article/getlist/tags_MySQL.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">MySQL</a>
<a href="https://www.shili8.cn/article/getlist/tags_SQLServer.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">SQLServer</a>
<a href="https://www.shili8.cn/article/getlist/tags_MVC.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">MVC</a>
<a href="https://www.shili8.cn/article/getlist/tags_Vue.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Vue</a>
<a href="https://www.shili8.cn/article/getlist/tags_js.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">js</a>
<a href="https://www.shili8.cn/article/getlist/tags_html.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">html</a>
<a href="https://www.shili8.cn/article/getlist/tags_nodejs.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">nodejs</a>
<a href="https://www.shili8.cn/article/getlist/tags_canvas.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">canvas</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e6%9c%ba%e5%99%a8%e5%ad%a6%e4%b9%a0.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">机器学习</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e8%87%aa%e5%8a%a8%e5%8c%96%e6%b5%8b%e8%af%95.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">自动化测试</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e5%a4%9a%e7%ba%bf%e7%a8%8b.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">多线程</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e8%ae%be%e8%ae%a1%e6%a8%a1%e5%bc%8f.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">设计模式</a>
<a href="https://www.shili8.cn/article/getlist/tags_Redis.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Redis</a>
<a href="https://www.shili8.cn/article/getlist/tags_.Net.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">.Net</a>
<a href="https://www.shili8.cn/article/getlist/tags_Unity3D.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">Unity3D</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e5%a4%a7%e6%95%b0%e6%8d%ae.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">大数据</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e4%b8%ad%e9%97%b4%e4%bb%b6.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">中间件</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e6%9e%9a%e4%b8%be.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">枚举</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e6%b6%88%e6%81%af%e9%98%9f%e5%88%97.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">消息队列</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e9%a2%86%e5%9f%9f%e9%a9%b1%e5%8a%a8%e8%ae%be%e8%ae%a1.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">领域驱动设计</a>
<a href="https://www.shili8.cn/article/getlist/tags_%e6%88%aa%e5%8f%96%e5%ad%97%e7%ac%a6%e4%b8%b2.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">截取字符串</a>
<a href="https://www.shili8.cn/article/getlist/tags_npm.html" target="_blank" style="margin:2px 3px;float:left;font-size:14px;" class="label label-primary tags_item">npm</a>
</div>
</div>
</div>
<div class="panel panel-default" id="side_mobile">
<div class="panel-body">
<div class="qrc-text">欢迎提供和下载各类你熟悉的实例，感谢您对"<strong>实例吧</strong>"的支持，诚心接受各类问题反馈。</div>
</div>
</div>
</div>
<a href="#0" class="cd-top">Top</a>
<div class="clear"></div>
</div>
<script src="/Scripts/totop/to_top_main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu-2").addClass("active");
$("#menu-item-2").addClass("active");
});
SyntaxHighlighter.all();
</script>
</div>
<div id="pagefooter" style="">
<div class="footer">
<div class="links"> <a href="/about/statement">服务条款</a> | <a href="/sitemap/">网站地图</a> | <a href="/about/links">友情链接</a> | <a href="/about/feedback">问题反馈</a></div>
<div class="declare">
© 2021-2024 实例吧(shili8.cn) 版权所有 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">备案号:粤ICP备2024310174号-1</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011102002787" target="_blank" rel="nofollow"><img src="/Images/gwab.png" width="14" height="14" title="备案" alt="备案" border="0"> 粤公网安备 44011102002787号</a>
</div>
<div class="clear"></div>
</div>
</div>
<div id="wx_code"></div>
<div id="wx_code_img"></div>
<a id="BackToTop" href="javascript:void(0)"></a>
<div id="wx_mp_qrc" style="display:none;"><img src="/ui/images/wx_qrc.png" width="258" /></div>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/jquery/jquery.blockUI.js"></script>
<script type="text/javascript" src="/scripts/jquery/tuicai.ui.js"></script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?73f9a1da9fb250caa6dc171dabaeeb74";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
