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

特殊符号
&nbsp; 空格
&gt; 大于号
&lt; 小于号
&amp; &
&yen; ¥
&copy; 版权
&reg; 商标

常用标签
在构造页面初期最常用的,页面的布局一般先用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

 

posted @ 2021-06-23 15:06  昌尐  阅读(189)  评论(0编辑  收藏  举报