一，目录
1. HTML ： html就是一套浏览器认识的规则，主要用20个左右的标签
对于开发者来说：学习html规则
1. 本地测试：（1）找到html文件，直接浏览器方式打开，不用socket；（2），pycharm可以直接打开html
2. 编写html文件:
---doctype对应关系
---HTML 标签<html>XXXXX</html>，内部可以添加属性
---Lang="XXX",标签内部属性
3. 标签分类：
---自闭和标签 <meta charset="UTF-8"> 比较少
---主动闭合标签 title>网页名</title>
4. Head标签：
---<meta ->编码，跳转，刷新，关键字，描述，IE兼容
---title标签
--- <link /> 标签图标
---<style />
---<script>
7. <body>标签：
---图标， > <
---P标签（段落），段落之间有间距
---Br标签，用来换行
---<H>标签， 设置字体大小
---<span> 行内标签（区别于块级标签） 只能选择字体范围，不能选择整行
---<div> 块级标签，用的最多。
---标签之间可以嵌套；标签存在的意义，可以用CSS,JS操作。
---input 系列 + form标签
input type = "text" -name属性； ‘value = XXX默认值
input type = ‘password’ -name属性
input type = ‘submit’ - value=‘提交’ 提交按钮
input type = ‘button’ -value=‘登录’按钮
input type = ‘radio‘ -单选框value，name属性（name属性互斥）
input type = ‘checkbox‘ -复选框 Value， name属性，可以获得列表
input type = ‘file‘ 上传文件，依赖form表单的属性‘’
input type = ‘reset’ 重置
<textarea>默认值</textarea> 输入比较多的内容
<select><option> 下拉框选择 select = selected 默认选项；multiple = multiple可以多选；
8. a 标签
---跳转
---锚，就是点击目录可以跳转； herf = ‘#某个标签的ID’， 标签的ID 不允许重复
9. img标签：
---src
---alt
---title
10. list列表标签：
---UL ==> LI 一个列表，前面都是点。
---OL ==> LI 一个列表，前面用数字排序
---DL ==DT,DD DT是上层目录，dd是下层目录
11. table表格标签：
---tbody 表身
---thead 表头
--- colspan = X，行合并X行； rowspan= X， 列合并X行
12. label 标签 用于电子文字，是的关联的标签获取光标
13. fieldset标签： legend 在外围添加一个方框；
14. <div>
15. <h>
16. <span>
开发后台程序：
1，写HTML文件（充当模板的作用）
2， 去数据库获取数据然后替换到html的指定位置（web框架）
2. CSS ：颜色，位置之类的相关操作。。。
----标签的style属性
---写在head里面，style标签中写样式
----id选择器，ID可以给标签设置属性
---class选择器，选择其他的标签并class复制
---标签选择器： div{...}, 所有的div都会设置成此样式；
---层级选择器（空格）==》.c1,.c2 div{}
---组合选择器（逗号） ==》 c1,.c2,div{}
---属性选择器： 对选着到的标签通过属性再进行一次筛选；
---css样式可以单独写在css文件中，然后<link rel=‘stylesheet‘ herf= ‘css样式文件‘>
3。 注释 /* */
4. 边框 ==》boarder: 1px solid color; 宽度，样式，颜色
5. 背景
6.float 让标签漂浮，块级标签可以堆叠
7. display： display: inline 标签都变成行内标签;
display: block 块级标签；
display：inline-block，默认行内标签属性，但是可以设置；
displasy：none， 可以显示可以关闭，类似视频网站开灯关灯
行内标签无法设置宽度和高度，padding，margin；块级标签可以设置；
8. padding， margin（0，auto），内边距，外边距
margin（0，auto）：代表div模块顶边处理，距离上下的边距为0，左右是auto居中
9. text-align
10. height， width， line-height，color，font-size， font-weight（字体加粗），text-align 水平居中
原文地址：https://www.cnblogs.com/spencersun/p/9402563.html