? -任何与用户直接打交道的操作界面可以称之为是一个前端。
? -比如： 电脑显示界面 手机界面 Ipad
? -cs
? -bs （本质就是cs）
? -浏览器窗口输入一个网址敲回车发生了那些事情：
? 1.朝着指定的服务端发送请求
? 2.服务端接收相应的请求
? 3.服务端返回相应的响应
? 4.浏览器接收响应，按照特定的规则渲染页面展示给用户看。
? -超文本传输协议
? 规定了浏览器与服务端之间的数据传输的格式
? 一、四大特性：
? 1.基于请求的响应
? 一次请求对应一次响应
? 2.基于TCP/IP作用于应用层之上的协议
? 3.无状态
? -不保留客户的状态
? -无论你来多少次，我都待你是初见（所以才需要cookies ，session ，token）
? 4.无连接
? -长链接 websocket（类似于http协议下的打补丁） 聊天室相关的
? 二、数据的格式：
? 请求格式：
? 请求首行（请求方式 协议版本）
? 请求头（一大堆的k，v键值对）
? 请求体（携带的数据，并不是一直都有，有时候可能是空的，取决于你的请求方式）
? 响应格式
? 响应首行(响应状态码)
? 响应头（一大堆的k v键值对）
? 响应体（浏览器展示给用户看的数据）、
? 三、响应状态码
? 用数字来表示一大堆的提示信息
? 1XX ：服务端已经成功接收打扫客户端的数据正在处理，你可以继续提交
? 2XX：200 请求成功 服务端已经返回了你想要的数据
? 3XX：重定向（原本想访问的A 但是内部会自动给你转到B上面）
? 4XX ：404 请求资源不存在，403 你当前不具备请求该资源的条件
? 5XX：500服务端内部错误，机房着火 爆炸了等、
? 公司内部也可以自己定制自己的响应状态码
? 1.get 请求
? -朝服务端要资源（获取数据）
? 类似于浏览器窗口输入www.baidu.com获取百度的shouye
? 2.post请求
? -朝服务端提交数据（提交数据）
? 类似于登录注册的功能
-超文本标记语言
在学习html的时候，你只要记住每一个标签标示什么意思就可以了HTML
-如果你想让你的页面能够被浏览器识别并且展示出好看的样子，你就必须是写html代码
-浏览器能识别的语言非常少
? HTML/XML CSS JS
-扩展知识点：XML也可以书写前端页面，主要用于odoo框架，书写企业内部管理软件
HTML注释 #### 我们可以用ctrl +？来处理注释
注释是代码之母
单行注释:<!--单行-->
多行注释:<!--
多行注释1
多行注释2
-->?
? 补充:由于html页面结构比较复杂 内容比较多 不便于后期的维护 修改
? 通常在写页面的时候 习惯用下面的方式来人为的划分代码区域
?
?
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束--><html>
<head></head>:head内放的内容不是给用户看的 是给浏览器去识别做相应操作的
<body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>
HTML文档打开方式
1.pycharm自动调用浏览器打开(推荐) #右上角有很多的浏览器的可以选择
2.手动查找路径之后选择浏览器打开
标签的分类1
1.双标签 比如：<h1>'big boy !!!'</h1> 有头有尾
2.自闭和标签 比如：<img src="data:ima-> title：定义网页的标题
style：内部支持直接写的css代码 改颜色等等操作
link 引入的外部的css文件
script：
? 1.内部可以直接编写js代码
? 2.可以通过src属性引用外部的js代码
meta：
? name 属性：
? Keywords 关键字 用户输入这些关键字，网页可以与这个匹配。 比如：淘宝
? description 对于网页的功能的描述 。比如：淘宝的介绍淘宝的用途
注意：书写标签的时候，你需要写标签的名字，之后tab键就可以自动补全 emmet插件
是自带的 不是pycharm的提供的
URL：
-统一资源的定位符 简而言之，就是链接
你所看到的华丽花哨的页面，其实内部都是html的代码，很丑很乱
1.基本标签
?
h1~h6:标题标签 1级到6级的标题
s:删除线 #中间加了一条横线
b:加粗
u:下划线
i:斜体
p:独占一行
br:换行
hr:分割线?
<!--<h1>dfgg</h1>-->
<!--<h1>vvvf</h1>-->
<!--<h3>dddff</h3>-->
<!--<h4>ddd</h4>-->
<!--<h5>ddd</h5>-->
<!--<h6>ddd-->
<!--ddd</h6>-->
<s> 我是s</s>
<u> 我是s</u>
<b> 我是s</b>
<i> 我是s</i>
<p> 明月几时有，把酒问青天</p>
<br>
<p> 明月几时有，把酒问青天</p>
<hr>
<p> 明月几时有，把酒问青天</p>
<p> 明月几时有，把酒问青天</p>
2.特殊标签
特殊符号
空格
<p>a大于b a > b</p>
<p>a小于b a < b</p>
<p>a&b a & b</p>
<p>人民币 ¥10000000000</p>
<p>版权标识 ©</p>
<p>注册商标 ®</p><p>山重水复疑无路，柳暗 花明又一村</p>
<p> a小于b a < b </p>
<p> a大于b a > b </p>
<p> a 和b a & b </p>
<p> 人民币 ¥1000000 </p>
<p> 版权标识 ©</p>
<p> 注册商标 ®</p>
>>>>>>>>>>>>>>>>>>>>>>>>
山重水复疑无路，柳暗 花明又一村
a小于b a < b
a大于b a > b
a 和b a & b
人民币 ￥1000000
版权标识 ?
注册商标 ?3.常用标签
div 块儿级标签
span 行内标签
本身没有任何特殊意义
但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的
img 图片标签
<img src="http://img1.imgtn.bdimg.com/it p=0.jpg" alt="有问题">
src
1.可以写一个网站图片地址
2.还可以写本地的图片地址
3.url(自动朝该url发送get请求要数据)
alt
当图片加载不出来的时候 默认展示的提示信息
title
当鼠标悬浮在图片上的时候 展示的提示信息
<img src="http://f.hipn1a125.jpg" alt="架构图" title="这个是七娃"width="200px" >
width,height
修改一个 另外一个会自动等比例缩放
如果两个都修改图片就会失真
a 链接标签（点一个a+tab 就会弹出）
href
1.放一个url
点击就会跳转到该url所对应的资源
<a href="http://image.baidu.com/">点击这里</a>
target
控制是否在当前页跳转
默认是在当前页跳转
_self
新建页面跳转
_blank
<a href="http://image.baidu.com/" target="_blank">点击这里</a>
锚点功能
href不单单可以写url 也可以写另外一个a标签id值
点击就会跳转到该id值所对应的a标签所在的位置
<a href="" id="d1">页首</a>
<div style="height: 1000px; background-color: red"></div>
<a href="" id="d2">页中</a>
<div style="height: 1000px; background-color: red"></div>
<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>标签应该具备的属性
1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签
在同一个html页面中 id值不能重复
2.class属性:类似于面向对象的继承
直接引用别的类的样式
4.列表标签
无序列表(较多) #####比较常用
ul
li
只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
<p>无序标签</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
有序列表
ol
li
<p>无序表签</p>
<ol type="a">
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
标题列表
dl
dt标题
dd内容
<p>标题列表</p>
<dt>班级学生</dt>
<dd>标题1</dd>
<dd>标题2</dd>
<dd>标题3</dd>
5.表格标签
表格标签(******)
展示网站数据的时候 一般情况下可以使用表格标签
<table>
<thead>
<tr>dt
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
先表格标签 先写结构 然后写数据-----table-->thead--->tbody
为了和table表区分 我们这里的加t的方式操作
一个tr就是一行
th和td之分 一个加粗一个不加粗
通常情况下表头用th,表单内容用td
<table> ####<table border="1">可以给表加线
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>david</td>
<td>18</td>
<td>study</td>
</tr>
<tr>
<td>sean</td>
<td>22</td>
<td>hjk</td>
</tr>
<tr>
<td>json</td>
<td>17</td>
<td>zhy</td>
</tr>
</tbody>
</table>
>>>>>>>>>>>>>>>>>>>>>>>
姓名 年龄 爱好
david 18 study
sean 22 hjk
json 17 zhy
6.表单标签
form标签
获取用户输入（输入，选择，上传文件....）并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法:
1.不写 默认就是朝当前该页面所在的地址提交数据
2.全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
获取用户输入 input标签 该标签是一个行内标签
input类似于前端的变形金刚
type属性
text 普通文本
password 密文
date 日期
radio 多选一
checkbox 多选多
默认选种 checked="checked"
当标签的属性名和属性值相同的时候 可以只写属性名
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
reset 重置
button 普通按钮
submit 触发form表单提交动作
file 获取文件
select标签 下拉框
一个个选项就是一个个option标签
默认是单选的
可以加一个multiple该成多选
<select name="" id="" multiple> ###可以选择多个multiple
<option value="">新垣结衣</option>
<option value="">明老师</option>
<option value="">嫖老师</option>
<option value="">波老师</option>
</select>
如何让option标签默认选中
加selected="selected"
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
textarea标签 获取大段文本
label通常是配合input一起使用的
for用来填写对应的input标签id值
点击label标签内的内容 会自动让对应的input标签 聚焦
能够触发form表单提交数据的按钮(******)
<input type="submit">
可以通过value属性来指定按钮文本内容
<input type="submit" value="注册">
<button>点我</button>
input获取到的用户输入就类似于是字典的value
input中的name属性就类似于是字典的key
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<form action="">
<p><label for="">用户名：<input type="text" id="d1" name="user" ></label></p>
<p><label for="">密码：<input type="password" name="password"></label></p>
<p><label for="">生日：<input type="date"name="date"></label></p>
<p><label for="">性别：
男<input type="radio"name="gender">
女<input type="radio"name="gender" checked></label>
</p>
<p><label for="">爱好:
篮球<input type="checkbox" name="hobby">
足球<input type="checkbox" name="hobby">
水球<input type="checkbox" name="hobby" checked>
</label></p>
<p><label for="">省份：
<select name="province" id="">
<option value="">北京</option>
<option value="">南京</option>
<option value="">上海</option>
</select>
</label></p>
<p><label for="">老师：
<select name="" multiple>
<option value="" selected>明老师</option>
<option value="" >波老师</option>
<option value="" selected>静老师</option>
</select>
</label></p>
<p>
个人简介：<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>个人简介：
<input type="file">
</p>
<p>
<input type="submit" value = '注册'>
<input type="reset" value = '重置'>
<input type="button" value = '按钮'>
<button>点我</button>
</p>
标签的分类2
1.块儿级标签
独占一行 h1~h6 p br hr div
1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签
如果嵌套了 没有问题 知识不符合html语法规范
2.行内标签 u s i b span
自身文本多大 就占多大
行内标签内部不能嵌套块儿级标签和行内标签
?
原文：https://www.cnblogs.com/bs2019/p/12099238.html