概要：
-
前端介绍
-
HTML文档结构（head内常用标签，body内标签）
-
HTML基本标签
-
HTML特殊符号
-
HTML常用标签
-
HTML之form表单
一、什么是前端：
1、任何能够直接跟用户打交道的交互界面都可以称之为前端，有前必有后，后端就是我们以前学的服务端。
所谓Python全栈开发，就是前端与后端都写。
而说到前端后端就得提到：
软件开发架构：
C/S架构 client server
B/S架构 browser server
本质上B/S架构也是C/S架构，因为浏览器也算一种客户端
2、我们浏览器输入网址回车后浏览器做了哪些事：
1.输入网址
2.向服务端发送请求
3.服务器接收请求并查询浏览器想要的数据，返回给浏览器
4.浏览器拿到数据展示页面
3、HTTP协议：
超文本传输协议
客户端服务端在数据交互的时候必须遵循的一套协议
二、HTML
1、HTML又名《超文本标记语言》，重点关键字在于：标记，也就是说这门语言是针对网页的创建过程而产生的，好比你要写一个网页就必须要使用这种标记语言。
2、HTML文档结构：
我们用pycharm创建一个html页面文件的时候，pycharm会默认给一个html结构框架：
这里补充一下：html语言里的注释用：
<!--这是单行注释-->
<!-- 这是多行注释 -->Title
html文件的打开方式：浏览器打开，pycharm内右上边有选择浏览器图标打开
3、head内常用标签：
tilte：页面标题
style：样式
script：内部可以直接写js代码，也可以通过src属性引入外部js文件
my_js01.js文件内容：alert('电脑要爆炸了，快给我吧！') 结果：
link：通过href引入外部css文件
输入link按tab键会自动加载link语句： 在双引号里面填写引入外部css文件名（需要与html同目录） my_style01.css文件内容：p {color: red} 三、HTML文档结构内——body内标签：
- 基本标签：
标题标签
标题标签
标题标签
标题标签
标题标签
标题标签
这是段落标签，此标签内容独占一行
[99]内容下划线 内容斜体 看，我加粗了
这是分割符特殊符号
小于号：[a<b] 大于号：[a>b] 其他：[©][®][&][¥]
- 常用标签分类：
-
- 分类一：双标签：<h1>标题标签</h1> 自闭合标签：<hr> <br>
- 分类二：
-
-
-
-
- 块儿级标签：div p h1~h6 ul ol dl li dd table h
- 独占一行
- 能够嵌套某些块儿级标签和行内标签
- 可以设置长、宽
- 自身内容有多大就占多大
- 行内无法设置长、宽
- 能够嵌套行内标签，但无法嵌套快级标签
- 一些注意点：
- 有几个特殊的块儿级标签只能嵌套行内标签，不能包含块儿级标签：h1~h6、 p、dt
- p标签虽然也是块级标签，但是不能嵌套任何块儿级标签和行内标签
- 块儿级标签：div p h1~h6 ul ol dl li dd table h
-
-
- <div></div>和<span></span> 两个重要的标签，功能主要是完成页面的布局
-
-
好绿
好白
好黄
-
-
- URL:统一资源定位符（就是我们访问某一网站的网址）
-
- 四部分：
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址第3部分：为页面在站点中的目录：stu第4部分：为页面名称，例如 index.html各部分之间用“/”符号隔开。
- 四部分：
-
- a标签：链接标签（可以通过href=" "跳转到指定网址）
-
- 跳转功能：
- 锚点功能：
-
- img标签：图片标签
-
-
# 图片原宽度631解析：src输入图片网络地址或者html同目录下图片名，alt图片加载失败显示的文字， title图片加载出来鼠标放在图片上会出现的文字 width图片宽度，高度等比例改变
-
-
- 列表标签：
-
- 无序列表
type默认为disc（小圆点），还可以自定义circle(小圆圈),square（小方块），none
- 平凡的世界
- 与时间做朋友
- 自卑与超越
ul去除自带样式 - 书籍1
- 书籍2
- 书籍3
- 有序列表
type可以为：A I a i 1
- 路遥
- 李笑来
- 阿福雷德 阿德勒
- 标题列表
- 内蒙古
- 呼和浩特
- 鄂尔多斯
- 呼伦贝尔
- 湖北
- 武汉
- 黄石
- 鄂州
- 无序列表
-
- 表格标签：
ID 姓名 年龄 爱好 1 王大锤 18 吃饭 2 赵大锤 50 睡觉 3 李大锤 100 做梦
四、HTML——form表单（获取用户输入（手动输入/选择/默认值），并将获取到的信息发送到服务端）
form表单中只有input的type类型为submit才会触发提交信息的动作如果不想通过input标签来触发提交动作可以直接写一个
input 通过控制type的类型从而实现不同的获取用户输入的标签样式 text 普通文本 password 密文 date 日历 radio 单选框 checkbox 多选框 file 获取文件 submit 触发提交数据的行为 button 普通的按钮 reset 重置form表单内容 select 选择框 默认是单选的 可以通过multiple参数将单选变为多选 一个option就是一个选项 textarea 获取用户大段文本值
注册界面
- 补充：input的label
- 需要注意：
-
- form表单中需要给每一个获取用户输入的标签加上name属性，用来标识当前数据的类型
- 可以将name属性看成服务端接收到提交过来信息的字典的key
- 用户输入的当做字典的value
- 可以手动设置value默认值，如果用户修改了则更新为修改的表单如果需要上传文件，则需设置enctype="multipart/form-data"（默认为enctype="application/x-www-form-urlencoded"）
-
- 表单中几个重要属性：
-
- action：用来控制数据提交的目标对象（一般都是url来指定提交目标）
- 表单默认请求是get类型（获取数据请求），可以通过修改method属性来更改提交方法为：post（提交数据请求）
- get请求可以携带参数供服务端效验，不推荐携带敏感型参数，因为get请求提交时候，会在地址栏显示携带的参数，而且请求携带的参数大小是有限制的，大约在4KB，所以敏感性的信息都应该采用post提交方式。
-
