zoukankan      html  css  js  c++  java

  • day 46 http和html

    课程安排：

    一、

    小例子：

    import socket

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

while True:
    conn,addr=sk.accept()
    data=conn.recv(2096)
    print(data)
    #按照HTTP协议的格式要求去回
    conn.send(b"HTTP/1.1 200 0k

")
    #把我网站的内容发出去
    with open("toutiao.txt","rb")as f:
        data=f.read()
    conn.send(data)
    conn.close()
    套接字
    <h1>Hello world!</h1>
<a href="https://www.toutiao.com/">click</a>
<img src="http://p3.pstatp.com/large/5675000d9cc214091865">
    txt文档内容

    客户端结果

    总结：

    1、
    　　"PUT FBIWarning.avi 1024".split(" ")
    　　客户端和服务端之间要有一个协议(约定)

    　　同理:浏览器和server端也要有一个约定,这个约定叫HTTP协议.

    2、

    　　HTTP特点:(了解)

    　　1. 简单 就一来一回
    　　2. 短连接(一来(request)一回(response)就结束了)
    　　3. 无状态(每一次连接对于服务端来说都是新的)

     3、

    　　大体印象:
    　　就是一个规则,你真应该怎么写,浏览器应该怎么认.
    　　多练习,记住常用的就可以了.

    二、html 标签初认识

    　　浏览器的输入URL,展示一个页面这个过程：

    　　jd.com --> https://www.jd.com/
    　　域名解析 --> 翻译成IP 端口是默认的80
    　　到达服务端
    　　服务端返回字符串

     

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式优先级</title>
</head>
<body>

</body>
</html>
    基本的html 文档结构
    • <!DOCTYPE html>声明为HTML5文档。
    • <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
    • <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
    • <title>、</title>定义了网页标题，在浏览器标题栏显示。
    • <body>、</body>之间的文本是可见的网页主体内容。

     注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

    HTML标签格式

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

    标签的语法：

    • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
    • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

    几个很重要的属性：

    • id：定义标签的唯一ID，HTML文档树中唯一
    • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
    • style：规定元素的行内样式（CSS样式）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日头条</title>
    <link rel="icon" href="https://s3a.pstatp.com/toutiao/resource/ntoutiao_web/static/image/favicon_8e9c9c7.ico">
</head>
<body>
<h1>Hello world!</h1>
<a href="https://www.toutiao.com/">click</a>
<img src="http://p3.pstatp.com/large/5675000d9cc214091865">
</body>
</html>
    小练习

    HTML注释

    <!--注释内容-->

    <!DOCTYPE> 标签

    <!DOCTYPE> 标签

    <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    总结：


    HTML:

    python文件放到.py文件里
    HTML文件放到.html文件里了

    FTP

    client server --> CS模式
    browser(浏览器) server --> BS模式 --> Web开发
    浏览器相当于一个现成的客户端,

    HTML标签:

    两种格式:
    <标签名 k1=v1 k2=v2>内容</标签名>
    <标签名 k1=v1 k2=v2/>


    常用标签:
    h1~h6标签
    a标签 超链接
    img 图片

    HTML注释:
    非常非常非常重要

    <!-- 注释的内容 -->

    <!-- 图片开始 -->
    <img src="" />
    <!-- 图片结束 -->

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--＃头部标签-->
    <title>今日头条</title>　
    <!--#头部ＬＯＧＯ的使用（ｉｃｏｎ）-->
    <link rel="icon" href="https://s3a.pstatp.com/toutiao/resource/ntoutiao_web/static/image/favicon_8e9c9c7.ico">

</head>
<body>
<!--   #主体文字的显示-->
<h1 id="i1" class="c1 c2 c3" style="color:darkolivegreen"> Hello world!</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
<!--#按键的超链接-->
<a target="_blank" href="https://www.toutiao.com/">click</a>
<!--#在线照片的导入-->
<img src="http://p3.pstatp.com/large/5675000d9cc214091865">
<!--# 外界添加照片 以及照片的提示-->
<img src="头条.png" alt="这是头条的LOGO" title="头条照片">

</body>
</html>

     三、html结构

    1、在模板里面添加语句（以最高模式渲染）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--2秒后跳转到对应的网址，注意引号-->
    <meta http-equiv="refresh" content="2;URL=https://www.toutiao.com/a6510094403279782147/">
    <!--＃头部标签-->
    <title>今日头条</title>　
    <!--#头部ＬＯＧＯ的使用（ｉｃｏｎ）-->
    <link rel="icon" href="https://s3a.pstatp.com/toutiao/resource/ntoutiao_web/static/image/favicon_8e9c9c7.ico">
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="keywords" content="meta 总结,hrnl meta,meta 属性，meta跳转">
    <meta name="description" content="老男孩教育Python学院">

</head>
<body>
<!--   #主体文字的显示-->
<h1 id="i1" class="c1 c2 c3" style="color:darkolivegreen"> Hello world!</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
<!--#按键的超链接-->
<a target="_blank" href="https://www.toutiao.com/">click</a>
<!--#在线照片的导入-->
<img src="http://p3.pstatp.com/large/5675000d9cc214091865">
<!--# 外界添加照片 以及照片的提示-->
<img src="头条.png" alt="这是头条的LOGO" title="头条照片">

</body>
</html>
    html 的结构解析

    2、

    head内常用标签

    Meta标签

    Meta标签介绍：

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

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

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

    <!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

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

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

    非meta标签

    <!--标题-->
<title>oldboy</title>
<!--icon图标-->
<link rel="icon" href="favicon.ico">
<!--样式文件-->
<link rel="stylesheet" href="mystyle.css">
<!--JS文件-->
<script src="myscript.js"></script>

    body内常用标签

    基本标签（块级标签和内联标签）

    <b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

    特殊字符

    内容对应代码
    空格 &nbsp;
    > &gt;
    < &lt;
    & &amp;
    ¥ &yen;
    版权 &copy;
    注册 &reg;

    div标签和span标签

    div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

    块级元素与行内元素的区别：
    所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
    这两个元素是专门为定义CSS样式而生的。

    注意：

    关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

    p标签不能包含块级标签。

    img标签

    <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

    a标签

    超链接

    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>

    href属性指定目标网页地址。该地址可以有几种类型：

    • 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
    • 相对URL - 指当前站点中确切的路径（href="index.htm"）
    • 锚URL - 指向页面中的锚（href="#top"）

    target：

    • _blank表示在新标签页中打开目标网页
    • _self表示在当前标签页中打开目标网页
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<a href="#i1"><h2>第一章</h2></a>
<a href="#i2"><h2>第二章</h2></a>
<a href="#i3"><h2>第三章</h2></a><br><br><br>

<div id="i1" style="height: 1000px;background: indianred">第一章</div>
<div id="i2" style="height: 1000px;background: green">第一章</div>
<div id="i3" style="height: 1000px;background: bisque">第一章</div>
</body>
</html>
    页面标签跳转

     总结：

    HTML5和HTML的关系

    HTML
    head标签里面的
    -meta
    -title
    -link icon
    -link 引用CSS文件
    -style 引用JS文件

    body标签(我们在浏览器里面看到的)
    -块级标签(独占一行) h1~h6 hr p div
    -内联标签(长度根据内容决定) a b img u s i span

    -特殊符号

    -DIV和span 没有特点(专为CSS调样式准备的两个标签)

    -嵌套规则
    -块级标签可以嵌套块级标签和内联标签
    !!!P标签不能嵌套div标签
    -内联标签一般不能嵌套块级标签

    -img标签
    -width
    -height
    -src
    -alt
    -title

    -a标签
    -target
    -href
    -https://
    -相对地址(Django)
    -网页内部跳(锚点)


    HTML --> 裸体的人
    CSS --> 穿上好看的衣服
    JS --> 让人动起来
  • 相关阅读:
    [中英对照]INTEL与AT&T汇编语法对比
    用gdb理解C宏(#和##)
    Unix/Linux文件类型及访问权限
    apt-get
    查看ip地址信息和配置临时ip
    修改文件所有者 chown
    修改文件权限 chmod
    tar命令
    PHP magic_quotes_gpc
    chmod命令详细用法
  • 原文地址：https://www.cnblogs.com/number1994/p/8316157.html
Copyright © 2011-2022 走看看