HTML

遵循的htt协议

HTTP/1.1 200 OK\r\n\r\n

在浏览器端输入 URl：127.0.0.1:9090进行访问

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

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',9090))
sk.listen()

while 1:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    print(ret)
    # 或conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n ")
    with open(r'C:\Users\Administrator\PycharmProjects\Snack\Python\PY练习\练习.py','rb') as f:
        conn.send(f.read())
    conn.close()

sk.close()

URL：统一资源定位符
URL地址由4部分组成

第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

HTML

超文本标记语言
浏览器可识别的规则，标记语言（兼容性问题）
网页文件的扩展名：.html或.htm
HTML是一种标记语言（markup language），它不是一种编程语言。

    1. CS   -->  BS架构
    2. Web的原理
        浏览器地址栏输入URL
            --> 浏览器往服务端发消息 
                --> 服务端接收消息
                    --> 服务端回消息（从文件中读取数据）
                        --> 浏览器收到消息(按照一个约定好的规则展示出来)

HTML文档结构：




  
  css样式优先级

1.声明为HTML5文档
2.、是文档的开始标记和结束的标记。是HTML页面的根元素
3.、定义了HTML文档的开头部分。包含了文档的元（meta）数据。
4.、定义了网页标题，在浏览器标题栏显示。
5.、之间的文本是可见的网页主体内容。
6.中文网页需要使用声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为。

html标签格式

1.尖括号包围的关键字
2.HTML标签通常是成对出现的，比如：和，第一个标签是开始，第二个标签是结束。
3.部分标签是单独呈现的，比如：
、
、等。
4.标签里面可以有若干属性，也可以不带属性。

标签的语法：

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

几个很重要的属性：

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

HTML注释：

标签：

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

head内常用标签：

 定义网页标题
 定义内部样式表
   定义JS代码或引入外部JS文件
 引入外部样式表文件
 定义网页原信息

Meta标签介绍：

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

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

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

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


    
    骑士计划！改变世界，从西丽开始！
    
    
    
    
    
    
    
     # 关键字搜素 
     # 描述网站信息

body内常用标签：

id：html文档中唯一
a:链接可点击href="URL"


    
    Hello world!
    路飞学城 
    jd.com

常用标签

加粗
斜体
下划线
删除

段落标签

标题1
标题2
标题3
标题4
标题5
标题6

换行-->


水平线-->

特殊字符

空格   
HTML中把连续的空格和换行都解析成一个空格，不存在缩进的问题
>   >
<   <
&   &
¥   ¥
版权  ©
注册  ®

div标签和span标签
div: 独占一行，块级标签
块级标签：

span：不换行，行内标签
行内标签（内联标签）：

                默认都在一行显示！
                b、i、u、s
                span

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

注意：

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

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

标签支持嵌套

    1. 块级标签可以包含内联标签
    2. p标签不能包含p标签和div标签

img标签

a标签：超链接标签

从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

点我

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

1.绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

点我

2.相对URL - 指当前站点中确切的路径（href="index.htm"）
3.锚URL - 指向页面中的锚（href="#top"）

点我



大海啊，全是水。

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表

1.无序列表

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

代码


  第一项
  第二项

2.有序列表
type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start：从哪个位置开始，默认从第一个

代码


  第一项
  第二项

3.标题列表
dt：标题
dd：内容-缩进


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

表格

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

代码

序号	姓名	爱好
1	金老板
2	景女神	喝茶
3	娜扎

form标签

1. 展示给用户看的标签
2. 获取用户输入的标签
        form标签（表单标签）
        
3.表单还可以包含textarea、select、fieldset和 label标签。

表单属性

accept-charset  规定在被提交表单中使用的字符集（默认：页面字符集）。
action  规定向何处提交表单的地址（URL）（提交页面）。
autocomplete    规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method  规定在提交表单时所用的 HTTP 方法（默认：GET）。
name    规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate  规定浏览器不验证表单。
target  规定 action 属性中地址的目标（默认：_self）。

input

    1. 根据type类型划分
        1. text
        2. password
        3. email
        4. date

        5. radio      --> 单选
        6. checkbox   --> 多选

        7. button     --> 普通按钮，多用于使用JS代码绑定事件
        8. submit     --> 提交
        9. reset      --> 重置    

        10. file      --> 上传文件

属性说明:

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

select标签

1. select标签内部包含的是option，需要配置value属性
    默认选中：selected="selected"
2. 多选
    multiple

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

代码

label标签
定义：标签为 input 元素定义标注（标记）。
1.label 元素不会向用户呈现任何特殊效果。
2. 标签的 for 属性值应当与相关元素的 id 属性值相同

代码


  用户名

textarea多行文本

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

代码

        默认内容

总代码：

    


    
    Title




    
        用户名：
      
    
    
        密码：
            
        
    
    
        邮箱：
        
    
    出生日期：
        
    
    
        头像：
        
    
    
        隐藏的输入框：
        
    
    性别：
        男
        女
    
    
        爱好：
        篮球
        足球
        双色球
    
    城市
    
     
    
        个人简介：
        
        
    

    
    
    
    


{"name属性的值": 用户填写的内容}

注意事项：

1. 所有放在form标签中获取用户输入的标签，必须要有name属性
2. form标签有action属性和method属性
        1. action：控制往哪里提交数据
        2. method：控制用什么方式提交
        3. 上传文件需要额外配置enctype="multipart/form-data"
3. form要提交数据必须要有submit按钮

HTML

HTML

html标签格式

标签的语法：

Hello world!

标题1

标题2

标题3

标题4

标题5

标题6

列表

表格

你可能感兴趣的:(HTML)