码迷,mamicode.com
首页 > Web开发 > 详细

web表达三剑客之html

时间:2020-01-22 01:23:35      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:入门   mic   listen   小试牛刀   http   idt   tab切换   nbsp   浏览器   

一.web入门之html

1.html小试牛刀

电脑做client,浏览器做server,进行bs通信;原理与之前的电脑自建client和server相似,server和client进行cs通信。

import socket
def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)   
    sock.bind((localhost,8080))    
    sock.listen(5)    
    while True:
        connection,address = sock.accept()        
        buf = connection.recv(1024)        
        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))        
        connection.sendall(bytes("<h1>hello world</h1>","utf8"))        
        connection.close()
if __name__ == "__main__":
    main()

不同标题的前端表示

connection.sendall(bytes("<h1>hello world1</h1> <h2>hello world2</h2> <h3>hello world3</h3> <h4>hello world4</h4>","utf8"))

技术图片

 

其次,如果采用.html写代码,并且用f.open()打开,并运行。打开test.html文件,内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>hello world</h1>
<h3>hello world</h3>
<img src="html_image.PNG" alt="">

</body>
</html>

用html.py文件加载

import socket
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind((localhost, 8087))
    sock.listen(5)
    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)
        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n", "utf8"))
        f = open("test.html","rb")
        data = f.read()
        connection.sendall(data)
        connection.close()
if __name__ == "__main__":
    main()

css布局用

js自动轮播/手动轮播/tab切换

jss悬浮,动画

 

2.构建html页面

html定义:htyper text markup language 即超文本标记语言;

超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素;

标记语言:标记(标签)构成的语言。

网页 == HTML文档,由浏览器解析,用来展示的

静态网页:静态的资源,如xxx.html

动态网页:html代码是由某种开发语言根据用户请求动态生成的

2.1html文档树形结构:

技术图片

 

2.2标签定义

技术图片

2.3标签属性

技术图片第1点解释:在标签中可以插入键值对,<h1 name="alex">hello world </h1>

第4点解释:

<input type="text" readonly="readonly">
上面行代码等于
<input type="text" readonly>

2.4<iDOCTYPEhtml>标签

 

 

web表达三剑客之html

标签:入门   mic   listen   小试牛刀   http   idt   tab切换   nbsp   浏览器   

原文地址:https://www.cnblogs.com/yuyukun/p/12227285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!