最基本的 HTML 标签
0. HTML是什么
HTML: HyperText Markup Language (超文本标记语言)
超文本？— 包含图片、音频、动画、视频等各种格式的数据
1. <h> 标签：标题
<!-- <h>标签: 标题 -->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
2. <p>标签：段落
<!-- <p>标签: 段落标签 -->
<p>我是段落标签</p>
3. <a>标签：插入链接
<!-- <a>标签: 链接 -->
<a href="https://www.baidu.com">百度</a>
<!-- target="_blank": 在新标签页中打开链接 -->
<a href="http://www.fengfengzhidao.com" target="_blank">枫枫知道</a>
4. <img>标签：插入链接
<!-- <a>标签: 链接 -->
<a href="https://www.baidu.com">百度</a>
<!-- target="_blank": 在新标签页中打开链接 -->
<a href="http://www.fengfengzhidao.com" target="_blank">枫枫知道</a>
5. <ul>标签：无序列表
<!-- <ul>标签: 无序列表 -->
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
6. <ol>标签：有序列表
<!-- <ol>标签: 有序列表 -->
<ol>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
7. 标签嵌套
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>
<a href="http://www.fengfengzhidao.com" target="_blank">
<img src="J.Wise.png" width="200" alt="Hey, Wise! Where are you going?" title="J.Wise">
</a>
</li>
<li>
<a href="http://www.fengfengzhidao.com" target="_blank">
<img src="http://www.fengfengzhidao.com/media/site_bg/31.jpg" width="200" alt="枫枫背景图片" title="枫枫背景">
</a>
</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
8. <table>标签：表格
<table border="1">
<!-- <thead>: 表头 -->
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</thead>
<tbody>
<tr>
<td>1</td><td>J.Wise</td><td>19</td><td>计算机全栈</td>
</tr>
<tr>
<td>2</td><td>嘿嘿嘿</td><td>21</td><td>机械工程</td>
</tr>
<tr>
<td>3</td><td>吧唧吧唧</td><td>22</td><td>自动化工程</td>
</tr>
</tbody>
</table>
完整代码以及最终效果
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签</title>
</head>
<body>
<!-- <h>标签: 标题 -->
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<!-- <p>标签: 段落标签 -->
<p>我是段落标签</p>
<!-- <a>标签: 链接 -->
<a href="https://www.baidu.com">百度</a><br>
<a href="http://www.fengfengzhidao.com" target="_blank">枫枫知道</a> <!-- target="_blank": 在新标签页中打开链接 -->
<!-- <br>标签: 换行 -->
<br>
<!-- <img>标签 -->
<img src="J.Wise.png" width="600" alt="Hey, Wise! Where are you going?" title="J.Wise"> <!-- alt在由于其他原因不能正确加载该图片时才出现 -->
<!-- <ul>标签: 无序列表 -->
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
<!-- <hr>标签: 分割线 -->
<hr>
<!-- <ol>标签: 有序列表 -->
<ol>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
<hr>
<!-- 标签嵌套 -->
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>
<a href="http://www.fengfengzhidao.com" target="_blank">
<img src="J.Wise.png" width="200" alt="Hey, Wise! Where are you going?" title="J.Wise">
</a>
</li>
<li>
<a href="http://www.fengfengzhidao.com" target="_blank">
<img src="http://www.fengfengzhidao.com/media/site_bg/31.jpg" width="200" alt="枫枫背景图片" title="枫枫背景">
</a>
</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
<hr>
<!-- <table>标签: 表格 -->
<table border="1">
<!-- <thead>: 表头 -->
<thead>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</thead>
<tbody>
<tr>
<td>1</td><td>J.Wise</td><td>19</td><td>计算机全栈</td>
</tr>
<tr>
<td>2</td><td>嘿嘿嘿</td><td>21</td><td>机械工程</td>
</tr>
<tr>
<td>3</td><td>吧唧吧唧</td><td>22</td><td>自动化工程</td>
</tr>
</tbody>
</table>
</body>
</html>
最终网页效果
HTML 重要功能
1. 表单数据
表单数据由 标签来组织。请求方式有get和post两种方式。
get 和 post 请求的区别（表单数据）
1）get 方式
<!-- get请求方式 -->
<form action="https://www.baidu.com" method="get">
用户名: <input type="text" placeholder="请输入用户名" name="user"> <!-- placeholder参数: 设置提示信息 -->
密码: <input type="password" placeholder="请输入密码" name="password"> <!-- password方式: 自动隐藏输入内容, 按眼睛按钮才显示出来内容 -->
<input type="submit" value="登录">
</form>
2）post方式
<!-- post请求方式 -->
<form action="" method="post">
<label for="user">用户名</label>
<input type="text" id="user" placeholder="请输入用户名" name="user"> <!-- placeholder参数: 设置提示信息 -->
<br>
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码" name="password"> <!-- password方式: 自动隐藏输入内容, 按眼睛按钮才显示出来内容 -->
<br>
<input type="submit" value="登录">
重要说明 : get 请求默认在url中显示表单数据，所以需要保证隐私的场景下，不使用 get 方式！（如注册登录时）我们一般在注册登录页面上使用 post 请求方式！！！
2. 块级元素&内联元素
块元素：独占一行（例如，h，p，ul，ol，li，table，form，div 标签等）
内联元素：只占自身的大小（例如，a，input，span，img 标签等）
3. 内联框架
<iframe>标签The HTML element represents a nested browsing context , embedding another HTML page into the current one.
Each embedded browsing context has its own session history and document . The browsing context that embeds the others is called the parent browsing context. The topmost browsing context — the one with no parent — is usually the browser window, represented by the Window object.
Because each browsing context is a complete document environment, every in a page requires increased memory and other computing resources. While theoretically you can use as many s as you like, check for performance problems.
<iframe src="03_form.html" frameborder="0"></iframe> <!-- 跟ROS;launch的include标签相似 -->
<br>
<iframe src="02_tags.html" frameborder="0"></iframe> <!-- 嵌套的内容较多的话, 显示滚动条 -->
<br><br>
<iframe src="02_tags.html" frameborder="0" width="800px"></iframe>
<br><br>
<!-- 内联框架中用a标签加载外部网页 -->
<a href="02_tags.html" target="iframe">展示标签简介页</a>
<a href="03_form.html" target="iframe">展示表单</a>
<br>
<iframe name="iframe" frameborder="0" width="100%" height="600px"></iframe>
效果如下：
后记
是不是很简单？其实就是这么简单的！
HTML5：就这么点知识就够了！！！看完了这篇文章，就可以说学会了HTML5了😃。真不是吹牛的，就是这么简单。HTML5，千万千万别去买那些又厚又重的书了👀，掌握好这篇文章的就够了😊
小知识：HTML5，它不是编程语言，只是一门标记语言而已。
(づ￣ 3￣)づ(づ￣ 3￣)づ(づ￣ 3￣)づ(づ￣ 3￣)づ(づ￣ 3￣)づ(づ￣ 3￣)づ(づ￣ 3￣)づ
❤❤❤❤❤❤❤❤❤下篇文章是 CSS3 基本知识了，请大家期待一下❤❤❤❤❤❤❤❤❤
3631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
