HTML
web服务的本质
import socket
sk = socket.socket()
sk.bind(('127.0.0.1', 8008))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(1024)
conn.send(b"HTTP/1.1 200 OK
")
conn.send(b"<h1>Hello world</h1>")
conn.close()
# 浏览器发请求 -->HTTP 协议 ->服务端接收请求 -->服务端返回响应 -->服务端把HTML文件内容发给浏览器 -->浏览器渲染页面
HTML是什么
- 超文本标记语言（Hypertext Markup Language，HTML）是一种用于创建网页的标记语言
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页，对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或者.htm
HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）<head>、</head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。<title>、</title>定义了网页的标题，在浏览器标题栏显示<body>、</body>之间的文本是可见的网页主体内容
注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器设置GBK为默认编码，则需要设置为
HTML标签格式
- HTML标签是由尖括号包围的关键字，如
<html>,<div>等 - HTML标签通常是成对出现的，比如：
<div>、</div>,第一个标签是开始，第二个标签是结束。结束标签会有斜线。 - 也有一部分标签是单独呈现的，比如：
<br/>、<hr/>、<img src='1.jpg'/>等。 - 标签里面可以有若干属性，也可以不带属性。
标签的语法：
-
<标签名 属性1=“属性值1” 属性2=“属性值2”……….> 内容部分</标签名>
-
<标签名 属性1=“属性值1”属性2=“属性值2”…………/>
几个很重要的属性：
- id: 定义标签的唯一ID，HTML文档数中唯一
- class: 为html元素定义一个或多个类名（classname）(CSS样式类名)
- style: 规定元素的行内样式（CSS样式）
HTML注释及标签
<!--注释内容-->
快捷键就是 ctrl+/
<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前
<!DOCTYPE>声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令
HTML常用的标签
head内的常用标签
| 标签 | 意义 |
|---|---|
<title></title> |
定义网页标题 |
<style></style> |
定义内部样式表 |
<script></script> |
定义JS代码或引入外部JS文件 |
<link/> |
引入外部样式表文件或网站图标 |
<meta/> |
定义网页原信息 |
Meta标签
meta标签介绍：
- 元素可提供有关页面的元信息（meta-infomation）,针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部，不包含任何内容
- 提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性，不同属性的又有不同的参数值，这些不同的参数值就实现了不同的网页功能
-
http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> -
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用到。
<meta name="keywords" content="meta总结， html meta,meta 属性，meta跳转"> <meta name="description" content="Welcome to our school">
body内常用的标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--换行-->
<br>
<!--水平线-->
<hr>
# 特殊字符
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®i；
# div和span
<div>块级元素</div> 定义块级元素，要换行，并无实际意义，主要通过CSS样式赋予不同表现
<span>行内元素</span> 定义行内元素，不需要换行,同上
块级元素和行内元素的区别:
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需要另起一行，如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
注意：
关于标签嵌套：通常块级元素可以包含内联（行内）元素或某些块级元素，但内联元素不 能包含块级元素，它只能包含其他内联元素
p标签不能包含块级标签，p标签也不能包含p标签
# img标签
<img src='图片的路径' alt='图片未加载成功时的提示' title="鼠标悬浮时提示信息" width="宽" height="高（宽高两个属性只用一个会自动等比缩放）">
#超链接标签
URL:
http://www.sohu.com/stu/intro.html
http://222.123.22.221.12/stu/intro.html
URL地址由4部分组成：协议、站点地址（域名、IP地址）、页面在站点中的目录（stu）、页面名称(index.html);各部分用"/"符号隔开
<a href="http://www.baidu.com" target="_blank">点我</a>
href属性指向URL：绝对路径、相对路径和锚（href="#top" 跳到顶部）
_blank或者_self： 新窗口加载或者在当前页面加载
##列表
# 1.无序列表
<ul type="disc">
<li>第一项</li>
</ul>
#type属性:disc是实心圆点（默认值），circle是空心圆圈，square（实心方块）， none(无样式)
# 2.有序列表
<ol type="1" start="2">
<li>第一项</li>
</ol>
#type属性:1数字列表，默认值 A，a，I，i（大小写的罗马数字）
#start属性：从第几个开始
# 3.标题列表
<dl>
<dt>标题1</dt>
<dd>标题数据</dd>
</dl>
## 表格
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>账号</th>
</tr>
</thead>
<tbody>
<tr>
<tb>1</tb>
<tb>michael</tb>
<tb>1213</tb>
<tr>
</tbody>
</table>
属性：border:表格边框；cellpadding:内边距；cellspacing 外边距；width 像素百分比；rowspan:单元格竖跨多少行；colspan 单元格横跨多少行；
## form (表单)
"""
功能：
表单用于向服务器传输数据，从而实现用户与web服务器的交互
包含input系列标签
还包括textarea、select、fieldset和label标签
表单属性（常用的）:
action: 规定向何处提交表单的地址（URL）（提交页面）
method: 规定在提交表单时所用的HTTP方法（默认是GET）
enctype: 规定被提交数据的编码（默认是：url-enckded）、如果是上传文件需要将enctype="multipart/form-data"
target: 规定action属性中地址的目标（默认：_self）
表单元素:
基本概念：HTML表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
工作原理：访问浏览器时，填写必要的信息，然后按某个按钮提交，这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行出来，有错误信息会返回，并要求纠正错误。数据完整无误后，服务器反馈一个输入完成的信息
"""
"""
type属性值：
text--->单行输入文本
password--->密码输入框
date--->日期输入框
checkbox--->复选框
radio--->单选框
submit--->提交按钮
reset--->重置按钮
button--->普通按钮
hidden--->隐藏输入框
file--->文本选择框
属性说明：
name: 表单提交是的“键”；
value: 表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked: radio和checkbox默认选中的项
readonly: text和password设置只读
disabled: 所有input均适用，其实也是只读模式，加一个灰色的背景框，然后不能修改
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="">
<div>
用户名: <input type="text" name="user" value="123" hidden/>
</div>
<div>
密码: <input type="password" name="pwd"/>
</div>
<div>
性别：<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0" checked/>女
#默认是女
</div>
<div>
爱好：<input type="checkbox" name="hobbies" value="bsk" checked/>篮球 #默认是篮球选项
<input type="checkbox" name="hobbies" value="sing"/>唱歌
<input type="checkbox" name="hobbies" value="jump"/>跳舞
<input type="checkbox" name="hobbies" value="rap"/>Rap
</div>
<div>
头像：<input type="file">
</div>
<div>
<select name="city" id="city" multiple>
<option value="1" selected="selected">北京</option> #默认值 可以选择两个
<option value="2" selected="selected" disabled>上海</option> #默认值 可以选择两个 加了disabled之后就不能选择上海了
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</div>
<input type="submit" value="登入"/>
<input type="reset" value="重置"/>
<input type="button" value="我是按钮"/>
</form>
<textarea name="memo" id="memo" cols="30" rows="30">默认内容</textarea>
</body>
</html>
"""
select标签：
multiple: 布尔属性，设置后为多选，否则默认为单选
disabled: 禁用
selected: 默认选择该项
value: 定义提交时的选项值
"""
"""
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
"""
"""
textarea多行文本
属性说明：
name: 名称
rows: 行数
cols: 列数
disabled: 禁用
"""
"""
标签的总结：
块级元素：块数大多为结构性标记
<h1>一级标题</h1>....<h6>六级标题</h6>
<hr>水平分割线
<p>段落</p>
<ul>无序列表</ul>
<ol>有序列表</ol>
<dl>定义列表</dl>
<table>表格</table>
<form>表单</form>
<div>块级元素</div>
块级元素：
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认是100%
4.块级元素中可以包含块级元素和行内元素
行内元素：行内大多为描述性标记
<span>行内元素</span>
<a>连接</span>
<br>换行
<b>加粗</b>
<strong>加粗</strong>
<img>图片
<i>斜体</i>
<em>斜体</em>
<del>删除线<del>
<u>下划线</u>
<input>文本框</input>
<textarea>多行文本<textarea>
<select>下拉列表</select>
行内元素：
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能包含行内元素，不能包含块级元素
"""