day50

HTTP协议

超文本传输协议

规定了服务端与浏览器数据传输的数据格式

四大特性

  1. 基于TCP/IP作用于应用层之上的协议
  2. 基于请求响应(请求对应响应)
  3. 无状态(不保存客户端状态)
  4. 无连接(长连接 使用 websocket

数据格式

请求格式

请求首行(请求方式,协议版本)

请求头(一大堆k:v键值对)

​ 空行

请求体(敏感信息 密码 身份证号等)

响应格式

响应首行(请求方式 协议版本)

响应头(一大堆k:v键值对)

​ 空行

响应体(给用户看的数据)

响应状态码

用数字来标识一串文字需要表达的意思

1XX:服务端已经成功接收到了你的请求,正在处理,可以继续提交其他数据

2XX:服务端成功响应了响应的数据(常见为 200)

3XX:重定向

4XX:(404请求资源不存在)(403不符合某一些条件,无法正常访问)

5XX:服务器内部错误(500)

HTML

超文本标记语言

注释是代码之母

HTML的注释

单行注释

<!--单行注释-->

多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

HTML的文档结构

<html>
    <head>
    <!--不是给人看的,给浏览器看得-->
    </head>  
    <body>
     <!--body内的代码才是给人看得-->   
    </body>
</html>

标签的分类1:

  1. 双标签(h1,a)
  2. 自闭和标签(img)

head内常用标签:

title:定义网页标题

style:内部支持写css样式

link:引入外部css样式文件

script:内部可以直接写js代码,也可以引入外部js文件

meta:定义网页源信息

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

独占一行

  1. 块儿级标签内可以嵌套其他块儿级和行内标签
  2. 注意:p标签虽然是块儿级标签,但是他的内部不能嵌套任何块儿级标签,只能嵌套行内标签(***)

行内标签

s i u b span

内部文本多大 就占多大

行内不能嵌套行内和块儿级标签

标签通常应该有两个属性

id:

就类似与身份证号,每一个标签 都应该有id值,并且在同一个html文档内,标签的id不能重复

class :

类属性有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就会拥有c1 c2 c3的所有样式

body内重要的标签

div:一块区域,你可以往这块区域内填写任何内容

span:div和span都是前期构建网页的基本骨架

a 连接标签

  1. 跳转功能 href参数控制跳转的地址

这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色

<!--<a href="https://www.sogo.com">点我点我</a>-->
			
a标签默认是在当前窗口跳转
你可以指定 新建窗口打开
target = "_self"
target = "_blank"
  1. 锚点功能

给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></li>
</ul>

type参数

disc 实心圆点,默认值

circle 空心圆圈

square 实心方块

none 无样式

有序列表(了解)

<ol>
    <li></li>
</ol>

type参数

1 数字列表,默认值

A 大写字母

a 小写字母

I 大写罗马数字

i 小写罗马数字

标题列表(了解)

<dl>
    <dt></dt>   小标题
    <dd></dd>	小章节
</dl>

表格标签

展示数据 一半都用到表格标签

<table>
    <thead>
    	<tr>
        	<th></th>
        </tr>  一个tr就标识一行
    </thead>
    <tbody>
    	<tr>
        	<td></td>
        </tr>
    </tbody>
</table>

posted @ 2019-11-12 22:11  Isayama  阅读(123)  评论(0编辑  收藏  举报