前端01 /HTML简单简绍

前端01 /HTML简单简绍

1.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"<h1>Hello world!</h1>")

    conn.close()

2.浏览器的工作流程

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

3.HTML是什么

1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

3.网页文件的扩展名：.html或.htm

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

4.web服务本质

import socket

server = socket.socket()

server.bind(('192.168.16.160',8001))

server.listen()

while 1:

    conn,addr = server.accept()

    from_browers_msg = conn.recv(1024)

    print('from_browers_msg',from_browers_msg.decode('utf-8'))

    send_msg = b'HTTP/

    1.1 200 ok\r\n\r\n'

    # data = b'<h1>daguangtou</h1>'

    conn.send(send_msg)

    # conn.send(data)

    with open('test01.html','r',encoding='utf-8') as f:

        data = f.read()

    import time

    data = data.replace('{{ name }}',str(time.time()))

    conn.send(data.encode('utf-8'))

    conn.close()

5.HTML文档结构

<!DOCTYPE html>

<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head>

  <meta charset="UTF-8">

  <title>css样式优先级</title>

</head>

<body> 

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>  #网页的标题

</head>

<body>

<h1>24nb</h1>

{{ name }}

</body>

</html>

<!DOCTYPE html>声明为HTML5文档。

<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

<meta http-equiv="X-UA-Compatible" content=" ie=edge”>  #告诉ie浏览器以最高版本来渲染我

”

<meta name= "viewport” content= "python,go"> #搜索的关键字

<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。

<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）

<body>、</body>之间的文本是可见的网页主体内容。

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

pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。

6.HTML注释

<!--注释内容-->  #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来

6.标签语法

　标签的语法：

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

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

7.HTML常用标签

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

body基本标签

不加标签的纯文字也是可以在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> #就是单独个一个水平线

每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

巴特西

前端01 /HTML简单简绍

前端01 /HTML简单简绍

1.web服务本质

2.浏览器的工作流程

3.HTML是什么

4.web服务本质

5.HTML文档结构

6.HTML注释

6.标签语法

7.HTML常用标签

最新文章

热门文章