课程介绍
1.前端：写网页(7天，掌握)
2.后台：Flask。Django。tornado(17天重点学会)
3.前端页面：电商首页搭建
4.搭建电商项目，OA系统
5.就业岗位：后台开发工程师，全栈开发工程师
网页开发
环境准备
浏览器：谷歌
编辑器
pycharm
HTML
html(hyper text mark-up language)：超文本标记语言
超文本：基本特征可以连接到其他的网页
标记：
注意：html语言是做网站开发的语言(与python等价)
HTML语言的书写格式
html语言：由内容和标签组成
内容：页面上显示的数据
标签：也叫标记
单标签： < br > < hr>
双标签：< 特定字符>内容< /特定字符>
标签属性：属性名称=值
第一个html
页面结构
我的第一个页面
hello,world
页面规范
后缀名：.html
浏览器解析页面
html标签不区分大小写，建议小写
我是标签1
我还是标签1
双标签必须有闭合标签/
标签属性值要加引号
我是标签1
常用标签
标题标签
h1~h6
我是h1
我是h2
我是h3
我是h4
我是h5
我是h6
特点：
默认有字体式样(字体粗细大小)
独占一行
应用场景：新闻标题
查看代码f12到elements在到最左边
[图片上传失败...(image-ff792a-1596804543185)]
段落标签
[图片上传失败...(image-24e338-1596804543185)]
< p>内容< p>
有间隔，自动换行
实体字符
空格  ；
小于号< < ;
大于号> > ;
应用场景 层级关系
换行标签
< br >
水平线标签
< hr > 一般使用div设置边框会比hr适用的地方更多
文本修饰标签
i，em：倾斜标签
b，strong ：加粗
u 表示下划线
del 表示删除线
中公教育 > u就业
中公教育> u就业
中公教育 > u就业
中公教育 > u就业
div标签和span标签
没有任何的样式
div 独占一行，span宽度与内容多少有关
div用于大的页面布局
span用于小的内容修改
应用场景：页面的布局
之前的布局：table
hello
hello
hello
hello
我是图片 ￥299.0 UR2020秋季新品女装清熟 方领修身针织 连衣裙
[图片上传失败...(image-351db5-1596804543185)]
注意：几乎所有标签都有style属性
图片标签
img 图片标签
scr 加载路径
alt 图片的描述信息，图片加载失败后的显示内容
title 标题，但鼠标悬停在图片上显示的内容
width 图片宽度
height 图片的高度
超链接标签
< a > 超链接标签
href 跳转的目标路径
target="_blank" 从新的页面打开
哈哈哈哈点我一下你就知道
demo9
锚点定位
实现锚点定位功能：
1.给目标元素添加id属性
2.在a标签的href 中使用“#id值”的方式进行定位
拓展：几乎所有的标签都有id style 属性
实现跳转到顶部
顶部设置一个新空的div添加id值
底部添加跳转< a >href #id值
到一层
到二层
到三层
一层楼 二层楼 三层楼
顶层
从其他页面定位到页面摸个位置
herf 路径#id值
跳转2层
列表标签
无序列表
ul 无序列表标签 li 列表行标签
type 指定显示效果：默认 实心圆形
circe 空心圆形
square 方块
应用场景：新闻页面
- pthon
- ui
- 大前端
- java
有序列表
ol 有序列表
type 序列的编号
- 湖人
- 快船
- 爵士
- 骑士
应用场景：热词榜单，排名等
自定义列表
dl 自定义列表
dt 表头
dd 行
- python学科
- python基础
- 数据库
- linux
- pythonweb java学科
- java基础
- ssm
- javaee
- python
-
- 环境安装
- 基本语法
- 分支结构
- 循环结构
- 函数
- 数据结构
- 数字类型
- 字符串类型
- 列表类型
- 字典类型
- pythonweb
-
- 前端页面开发
- 后台开发
列表的可嵌套
表格标签
table 表格标签
tr 行标签
td 列标签
caption 设置标题
| 姓名 | 年龄 | 性别 | 专业 |
| 张三 | 20 | 男 | python |
table 标签的属性
boder 边框线的大小
cellpadding 内容到边框的距离
cellspacing 每个边框之间的距离
width 宽度
height 高度
tr 属性
align：内容的水平对齐 left center right
valign：内容的竖直方向对齐 top middle bottom
| 姓名 | 年龄 | 性别 | 专业 |
| 张三 | 20 | 男 | python |
td 属性
align：内容的水平对齐 left center right
valign：内容的竖直方向对齐 top middle bottom
tr td 合并
colspan 跨列合并
rowspan 跨行合并
表单
form 表单标签 没有样式用于提交
action 提交路径
method 提交方式 get 和post
注意：以下所有声明 type属性的都是input标签中的type选项
type=“text” 表示将input解析成文本框
placeholder 设置提示语
readonly 设置只读方式
name 给input标签起一个名字 作用用于文本框输入值的提交
value 给文本框这是值，当数据回显时候使用
注意：提交时信息以键值对的形式提交 name属性的值=value属性的值
username=zs
url(网址)=
网络协议
域名
参数
type="password" 密码框 多个键值对之间用&连接
type="radio" 单选按钮，name值相同才能单选
checked 设置默认选择状态
type=“checkbox” 多选框
上传文件：三要素
1.method=“post”
2.enctype=“multipart/form-data”
3.type=“file”
隐藏域，在也页面上不显示
当某些内容必须要提交到后台并且不能让用户看到
type=“hidden
select 下拉选项 option 表示选项的内容
type="button" 按钮
type="reset" 重置按钮
button：写在表单中有提交作用，不在表单中就是普通按钮
textarea 定义文本域标签
placeholder="请自我介绍..."提示文字
type="submit" 具有提交功能的按钮
用户名：
密码：
性别：
男
女
爱好：抽烟
喝酒
烫头
头像：
你喜欢的城市：
--请选择城市--
广州
佛山
湛江
深圳
我是表单中的按钮，有提交作用
自我介绍：
表单外的按钮
标签分类
单标签
hr、br、img、input、meta。DOCTYPE
单标签不需要写内容
双标签
html、head、bady、title、h、p、div、span、b、serong、u、i、em、del、table、tr、td、caption、li、
双标签一般可以写内容