Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

页面编码（告诉浏览器是什么编码）
```
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
```

刷新和跳转

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Refresh" Content= "5 url=https://blog.csdn.net/zhuisaozhang1292/article/category/7811344"/>
	
	<title>LOVE YOU</title>

</head>
	<body>
		
	</body>
</html>

关键词
```
< meta name="keywords" content="淮南草，hcl，jane" >
```
简单的搜索，引擎就是比对keywords来搜索的，好像是这么个意思
描述符：

description"中的content="网页描述"，是对一个网页概况的介绍，这些信息可能会出现在搜索结果中，因此需要根据网页的实际情况来设计，尽量避免与网页内容不相关的“描述”，另外，最好对每个网页有自己相应的描述(至少是同一个栏目的网页有相应的描述)，而不是整个网站都采用同样的描述内容，因为一个网站有多个网页，每个网页的内容肯定是不同的，如果采用同样的description，显然会有一些网页内容没有直接关系，这样不仅不利于搜索引擎对网页的排名，也不利于用户根据搜索结果中的信息来判断是否点击进入网站获取进一步的信息。

综合：

<!DOCTYPE html>
<!-- 类似html这种格式,标签，html标签 <html>fasdfasdf</html>
# 标签内部的属性-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="Refresh" Content="3">-->
    <!--<meta http-equiv="Refresh" Content="3;Url=https://blog.csdn.net/zhuisaozhang1292/article/details/81087621">-->
    <meta name="keywords" content="淮南草的博客"/>
    <meta name="description" content="淮南草的博客"/>

    <title>淮南草的博客</title>

</head>
<body>
    <div></div>

    <a href="https://blog.csdn.net/zhuisaozhang1292/article/details/81087621">淮南草的博客</a>
</body>
</html>

Title

网页头部信息

Link

1.css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel = "stylesheet" type="text/css" href="css/common.css">
	</head>
	<body>
	
	</body>
</html>

2.icon

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel = "shortcut icon" href="favicon.ico">
	</head>
	<body>
	
	</body>
</html>

style

在页面中写样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel = "stylesheet" type="text/css" href="css/common.css">
		<style type="text/css">
			.bb{
				background-color: red;
			}
		</style>
	</head>
	<body>
	
	</body>
</html>

Script

1.引进文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src = "http://www.googletagservices.com/tag/js/gpt.js"></script>
	
	</head>
	<body>
	
	</body>
</html>

2.写js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src = "http://www.googletagservices.com/tag/js/gpt.js">
			love you
		</script>
	
	</head>
	<body>
	
	</body>
</html>

常用标签

标签一般分为两种：块级标签和行内标签

a、span、select 等
div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
    <p>123</p>

    <h1>hcl</h1>
    <h2>hcl</h2>
    <h3>hcl</h3>
    <h4>hcl</h4>
    <h5>hcl</h5>
    <h6>hcl</h6>

    <span>ln</span>
    <span>ln</span>
    <span>ln</span>
    <span>ln</span>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <a href="https://blog.csdn.net/zhuisaozhang1292/article/details/81103543">淮南&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;&gt;草</a>
</body>
</html>

效果：

position:fixed

form表单中的action用法：

实现功能：在html文件中输入用户名密码，并通过服务端返回html内容

注意事项：

1：如果需要修改html文件一定要用软件修改，尽量不用txt修改，否则可能会出问题

2：这边例程的server端在接收到前端请求的时候，会进入响应时间3次，问题暂时没有解决，希望看到的人可以帮我查一下，或者等待我下次解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8000/index" method="POST">
        <input type="text" name="user" />
        <input type="text" name="email"/>
        <input type="password" name="pwd"/>
<!--         {'user': '用户输入的用户','email': 'xx', 'pwd': 'xx' } -->
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
    <br/>
    <form>
        <input type="text" />
        <input type="password" />
        <input type="button"  value="登录1"/>
        <input type="submit"  value="登录2"/>
    </form>
</body>
</html>

服务端：

'''
Created on 2018年7月18日

@author: hcl
'''
__author__ = "hcl"
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))
    f = open('index.html', 'r', encoding='utf-8')
    data = f.read()
    f.close()
    import time
    r = str(time.time())
    data.replace('@@@@@',r)
    client.send(bytes(data,encoding='utf-8'))
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 8000))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
if __name__ == '__main__':
    main()

在服务端的py文件同目录中放入index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 style='background-color:red;'>@@@@@<h1>
	<a href='https://blog.csdn.net/zhuisaozhang1292/article/details/81087621'>淮南草的博客</a>
	<table border='1'>
	    <tr>
	        <td>1</td>
	        <td>2</td>
	        <td>3</td>
	    </tr>
	    <tr>
	        <td>1</td>
	        <td>2</td>
	        <td>3</td>
	    </tr>
	<table>
</body>
</html>

搜索框显示默认值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query" value="jane" />
        <input type="submit" value="search" />
    </form>
</body>
</html>

HTML起步