html
HTTP协议
1基于请求响应
2基于TCP/IP作用于应用层之上的协议
3无状态,不保存用户信息
4无链接
请求数据格式
请求行(标识HTTP协议版本,当前请求方式)
请求头(一大堆键值对)
请求体(并不是所有的请求方式都有)
响应数据格式
响应行(标识HTTP协议版本,响应状态码)
响应头(一大堆键值对)
响应体(返回给浏览器展示给用户看的数据)
响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息
1xx:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据(200请求成功)
3xx:重定向
4xx:请求错误(404请求资源不存在 403当前请求不合法或者不符合访问资源的条件)
5xx:服务器内部错误
请求方式:
1get请求
超服务端要数据(输入网址获取对应的内容)
2post请求
朝服务端提交数据(用户登录,输入用户名和密码之后,提交到服务端后端做身份验证)
url:统一资源定位符(网址)
html
超文本标志语言
如果你想要让浏览器能够渲染出你所写的页面,你就必须遵循HTML语法
我们浏览器看到的页面,内部其实都是HTML代码
HTML就是书写网页的一套标准
<!--单行注析-->
<!--
多行注析
多行注析
多行注析
-->
由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注析来划定区域方便后续的查找
注意:HTML代码没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码
html文档结构
head内的标签不是给用户看到的,而是定义一些配置给浏览器看的
body内的标签,写什么浏览器就渲染什么,用户就能看的什么
<html>
<head>
<title></title>
</head>
<body></body>
</html>
标签的分类
1双标签
2单标签(自闭合)
head内常用标签
在书写HTML代码的时候,你只需要书写标签名,然后按tab就能自动补全
title 网页标题
style 内部用来书写css代码
scrip 内部用来书写js代码,还可以引入外部js文件
link 引入外部css文件
mate:
keyword 当你在浏览器搜索的时候,只要输入keyword后面指定的关键字那么该网页都有可能被百度
搜索出来展示给用户
description 网页的描述信息
body内常用标签
基本标签
h 标题标签 1-6级标题
b 加粗
i 斜体
u 下划线
s 删除线
p 段落
br 换行
hr 水平分隔线
便签的分类2
1块级标签:独占一行
h1-h6
p
div
a块级标签可以修改长宽,行内标签不可以,修改了也不会变化
b块级便签内部可以嵌套任意的块级便签和行内便签,
但是p标签虽然是块级便签,它只能嵌套行内便签,不能嵌套块级便签
浏览器直接面向用户的,不会轻易报错,哪怕有报错用户也基本感觉不出来
2行内便签:自身多大占多大
i
u
s
b
span
特殊符号
空格
> 大于号
< 小于号
& &
¥ ¥
© 版权
® 商标
常用标签
在构造页面初期最常用的,页面的布局一般先用div和span站位之后最去调整样式
尤其是div使用非常的频繁
div你可以把它看成一块区域,也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可,而普通的文本先用span标签
div 块级标签
span 行内标签
img 图片标签
src
1图片的路径,可以是本地也可以是网上的
2url 自动解析url发送get请求获取数据
alt 当图片加载不出来时候,给图片的描述信息
title 当鼠标悬浮在图片上之后,自动展示的提示信息
height 高度和宽度当你只修改一个的时候,另外一个等比例缩放
weight
a 标签(链接标签)
当a便签指定的网址从来没有被点击过,那么a标签的字体颜色是蓝色
href 放的是url,用户点击就会跳转到该url
其他标签的id值,点击即可跳转到对应标签位置
target 默认a便签是在当前页完成跳转 _self
你也可以修改为新建页面跳转 _blank
a标签的锚点功能
点击一个文本标题,页面自动跳转到标题对应的内容区域
标签具有的两个重要书写
1id
类似于标签的身份证号,在同一个html页面上id值不能重复
2class
该值有点类似于面向对象里面的继承,一个标签可以继承多个class值
标签既可以有默认的属性也可以有自定义的属性
列表标签
无序列表
<ul>
<li></li>
</ul>
虽然ul标签很丑,但是在页面布局的时候,只要是排版一致的基本上用的是ul标签
有序列表
<ol>
<li></li>
</ol>
标题列表
<dl>
</dl>
表格标签
展示一些数据,一般都可以使用表格标签
<table>
<thead>
<tr> 一个tr就表示一行
<th></th>
</tr>
</thead>表头(字段信息)
<tbody>
<tr>
<td></td>
</tr>
</tbody>表单(数据信息)
</table>
border 加外边框
colspan 水平方向
rowspan 竖直方向
原生的表格标签很丑,但是后续我们一般都是使用框架封装好的
form表单标签
获取前端用户数据发送给后端服务器
<form action=' '></form> 在该form标签内部书写的用户的数据都会被form标签提交到后端
action 控制数据提交给后端路径(给哪个服务端提交数据)
1什么都不写 默认就是朝当前页面所在的url提交数据
2写全路径 朝指定的服务端
3只写路径后缀 自动识别出当前服务端的ip和port拼接到前面
<label>直接将input框写在label内
<input type=' '>
</label>给input标签给标识
input标签(type属性)
text:普通文本
password: 密文
data:日期
radio:单选
默认选中要加checked='checked'
<input type='radio' name='gender' checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type='radio' name='gender' checked>女
checkbox: 多选
<input type='checkbox' checked>ball
file:获取文件,也可以一次性获取多个
当你没有指定按钮的文本内容,不同浏览器打开之后渲染的文本内容不同
submit:用来触发form表单提交数据的动作
button:就是一个按钮,本身没有任何功能,但是它是最有用的,学完js之后可以给它自定义功能
reset:重置内容
能够触发form表单提交数据的按钮
1<input type='submit',value='注册'>
2<button></button>
所有获取用户输入的标签,都该有name属性
name就类似于字典的key
用户输入的数据类似于字典的value
select标签 默认是单选,可以加mutiple参数变多选,默认选中selected
<select>
<option></option>
<option></option>
<option></option>
</select>
textarea标签 获取大段文本
验证form表单提交数据
form表单默认提交数据的方式是get请求数据是直接放在url后面
http://127.0.0.1/index/?username=user&password=123
你可以通过method指定提交方式
<form action=' ' method='post'>
针对用户选择的标签,用户不需要输入内容,但是你需要提前给这些标签添加内容value值
form表单提交数据需要注意
1method必须是post
2enctype='multipart/form-data'
enctype类似于数据提交的编码格式
默认是urlencoded只能提交 普通的文本数据,formdata就可以支持提交文件数据
<form action=' ' method='post' enctype='multipart/form-data'>
disable
hidden
readonly
placeholder