一、前端
一、前端
1.什么是前端？
任何直接能够跟用户打交道的交互界面都可以称之为前端
2.为什么要学前端？
因为我们是Python全栈开发
二、软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
三、浏览器输入网址发送了几件事？
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
四、HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
文件的后缀名到底是给谁看的？
文件的后缀并不是给计算机看的，而仅仅是给人看的
五、HTML：超文本标记语言
二、第一个html文件
<!--html文档结构-->
<!DOCTYPE html>
<html>
<head>
<!--head存放的是用户看不到的，主要是给浏览器和搜索引擎看的-->
</head>
<body>
<h1>hello big baby</h1>
<a href="https://www.luffycity.com">give you some color to see see</a>
<img src="1.jpg" alt="">
</body>
</html>
<!--单行注释-->
<!--
多行注释
多行注释
多行注释
-->
三、head内常用标签
<!--
head内常用标签：
title:页面标题
style：定义内部样式表，写css代码
script:内部可以直接写js代码，也可以通过src属性引入外部js代码文件
link:通过href引入外部css文件
meta:定义网页原信息
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>这是我的第一个前端页面</title>
<style>
h1 {
color: green;
}
</style>
<script>
alert('hello baby')
</script>
<script src="myjs.js"></script>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>来了 老弟！</h1>
</body>
</html>
四、body基本标签
标签分类1：
双标签: h1-h6、p、a
自闭和标签: img、br、hr
标签分类2：
块儿级标签: div、h1-h6、p、hr、br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签: span 、a 、img、 i、 s、 b 、u
自身内容有多的就占多大
行内标签不能设置长宽
URL:是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
①h1~h6：标题标签
②p:段落标签
③<br> 换行
④<s>1999</s>现价999 删除
⑤<u>下划线</u>
⑥<i>斜体</i>
⑦<b>加粗</b>
⑧<hr> 分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基本标签</title>
</head>
<body>
我是正常文本
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>
鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波
<br> <!--换行-->
<s>1999</s>现价999 <!--删除-->
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>
<hr> <!--分割线-->
</body>
</html>
五、body特殊符号
body特殊符号：
空格
> >
< <
¥ ￥
© 版权
® 注册
& &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
  <!--空格-->
1< <!--小于-->
1> <!--大于-->
¥ <!--￥-->
© <!--版权©-->
® <!--注册®-->
</body>
</html>
六、body常用标签
常用标签(******)
div：用来定义一个块儿级元素，通过css样式为其赋予不同的表现。
span：用来定义内联(行内)元素，通过CSS样式为其赋予不同的表现。
区别：所谓块元素，是以另起一行开始渲染的元素，
行内元素则不需另起一行。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
p:段落标签
a：超链接标签（从一个网页指向一个目标的连接关系）
<a href=""></a>
<a href="http://www.baidu.com" target="_self">click me</a>
href:指定目标网页地址
target：
_blank:表示在新标签页中打开目标网页
_self:表示在当前标签页中打开目标网
img:
src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
alt当图片加载失败之后自动展示的提示信息
title鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div1
<div>
div2
<div>
div3
</div>
</div>
</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<a href="http://www.baidu.com" target="_self">click me</a>
<a href="http://www.baidu.com" target="_blank">click me</a>
<a href="" id="a1">top</a> <!--顶部-->
<a href="#a1">bottom</a> <!--底部-->
<div style="height: 1000px;background: green"></div> <!--高度和背景颜色-->
</body>
</html>
七、body列表标签
列表标签
ul:无序列表
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
ol：有序列表
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl：标题列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="disc">
<li>jason</li>
<li>tank</li>
<li>owen</li>
<li>egon</li>
</ul>
<ol type="1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
</body>
</html>
八、body表格标签
表格:
是一个二维数据空间，
一个表格由若干行组成，
一个行又有若干单元格组成，
单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。
表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
表格的基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>28</td>
<td rowspan="2">study</td>
</tr>
<tr>
<td>egon</td>
<td>25</td>
<!--<td>sleep</td>-->
</tr>
<tr>
<td>tank</td>
<!--<td>26</td>-->
<td colspan="2">eat</td>
</tr>
</tbody>
</table>
</body>
</html>
九、form表单
form:
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
属性：
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
input标签：
<input> 元素会根据不同的 type 属性，变化为多种形态。
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
checked 默认选中
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
select选择框：
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" >
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birth:<input type="date"></p>
<p>gender:
男<input type="radio" name="gender" >
女<input type="radio" name="gender" checked>
</p>
<p>hobby:
篮球<input type="checkbox">
足球<input type="checkbox" >
双色球<input type="checkbox">
</p>
<p>province默认单选:
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province多选：
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province1:
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳区</option>
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
<optgroup label="上海">
<option value="">青浦区</option>
<option value="">静安区</option>
<option value="">徐汇区</option>
</optgroup>
<optgroup label="深圳">
<option value="">南山区</option>
<option value="">宝安区</option>
<option value="">福田区</option>
</optgroup>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>file
<input type="file">
</p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button>button按钮</button>
</form>
</body>
</html>
