基础框架
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为文件路径。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
