基础框架
HTML（Hyper Text Markup Language）是超文本标记语言。它不是一种编程语言，而是一种标记语言。标记语言通常是一套成对出现的标记标签组成，开始标签、内容和结束标签称为HTML元素。
<! DOCTYPE html>：声明html5文档。<html></html>：html 页面的根元素，包含的是完整的html页面。<head></head>：头部元素，包含网页编码格式和标题等信息。<meta charset = "utf-8">：放置头部元素中，设置默认编码方式为utf-8，否则标题会乱码。<title></title>：描述文档页面的标题。<body></body>：包含可见的页面内容（如文本、图像、视频、音频）<h1></h1>：定义一个内容一级标题，可以定义<h1>…<h6>一级至六级标题。<p></p>：定义一个段落。
<!--注释内容-->：使用Pycharm编辑器，快捷键为Ctrl+C。
基础示例：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML学习</title> </head> <body> <!--定义标题--> <h1>一级标题</h1> <h2>二级标题</h2> <!--<br> 插入单个拆行--> <p>HTML<br>CSS</p> <!--<hr> 定义水平分割线--> <hr> </body> </html>
HTML 字符实体
文字标签
<b></b>或<strong></strong>：加粗字体。<i></i>：斜体字。<big></big>和<small></small>：加大和缩小字体。<sub></sub>和<sup></sup>：下标和上标字体。
<font color="" size=""></font>：设置颜色和字体，可以使用英文单词、rgb和十六进制三种方式设置颜色，字体大小范围为1～7。
超链接标签
<a href="">...</a>：href参数存放连接，…存放链接文本，点击可以跳转另一个网站。除此之外，还可以用href做弹出框，比如<a href="Javascript:void(0)" onclick="alert('人生苦短，我爱Python')">弹出框</a>。
图像标签
<img src="" title="" alt="" width="" height="">：src参数传入图片路径，title设置鼠标悬浮标题，alt设置图片替换文本，如图片资源加载不出来，可显示文本，宽度和高度可默认设置。
综合示例：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML 文字标签、超连接、图像</title> </head> <body> <!--文字格式化：加粗和斜体等--> 使用<b>加粗</b><strong>，再一次加粗，</strong><i>这个文本是斜体</i> <br> <big>放大</big><small>缩小</small> <br> 展示上下标：<sub>下标</sub><sup>上标</sup> <!--三种设置颜色方式：单词、rgb、十六进制--> <br> <font color="black" size="4">坚持学习！</font> <font color="rgb(184,134,11)" size="5">坚持学习！</font> <font color="#999999" size="7">坚持学习！</font> <hr> <a href="https://www.runoob.com">菜鸟教程</a> <a href="Javascript:void(0)" onclick="alert('人生苦短，我爱Python')">弹出框</a> <hr> <!--默认展示图片宽高--> <img src="1.jpg"> <!--设置图片的替换文本，未找到路径，则加载文本--> <img src="11.jpg" alt="白鹿"> <!--指定图片宽高--> <img src="1.jpg" width="400px" height="200px"> <!--设置标题，鼠标悬浮可显示标题--> <img src="1.jpg" title="白鹿" width="400px" height="300px"> </body> </html>
列表标签
<ul></ul>：定义无序列表的父标签，默认为实心圆圈，square（方框）、circle（空心圆）、disc（实心圆）。<ol></ol>：定义有序列表的父标签。<li></li>：定义子列表标签展示。
块标签
<div></div>：块级元素，一般作为网页不同区域划分。<span></span>：内联元素，用来组合文档中的行内元素，同行显示。
列表和块示例：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表和块标签</title> </head> <body> <p>Python 学习路线</p> <ul type="square"> <li>Python 基础知识</li> <li>Python 数据分析</li> <li>Python 网络爬虫</li> <li>Python 编程开发</li> <li>Python 自动化办公</li> </ul> <!--<div> 将内容展示同行--> <div>Mysql 必备知识 </div> <ol> <li>Mysql 基础知识</li> <li>Mysql 增删改查</li> <li>Mysql 存储过程</li> </ol> <!--<span> 将内容组合成同行--> <span>Mysql</span> <span>Python</span> </body> </html>
表格标签
<table></table> 为表格标签，有如下基本属性：
<tr></tr>：子标签，tr 是 table row 的缩写，表示表格的一行。<td></td>：子标签，td 是 table data 的缩写，表示表格的数据单元格<th></th>：子标签，th 是 table header的缩写，表示表格的表头单元格。<caption></caption>：子标签，设置表格的标题。border：设置表格的边框。bordercolor：设置边框的颜色。width：设置表格的宽度。
height：设置表格的高度。align：设置文本内容的对齐方式（left、right、center）。celspaing：设置单元格的间隔
表格示例：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <p>制作一个表格</p> <table border="1" bordercolor="blue" align="center"> <caption>学习路线</caption> <tr> <th>tool</th> <th>info</th> </tr> <tr> <td>Python</td> <td>数据分析</td> </tr> <tr> <td>Mysql</td> <td>增删改查</td> </tr> </table> </body> </html>
表单标签
HTML 表单用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。在实际生活中，最常见的就是问卷调查和账号登入。
语法为<form><form>，常见属性如下：
- action：提交到服务器的地址。
- method：提交采用的方式（get和post）。
<label></label>：元素用于为表单元素添加标签，提高可访问性。
<input>：元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
type="text"：文本输入项。type="password"：密码输入项。type="radio"：单选输入项。type="checkbox"：多选输入项。type="email"：邮箱输入项。type="file"：文件输入项。type="button"：普通按钮。
type="submit"：提交按钮。type="reset"：重置按钮。
<select></select>：下拉列表项，子标签为<option></option>。
表单示例：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <h3>表单</h3> <form action="/" method="post"> <!--文本输入框--> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br> <!--密码输入框--> <label for="psd">密码:</label> <input type="password" id="psd" name="psd" size="20" required><br> <!--单选按钮--> <label>性别:</label> <label for="male">男</label> <input type="radio" id="male" name="gender" checked> <label for="female">女</label> <input type="radio" id="female" name="gender"><br> <!--多选按钮--> 技能:<input type="checkbox">Python <input type="checkbox">Mysql <input type="checkbox">Java <input type="checkbox">C++<br> <!--下拉列表--> <label for="country">国家:</label> <select id="country" name="country"> <option value="cn">中国</option> <option value="usa">美国</option> <option value="japan">日本</option> </select><br> <!--邮箱输入--> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br> <!--文件输入--> <label for="file">文件:</label> <input type="file" id="file" name="file"><br> <!--提交按钮--> <input type="submit" value="提交"> <!--重置按钮--> <input type="reset" value="重置"> </form> </body> </html>
音频和视频标签
<audio></audio>为音频标签，<video></video>为音频标签，常见属性值如下：
- src：文件路径。
- autoplay：自动播放。
- controls：显示进度控制条。
- loop：循环播放。
- width和height：宽度和高度。
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>音频和视频标签</title> </head> <body> <h3>姑娘你别哭泣</h3> <audio src="柯柯柯啊 - 姑娘别哭泣.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio> <h3>凡人修仙80集预告</h3> <video src="凡人修仙80集预告.mp4" width="500px" height="300px" autoplay="autoplay" controls="controls" loop="loop"></video> </body> </html>
框架标签
<frameset></frameset>为框架标签，可以将多个HTML合并在一起，常见的合并有横向、纵向和混合合并，属性如下：
- rows：按照行横向合并，根据填写的百分比进行划分合并。
- cols：按照列纵向合并，根据填写的百分比进行划分合并。
<frame src="">：子标签，用户显示具体的页面内容，src为文件路径。
