一、HTML基础
HTML
1、概念理解：就是一套规则，一套浏览器能够识别的规则
2、作为开发者，需要学习的内容：
- 学习html规则；
- 开发后台程序：
- -写html文件（就是作为模块）
- -数据库获取数据，然后替换到html文件的指定位置（web框架实现这种功能）
3、本地测试方法：
- -找到html文件的路径，直接浏览器打开
- -pycharm直接打开测试
4、编写html文件
- -<!DOCTYPE>标签就是一种规定的标准范式
- -html标签：标签内部可以写属性
- -注释的书写规范：<!-- 注释的内容 -->
tips：html标签只能有一个
5、标签的分类
- 自闭合标签:<meta>等
- 主动闭合标签：<a></a>等
6、head标签内的各类标签描述：
注意：head标签里面嵌套的标签和内容时不显示在浏览器界面的，相当于人的大脑，外面不能直观的看到大脑内部构造，但是浏览器可以识别
<meta>标签功能（meta标签一般不用来做跳转，一般都是用js；网页跳转在应急情况下可以在这里做跳转）：
- 编码：<meta charset="utf8" />
- 跳转：<meta http-equiv="Refresh" Content="刷新时间（秒）;Url=IP地址" />
- 刷新：<meta http-equiv="Refresh" Content="刷新时间（秒）" />
- IE浏览器兼容：<meta http-equiv="X-UA-Copmatible" Content="IE=EmulateIE8" /> 或者简写：<meta http-equiv="X-UA-Copmatible" Content="IE=IE8;IE=IE8;" />
- 关键字：<meta name="keywords" Content="搜索引擎搜索网站的时候提取的关键信息" />
- 描述：<meta name="description" Content="网站的描述信息" />
<title>标签：
<link />标签，编辑图标：<link rel="shortcot icon" href="小图标地址">，注意，如果rel="stylesheet"就编程引用css样式了。
<style />标签
<script />标签
7、body标签
-图标， 空格符，>大于号，<小于号，（空格符等符号的表示形式：https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html）
-<br /> 换行标签
-标签分类：
a、块级标签：<h1>,<p>,<div>等等，有特性
b、行内标签：<span>标签，不带特性——》可以通过css来描绘特性
-标签之间可以嵌套，就会出现父子关系
-标签存在的意义：定位操作，js,css操作简单
ps：chorme谷歌浏览器审查元素操作（题外tips：windows界面mstsc远程连接）
-定位
-查看样式
<form>标签中的<input>标签输入内容后，要指定form属性name，返回给后台的时候 是以字典的形式
在form表单的时候，提交表单默认用submit，button需要后期js才能具有相应提交功能
<form action="提交到后台的地方",method="POST/GET">，其中get提交的数据是在url上面以明文的形式提交，post提交会把数据放在内容里面提交到后台，两种方法没有安全不安全的说法
注意：form提交的内容只有input，其他的类似于<div>里面的内容都不会提交达到后台
input系列：
input type="text" name="" value=""
input type="password" name="" value=""
input type="button" name="" value=""
input type="submit" name="" value=""-提交按钮，表单
input type="radio" name="相同的名字" value="num" checked="checked" ，单选框，checked为默认选择，保证只有一个选项,value保证提交给后台的是哪个
input type="checkbox" name="" value="num" ，name属性相同，value不同，后台可以批量获取value数据
inout type="file" name="文件名",依赖form表单的一个属性enctype="multipart/form-data",而且是一点一点的传送文件，如果form表单没有这个属性，点击提交后不会上传的
input type="reset" value="重置"，重置按钮
<textarea name="">"默认值填写处"</textarea>，多行文本标签，也可以提交到后台
<select name="" size="num"(默认显示多少行) multiple="multiple"(可以多选)>
<optgroup lable="">...</optgroup>
<option value="1" selected="selected(默认选项)">"内容"</option>
<option value="2">"内容"</option>
<option value="3">"内容"</option>
</select>,下拉框范式选择,也可以提交到后台
总结：能提交到后台的标签有：input,textarea,select；
<a href="" target="">...</a> ，a标签是行内标签，
-跳转
-锚点 例如跳转到当前页面的指定区域，<a href="#+某个标签的id"></a> 注意：id不能重复
<img src="图片存放位置" style="height:200px;weitch:200px;" alt="" title="">标签,如果没有指定路径，alt会显示出来，如果有title，鼠标放图片上面会显示里面内容,img标签是自闭合标签
<ul>
<li>...</li>
</ul> 列表标签1,前面有.号显示编排列表
<ol>
<li>...</li>
</ol> 列表标签2,前面有数字号显示编排列表
<dl>
<dt>...</dt>
<dd>...</dd>
<dl> 列表标签3，其中dt显示的标题，dd显示的是编排的内容
以上列表格式用的不多，后续会用css进行装饰更方便
<table>标签：
<table border="边框大小，例如：1">
<thead>
<tr>
<th>表头第一列第一行...</th>
<th>表头第一列第二行...</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="横向占用几个单元表格" rowspan="纵向占几个单元表格">第一行第一列...</td>
<td>第一行第二列...</td>
</tr>
<tr>
<td>第二行第一列...</td>
<td>第二行第二列...</td>
</tr>
</tbody>
</table>
其中colspan属性可以用来横向合并单元格，默认是=1，当行后面必须减去相应的列数，rowspan属性可以用来纵向合并单元格，默认是=1，下面行必须减去相应的列数，
tips:pycharm里面的code下面的rearrange code可以帮助进行代码的编排缩进，实践没卵用
lable标签用于点击文件，使得关联的标签获取光标：
<lable for="要创建关联的标签的id">用户名：</lable> ,注意：lable标签中for引用的是id不是name
例如：<input type="text" id="username" name="user" />
fieldset标签主要用来做登陆界面用：(用的很少)
<fieldset>
<legend>登陆</legend>
<lable for="user">用户名：</lable>
<input id="user" name="username" type="text" />
<br />
<lable for="pwd">用户名：</lable>
<input id="pwd" name="password" type="password" />
</fieldset>
tips：编辑html的工具推荐：Sublime Text
