课程介绍
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
页面结构
<!--注释-->
<!DOCTYPE html>
<!--html标签，双标签，是最大的标签所有标签都在这个
标签里也称之为跟标签
lang=“en”：可以删除，主要是针对浏览器内部语言进行辅助
不影响开发
-->
<html lang="en">
<!--head：头标签，主要存放设置信息，例如页面编码模式，引入js文件，css文件-->
<head>
<!--meta：设置页面的编码格式 utf-8-->
<meta charset="UTF-8">
<!--title：标题标签-->
<title>我的第一个页面</title>
</head>
<!--bady：身体标签，主体标签都要写到baby标签里-->
<body>
hello,world
</body>
</html>
页面规范
后缀名：.html
浏览器解析页面
-
html标签不区分大小写，建议小写
<h1>我是标签1</h1> <H1>我还是标签1</H1> 双标签必须有闭合标签/
-
标签属性值要加引号
<!--align="center" 表示居中--> <h1 align="center">我是标签1</h1>
常用标签
标题标签
h1~h6
<!--tab 补全标签
ctrl+d 复制一行-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
特点：
- 默认有字体式样（字体粗细大小）
- 独占一行
应用场景：新闻标题
查看代码f12到elements在到最左边
[图片上传失败...(image-ff792a-1596804543185)]
段落标签
[图片上传失败...(image-24e338-1596804543185)]
< p>内容< p>
有间隔，自动换行
实体字符
空格  ；
小于号< < ;
-
大于号> > ;
应用场景 层级关系
换行标签
< br >
水平线标签
< hr > 一般使用div设置边框会比hr适用的地方更多
文本修饰标签
i，em：倾斜标签
b，strong ：加粗
u 表示下划线
del 表示删除线
<body>
<!--倾斜i或者em-->
<em>中公教育</em> > <i>u就业</i>
<!--加粗 b strong-->
<b>中公教育</b> > <strong>u就业</strong>
<!--添加下划线 u-->
<u>中公教育</u> > <u>u就业</u>
<!--删除线 del-->
<del>中公教育</del> > <u>u就业</u>
</body>
div标签和span标签
- 没有任何的样式
- div 独占一行，span宽度与内容多少有关
- div用于大的页面布局
- span用于小的内容修改
- 应用场景：页面的布局
之前的布局：table
<body>
hello
<!--div独占一行-->
<div>
hello
</div>
<!--span：宽度跟内容多少有关-->
<span>
hello
</span>
hello
</body>
<div>
<div>我是图片</div>
<div>￥299.0</div>
<div>UR2020秋季新品女装清熟<span style="color: brown">方领</span>修身针织<span style="color: brown">连衣裙</span></div>
</div>
[图片上传失败...(image-351db5-1596804543185)]
- 注意：几乎所有标签都有style属性
图片标签
img 图片标签
scr 加载路径
alt 图片的描述信息，图片加载失败后的显示内容
title 标题，但鼠标悬停在图片上显示的内容
width 图片宽度
height 图片的高度
<body>
<!--img 图片标签
scr 加载路径
alt 图片的描述信息，图片加载失败后的显示内容
title 标题，但鼠标悬停在图片上显示的内容
width 图片宽度
height 图片的高度
-->
<img src="../image/1.jpg" alt="lsp" title="lsp" width="125px" height="200px">
</body>
超链接标签
- < a > 超链接标签
- href 跳转的目标路径
- target="_blank" 从新的页面打开
<body>
<!--a 超链接标签
href 跳转的目标路径
target="_blank" 从新的页面打开-->
<a href="https://www.baidu.com" target="_blank">哈哈哈哈点我一下你就知道</a>
<a href="demo9div.html" target="_blank">demo9</a>
</body>
锚点定位
- 实现锚点定位功能：
- 1.给目标元素添加id属性
- 2.在a标签的href 中使用“#id值”的方式进行定位
拓展：几乎所有的标签都有id style 属性
- 实现跳转到顶部
- 顶部设置一个新空的div添加id值
- 底部添加跳转< a >href #id值
<body>
<!--
实现锚点定位功能：
1.给目标元素添加id属性
2.在a标签的href 中使用“#id值”的方式进行定位
拓展：几乎所有的标签都有id style 属性-->
<div id="item4"></div>
<a href="#item1">到一层</a>
<a href="#item2">到二层</a>
<a href="#item3">到三层</a>
<div id="item1" style="height: 1000px;background-color:red">一层楼</div>
<div id="item2" style="height: 1000px;background-color:blue">二层楼</div>
<div id="item3" style="height: 1000px;background-color:green">三层楼</div>
</body>
<a href="#item4">顶层</a>
- 从其他页面定位到页面摸个位置
- herf 路径#id值
<body>
<a href="demo12%20锚点定位.html#item2">跳转2层</a>
</body>
列表标签
-
无序列表
- ul 无序列表标签 li 列表行标签
- type 指定显示效果：默认 实心圆形
circe 空心圆形
square 方块 - 应用场景：新闻页面
<body> <!--ul 无序列表标签 li 列表行标签 type 指定显示效果： 默认 实心圆形 circe 空心圆形 square 方块--> <ul type="circle"> <li>pthon</li> <li>ui</li> <li>大前端</li> <li>java</li> </ul> -
有序列表
- ol 有序列表
- type 序列的编号
<body> <!--ol 有序列表 type 序列的编号--> <ol type="I"> <li>湖人</li> <li>快船</li> <li>爵士</li> <li>骑士</li> </ol> </body>应用场景：热词榜单，排名等
-
自定义列表
- dl 自定义列表
dt 表头
dd 行
- dl 自定义列表
<body>
<dl>
<dt>python学科</dt>
<dd>python基础</dd>
<dd>数据库</dd>
<dd>linux</dd>
<dd>pythonweb</dd>
<dt>java学科</dt>
<dd>java基础</dd>
<dd>ssm</dd>
<dd>javaee</dd>
</dl>
<dl>
<dt>python</dt>
<dd>
<ul>
<li>环境安装</li>
<li>基本语法
<ol>
<li>分支结构</li>
<li>循环结构</li>
<li>函数</li>
</ol>
</li>
<li>数据结构
<ol>
<li>数字类型</li>
<li>字符串类型</li>
<li>列表类型</li>
<li>字典类型</li>
</ol>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>pythonweb</dt>
<dd>
<ul>
<li>前端页面开发</li>
<li>后台开发</li>
</ul>
</dd>
</dl>
<img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200730161741001.png" alt="image-20200730161741001" style="zoom:100%;" />
列表的可嵌套
表格标签
- table 表格标签
tr 行标签
td 列标签 - caption 设置标题
<!--
table 表格标签
tr 行标签
td 列标签
caption 设置标题
boder 边框线的大小
cellpadding 内容到边框的距离
cellspacing 每个边框之间的距离
width 宽度
height 高度
-->
<table border="1px" cellpadding="1px" cellspacing="0px" width="200px" height="100px">
<caption>python班信息表</caption>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>专业</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>python</td>
</tr>
</table>
-
table 标签的属性
- boder 边框线的大小
- cellpadding 内容到边框的距离
- cellspacing 每个边框之间的距离
- width 宽度
- height 高度
-
tr 属性
align：内容的水平对齐 left center right
-
valign：内容的竖直方向对齐 top middle bottom
<table border="1px" cellpadding="1px" cellspacing="0px" width="200px" height="120px"> <caption>信息表</caption> <tr align="center" valign="top"> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>专业</td> </tr> <tr align="center" valign="bottom"> <td>张三</td> <td>20</td> <td>男</td> <td>python</td> </tr> </table>
-
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" 具有提交功能的按钮
<body>
<!--表单
书写格式form ，没有样式用于提交
action 提交路径
method 提交方式 get 和post
-->
<form action="https://www.baidu.com" >
<p>
<!-- type=“text” 表示将input解析成文本框
placeholder 设置提示语
readonly 设置只读方式
name 给input标签起一个名字 作用用于文本框输入值的提交
value 给文本框这是值，当数据回显时候使用
注意：提交时信息以键值对的形式提交 name属性的值=value属性的值
username=zs
url（网址）=
网络协议
域名
参数-->
用户名：<input type="text" placeholder="请设置用户名" name="username" value="">
</p>
<p>
<!-- type="password" 密码框
多个键值对之间用&连接
form 表单默认的提交方式是get
特点：将提交内容一键值对的方式拼接到url上
因此用get方式提交是不安全的-->
密码：<input type="password" name="pwd" value="">
</p>
<p>
<!-- type="radio" 单选按钮，name值相同才能单选
checked 设置默认选择状态-->
性别：<label for="nan">
<input id="nan" type="radio" name="gender" value="man" checked>男
</label>
<label for="nv">
<input id="nv" type="radio" name="gender" value="woman">女
</label>
</p>
<p>
<!--type=“checkbox” 多选框 -->
爱好：<input type="checkbox" name="hobby" value="somking">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="tt">烫头
</p>
<p>
<!--上传文件：三要素
1.method=“post”
2.enctype=“multipart/form-data”
3.type=“file”-->
头像：<input type="file">
</p>
<p>
<!--隐藏域，在也页面上不显示
当某些内容必须要提交到后台并且不能让用户看到
type=“hidden”
-->
<input type="hidden" name="time" value="12:00">
</p>
<p>
<!--select 下拉选项-->
你喜欢的城市：
<select name="city">
<option value="1">--请选择城市--</option>
<option value="gz">广州</option>
<option value="fs">佛山</option>
<option value="zj">湛江</option>
<option value="sz">深圳</option>
</select>
</p>
<p>
<!-- type="button" 按钮
disabled 设置按钮禁用-->
<input type="button" value="芜湖" disabled onclick="alert('我是弹框');">
</p>
<p>
<!--type="reset" 重置按钮-->
<input type="reset">
</p>
<p>
<!--button：写在表单中有提交作用，不在表单中就是普通按钮-->
<button>我是表单中的按钮，有提交作用</button>
</p>
自我介绍：<br>
<!--textarea 定义文本域标签
placeholder="请自我介绍..."提示文字
-->
<textarea name="" id="" cols="30" rows="10" placeholder="请自我介绍..."></textarea>
<p>
<!--type="submit" 具有提交功能的按钮 -->
<input type="submit" value="提交" style="width: 200px;height: 30px">
</p>
</form>
<button>表单外的按钮</button>
</body>
标签分类
- 单标签
- 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、
- 双标签一般可以写内容
