day42-web服务本质、http协议、httl基本标签

web服务的本质

请求和响应

朝着指定的服务器地址发送请求
服务端接收请求并处理
返回相应的响应
浏览器接收并渲染出好看的页面给用户

请求方式

get请求

向服务器要资源
post请求
朝服务器提交数据

HTTP协议

超文本传输协议
规定了服务端与浏览器数据传输的数据格式

四大特性
- 基于TCP\IP作用于应用层之上的协议
- 基于请求响应
  请求对应响应
- 无状态
  不保存客户端状态
- 无连接
  【长连接 websocket 聊天室】
数据格式
请求格式
请求首行（请求方式协议版本）
请求头（k:v键值对）
（空行）
请求体（敏感信息）

响应格式
响应首行（请求方式协议版本）
响应头（k:v键值对）
（空行）
响应体（敏感信息）
响应状态码
用数字来表示一串文字
1XX：指示信息，表示请求以接收，继续处理
2XX：成功，表示请求已被成功接收、理解、接受
3XX：重定向，信息不完整，需要进一步补充
4XX：客户端错误，请求有语法错误或请求无法实现
5XX：服务端错误，服务端未能实现合法的请求

常见：
404 --请求资源不存在
403 --你当前不符合某些条件，无法正常访问

HTML

超文本标记语言

HTML的注释

<!--注释-->
<!--
多行注释
多行注释
-->
<!--通常用注释来划分区域-->

HTML的文档结构

<html>
	<head></head> <!--给浏览器看的-->
    <body></body> <!--给人看的-->
<html>

标签的分类1

双标签（h1, a,....）
自闭合标签（img）

head内常用标签

title 定义网页标题
style 内部支持写css代码
link 引入外部css样式
script 内部可以直接写js代码，也可以引入外部js文件

meta 定义网页源信息

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--搜索content的内容可以搜到网页-->

body常用标签

h1-h6 标题标签
p 段落标签，一个p就是一行
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 分割线

body内特殊符号

&nbsp 空格
&amp &
&yen ￥
&gt >
&lt <
&copy ©
&reg ®

标签的分类2

块级标签
- h1-h6, p, br, hr, div
- 独占一行
- 块级标签内可以嵌套其他块级和行内标签
- 注意：p标签内不能嵌套块级标签，只能嵌套行内标签
行内标签
- s, i, u, b, span
- 内部文本多大，就占多大
- 行内不能嵌套行内和块级

标签常用属性

id 每一个标签都应该有id值，在同一个html文档中，标签的id不能重复
class 类属性，类似于面向对象的继承，class='c1 c2 c3'继承了三个类

body内重要的标签

div 一块区域
span
- div和span是前期构建网页的基本骨架

a 链接标签

1.跳转功能     href参数控制跳转的地址
			这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
			只要点过一次之后  之后颜色 都是紫色
			<!--<a href="https://www.sogo.com">点我点我</a>-->
			
			a标签默认是在当前窗口跳转
			你可以指定 新建窗口打开
			target = "_self"
			target = "_blank"
			
		2.锚点功能
			给a标签设置id值
			然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
			<a href="" id="a1">文章开头</a>
			<div style="background-color: red;height: 1000px"></div>
			<div style="background-color: green;height: 1000px"></div>
			<div style="background-color: orange;height: 1000px"></div>
			<a href="" id="a2">文章中部</a>
			<div style="background-color: black;height: 1000px"></div>
			<div style="background-color: green;height: 1000px"></div>
			<div style="background-color: orange;height: 1000px"></div>
			<a href="#a1">回到顶部</a>
			<a href="#a2">回到中部</a>

img 图片标签

#src
1.图片地址，网络地址或本地地址
2.url， 自动朝该网址发送get请求，获取图片资源

#alt
当图片加载不出来的时候，展示的信息

#title
鼠标悬浮到图片上方时展示的提示信息

#width和height
只设置一个是等比例缩放
两个都设置，会失真

列表标签

无序列表

<ul>
    <li type="square">这是无序列表</li>
    <li>这也是一个无序列表</li>
</ul>

type参数
   disc（实心圆点，默认值）
   circle（空心圆圈）
   square（实心方块）
   none（无样式）

有序列表

<ol type="A">
    <li>这是一个有序列表</li>
    <li></li>
    <li></li>
</ol>

type参数

   1 数字列表，默认值
   A 大写字母
   a 小写字母
   Ⅰ大写罗马
   ⅰ小写罗马

标题列表

标题列表(了解)
   dl
      dt  小标题
      dd  小章节

表格标签

<table>
   <thead>
      <tr>
         <th>username</th>
         <th>password</th>
         <th>hobby</th>
         <th>is_delete</th>
      </tr>  一个tr就表示一行
   </thead>
   <tbody>
      <tr>
         <td>jason</td>
         <td>123</td>
         <td>study</td>
         <td>0</td>
      </tr>
   </tbody>
</table>

js

<script>
        function click(){
        　　if(event.button==2){
        　　　　alert( '右键禁用 !!');
        　　}
        }
        document.onmousedown=click
    </script>

posted on 2019-11-12 21:17 shenblogs 阅读(210) 评论(0) 收藏举报

刷新页面返回顶部

shenblogs

day42-web服务本质、http协议、httl基本标签

web服务的本质

请求和响应

请求方式

HTTP协议

HTML

HTML的注释

HTML的文档结构

标签的分类1

head内常用标签

body常用标签

body内特殊符号

标签的分类2

标签常用属性

body内重要的标签

列表标签

无序列表

有序列表

标题列表

表格标签

js

导航

公告