zoukankan      html  css  js  c++  java
  • 前端HTML基础和head部分

    一、SOCKET服务器与浏览器交互

    CS模式 -->  BS模式

    CS模式逐渐向BS模式转移,底层都是socket客户端

    浏览器给服务器发送请求 --> 服务器收到请求 --> 服务器给浏览器回复响应

    由于浏览器版本众多,而且网络的类型众多,socket服务器和浏览器之间收发信息,必须格式要统一,遵循HTTP协议

     

    socket服务器与浏览器交互

    '''
    socket与浏览器交互
    '''
    import socket
    
    
    sk = socket.socket()
    sk.bind(('127.0.0.1',8080))
    sk.listen()
    
    while 1:
        conn,add = sk.accept()
        data = conn.recv(9000)
        print(data)
        # HTTP协议的格式给浏览器回复消息
        conn.send(b'HTTP/1.1 200 OK
    content-type:text/html;charset=utf-8
    
    ')
        with open('s1.txt','rb') as f:
            msg = f.read()
        conn.send(msg)
        conn.close()

     

    二、web的原理

    ① 浏览器地址输入URL

    ② 浏览器往服务器发消息

    ③ 服务器接收消息

    ④ 服务器回复消息(从文件中读取数据)

    ⑤ 浏览器收到消息(按照一个约定好的规则展示出来)

     

    三、HTML

    超文本标记语言,本质上是浏览器可识别的规则,不同的浏览器都是同一个规则

    HTML是一种标记语言,不是编程语言

     

    浏览器的极速模式:使用chrome内核

    浏览器的兼容模式:使用IE内核

     

    四、HTML文档结构

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    </head>
    <body>
    </body>
    </html>
     <!DOCTYPE html>声明为HTML5文档。
    <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
    <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
    <body>、</body>之间的文本是可见的网页主体内容。 
     

    <!DOCTYPE> 标签
    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

     

    html中把连续的空格和换行都解析成一个空格,没有缩进的概念,所有的操作都根据标签

     
    五、HTML的标签格式
    属性:

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

     

    HTML标签是由尖括号包围的关键字,如<html>, <div>等
    HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
    也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
    标签里面可以有若干属性,也可以不带属性。

     

    六、注释

    <!--注释-->

     

    七、head内部标签

    head标签内的内容是用于浏览器识别的

    <head>
        <title>网页标题</title>
        <style>定义内部样式表</style>
        <script>定义JS代码或者引入外部JS文件</script>
        <link rel="stylesheet" href="">引入外部样式表文件
    </head>

    title    定义网页标题

    style  定义内部样式表

    script    定义JS代码或引入外部JS文件

    link     引入外部样式表文件

     

    meta标签

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

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

    <!--3表后跳转到www.google.com.hk,refresh是刷新-->
    <meta http-equiv="refresh" content="3;URL=https://www.google.com.hk">
    <!--指定文档的编码类型-->
    <meta http-equiv="content-type" charset="UTF-8">
    <!--IE以最高级模式渲染文档-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

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

    keywords     关键字,用于搜索引擎搜索,爬虫,SEO

    description   描述信息,搜索引擎展示网页的时候展示出来

    <meta name="description" content="全球领先的综合性网上购物中心。超过100万种商品在线热销"/>
    <meta name="keywords" content="网上购物,网上商城,网上买书,购物中心,在线购物"/>

     

  • 相关阅读:
    ABC223
    ABC224
    线代口胡
    「数学」计算几何
    「字符串」后缀数组
    插值计算
    2021年11月 环太湖骑行记(骑行开始30公里后,因疫情而中止)
    工作感受月记202111月
    js 调用本地 exe 方法(通用,支持目前 大部分主流浏览器,chrome,火狐,ie)
    8.23第七周
  • 原文地址:https://www.cnblogs.com/st-st/p/9760666.html
Copyright © 2011-2022 走看看