HTML
HTML
一.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(1024)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') #响应头
conn.send(b'<h1>hello world!</h1>') #响应体
conn.close()
浏览器发送请求——> HTTP协议 ——>服务端接收请求———>服务器返回响应——>服务器把HTML文件内容发送给浏览器——>浏览器渲染页面
二.HTML
<1.HTML是什么>
HTML是超文本标记语言(使用标签)，用于网页创建，但它并不是一种编程语言
本质上是浏览器可以识别的语言，以HTML规则为基础，我们编写语句，浏览器渲染网页。但是对于不同的浏览器会有不同的解释(兼容性的问题)
网页的扩展名：html，htm
<2.HTML文档的结构>
<!DOCTYPE html> #声明为HTML5文档
<html lang='zh-cn'> #文件的开始标记，zh-CN中文标记，规范用法为lang=zh-cmn-Hans 简体中文 lang=zh-cmn-Hant 繁体中文
<head> #HTML的开头部分
<meta charset='utf-8'> #声明编码(中文网页不声明编码会乱码)
<title>css样式优先级</title> #定义网页标题
</head>
<body> #body中的文本是可见的网页主体内容
</body>
</html> #文档结束的标记
<3.HTML标签格式>
1.HTML是由尖括号包围的关键字，通常成对出现，第一个标签代表开始，有斜线的第二个标签代表结束 如<html></html>,但是也有特例，<br/>,<hr/>
2.标签里可以有若干的属性，也可以没有
<标签名 属性1=‘属性值1’ 属性2=‘属性值2’...>内容部分</标签名>
3.重要的属性
id：定义标签的唯一ID，HTML文档树中唯一
class:为html元素定义一个或多个类名(classname)(CSS样式类名)
style:规定元素的行内样式(CSS样式)
<4.注释>
<!--内容-->
<5.文档声明>
<！DOCTYPE> 声明必须是HTML文档第一行，位于<html>标签之前，用来声明web浏览器页面使用哪版本的HTML进行编写，而不是声明HTML标签
三.HTML常用标签
1.head内的常用标签
1.<title></title> 定义网页标题
2.<style></style> 定义内部的样式
3.<script></script>定义JS代码或引入外部JS文件
4.<link/>引入外部样式标文件或网站图标
5.<meta/>定义网页原信息
<!DOCTYPE html>
<html lang="en"> #声明显示语言为为English(不代表只能显示英语)
<head>
<meta charset='utf-8'> #<meta http-equiv=‘content-type’ charset='utf-8'>
<title>我的标题</title>
<style>
h1 {color:red;} #定义内部的h1标题皆为red颜色
</style>
<script> alert('hello baby~')</script> #打开网页的时候弹窗显示
<script src="js文件"></script> #打开的时候引入js文件
<link rel="stylesheet" href="css文件"> #rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用，而引用的是href对应的外部css文件。（比如css中存放设置标题颜色的语句）
</head>
<body>
<h1>cn DotA best DotA</h1>
</body>
</html>
注：
1.Mrta标签
1.<meta>标签可以提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
2.<meta>位于文档的头部，不包含任何内容
3.<meta>提供的信息是用户不可见的
2.Meta标签的组成
共有两个属性
1.http-equiv属性
相当于http的文件头作用，可以向浏览器返回一些有用的信息，以帮助正确地显示网页内容，与之相对应的属性值为content，content中的内容其实就是各个参数的变量值
<meta http-equiv='content-Type' charset='utf-8'>
<!--指定文档的编码类型-->
<meta http-equiv='refresh' content='2;URL=https://www.baidu.com'>
<!-- 2s后跳转到对应的网址-->
<meta http-equiv='x-ua-compatible' content='IE=edge'>
<!--告诉IE以最高模式渲染文件-->
2.name属性
主要用来描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息。
<meta name='keywords' content='meta总结，html meta，meta属性'>
<!--就像百度搜索的时候，是以content中的值作为搜索对应网站的依据-->
<meta name='description' content='网站描述性的话'>
<!--就像搜索得到的结果中，网站下面具有描述性的话语-->
2.body内的常用标签
1.<b>加粗</b>
2.<i>斜体</i>
3.<u>下划线</u>
4.<s>删除线</s>
5.<p> #分段
段落标签
</p>
6.<h1>标题1</h1> #同理一直到<6>标题</6>
7.<br> 换行
8.<hr> 水平线
特殊符号
空格
> >
& &
￥ ¥
版权 ©
注册 ®
< ⁢
三.标签
1.什么是URL
URL是统一资源定位器(Uniform Resourse Locator)的缩写，也被称为网页地址，是因特网上标准的资源地址
URL举例
http://www.sohu.com/stu/intro.html
URL地址由四部分组成
1.第一部分：为协议：http：//、ftp://等
2.第二部分：为站点地址，可以是ip地址或域名
3.第三部分：为页面在站点中的目录如：stu
4.第四部分：为页面名称，例如 intro.html
各个部分之间由‘/’符号隔开
2.a标签
超链接标签
所谓的超链接是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页上的不同位置，还可以是以这个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
<a href='http://www.baidu.com' target='_blank'>点我</a>
href属性指定目标地址，改地址可以有几种类型：
1.绝对URL—指向另一个站点（如上）
2.相对URL—指向当前站点中确切的路径(href='index.htm)
3.锚URL—指向页面中的锚(href='#top')
<a href="#top">top</a> #移动到页面顶部
target
_blank表示在新标签页中打开目标文件
_self表示当前标签中打开目标网页
所有的html标签都应该有一个id属性，用来唯一标识当前标签，为后续的DOM操作提供基础
也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
3.img标签
<img src="图片地址" alt=""> #可是相对或绝对
<img src="图片地址" alt="xxx"> #alt：图片加载失败后出现的提示信息
<img src="图片地址" alt="XXX" title="yyy" width="400"> #title：鼠标放在图片上后出现的话，width调整图片大小（图片长宽还需调节一个，另一个等比例缩放）（height='高'也可以调节）
src图片路径：既可以是网络上的图片地址也可以是本地的图片地址
4.div标签和span标签
div标签：用来定义一个块级元素，并无实际的意义，主要通过CSS样式为其赋予不同的表现
span标签：是用来定义行内元素，并无实际意义，主要通过CSS样式为其赋予不同的表现
区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需要灵气一行，如果单独在网页中插入这两个元素，不会对页面产生任何的影响，这两个元素是专门定义CSS样式而生的
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，他只能包含其他内联元素。
P标签不能包含块级标签，p标签也不能包含p标签
P标签不能包含块级标签，p标签也不能包含p标签
P标签不能包含块级标签，p标签也不能包含p标签
5.列表标签
1.ul：无序列表
<ul type='disc'>
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
disc （实心圆点，默认值）
circle （空心圆圈）
square （实心方块）
none （无样式）
2.有序列表
<ol type='1' start='2'>
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
6.表格
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其他的表格等内容
表格最重要的目的是显示表格类数据，表格类数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构
<table>
<thrad>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thrad>
<tbody>
<tr>
<td>1</td>
<td>xxk</td>
<td>ctrl</td>
</tr>
<tr>
<td>2</td>
<td>mjg</td>
<td>kmj</td>
</tr>
</tbody>
</table>
属性
tr 一个tr表示一行
border 表格边框
cellpadding 内边距（调整单元格与外边框之间的距离）
cellspacing 外边距（调整文本和单元格之间的距离）
width 像素 百分比(最好通过css来设置长宽)
rowspan 单元格竖跨多上行（垂直方向合并）
colspan 单元格横跨多少列(即合并单元格)（水平方向合并）
7.form表单
功能：获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作，那么可以直接写一个<button>button按钮</button>
input 通过控制type的类型从而实现不同的获取用户输入的标签样式
text 单行输入文本 <input type="text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="hidden" />
属性说明
name：表单提价时的键，注意和id的区别
value：表单提交时对应项的值
type='button','reset','submit'时，为按钮上显示的文本内容
type='text','password','hidden'时，为输入框的初始值
type='checkbox','radio','file',为输入相关联的值
checked:radio和checkbox默选被选中的项
readonly:text和password设置只读
disableed：所有input均适用
8.select标签
<form action='' method='post'>
<select nae='city' id='city'>
<option value='1'>北京</option>
<option selected='selected' value='2'>上海</option>
<option value='3'>广州</option>
<option value='4'>深圳</option>
</select>
</form>
属性说明：
multiple:布尔属性，设置后多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
9.label标签
定义<label>标签元素定义标注（标记）。
说明
1.label元素不会向用户呈现任何特殊效果
2.<label>标签的for属性应当与相关元素的id属性值相同
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
10.textarea多行文本
<textarea name='memo' id='memo' cols = '30' row = '10'>
默认内容
</textarea>
属性说明
name:名称
row：行数
cols：列数
disabled：禁用
GET请求与POST请求
get请求：获取想要的数据
post请求：提交数据
