HTML知识点详解教程
文章目录
- HTML知识点详解教程
- 1. HTML基本语法
- 2. HTML标签详解
- 2.1 分区标签 `<div>`
- 2.2 标题标签 `<h1>` ~ `<h6>`
- 2.3 段落标签 `<p>`
- 2.4 图片标签 `<img>`
- 2.5 列表标签 `<ul>` 和 `<ol>`
- 无序列表 `<ul>`
- 有序列表 `<ol>`
- 2.6 超链接标签 `<a>`
- 2.7 表单标签 `<form>`
- 2.8 表格标签 `<table>`
- 2.9 框架标签 `<iframe>`
- 案例实践：个人简介网页
HTML知识点详解教程
1. HTML基本语法
HTML 是用来定义网页结构的标记语言。一个 HTML 文档的基本结构如下：
html复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 基础</title>
</head>
<body><h1>欢迎学习 HTML</h1><p>这是一个简单的 HTML 文档示例。</p>
</body>
</html>
解析：
<!DOCTYPE html>：声明 HTML5 文档类型。<html>：HTML 文档的根标签。<head>：包含元信息（如标题、字符集）。<body>：网页的主要内容部分。
2. HTML标签详解
以下列举图片中涉及的所有 HTML 标签，并附详细代码示例。
2.1 分区标签 <div>
<div> 是常用的分区标签，用于分隔内容块。
html复制代码
<div style="background-color: lightblue; padding: 20px;"><h2>这是一个分区</h2><p>分区中的段落文字。</p>
</div>
2.2 标题标签 <h1> ~ <h6>
HTML 提供了 6 级标题标签，表示从大到小的标题层级。
html复制代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.3 段落标签 <p>
段落标签用于表示正文内容。
html复制代码
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
2.4 图片标签 <img>
用于在网页中插入图片。
html复制代码
<img src="https://via.placeholder.com/150" alt="示例图片" width="150" height="150">
属性解析：
src：图片的路径。alt：图片的替代文本（用于无障碍访问）。width和height：定义图片的宽高。
2.5 列表标签 <ul> 和 <ol>
无序列表 <ul>
html复制代码
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>
有序列表 <ol>
html复制代码
<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>
2.6 超链接标签 <a>
用于创建链接。
html复制代码
<a href="https://www.csdn.net" target="_blank">访问CSDN</a>
属性解析：
href：目标链接。target="_blank"：在新窗口中打开链接。
2.7 表单标签 <form>
表单用于用户输入数据并提交给服务器。
html复制代码
<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="email">邮箱：</label><input type="email" id="email" name="email"><br><input type="submit" value="提交">
</form>
2.8 表格标签 <table>
用于展示结构化数据。
html复制代码
<table border="1"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>25</td><td>程序员</td></tr><tr><td>李四</td><td>30</td><td>设计师</td></tr>
</table>
属性解析：
border：表格边框宽度。
2.9 框架标签 <iframe>
用于嵌套其他网页。
html复制代码
<iframe src="https://www.example.com" width="600" height="400"></iframe>
属性解析：
src：嵌套网页的地址。width和height：定义框架的宽高。
案例实践：个人简介网页
综合上述知识点，构建一个简单的个人简介页面：
html复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><header><h1>个人简介</h1></header><main><div style="background-color: #f0f0f0; padding: 20px;"><h2>关于我</h2><p>大家好，我是张三，一名热爱编程的前端开发工程师。</p></div><section><h2>兴趣爱好</h2><ul><li>编程</li><li>阅读</li><li>旅行</li></ul></section><section><h2>联系我</h2><p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p></section></main><footer><p>版权所有 © 2024 张三</p></footer>
</body>
</html>
希望这份教程对您有所帮助！如果喜欢，欢迎点赞、收藏并分享！