目的 ：开发一个网站
-前端开发：html 、css、javaScript
-web框架：接收请求处理
-mysql数据库：存储数据的地方
快速上手：
基于Flask web框架让你快速搭建一个网站出来
学习：
基于Django框架
初识HTML
编码方式
<meta charset="UTF-8">
html结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>常用标签
1.标题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3></body>
</html>2.div和span
<div> 内容</div> <span>adad</span>
- div ，一个标签占一整行 【块级标签】
- span，内容多大占多大 【行级标签、内敛标签】
3.超链接
-可以跳转到其他网站
-也可以跳转到自己网站的其他地址
<a href="https://www.bilibili.com/">bilibili</a><a href="https://www.bilibili.com/v/douga/?spm_id_from=333.1007.0.0">哔哩哔哩动画界面</a><a href="/get/news">查看更多</a>
4.显示图片
< img src="图片地址" />
直接显示别人的地址（防盗链）
<img src="https://cn.bing.com/images/search?view=detailV2&ccid=agDelZtY&id=621D57D2218F2AE421464C32CD27F8430700543A&thid=OIP.agDelZtYARCHk7NE7ymIrQHaEx&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.6a00de959b5801108793b344ef2988ad%3frik%3dOlQAB0P4J80yTA%26riu%3dhttp%253a%252f%252fimg95.699pic.com%252fphoto%252f50070%252f5999.jpg_wh860.jpg%26ehk%3dnUrNDlAkDzUbcZyyRIpSCFDeeTPjyJnuR14jdQ%252fbE2w%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=554&expw=860&q=%e4%b8%96%e7%95%8c%e6%97%85%e6%b8%b8%e8%83%9c%e5%9c%b0&simid=608024751207230408&FORM=IRPRST&ck=AB34823F4C4354033A14752834B143E6&selectedIndex=1&itb=0">
显示自己的图片
<img src="自己图片的地址">
显示自己的图片：
-自己项目中创建的static目录中
-在页面上引用图片
<img src="/static/0.png" />
关于设置图片的高度和宽度
< img src="图片地址" style="height :100px; width: 200px"/>
划分
-块级标签
<h1></h1>
<div></div>
-行内标签
<span></span>
<a></a>
<img />
嵌套
<div>
<span>xxx</span>
<img/>
<a></a>
</div>
5.列表
无序列表
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>
有序列表
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
6.表格
<table>
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr>
</thead>
<tbody>
<tr> <td>1</td> <td>张三</td> <td>26</td></tr>
<tr> <td> 2</td> <td>李四</td> <td>19</td></tr>
</tbody>
</table>
7.input系列
<input type="text"/>
<input type="password"/>
<input type="file"/>
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<input type="checkbox">篮球
<input type ="checkbox">足球
<input type ="checkbox">乒乓球
<input type="button" value="提交"> -->普通按钮
<input type = "submit" value="提交"> -->提交按钮
8.下拉框
<select>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select>
9.多行文本输入框
<textarea></textarea>
10.表单与提交
<form method="get" action="/xxx/xxx/xxx">
用户名 :<input type="text" name="uu'/>
密码：<input type="password" name="pp"/>
<input type="submit" value="按钮名" >
</form>
初识CSS
css 专门用来美化标签
-基础css 写简单界面
-模块，调试和修改
快速了解
<img src="..." style="height :100px"/>
<div style="color: red;">中国联通</div>
1.css应用方式
1.在标签上
<img src="..." style="height :100px"/>
<div style="color: red;">中国联通</div>
2.在head标签中写style标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;}</style>
</head>
<body>
<h1 class="c1">用户登录</h1>
</body>
</html>
3.在css文件中定义样式
.c1{height: 100px;color: red;
}
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=".\common.css"> </head> <body> <h1 class="c1">用户登录</h1> </body> </html>
2.选择器
-ID选择器
#c1{
}
<div id="c1"></div>
-类选择器(最多)
.c1{
}
<div class='c1' ></div>
-标签选择器
div{
}
<div>xxx</div>
-属性选择器
input [type='text' ]{
border:1px solid red;
}
.v1[ xx="123"]{
color：gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">a</div>
<div class="v1" xx="456">b</div>
-后代选择器
.yy li{
color: pink;
}
.yy > a{
color: blue;
}
<div class="yy"><a>百度</a><div><a>谷歌</a></div><ul><li>中国</li><li>美国</li><li>苏联</li></ul></div>
3.样式
1.高度和宽度
height : 300px
width : 500px
注意事项：
·宽度 支持百分比
·行内标签：默认无效
·块级标签：默认有效
2.字体设置
-颜色
-大小
-加粗
-字体
-水平居中
-垂直居中
color : green;
font-size: 50px;
font-weight:600;
font-family:Microsoft Yahei;
text-align : center
line-height: 59px
