超级简洁的html基础教程来啦！
一、HTML简介
1、什么是HTML？？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
2、完整的HTML页面
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
3、HTML的网页结构
二、 HTML基础
1、排版标签
1.标题标签
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
源代码以及运行结果如下图
2.段落标签
段落是通过 <p> 标签定义的。（段落与段落之间默认自动换行功能）
小tips：p标签为双标签，不要忘记结束标签即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来
源代码以及运行结果如下图
3.换行标签
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
源代码以及运行结果如下图
4.水平线标签
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
源代码以及运行结果如下图
5.HTML注释（快捷键：Ctrl+/）
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
源代码以及运行结果如下图
2、文本格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签。
<b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字 源代码以及运行结果如下图
3、媒体标签
1.图片标签
定义图像的语法是：
<img src="url" alt="some_text">
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
源代码以及运行结果如下图
2.视频标签
<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
视频属性：
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted muted 如果出现该属性，视频的音频输出为静音。 poster URL 规定视频正在下载时显示的图像，直到用户点击播放按钮。 preload auto
metadata
none如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 src URL 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。 源代码以及运行结果如下图
3.音频标签
HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
音频属性：
<embed> 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 <object> 定义内嵌对象。 <param> 定义对象的参数。 <audio> 定义了声音内容 <video> 定义一个视频或者影片 <source> 定义了media元素的多媒体资源(<video> 和 <audio>) <track> 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>
源代码以及运行结果如下图
4、链接标签
HTML 使用超级链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
HTML使用标签 <a> 来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签 <a> 中使用了 href 属性来描述链接的地址。
以下是 HTML 中创建链接的基本语法和属性：
<a>元素：创建链接的主要HTML元素是<a>（锚）元素。<a>元素具有以下属性：
href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target（可选）：指定链接如何在浏览器中打开。常见的值包括_blank（在新标签或窗口中打开链接）和_self（在当前标签或窗口中打开链接）。title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
HTML 链接 - target 属性（在新窗口打开）
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
源代码以及运行结果如下图
5、列表标签
标签 描述 <ol> 定义有序列表 <ul> 定义无序列表 <li> 定义列表项 <dl> 定义列表 <dt> 自定义列表项目 <dd> 定义自定列表项的描述
1.无序标签
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
源代码以及运行结果如下图
2.有序标签
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
源代码以及运行结果如下图
3.自定义标签
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
源代码以及运行结果如下图
6、表格标签
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格属性：
border 边框大小 width 表格宽度 height 表格高度 caption 表格大标题 源代码以及运行结果如下图
<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。
HTML 表格还可以具有其他部分，如 <tfoot > （表格页脚）和 <caption > （表格标题），<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。 <caption > 可用于为整个表格定义标题。
HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。
我们也可以使用 CSS 来进一步自定义表格的样式和外观。
合并单元格
上下合并保留最上单元格，左右合并保留最左单元格。（不能跨结构合并）
rowspan跨行合并
colspan跨列合并
7、表单标签
标签：定义,表格,标签,前端,元素,学习,HTML,源代码 From： https://blog.csdn.net/weixin_73338252/article/details/142418431HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML表单的例子：
<form>元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。<label>元素用于为表单元素添加标签，提高可访问性。<input>元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type属性定义了输入框的类型，id属性用于关联<label>元素，name属性用于标识表单字段。<select>元素用于创建下拉列表，而<option>元素用于定义下拉列表中的选项。源代码以及运行结果如下图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <form action=""> <h1>青春不常在</h1> <hr> 昵称：<input type="text" name="" id="" placeholder="请输入昵称"> <br> <br> 性别： <label><input type="radio" name="sex" id="">男</label> <label><input type="radio" name="sex" id="" checked>女</label> <br><br> 所在城市： <select name="city" id=""> <option value="">上海</option> <option value="" selected>北京</option> <option value="">厦门</option> <option value="">广州</option> </select> <br><br> 婚姻状况： <label><input type="radio" name="hun" id="">未婚</label> <label><input type="radio" name="hun" id="">已婚</label> <label><input type="radio" name="hun" id="" checked>保密</label> <br> <br> 喜欢的类型： <label><input type="checkbox" name="like">可爱</label> <label><input type="checkbox" name="like">性感</label> <label><input type="checkbox" name="like">御姐</label> <label><input type="checkbox" name="like">萝莉</label> <label><input type="checkbox" name="like">大叔</label> <label><input type="checkbox" name="like" checked>型男</label> <br><br> 个人介绍： <br> <textarea name="" id="" cols="30" rows="10"></textarea> <br><br> <h3>我承诺</h3> <ul> <li>nianqing</li> <li>nianqing</li> <li>nianqing</li> </ul> <label><input type="checkbox">我同意所有条款</label> <br><br> <input type="submit" value="免费注册"> <input type="reset" value="重置"> </form> </body> </html>
