一、HTML基础

HTML

1、概念理解：就是一套规则，一套浏览器能够识别的规则

2、作为开发者，需要学习的内容：

• 学习html规则；
• 开发后台程序：

1. 　　-写html文件（就是作为模块）
2. 　　-数据库获取数据，然后替换到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标签
　　-图标，&nbsp;空格符，&gt;大于号，&lt;小于号，（空格符等符号的表示形式：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