一：HTML基础
（1）定义:HTML是一种创建网页的标记语言
PS：
（1）本质是一种浏览器可识别的规则 浏览器按照我们的标记呈现出不同的渲染效果
（2）文件后缀名 .html/htm
（2）HTML不是编程语言 其属于标记语言 用来创建网页
（3）HTML文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
<head></head>:其一般不是给用户看的 主要定义一些配置 给浏览器看的
<body></body>:其将标记语言呈现给用户看
PS:
（1）上述title:表示网页的标题
（2）charset:表示网页编码
（3）标题内容可以更改 自己更改为什么 显示出来的结果即为什么
（4）HTML打开的方式
（1）可以找到HTML标记语言所在的路径通过浏览器打开
（2）可以再编辑器中通过快捷方式直接打开
（5）HTML注释:
<!---单行注释--->
<!----
注释 1
注释 2
----->
二：HTML常用标签
（1）标签的分类:
（1）按照标签的个数分类
（1）单标签（自闭和标签） </mag>
（2）双标签:<a></a> <p></p>
（2）按照标签所占据的页面面积
（1）块标签：独占浏览器一行<div></div> ,<span></span> ,<p></p>
PS:
（1）块标签可以修改长度
（2）除了P标签之外的块标签之内可以再次嵌套块标签
（3）块标签虽然不能嵌套块标签 但是可以嵌套行标签
（2）行标签：自身文本有多少就占据多少单元格<b>加粗</b>,<u>下划线</u>,<i>斜体</i>，<s>删除</s>
（2）常用的标签
（1）head内常用标签
（1）link:调用外部css样式
（2）style：用来控制样式的 支持写CSS代码
（3）title：窗口标题
（4）script:连接外部js代码 支持写css代码
（5）meta:
（1）http-equiv:主要向浏览器传输一些值 其中包含content参数 主要内容就是各个参数的变量
（2）name：主要描述name与content之间的关系 content可以通过name在搜索引擎中进行信息查找和分类
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SR</title> <!----定义css 给h1以及s定义颜色----> <style type="text/css">h1{color: antiquewhite} s{color: brown}</style> <!----调用css ----> <link rel="stylesheet" href="my_css.css"> <script type="text/css" src="my_jss.js"></script> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> </head> <body> </body> </html>
（2）body内常用的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SR</title> </head> <body> <h1>最大的标题标签</h1> <s>删除标签</s> <i>斜体标签</i> <u>下划线标签</u> <b>加粗标签</b> <br> 换行标签 <hr>水平线标签 </body> </html>
（1）符号标签
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--加空格---> <p>迟迟钟鼓初长夜 耿耿星河 欲曙天</p> <p>a > b 用符号表示大于></p> <p>a < b 用符号表示小于<</p> <p>我希望赚很多钱¥100000000000000000000000;</p> <p>符号©</p> <p>符号®</p> </body> </html>
（2）img标签:
作用：网页中上传图片
<!--<img src="图片存放路径" alt="图片不能正常加载时候进行提示" title="鼠标在图片上会有提示信息" width="宽度" height="高度">--> <!--例如---> <img src="photo.jpg" height="217" title="图片信息提示" alt="错误信息提示">
PS:
（1）src来源方式可为图片存放路径
（2）可为url地址
（3）可为二进制
（3）a标签
（1）作用:一个网页可以指向另外一个网页
例如
<a href="www.baidu.com" target="_blank">点击跳转</a>
PS：
（1）href后面跟目标网址
（2）如果该链接没有被点击过那么中间的信息默认为蓝色 点击之后默认为紫色
（3）其默认每次都会在当前窗口进行跳转
（4）如果将target后面更改为_blank则打开新的窗口进行跳转
（2）锚点功能:通过点击可以跳转到指定位置
例如;
<a href="#miao">去找喵星人</a> <a name="miao"></a>
PS：标签三要素
（1）id：定义标签的唯一id 在一个html中应该唯一
（2）class：为html定义一个或者多个类
（3）style：规定元素内的样式
三：列表/表格标签
（1）列表标签
（1）无序列表
例如:
<ul type="disc"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
有序列表:
例如：
<ol type="1" start="2"> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
start:表示列表其实位置为多少
（2）表格标签:
例如：
<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>SR</td> <td>18</td> <td>music</td> </tr> </tbody> <tbody> <tr> <td>河马</td> <td>78</td> <td>sleep</td> </tr> </tbody> </table>
PS：
（1）thead：表头
（2）tbody：表身
（3）tr：表示一行
（4）th/td表示文本
（5）建议threa中使用th可以加粗
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
四：form表单
作用：接收用户的输入（输入 选择 上传）并将其发生给后端
例如:
<form action=""></form>
PS:action
（1）action表示提交数据的目的地址
（1）如果不写默认提交到当前窗口所在的路径
（2）也可以写全路径（https://www.baidu.com/）
（3）路径后缀写index