html 简介

2021-03-09 00:27

阅读:450

YPE html>

标签:发送   描述   多个   响应头   script   重定向   机器   额外   是你   

Web服务本质

import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"

Hello world!

") conn.close() 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

HTTP协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态
	不保存用户的信息
    eg:一个人来了一千次 你都记不住 每次都当他如初见
    由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
    	cookie、session、token...
4.无/短链接
	请求来一次我响应一次 之后我们两个就没有任何链接和关系了
	长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

        
# 请求数据格式
请求首行(标识HTTP协议版本,当前请求方式)
请求头(一大堆k,v键值对)
\r\n 
请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
响应首行(标识HTTP协议版本,响应状态码)
响应头(一大堆k,v键值对)

响应体(返回给浏览器展示给用户看的数据)

# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息  404:请求资源不存在
1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
4XX:请求错误
    404:请求资源不存在
    403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)
  

# 请求方式
1.get请求
    朝服务端要数据
    eg:输入网址获取对应的内容
2.post请求
    朝服务端提交数据
    eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

# url:统一资源定位符(大白话 网址)

HTML

超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm

HTML就是书写网页的标准

# 注释:注释是代码之母


由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找

导航条所有的html代码


左侧菜单栏的HTMl代码

HTML文档结构



css样式优先级


1. 声明为HTML5文档。
2. 、是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
3. 、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
4. 定义了网页标题,在浏览器标题栏显示。
5. 、之间的文本是可见的网页主体内容。

PS: 对于中文网页需要使用  声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 

HTML标签格式

  • HTML标签是由尖括号包围的关键字,如,
  • HTML标签通常是成对出现的,比如:
    ,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的,比如:

    等。
  • 标签里面可以有若干属性,也可以不带属性。
  • 标签的语法:

    • 内容部分标签名>

    几个很重要的属性:

    • id:定义标签的唯一ID,HTML文档树中唯一
    • class:为html元素定义一个或多个类名(classname)(CSS样式类名)
    • style:规定元素的行内样式(CSS样式)

    HTML注释

    HTML常用标签

    head内常用标签

    技术图片

    Meta标签

    Meta标签介绍:

    • 元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
    • 标签位于文档的头部,不包含任何内容。
    • 提供的信息是用户不可见的。

    meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

      
    
    
    

    2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    
    

    body内常用标签

    基本标签

    加粗
    斜体
    下划线
    删除
    
    

    段落标签

    标题1

    标题2

    标题3

    标题4

    标题5
    标题6


    # 1 块儿级标签:独占一行 h1~h6 p div 1.块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化 2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来) 总结: 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签 但是p标签只能嵌套行内标签(HTML书写规范) # 2 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签

    特殊字符

       空格
    >   大于号
    <   小于号
    &  &
    ¥  ¥
    版权© ?
    注册® ?
    

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    
    ## 块级元素与行内元素的区别:
    所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
    这两个元素是专门为定义CSS样式而生的。
    
    ## 注意:
    关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
    
    p标签不能包含块级标签,p标签也不能包含p标签。
    

    img标签

    # 图片标签
    
    
    src	
    1.图片的路径  可以是本地的也可以是网上的
    2.url	自动朝该url发送get请求获取数据
    
    alt="这是我的前女友"
    当图片加载不出来的时候 给图片的描述性信息
    
    title="新垣结衣"
    当鼠标悬浮到图片上之后 自动展示的提示信息
    
    height="800px" 
    		
    width=""
    高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
    如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
    

    a标签

    # 链接标签
    
    """
    当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
    如果点击过了就会是紫色(浏览器给你记忆了)
    """
    
    href
    1.放url,用户点击就会跳转到该url页面
    2.放其他标签的id值 点击即可跳转到对应的标签位置
    
    target
    默认a标签是在当前页面完成跳转  _self
    你也可以修改为新建页面跳转		_blank
    
    # a标签的锚点功能
    """eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
    顶部
    

    hello world

    中间
    底部 回到中间 回到中间

    列表

    1.无序列表

    • 第一项
    • 第二项
    type属性: disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式)

    2.有序列表

    1. 第一项
    2. 第二项
    type属性: 1 数字列表,默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马

    3.标题列表

    标题1
    内容1
    标题2
    内容1
    内容2

    表格

    序号 姓名 爱好
    1 Egon 杠娘
    2 Yuan 日天
    ## 属性: border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.(最好通过css来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格)

    form

    表单用于向服务器传输数据,从而实现用户与Web服务器的交互
    表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
    表单还可以包含textarea、select、fieldset和 label标签。

    技术图片

    input
    技术图片

    ## 属性说明:
    name:表单提交时的“键”,注意和id的区别
    value:表单提交时对应项的值
        type="button", "reset", "submit"时,为按钮上显示的文本年内容
        type="text","password","hidden"时,为输入框的初始值
        type="checkbox", "radio", "file",为输入相关联的值
    checked:radio和checkbox默认被选中的项
    readonly:text和password设置只读
    disabled:所有input均适用
    

    html 简介

    标签:发送   描述   多个   响应头   script   重定向   机器   额外   是你   

    原文地址:https://www.cnblogs.com/chenwenyin/p/12869121.html


评论


亲,登录后才可以留言!

推荐文章

最新文章

置顶文章