HTML
HTML
Hyper Text Makeup Language
超文本标记语言
超文本：可以表示图片，视频，超链接....
标记：各种标签。图片文字，等可以表示超链接
.html后缀触发浏览器解析文本中的标签
web服务本质
import socket
sever = socket.socket()
sever.bind(('127.0.0.1',10000))
sever.listen(5)
while True:
conn,addr = sever.accept()
data = conn.recv(8096)
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
conn.send(b'<h1>Hello world!</h1>')
conn.close()
b'GET / HTTP/1.1\r\nHost: 127.0.0.1:10000\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
b'GET /favicon.ico HTTP/1.1\r\nHost: 127.0.0.1:10000\r\nConnection: keep-alive\r\nPragma: no-cache\r\nCache-Control: no-cache\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\r\nAccept: image/webp,image/apng,image/*,*/*;q=0.8\r\nReferer: http://127.0.0.1:10000/\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
web服务本质就是底层就是socket，然后加上了其他的报头
HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
文档声明头，表示使用哪个HTML版本编译，声明为 HTML5 文档
元素是 HTML 页面的根元素,lang表示用了什么语言，en.表示用了英文，HTML是最外层的标签，他表示网页内容的开始
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。（网页的基本信息）
| 标签 | 意义 |
|---|---|
| title | 定义网页的标题 |
| style | 定义内部样式 |
| script | 定义JS和引用外部的JS文件 |
| link | 引用外部的表文件或者样式 |
| meta | 定义网页原信息,针对搜索引擎和更新频度的描述和关键词,用户不可见 |
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
name
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化)。浏览器会根据你的页面描述去body找h标题标签，如果有就会把页面描述收录。
元素定义一个大标题
元素定义一个段落
注释
常用标签
双闭合标签
<h1-6>
大标题
<title>
文档标题
<p>
段落，一般用来放文字，他会按照文字的格式显示文字，每个p标签之间会有空行
<strong>&<em>
可以在
等文本标签中嵌套使用，分别有加粗和斜体的功能
<ul>&<li>
type属性
disc 实心圆点
circle 空心圆圈
square 实心方块
none 无样式
无序标签
<ol>&<li>
type属性
1 数字列表，默认
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
start 数字 从哪里开始显示排序数字
有序列表，有数字排序
<dl>&<dt>&<dd>
定义列表 dd描述dt
<table>&<tr>&<th>&<td>
表格标签
<caption></caption>表格标题
<table border="1" cellspacing="0">
<tr>
<th>数量</th>
<th>价格</th>
</tr>
<tr>
<td>电视</td>
<td>10000</td>
</tr>
</table>
border：表格边框
cellpadding：内边距
cellspacing：外边距
width：像素 百分比
cosplan：单元格横向合并
rowspan：单元格纵向合并
<a>
锚点
href #id
超链接
<a href="http://www.baidu.com" title="跳转">百度一下</a>
target属性 _blank在新的界面打开 _self（默认）在当前界面打开
<form>
数据提交
action 服务器地址
method 提交方式
enctype=“multipart/form=data”提交文件要有
<select>&<option>
下拉列表
默认选中 selected
多选属性 multiple
<textarea>
文本域
rows 列文字
cols 行文字
<lable>
可以和input关联 for
<div>
容器
单闭合标签
<br>
换行标签（浏览器中把换行和多个空格表示一个空格）空白折叠
文本标签自带换行
<hr>
水平分割线
<img>
alt 图片加载失败的时候显示（百度爬虫也会爬这个，来判别图片是啥）
title 鼠标悬浮显示文字
<input>
input属性 type
text 文本普通
password 文本加密
submit 提交
radio 单选框
checkbox 复选框 checked默认选中
reset重置按钮
button 普通按钮
placeholder 文本框默认值
value 默认值
特殊符号
| 表示内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权 © | © |
| 注册 ® | ® |
标签的总结：
块级元素：块级大多为结构性标记
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
行内元素：行内大多为描述性标记
<span>...</span>
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
·块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
·行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
