标签:布局 定向 提示 身份证 web服务 内部错误 rds 本质 value
任何与用户直接打交道的操作界面都可以称之为是一个前端
浏览器窗口输入一个网址按下回车都发生了那些事情
HTTP协议:超文本传输协议,规定了浏览器与服务端之间数据传输的格式
基于请求响应(一次请求对应一次响应)
基于TCP/IP作用于应用层之上的协议
无状态(不保留客户端的状态)
无连接
长链接 websocket(类似于HTTP协议的大补丁) 聊天室相关
? 请求格式
? ①:请求首行(请求方式 协议版本)
? ②:请求头(一大堆k,v键值对)
? ③:空行
? ④:请求体(携带的数据,并不是一直都有,有时候可能是空的,取决于请求方式)
? 响应格式
? ①:响应首行(响应状态码)
? ②:请求头(一大堆k,v键值对)
? ③:空行
? ④:响应体(浏览器展示给用户看的数据)
? 1XX:服务端已经成功接收到客户端的数据正在处理,你可以继续提交
? 2XX:200 请求成功,服务端已经反悔了你想要的数据
? 3XX:重定向(原本想访问A页面但是内部自动给转到了B页面)
? 4XX:404 请求资源不存在 ,403你当前不具备请求该资源的条件
? 5XX:500 服务端内部错误(有可能是机房着火了 宕机了 也可能爆炸了)
? PS:公司内部可以自己定制自己的响应状态码
1.get请求
? 向服务端获取数据(类似于浏览器窗口输入www.baidu.com获取百度首页)
2.post请求
? 向服务端提交数据
? 类似于登录注册功能
? 如果想让你的页面能够被浏览器识别并展示出好看的样子,你就必须手写HTML代码
? 浏览器能够识别的语言很少只有:HTML/XML、CSS、JS
? PS:XML也可以写前端页面,主要用于odoo框架中,书写企业内部管理软件
? 注释是代码之母
? 单行注释:<!- -单行- ->
? 多行注释:<!- -多行注释1- ->
? 多行注释2- ->
由于HTML页面结构比较复杂,内容比较多,不便于后期的维护,修改通常在写页面的时候通常用下面的方式来人为的划分代码区域
例如:
<!--顶部导航栏开始-->
<!--顶部导航栏结束-->
<!--左侧菜单栏开始-->
<!--左侧菜单栏结束-->
<html>
<head></head>:head内存放的内容不是给用户看的,是给浏览器去识别相应的操作的
<body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>
1.pycharm自动调用浏览器打开(推荐)
2.手动查找路径之后选择浏览器打开
? 1.双标签
? 2.自闭合标签
? 1.块级标签
? 独占一行 h1-h6、p、br、hr、div
? ①:块级标签内可以嵌套任意的块级标签和行内标签
? ②:特例:p虽然是块级标签,但是他的内部只能嵌套行内标签,不能嵌套块级标签
? 如果嵌套了没有关系,只是不符合HTML语法规范
? 2.行内标签
? 自身文本多大,就占多大 u、s、i、b、span
? 行内标签内部不能嵌套块级标签和行内标签
PS:书写标签的时候,只需要写标签的名字,之后Tab键就可以自动补全(emmet插件)
emmet插件:专门补全HTML代码的插件
title:定义网页标题
style:内部支持直接写CSS代码
link:引入外部的CSS文件
script:①:内部可以直接编写js代码 ②:可以通过src属性引用外部js代码
meta:name属性
keywords
description
URL(统一资源定位符 就是网页地址)
基本标签
特殊符号
常用标签
div 块级标签
span 行内标签
本身没有任何特殊意义
但是这两个确实是使用最多的,用来做前期的页面布局的
img 图片标签
a 链接标签
标签应该具备的属性
列表标签
无序列表
ul
li
只要页面上出现了比较有规律排列的文本基本上都可以用无序列表来实现
有序列表
标题列表
表格标签
<!--展示网站数据的时候 一般情况下可以使用表格标签-->
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
先表格标签 先写结构 然后写数据
一个tr就是一行
th和td之分 一个加粗一个不加粗
通常情况下表头用th,表单内容用td
表单标签
form标签
获取用户输入(输入,选择,上传文件……)并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底是哪个后端服务器提交数据)
三种写法
input标签:获取用户输入
typ属性
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>
<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标签聚焦
能够触发from表单提交数据的按钮
<input type="submit">
<!--可以通过value属性来指定按钮文本内容-->
<input type="submit" value="注册">
<button>点我</button>
input获取到的用户输入就类似于是字典的value
inpu中的name属性就类似于是字典的key
标签:布局 定向 提示 身份证 web服务 内部错误 rds 本质 value
原文地址:https://www.cnblogs.com/aheng/p/12098580.html